/* Nora — light blue, airy, gradients from the logo (#1E5FD6 → #22C3EE). */
:root{
  color-scheme:light;
  --bg:#F3F7FC; --surface:#FFFFFF; --surface-2:#EEF4FB; --surface-3:#E2EBF6;
  --ink:#0E1B2E; --ink-2:#4A5B73; --ink-3:#7B8BA3;
  --line:#E7EDF5; --line-2:#D5DFEB;
  --accent:#1E6BD8; --accent-2:#22B8EA; --accent-ink:#FFFFFF; --accent-soft:#E6F1FD;
  --grad:linear-gradient(135deg, #2F6BD6 0%, #5A7BEA 100%);
  --grad-soft:linear-gradient(120deg, rgba(45,105,207,.045), rgba(90,170,230,.06));
  --grad-pastel:linear-gradient(135deg, #EEF4FD 0%, #EAF6FC 100%);
  --btn-sheen:linear-gradient(180deg, #FFFFFF 0%, #F1F5FB 100%);
  --btn-sheen-hover:linear-gradient(180deg, #FFFFFF 0%, #EAF1FB 100%);
  --btn-p-sheen:linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 100%);
  --chart-a:#1E6BD8; --chart-b:#B7760C;
  --good:#1C9468; --good-soft:#E2F6EE;
  --warn:#B7760C; --warn-soft:#FDF2DD;
  --crit:#D2453F; --crit-soft:#FDE8E7;
  --violet:#6555DD; --violet-soft:#ECEAFD;
  --shadow:0 1px 2px rgba(15,40,90,.035), 0 10px 30px -22px rgba(15,40,90,.2);
  --shadow-hover:0 2px 6px rgba(15,40,90,.04), 0 16px 38px -22px rgba(15,50,120,.26);
  --shadow-lg:0 24px 70px -24px rgba(15,40,90,.45);
  --glow:0 0 0 4px rgba(70,140,230,.12);
  --r:16px; --r-sm:11px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0A1220; --surface:#101A2C; --surface-2:#16233A; --surface-3:#1D2D48;
    --ink:#E6EEF9; --ink-2:#A6B5CC; --ink-3:#7888A2;
    --line:#1F2E47; --line-2:#2A3D5E;
    --accent:#4FA3FF; --accent-2:#3CD3F6; --accent-ink:#06121F; --accent-soft:#12294A;
    --grad:linear-gradient(135deg, #3A78E0 0%, #6284F2 100%);
    --grad-soft:linear-gradient(120deg, rgba(59,130,246,.08), rgba(90,170,240,.07));
    --grad-pastel:linear-gradient(135deg, #15284A 0%, #133247 100%);
    --btn-sheen:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 100%);
    --btn-sheen-hover:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 100%);
    --btn-p-sheen:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
    --chart-a:#3A86E8; --chart-b:#B27C1B;
    --good:#4ED19B; --good-soft:#0F2A22;
    --warn:#F0B54A; --warn-soft:#2D2412;
    --crit:#FF7A73; --crit-soft:#331B1D;
    --violet:#A99CFF; --violet-soft:#211E43;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
    --shadow-hover:0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.8);
    --shadow-lg:0 24px 70px -20px rgba(0,0,0,.85);
    --glow:0 0 0 4px rgba(79,163,255,.22);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1220; --surface:#101A2C; --surface-2:#16233A; --surface-3:#1D2D48;
  --ink:#E6EEF9; --ink-2:#A6B5CC; --ink-3:#7888A2;
  --line:#1F2E47; --line-2:#2A3D5E;
  --accent:#4FA3FF; --accent-2:#3CD3F6; --accent-ink:#06121F; --accent-soft:#12294A;
  --grad:linear-gradient(135deg, #3A78E0 0%, #6284F2 100%);
  --grad-soft:linear-gradient(120deg, rgba(59,130,246,.08), rgba(90,170,240,.07));
  --grad-pastel:linear-gradient(135deg, #15284A 0%, #133247 100%);
  --btn-sheen:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 100%);
  --btn-sheen-hover:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 100%);
  --btn-p-sheen:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
  --chart-a:#3A86E8; --chart-b:#B27C1B;
  --good:#4ED19B; --good-soft:#0F2A22;
  --warn:#F0B54A; --warn-soft:#2D2412;
  --crit:#FF7A73; --crit-soft:#331B1D;
  --violet:#A99CFF; --violet-soft:#211E43;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
  --shadow-hover:0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-lg:0 24px 70px -20px rgba(0,0,0,.85);
  --glow:0 0 0 4px rgba(79,163,255,.22);
}

*{box-sizing:border-box}
html{scroll-padding-top:120px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
[hidden]{display:none !important}
h1,h2,h3{font-family:"Plus Jakarta Sans", "Plus Jakarta Sans", system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.015em}
button{font:inherit; color:inherit}
input,select,textarea{font:inherit; color:inherit}
img{max-width:100%}
a{color:var(--accent)}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

/* ---------- shell ---------- */
.topbar{
  position:sticky; top:0; z-index:30; padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{max-width:1180px; margin:0 auto; padding:4px 16px 0; display:flex; align-items:flex-end; gap:12px}
.topright{display:flex; align-items:center; gap:8px; padding-bottom:7px; flex:none}

.brandrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mark{
  width:26px; height:26px; border-radius:7px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:14px; flex:none;
}
.mark-sm{width:22px; height:22px; font-size:12px; border-radius:6px}
.brand{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:16px; letter-spacing:-.02em; line-height:1.2}
.brand small{display:block; font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.spacer{flex:1 1 auto}

.tabs{display:flex; gap:2px; margin-top:0; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tab{
  appearance:none; border:0; background:transparent; cursor:pointer; white-space:nowrap;
  padding:9px 12px 11px; font-size:13.5px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; display:flex; align-items:center; gap:7px;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab .dot{width:6px; height:6px; border-radius:50%; background:var(--line-2)}
.tab[aria-selected="true"] .dot{background:var(--accent)}
.tabcount{background:var(--crit); color:#fff; border-radius:999px; font-size:10.5px; padding:0 6px; line-height:16px; font-family:"IBM Plex Mono",monospace}

main{max-width:1180px; margin:0 auto; padding:18px 16px 56px}
.screen{display:flex; flex-direction:column; gap:16px}
.pagehead h1{font-size:23px}
.pagehead p{margin:5px 0 0; color:var(--ink-2); font-size:13.5px; max-width:70ch}
.stack{display:flex; flex-direction:column; gap:10px}
.inline{display:inline-flex; align-items:center; gap:6px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0}
.card-h{padding:13px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card-h h2{font-size:14.5px}
.card-b{padding:14px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.tiny{font-size:12.5px}
.empty{font-size:13px; color:var(--ink-3); padding:6px 0}

.btn{
  appearance:none; border:1px solid var(--line-2); background:var(--surface); border-radius:8px;
  padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn:hover{border-color:var(--ink-3)}
.btn-p{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-p:hover{filter:brightness(1.06); border-color:var(--accent)}
.btn-danger{color:var(--crit); border-color:color-mix(in srgb, var(--crit) 45%, var(--line))}
.btn-ghost{border-color:transparent; background:transparent}
.btn-sm{padding:5px 9px; font-size:12px; border-radius:7px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.input{background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font-size:13.5px; width:100%; min-width:0}
textarea.input{resize:vertical; line-height:1.45}
.input-sm{padding:4px 6px; font-size:12px; width:auto; border-radius:7px}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2.5px 9px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pill-accent{background:var(--accent-soft); color:var(--accent)}
.pill-good{background:var(--good-soft); color:var(--good)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-crit{background:var(--crit-soft); color:var(--crit)}
.pill-quiet{background:var(--surface-2); color:var(--ink-2)}
.pill-violet{background:var(--violet-soft); color:var(--violet)}

.segmented{display:flex; gap:4px; flex-wrap:wrap; background:var(--surface-2); padding:4px; border-radius:10px; width:fit-content; max-width:100%}
.segmented button{appearance:none; border:0; background:transparent; padding:6px 11px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer}
.segmented button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

/* ---------- ingest ---------- */
.dropzone{
  border:1.5px dashed var(--line-2); border-radius:var(--r); padding:22px 14px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; background:var(--surface); transition:background .15s, border-color .15s;
}
.dropzone b{font-size:14.5px}
.dropzone span{font-size:12.5px; color:var(--ink-2)}
.dropzone:hover,.dropzone.over{border-color:var(--accent); background:var(--accent-soft)}
.sources{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:9px}
.src{
  text-align:left; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r);
  padding:11px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; min-height:76px;
}
.src:hover{border-color:var(--accent); background:var(--accent-soft)}
.src .ico{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); letter-spacing:.06em}
.src b{font-size:13.5px}
.src span{font-size:12px; color:var(--ink-2)}
.linkrow{display:flex; gap:8px}
.linkrow input{flex:1 1 auto; min-width:0; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font-size:13px}
details.paste summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2)}

.qitem{border:1px solid var(--line); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:9px; background:var(--surface)}
.qitem.filed{background:color-mix(in srgb, var(--surface) 70%, var(--bg))}

.steps{display:flex; gap:6px 12px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3)}
.step{display:flex; align-items:center; gap:5px}
.step.done{color:var(--good)}
.step.active{color:var(--accent); font-weight:600}
.bar{height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); width:0; transition:width .4s ease}

.kv{display:flex; gap:8px; font-size:12.5px; align-items:baseline; flex-wrap:wrap}
.kv > b{font-weight:600; color:var(--ink-3); flex:none; width:88px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-family:"IBM Plex Mono",monospace}
.kv > .v{flex:1 1 200px; min-width:0}
.kv input.input,.kv select.input{padding:5px 8px; font-size:13px}
.conf{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.confbar{width:64px; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.confbar i{display:block; height:100%; background:var(--good)}
.actions{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.actions select{background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:5px 7px; font-size:12px}
.excerpt{font-size:12.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; max-height:120px; overflow:auto; white-space:pre-wrap}
.alert{border-radius:8px; padding:9px 11px; font-size:12.5px; display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap}
.alert-warn{background:var(--warn-soft); color:var(--warn)}
.alert-crit{background:var(--crit-soft); color:var(--crit)}
.alert-info{background:var(--accent-soft); color:var(--accent)}
.alert b{font-weight:700}

/* ---------- stats / lists ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; text-align:left}
button.stat{cursor:pointer; font:inherit}
button.stat:hover{border-color:var(--line-2)}
.stat b{display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:22px; font-variant-numeric:tabular-nums; line-height:1.25}
.stat span{font-size:11.5px; color:var(--ink-2)}
.stat.good b{color:var(--good)} .stat.warn b{color:var(--warn)} .stat.crit b{color:var(--crit)}
.filters{display:grid; grid-template-columns:1fr auto auto; gap:8px; margin-bottom:8px}
@media (max-width:560px){ .filters{grid-template-columns:1fr 1fr} .filters input{grid-column:1 / -1} }
.doclist{display:flex; flex-direction:column}
.doc{display:flex; gap:10px; align-items:flex-start; padding:10px 6px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:6px; text-align:left; background:transparent; border-left:0; border-right:0; border-top:0; width:100%}
.doc:hover{background:var(--surface-2)}
.doc:last-child{border-bottom:0}
.doc .t{font-weight:600; font-size:13.5px}
.doc .s{font-size:12px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; margin-top:2px}
.doc .pills{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; flex:none}
.askbox{display:flex; flex-direction:column; gap:9px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{background:var(--surface-2); border:1px solid transparent; border-radius:999px; padding:5px 10px; font-size:12px; cursor:pointer; text-align:left}
.chip:hover{border-color:var(--line-2)}
.chip.static{cursor:default}

.why{font-size:12px; color:var(--ink-2); margin-top:3px}
.note{border-left:2px solid var(--accent); padding:8px 0 8px 11px; font-size:13px; color:var(--ink-2)}
.note.warn{border-left-color:var(--warn)}
.note.crit{border-left-color:var(--crit)}

.auditlist{display:flex; flex-direction:column; gap:7px; max-height:280px; overflow:auto}
.audit{font-size:12px; color:var(--ink-2); display:flex; gap:8px}
.audit time{font-family:"IBM Plex Mono",monospace; color:var(--ink-3); flex:none}

/* ---------- dashboard ---------- */
.split{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:820px){ .split{grid-template-columns:1.15fr .85fr} }
.brainwrap{padding:6px 8px 0}
#brain{width:100%; height:auto; display:block; max-height:420px}
#brain .link{stroke:var(--line-2); stroke-width:1}
#brain .link.lit{stroke:var(--accent); stroke-width:1.6; animation:litfade 2.4s ease-out forwards}
@keyframes litfade{0%{stroke-opacity:1} 100%{stroke-opacity:.15}}
#brain .hub{fill:var(--accent)}
#brain .hubring{fill:none; stroke:var(--accent); stroke-opacity:.35; transform-origin:320px 230px; animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1); stroke-opacity:.35} 50%{transform:scale(1.18); stroke-opacity:.05}}
#brain .cat circle{fill:var(--surface); stroke:var(--accent); stroke-width:1.5}
#brain .cat text{fill:var(--ink); font:600 11.5px "Plus Jakarta Sans",sans-serif; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
#brain .cat text.sub{fill:var(--ink-3); font:400 10px "IBM Plex Mono",monospace}
#brain .docdot{stroke:var(--surface); stroke-width:1; cursor:pointer}
#brain .docdot.fresh{fill:var(--good)} #brain .docdot.aging{fill:var(--warn)} #brain .docdot.stale{fill:var(--crit)}
#brain .docdot.hot{stroke:var(--ink); stroke-width:1.5}
#brain .docdot.pulse{animation:pulse 1.2s ease-out 2}
@keyframes pulse{0%{r:9} 100%{r:5}}
#brain .hubtext{fill:var(--accent-ink); font:700 12px "Plus Jakarta Sans",sans-serif}
.legend{display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--ink-2); padding-top:4px}
.legend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:0}
.livedot{width:8px; height:8px; border-radius:50%; background:var(--good); animation:blinkdot 1.6s infinite}
@keyframes blinkdot{0%,100%{opacity:1} 50%{opacity:.25}}
.machine{display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.machine div{display:flex; gap:8px}
.machine b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--ink-3); width:92px; flex:none; font-size:11.5px}
.feed{display:flex; flex-direction:column}
.fitem{display:flex; gap:9px; padding:8px 14px; border-bottom:1px solid var(--line); font-size:12.5px; align-items:baseline}
.fitem:last-child{border-bottom:0}
.fitem time{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); flex:none; width:44px}
.fitem .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; flex:none; width:62px}
.fitem.new{animation:slidein .5s ease-out}
@keyframes slidein{from{background:var(--accent-soft)} to{background:transparent}}
.insights{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px}
.insight{border:1px solid var(--line); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:7px; background:var(--surface)}
.insight h3{font-size:13.5px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:600; letter-spacing:0}
.insight p{margin:0; font-size:12.5px; color:var(--ink-2)}
.insight .actions{margin-top:auto}
.rowlist{display:flex; flex-direction:column}
.row{display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.row:last-child{border-bottom:0}
.row .grow{flex:1 1 auto; min-width:0}
.meter{height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; width:80px; flex:none}
.meter i{display:block; height:100%; background:var(--accent)}

/* ---------- chat ---------- */
.scope{display:flex; gap:7px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--ink-2)}
.thread{display:flex; flex-direction:column; gap:12px; padding:14px; height:min(58vh, 540px); overflow-y:auto}
.msg{display:flex; flex-direction:column; gap:6px; max-width:min(92%, 660px)}
.msg.me{align-self:flex-end; align-items:flex-end}
.bubble{background:var(--surface-2); border-radius:12px; padding:10px 12px; font-size:14px; overflow-wrap:anywhere}
.bubble p{margin:0} .bubble p + p{margin-top:8px}
.bubble ul{margin:6px 0 0; padding-left:18px}
.msg.me .bubble{background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px}
.msg.ai .bubble{border-bottom-left-radius:4px; border:1px solid var(--line)}
.msg.sys .bubble{background:var(--warn-soft); color:var(--warn); border:0}

.cites{display:flex; flex-direction:column; gap:4px; font-size:12px}
.cite{display:flex; gap:7px; align-items:baseline; color:var(--ink-2); background:none; border:0; padding:0; cursor:pointer; text-align:left}
.cite:hover span{text-decoration:underline}
.cite b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--accent); font-size:11.5px; flex:none}
.escbox{border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background:var(--warn-soft); border-radius:10px; padding:10px 11px; display:flex; flex-direction:column; gap:7px; font-size:13px}
.escbox .h{font-weight:700; color:var(--warn)}
.escbox pre{margin:0; white-space:pre-wrap; font:12px/1.45 "IBM Plex Mono",monospace; background:var(--surface); color:var(--ink-2); border-radius:6px; padding:8px; max-height:180px; overflow:auto}
.composer{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); align-items:flex-end}
.composer textarea{flex:1 1 auto; min-width:0; background:var(--surface); border:1px solid var(--line-2); border-radius:9px; padding:9px 10px; font-size:14px; line-height:1.4; resize:none; height:40px; min-height:40px; max-height:140px; overflow-y:hidden}
.micbtn{width:40px; height:40px; padding:0; display:grid; place-items:center; flex:none; border-radius:50%}
.micdot{width:12px; height:12px; border-radius:50%; background:var(--crit); display:block; opacity:.8}
.micbtn.on{background:var(--crit-soft); border-color:var(--crit)}
.micbtn.on .micdot{animation:blinkdot .9s infinite; opacity:1}
.voicebar{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:0 14px 12px; color:var(--ink-2)}
.typing i{display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:var(--ink-3); animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* ---------- studio ---------- */
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.wide{grid-column:1 / -1}
.field label,.field .lbl{font-size:11.5px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.field select,.field input,.field textarea{background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:8px 9px; font-size:13.5px; width:100%}
.module{border:1px solid var(--line); border-radius:var(--r); padding:12px; background:var(--surface); display:flex; flex-direction:column; gap:7px}
.module h3{font-size:14px}
.module ul,.module ol{margin:0; padding-left:18px; font-size:13px; color:var(--ink-2); display:flex; flex-direction:column; gap:3px}
.quiz{background:var(--surface-2); border-radius:8px; padding:11px; font-size:13px; display:flex; flex-direction:column; gap:10px}

.spec{white-space:pre-wrap; font:12.5px/1.5 "IBM Plex Mono",monospace; background:var(--surface-2); border-radius:8px; padding:11px; max-height:320px; overflow:auto; margin:0}

.doccontent{font-size:13.5px; line-height:1.6}
.doccontent h3{font-size:14.5px; margin:14px 0 4px}
.doccontent p{margin:0 0 8px}
.doccontent ul,.doccontent ol{margin:0 0 8px; padding-left:20px}

/* slides */
.deck{display:flex; flex-direction:column; gap:10px}
.slide{
  aspect-ratio:16/9; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,4.5%,44px); display:flex; flex-direction:column; gap:clamp(8px,2%,18px); overflow:hidden; position:relative;
}
.slide h2{font-size:clamp(17px,3.2vw,34px); line-height:1.12}
.slide ul{margin:0; padding-left:1.1em; font-size:clamp(12px,1.7vw,19px); display:flex; flex-direction:column; gap:.45em; color:var(--ink-2)}
.slide .kicker{font-family:"IBM Plex Mono",monospace; font-size:clamp(9px,1.1vw,12px); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.slide .foot{position:absolute; left:clamp(16px,4.5%,44px); right:clamp(16px,4.5%,44px); bottom:clamp(10px,3%,24px); display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:clamp(8px,1vw,11px); color:var(--ink-3)}
.slide.title{background:var(--accent); color:var(--accent-ink); justify-content:center}
.slide.title .kicker,.slide.title .foot{color:color-mix(in srgb, var(--accent-ink) 70%, transparent)}
.slide.title p{font-size:clamp(12px,1.8vw,20px); margin:0; opacity:.85}
.slide .bignums{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px}
.slide .bignums div{border-top:2px solid var(--accent); padding-top:6px}
.slide .bignums b{display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(18px,3vw,36px)}
.slide .bignums span{font-size:clamp(10px,1.3vw,14px); color:var(--ink-2)}
.decknav{display:flex; gap:8px; align-items:center}

/* ---------- admin ---------- */
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th{text-align:left; font:500 11px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:6px 8px; border-bottom:1px solid var(--line)}
.table td{padding:8px; border-bottom:1px solid var(--line); vertical-align:top}
.table tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
.checkgrid{display:flex; gap:5px 12px; flex-wrap:wrap}
.checkgrid label{display:inline-flex; gap:5px; align-items:center; font-size:12.5px; white-space:nowrap}
.ruleitem{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line)}
.ruleitem:last-child{border-bottom:0}
.ruleitem .grow{flex:1 1 auto; font-size:13.5px}
.toggle{appearance:none; width:34px; height:20px; border-radius:999px; background:var(--line-2); position:relative; cursor:pointer; flex:none; transition:background .15s; margin:0}
.toggle::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s}
.toggle:checked{background:var(--accent)}
.toggle:checked::after{left:16px}
.esc{border:1px solid var(--line); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px}
.esc pre{margin:0; white-space:pre-wrap; font:12px/1.45 "IBM Plex Mono",monospace; background:var(--surface-2); border-radius:6px; padding:8px; max-height:220px; overflow:auto}

/* ---------- drawer / toast ---------- */
.drawer-bg{position:fixed; inset:0; background:rgba(10,14,12,.4); z-index:50; animation:fade .15s}
@keyframes fade{from{opacity:0}}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(760px, 100%); background:var(--bg); z-index:51;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; animation:slide .2s ease-out;
  padding-top:env(safe-area-inset-top,0px);
}
@keyframes slide{from{transform:translateX(30px); opacity:0}}
.drawer-h{display:flex; gap:10px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface)}
.drawer-h h2{font-size:16px}
.drawer-b{padding:16px; overflow-y:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:12px}
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  background:var(--ink); color:var(--bg); padding:10px 15px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); z-index:80; max-width:calc(100% - 32px); text-align:center;
}
footer{max-width:1180px; margin:0 auto; padding:0 16px 40px; color:var(--ink-3); font-size:12px}

@media print{
  .topbar,footer,.drawer-bg,.drawer-h,.toast{display:none !important}
  .drawer{position:static; width:auto; box-shadow:none}
  body.printing main{display:none}
}

/* ---------- knowledge map: customer KB ---------- */
#brain .hubsub{fill:var(--accent-ink); font:500 8.5px "IBM Plex Mono",monospace; letter-spacing:.06em; opacity:.85}

#brain .custring{fill:none; stroke:var(--violet); stroke-width:1.6}

#brain.showcust .docdot:not(.incust){opacity:.35}

/* hub = view switch; a hover-like pulse every 4 s shows it is clickable */
#brain .hubbtn{cursor:pointer}
#brain .hubbtn:focus{outline:none}
#brain .hubbtn .hub{transform-box:fill-box; transform-origin:center; animation:hubhint 4s ease-in-out infinite; transition:filter .15s}
#brain .hubbtn .hubring{transform-box:fill-box; transform-origin:center}
#brain .hubbtn:hover .hub,#brain .hubbtn:focus-visible .hub{animation:none; transform:scale(1.1); filter:brightness(1.08)}
#brain .hubbtn:focus-visible .hub{stroke:var(--ink); stroke-width:2.5}
@keyframes hubhint{0%,76%,100%{transform:scale(1)} 84%{transform:scale(1.14)} 90%{transform:scale(1.05)} 94%{transform:scale(1.1)}}
#brain .hubhint{fill:var(--accent); font:600 10.5px "IBM Plex Mono",monospace; letter-spacing:.03em; opacity:0; pointer-events:none;
  paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; animation:hinttext 4s ease-in-out infinite}
#brain .hubbtn:hover .hubhint,#brain .hubbtn:focus-visible .hubhint{animation:none; opacity:1}
@keyframes hinttext{0%,72%,100%{opacity:0} 80%,94%{opacity:1}}
#brain .hubbtn.cust .hub{fill:var(--violet)}
#brain .hubbtn.cust .hubring{stroke:var(--violet)}
#brain .hubbtn.cust .hubhint{fill:var(--violet)}
#brain .link.cust{stroke:color-mix(in srgb, var(--violet) 45%, var(--line-2))}
#brain .cat.cust circle{stroke:var(--violet)}
#brain .otherhub{cursor:pointer}
#brain .otherhub:focus{outline:none}
#brain .otherhub.internal circle{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.8}
#brain .otherhub.internal text{fill:var(--ink); font:600 11.5px "Plus Jakarta Sans",sans-serif; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
#brain .otherhub.internal text.count{fill:var(--accent); stroke:none; font-weight:700}
#brain .otherhub.internal text.sub{fill:var(--ink-3); font:400 10px "IBM Plex Mono",monospace}
#brain .otherhub.internal:hover circle,#brain .otherhub.internal:focus circle{stroke-width:3}
#brain .link.intline{stroke:var(--accent); stroke-dasharray:4 3; stroke-opacity:.8}
#brain .mapempty{fill:var(--ink-3); font:500 12px "Plus Jakarta Sans",sans-serif}
#brain .mapfade{animation:mapfade .35s ease-out; transform-origin:320px 230px}
@keyframes mapfade{from{opacity:0; transform:scale(.97)}}
@media (prefers-reduced-motion: reduce){
  #brain .hubbtn .hub,#brain .hubhint,#brain .hubring,#brain .mapfade{animation:none}
  #brain .hubhint{opacity:1}
}

@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--crit) 35%, transparent)} 50%{box-shadow:0 0 0 10px transparent}}

/* ---------- inbox checker: one analog clock per check time ---------- */
.checker{display:flex; flex-direction:column; gap:14px}

/* ---------- announce ---------- */
.difflist{display:flex; flex-direction:column; gap:6px; font-size:13px}
.diffrow{border-radius:6px; padding:6px 9px; background:var(--surface-2)}
.diffrow b{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-right:6px}
.diffrow.chg b{color:var(--warn)} .diffrow.add b{color:var(--good)} .diffrow.del b{color:var(--crit)}
.diffrow s{color:var(--ink-3)}
.slide .todo{border-left:3px solid var(--accent); padding:4px 0 4px 12px; font-size:clamp(11px,1.5vw,16px); color:var(--ink)}
.slide .todo b{display:block; font-family:"IBM Plex Mono",monospace; font-size:clamp(9px,1vw,11px); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:2px}
.slide.title .todo{border-left-color:var(--accent-ink); color:var(--accent-ink)}
.grouprow{border:1px solid var(--line); border-radius:8px; padding:9px 10px; display:flex; flex-direction:column; gap:6px}
.grouprow .head{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.grouprow textarea{font:12px/1.45 "IBM Plex Mono",monospace}
.recip{display:flex; flex-direction:column; gap:6px}
.recip label{display:flex; gap:8px; align-items:center; font-size:13px}

/* ---------- ⓘ explanations on demand ---------- */
.info{appearance:none; width:18px; height:18px; padding:0; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-3);
  font:600 11px/1 "Plus Jakarta Sans",sans-serif; cursor:help; display:inline-grid; place-items:center; position:relative; flex:none; vertical-align:middle}
.card-h .info{margin-left:-4px}
.info:hover,.info:focus-visible{color:var(--accent); border-color:var(--accent)}
.info::after{content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:-10px; width:max-content; max-width:min(320px, 78vw);
  background:var(--ink); color:var(--bg); font:500 12.5px/1.45 "Plus Jakarta Sans",sans-serif; text-align:left; white-space:normal; letter-spacing:0; text-transform:none;
  padding:8px 11px; border-radius:8px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .15s, transform .15s; z-index:45; pointer-events:none}
.info:hover::after,.info:focus::after{opacity:1; visibility:visible; transform:none}

/* ---------- narrow screens: keep the sticky header compact ---------- */
@media (max-width:640px){
  .topbar-inner{padding-top:6px; flex-wrap:wrap; align-items:center; row-gap:2px}
  .topright{order:1; margin-left:auto; padding-bottom:0}
  .tabs{flex-basis:100%; order:2}

  .brandrow{flex-wrap:nowrap; gap:8px}
  .brand small{display:none}

  .tabs{margin-top:4px}
  .tab{padding:8px 10px 10px}
  .pagehead h1{font-size:21px}
  .thread{height:min(62vh, 540px)}
}

/* =====================================================================================
   Nora theme layer: space, soft gradients, calm motion. Motion is short (≤ 250 ms),
   small (1–2 px) and switched off for people who prefer reduced motion.
   ===================================================================================== */
body{
  font-size:14.5px; letter-spacing:-.003em;
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(120,190,240,.09), transparent 62%),
    radial-gradient(900px 480px at 105% 0%, rgba(90,140,230,.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3{letter-spacing:-.02em; font-weight:700}
::selection{background:rgba(34,184,234,.25)}

/* top bar: logo · tabs · person */
.topbar{background:color-mix(in srgb, var(--surface) 78%, transparent); border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px)}
.topbar-inner{max-width:1240px; padding:10px 24px; align-items:center; gap:20px}
.logo{display:flex; align-items:center; flex:none; border-radius:10px; padding:2px 4px; transition:transform .2s var(--ease), filter .2s}
.logo img{height:30px; width:auto; display:block}
.logo:hover{transform:translateY(-1px); filter:drop-shadow(0 4px 10px rgba(40,110,210,.16))}
.tabs{gap:4px; padding:3px; align-items:center}
.tab{padding:8px 14px; border-radius:999px; border-bottom:0; font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:background .2s var(--ease), color .2s var(--ease)}
.tab .dot{display:none}
.tab:hover{color:var(--ink); background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--accent); background:var(--accent-soft); border-bottom:0; box-shadow:none}
.topright{padding-bottom:0}

.tabcount{background:var(--grad); box-shadow:none}

/* layout: more air */
main{max-width:1240px; padding:28px 24px 72px}
.screen{gap:22px; animation:screenin .28s var(--ease)}
@keyframes screenin{from{opacity:0; transform:translateY(6px)}}
.split{gap:22px}
.stack{gap:12px}

/* cards */
.card{border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); transition:box-shadow .25s var(--ease)}
.card-h{padding:16px 20px; border-bottom:1px solid var(--line); gap:12px}
.card-h h2{font-size:15px; font-weight:700}
.card-b{padding:20px}
.eyebrow{font-weight:500; letter-spacing:.1em; color:var(--ink-3)}

/* buttons */
.btn{border-radius:var(--r-sm); padding:9px 15px; font-weight:600; border:1px solid var(--line-2); background:var(--surface);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s, color .2s, background-position .5s var(--ease)}
.btn:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--line-2)); color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 16px -12px rgba(20,80,180,.3)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn:focus-visible{outline:none; box-shadow:var(--glow)}
.btn-p{background-image:var(--grad); background-size:180% 100%; background-position:0 0; border-color:transparent; color:#fff;
  box-shadow:0 4px 14px -10px rgba(40,100,200,.45)}
.btn-p:hover{color:#fff; border-color:transparent; background-position:100% 0; filter:brightness(1.04); box-shadow:0 8px 20px -12px rgba(40,100,200,.5)}
.btn-danger{color:var(--crit); border-color:color-mix(in srgb, var(--crit) 35%, var(--line))}
.btn-danger:hover{color:var(--crit); border-color:var(--crit); box-shadow:0 6px 16px -10px rgba(210,69,63,.5)}
.btn-ghost{border-color:transparent; background:transparent; box-shadow:none}
.btn-ghost:hover{background:var(--surface-2); border-color:transparent; box-shadow:none}
.btn-sm{padding:6px 11px; border-radius:9px}
.btn:disabled,.btn:disabled:hover{opacity:.45; transform:none; box-shadow:none; color:inherit}
.btn-p:disabled{color:#fff}

/* inputs */
.input,.field select,.field input,.field textarea,.linkrow input,.composer textarea,.askbox textarea{border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface);
  transition:border-color .2s, box-shadow .2s}
.input:hover,.field select:hover,.field input:hover,.linkrow input:hover{border-color:color-mix(in srgb, var(--accent) 30%, var(--line-2))}
.input:focus,.field select:focus,.field input:focus,.field textarea:focus,.linkrow input:focus,.composer textarea:focus,.askbox textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--glow)}
.input,.field input,.field select{padding:10px 12px}

/* pills, chips, segmented */
.pill{padding:3px 10px; font-weight:600}
.pill-accent{background:var(--accent-soft); color:var(--accent)}
.chip{background:var(--surface-2); border:1px solid transparent; padding:7px 13px; transition:border-color .2s, background .2s, transform .15s var(--ease), color .2s}
.chip:hover{background:var(--surface); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); color:var(--accent); transform:translateY(-1px)}
.chip.static:hover{transform:none; color:inherit; background:var(--surface-2); border-color:transparent}
.segmented{background:var(--surface-2); border-radius:12px; padding:4px}
.segmented button{border-radius:9px; padding:7px 13px; transition:background .2s, color .2s}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-selected="true"]{background:var(--surface); color:var(--accent); box-shadow:var(--shadow)}

/* clickable tiles: soft lift on hover */
.src,.insight,button.stat,.qitem,.module,.esc {transition:transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s, background .2s}
.src{border-radius:14px; border:1px solid var(--line); background:var(--surface); padding:14px; min-height:88px}
.src .ico{color:var(--accent); font-weight:500}
.src:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); background:linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-soft); transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.insight {border-radius:14px; border-color:var(--line); padding:16px}
.insight:hover {transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--accent) 25%, var(--line))}
.insights{gap:14px}
.stat{border-radius:14px; box-shadow:var(--shadow)}
button.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--accent) 25%, var(--line))}
.qitem,.module,.esc,.grouprow {border-radius:14px; border-color:var(--line)}

.doc{border-radius:10px; transition:background .2s}
.doc:hover{background:var(--grad-soft)}
.row{transition:background .2s}

/* drop zone: gradient border that wakes up on hover */
.dropzone{border:1.5px dashed color-mix(in srgb, var(--accent) 22%, var(--line-2)); border-radius:var(--r); padding:30px 16px; background:var(--grad-soft);
  transition:border-color .2s, background .2s, transform .2s var(--ease)}
.dropzone b{font-size:15.5px}
.dropzone:hover,.dropzone.over{border-color:color-mix(in srgb, var(--accent) 55%, var(--line-2)); background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); transform:translateY(-1px)}

/* chat */
.bubble{border-radius:16px; padding:12px 15px}
.msg.me .bubble{background-image:var(--grad); color:#fff; border-bottom-right-radius:6px; box-shadow:0 6px 16px -14px rgba(40,100,200,.5)}
.msg.ai .bubble{background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:6px}
.composer{padding:14px 18px}
.micbtn{border-radius:50%}
.thread{padding:18px 20px}

/* info "?" */
.info{border-color:var(--line-2); transition:color .2s, border-color .2s, transform .15s var(--ease), background .2s}
.info:hover,.info:focus-visible{background:var(--accent-soft); transform:scale(1.08)}
.info::after{background:#0E1B2E; color:#fff; border-radius:10px; padding:9px 12px; box-shadow:var(--shadow-lg)}

/* knowledge map */
#brain .hub{fill:url(#hubgrad)}
#brain .hubbtn.cust .hub{fill:url(#custgrad)}
#brain .hubring{stroke:var(--accent); stroke-opacity:.18}
#brain .cat circle{fill:var(--surface); stroke:var(--accent); stroke-width:1.6; transition:stroke-width .2s}
#brain .cat:hover circle{stroke-width:2.6}
#brain .link{stroke:var(--line-2)}
#brain .link.lit{stroke:color-mix(in srgb, var(--accent) 60%, var(--line-2))}
#brain .docdot{transform-box:fill-box; transform-origin:center; transition:transform .18s var(--ease)}
#brain .docdot:hover,#brain .docdot:focus{transform:scale(1.35); outline:none}
#brain .docdot.fresh{fill:#1FA37A} #brain .docdot.aging{fill:#E0A12A} #brain .docdot.stale{fill:#E0564F}

/* queue progress, meters */
.bar{border-radius:99px; height:6px}
.bar i{background:var(--grad)}
.meter i,.confbar i{background:var(--grad)}

/* toast & drawer */
.toast{background:#0E1B2E; color:#fff; border-radius:14px; padding:12px 18px; box-shadow:var(--shadow-lg); animation:toastin .25s var(--ease)}
@keyframes toastin{from{opacity:0; transform:translate(-50%, 8px)}}
.drawer{border-radius:20px 0 0 20px; background:var(--bg)}
.drawer-h{border-radius:20px 0 0 0; padding:18px 22px}
.drawer-b{padding:22px}
.drawer-bg{background:rgba(8,20,40,.35); backdrop-filter:blur(2px)}

/* slides pick up the brand gradient */
.slide.title{background-image:var(--grad-pastel); color:var(--ink)}
.slide.title .kicker{color:var(--accent)}
.slide.title .foot{color:var(--ink-3)}
.slide.title p{color:var(--ink-2); opacity:1}
.slide .bignums div{border-top-color:var(--accent-2)}

/* scrollbars */
*{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}

@media (max-width:640px){
  .topbar-inner{padding:8px 14px; gap:8px}
  .logo img{height:24px}
  .tab{padding:7px 11px}
  main{padding:18px 14px 56px}
  .card-b{padding:16px}
  .card-h{padding:14px 16px}
}
@media (prefers-reduced-motion: reduce){
  .screen,.toast{animation:none}
  .btn:hover,.chip:hover,.src:hover,.insight:hover,button.stat:hover,.dropzone:hover,.logo:hover,#brain .docdot:hover {transform:none}
}

/* ---------- App page: one row of glass tiles — phone apps, watch, Chrome extension, wall kiosk ---------- */
.appstage{position:relative; min-height:calc(100vh - 170px); display:grid; place-items:center; padding:40px 0; isolation:isolate}
.appblob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:-1; pointer-events:none}
.appblob.b1{width:360px; height:360px; left:12%; top:14%; background:radial-gradient(circle, #CFE3FB, transparent 70%)}
.appblob.b2{width:340px; height:340px; right:12%; bottom:10%; background:radial-gradient(circle, #D3F2E2, transparent 70%)}
.apptiles{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; width:100%}
.apptile{position:relative; flex:1 1 0; min-width:0; max-width:250px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px 24px;
  color:var(--ink); cursor:pointer; text-align:center;
  background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s}
.apptile:hover,.apptile:focus-within{transform:scale(1.04)}
.apptile .appicon{position:relative; width:88px; height:88px; display:grid; place-items:center; margin-bottom:8px; padding:0; border:0; font:inherit; color:inherit; cursor:pointer;
  background:linear-gradient(180deg, #FFFFFF, #F2F4F8)}
.apptile .appicon:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.apptile .appicon img{width:68%; height:auto}
.apptile .peek{position:absolute; left:50%; bottom:-10px; z-index:2; transform:translate(-50%, 4px); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;
  background:var(--ink); color:var(--surface); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s var(--ease)}
.apptile:hover .peek,.apptile .appicon:focus-visible .peek{opacity:1; transform:translate(-50%, 0)}
.apptile .glyph{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.apptile .appname{display:flex; align-items:center; gap:7px; font-size:16px; font-weight:700; letter-spacing:-.02em}
.apptile .appreq{font-size:12px; line-height:1.4; color:var(--ink-3); margin-bottom:6px}
/* the store badge, the watch's options and "Coming later" sit at the bottom, level across the row */
.apptile .storebadge,.apptile .voiceopts,.apptile .soonbadge{margin-top:auto}
.apptile .storebadge{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border-radius:11px; background:#0B0B0C; color:#fff; text-decoration:none;
  transition:transform .25s var(--ease)}
.apptile .storebadge:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.apptile:hover .storebadge{transform:translateY(-1px)}
.apptile .storebadge svg{width:19px; height:19px; flex:none}
.apptile .storetxt{display:flex; flex-direction:column; line-height:1.1; text-align:left}
.apptile .storetxt small{font-size:9px; opacity:.85; letter-spacing:.02em}
.apptile .storetxt b{font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.apptile .yours{position:absolute; top:11px; right:12px; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.7); color:var(--ink-2)}

/* iOS: frosted white glass, big continuous corners, neutral shadow, squircle icon, SF-style type */
.apptile.ios{border-radius:32px; border:1px solid rgba(255,255,255,.75);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Plus Jakarta Sans", sans-serif;
  box-shadow:0 30px 60px -32px rgba(20,24,40,.28), 0 0 0 1px rgba(20,24,40,.03), inset 0 1px 0 rgba(255,255,255,.8)}
.apptile.ios:hover{box-shadow:0 40px 80px -36px rgba(20,24,40,.34), 0 0 0 1px rgba(20,24,40,.04), inset 0 1px 0 rgba(255,255,255,.8)}
.apptile.ios .appicon{border-radius:22px; box-shadow:0 10px 24px -12px rgba(20,24,40,.35), inset 0 0 0 1px rgba(0,0,0,.04)}
.apptile.ios .appname{font-weight:600}
.apptile.ios .storebadge{border-radius:10px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif}

/* Android: soft green-tinted glass, Material-style shape, round adaptive icon, the bot, Google colours */
.apptile.android{border-radius:26px; border:1px solid rgba(255,255,255,.65); background:rgba(236,250,242,.32);
  font-family:Roboto, "Google Sans", "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow:0 30px 60px -32px rgba(16,110,70,.26), 0 0 0 1px rgba(16,110,70,.04), inset 0 1px 0 rgba(255,255,255,.7)}
.apptile.android:hover{box-shadow:0 40px 80px -36px rgba(16,110,70,.32), 0 0 0 1px rgba(16,110,70,.06), inset 0 1px 0 rgba(255,255,255,.7)}
.apptile.android .appicon{border-radius:50%; background:radial-gradient(circle at 50% 40%, #FFFFFF, #EAF6EF); box-shadow:0 10px 24px -12px rgba(16,110,70,.35), inset 0 0 0 1px rgba(16,110,70,.06)}
.apptile.android .bot{width:21px; height:14px}
.apptile.android .appname{font-weight:500; letter-spacing:0}
.apptile.android .storebadge{border-radius:9px; background:#202124}
.apptile.android .storetxt small{text-transform:uppercase; letter-spacing:.06em; font-size:8.5px}

/* Watch: a small silver watch — band stubs, crown and side button, a white face with a black edge, the faint strings behind the
   logo (they flow while the pointer is on the tile); its two voice options take the place of a store badge */
.apptile.watch{border-radius:30px; border:1px solid rgba(255,255,255,.75); background:rgba(244,246,252,.36);
  box-shadow:0 30px 60px -32px rgba(40,50,90,.26), 0 0 0 1px rgba(40,50,90,.04), inset 0 1px 0 rgba(255,255,255,.8)}
.apptile.watch:hover{box-shadow:0 40px 80px -36px rgba(40,50,90,.32), 0 0 0 1px rgba(40,50,90,.06), inset 0 1px 0 rgba(255,255,255,.8)}
.apptile.watch .appicon{width:80px; height:96px; margin:0; background:none; box-shadow:none}
.apptile.watch .appicon::before,.apptile.watch .appicon::after{content:""; position:absolute; z-index:0; left:20px; width:36px; height:16px; background:linear-gradient(90deg, #C9D0DA, #EEF1F5 50%, #C9D0DA)}
.apptile.watch .appicon::before{top:0; border-radius:7px 7px 0 0}
.apptile.watch .appicon::after{bottom:0; border-radius:0 0 7px 7px}
.apptile.watch .case{position:absolute; z-index:1; left:4px; top:7px; width:68px; height:82px; padding:4px; border-radius:23px;
  background:linear-gradient(145deg, #F7F9FC 0%, #C9D0DA 40%, #EEF1F5 66%, #A9B2BF 100%);
  box-shadow:0 12px 24px -12px rgba(20,24,40,.5), 0 0 0 1px rgba(20,24,40,.08), inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.1)}
.apptile.watch .case::after{content:""; position:absolute; right:-5px; top:20px; width:6px; height:17px; border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg, #C3CAD4 0 1.5px, #EEF1F5 1.5px 3px); box-shadow:1px 0 1px rgba(0,0,0,.12)}
.apptile.watch .case::before{content:""; position:absolute; right:-3px; top:44px; width:3px; height:14px; border-radius:0 2px 2px 0; background:linear-gradient(90deg, #B7BFCA, #E3E7ED)}
.apptile .face{position:relative; width:100%; height:100%; display:grid; place-items:center; overflow:hidden}
.apptile.watch .face{border-radius:19px; background:#fff; box-shadow:inset 0 0 0 2.5px #0E1116}
.apptile.watch .face img{position:relative; width:50%}
.apptile .strings{position:absolute; left:0; top:20%; width:100%; height:60%}
.apptile .strings path{animation-play-state:paused}
.apptile:hover .strings path{animation-play-state:running}
.apptile .voiceopts{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.apptile .voiceopt{display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 9px; border-radius:999px; background:#0B0B0C; color:#fff; font-size:12px; font-weight:600}
.apptile .voiceopt .glyph{width:14px; height:14px}

/* Chrome extension: Google-style blue-tinted glass, rounded square icon, the extension's puzzle piece */
.apptile.chrome{border-radius:22px; border:1px solid rgba(255,255,255,.7); background:rgba(234,242,255,.32);
  font-family:"Google Sans", Roboto, "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow:0 30px 60px -32px rgba(26,80,180,.26), 0 0 0 1px rgba(26,80,180,.04), inset 0 1px 0 rgba(255,255,255,.7)}
.apptile.chrome:hover{box-shadow:0 40px 80px -36px rgba(26,80,180,.32), 0 0 0 1px rgba(26,80,180,.06), inset 0 1px 0 rgba(255,255,255,.7)}
.apptile.chrome .appicon{border-radius:20px; background:linear-gradient(180deg, #FFFFFF, #EEF3FB); box-shadow:0 10px 24px -12px rgba(26,80,180,.35), inset 0 0 0 1px rgba(26,80,180,.06)}
.apptile.chrome .appname{font-weight:500; letter-spacing:-.01em}
.apptile.chrome .appname .glyph{color:#1A73E8}
.apptile.chrome .storebadge{border-radius:9px; background:#1F1F1F}

/* Wall kiosk: a landscape tablet (dark bezel, camera dot) hanging on the wall; not available yet, so the tile is quieter */
.apptile.kiosk{border-radius:24px; border:1px dashed rgba(20,24,40,.18); background:rgba(255,255,255,.22); box-shadow:0 30px 60px -36px rgba(20,24,40,.2)}
.apptile.kiosk .appicon{width:112px; height:76px; padding:5px; margin:10px 0; border-radius:13px; background:#1C1F26;
  box-shadow:0 16px 22px -12px rgba(20,24,40,.55), inset 0 0 0 1px rgba(255,255,255,.08)}
.apptile.kiosk .appicon::after{content:""; position:absolute; left:50%; top:1.5px; width:2.5px; height:2.5px; border-radius:50%; transform:translateX(-50%); background:#3E4450}
.apptile.kiosk .face{border-radius:9px; background:linear-gradient(180deg, #FFFFFF, #EEF3FA)}
.apptile.kiosk .face img{width:38%}
.apptile .soonbadge{padding:7px 13px; border-radius:11px; font-size:12px; font-weight:600; color:var(--ink-2); background:rgba(20,24,40,.05); border:1px solid rgba(20,24,40,.08)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .apptile{background:rgba(22,35,58,.45); border-color:rgba(255,255,255,.08); color:var(--ink)}
  :root:not([data-theme="light"]) .apptile.android{background:rgba(18,48,38,.4)}
  :root:not([data-theme="light"]) .apptile.kiosk{border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .appblob{opacity:.18}
  :root:not([data-theme="light"]) .apptile .yours,:root:not([data-theme="light"]) .apptile .soonbadge{background:rgba(255,255,255,.12)}
}
:root[data-theme="dark"] .apptile{background:rgba(22,35,58,.45); border-color:rgba(255,255,255,.08); color:var(--ink)}
:root[data-theme="dark"] .apptile.android{background:rgba(18,48,38,.4)}
:root[data-theme="dark"] .apptile.kiosk{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .appblob{opacity:.18}
:root[data-theme="dark"] .apptile .yours,:root[data-theme="dark"] .apptile .soonbadge{background:rgba(255,255,255,.12)}

/* narrower screens: three, then two tiles a row (the last row centred), one on phones */
@media (max-width:1100px){
  .apptile{flex:0 0 calc((100% - 40px) / 3); max-width:none}
}
@media (max-width:760px){
  .apptile{flex-basis:calc((100% - 20px) / 2)}
  .appstage{min-height:0; padding:12px 0 24px}
}
@media (max-width:520px){
  .apptile{flex-basis:100%; max-width:340px}
}

/* App page: the preview dialog — a small mock-up of each app on its device */
.apppreview{padding:0; border:0; border-radius:24px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
  width:min(400px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto}
.apppreview.chrome,.apppreview.kiosk{width:min(600px, calc(100vw - 32px))}
.apppreview::backdrop{background:rgba(10,18,32,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.apppreview[open]{animation:pv-in .25s var(--ease)}
@keyframes pv-in{from{opacity:0; transform:translateY(8px) scale(.98)}}
.pv-box{padding:18px 20px 20px}
.pv-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pv-head h3{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
.pv-close{width:32px; height:32px; flex:none; border:0; border-radius:50%; background:var(--surface-2); color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer}
.pv-close:hover{background:var(--surface-3)}
.pv-close:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pv-stage{margin:16px 0 12px; padding:24px 12px; border-radius:18px; background:var(--grad-pastel); display:flex; flex-direction:column; align-items:center; isolation:isolate; overflow:hidden}
.pv-note{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-2)}

.pv-device{position:relative; color:#0E1B2E; text-align:left; font-family:"Plus Jakarta Sans", system-ui, sans-serif}
.pv-device img{display:block; height:auto}
.pv-device .glyph{width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pv-textarea{flex:1 1 auto; min-width:0; display:flex; align-items:center; height:40px; padding:0 10px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-3); font-size:14px; white-space:nowrap; overflow:hidden}

/* phone: the web app itself, drawn at phone size (375 px wide) and scaled down to the frame (228 px = × .608) */
.pv-device.phone{width:248px; padding:10px; border-radius:42px; background:#15171C; box-shadow:0 24px 50px -24px rgba(10,20,40,.55), inset 0 0 0 2px #2C2F36}
.pv-device.phone.android{border-radius:34px}
.phone .pv-screen{position:relative; width:228px; height:470px; border-radius:33px; overflow:hidden; background:var(--bg)}
.phone.android .pv-screen{border-radius:26px}
.pv-site{position:absolute; left:0; top:0; width:375px; height:773px; transform:scale(.608); transform-origin:0 0; display:flex; flex-direction:column;
  color:var(--ink); font-size:14.5px; letter-spacing:-.003em;
  background:radial-gradient(520px 300px at 8% -8%, rgba(120,190,240,.12), transparent 62%), var(--bg)}
.pv-site .glyph{width:18px; height:18px}
.pv-status{position:relative; display:flex; align-items:center; justify-content:space-between; flex:none; height:46px; padding:0 28px; font-size:15px; color:var(--ink)}
.pv-status b{font-weight:600}
.pv-cam{position:absolute; left:50%; transform:translateX(-50%); background:#0B0B0C}
.ios .pv-cam{top:11px; width:104px; height:30px; border-radius:16px}
.android .pv-cam{top:16px; width:14px; height:14px; border-radius:50%}
.pv-sig{display:flex; align-items:flex-end; gap:2px; height:12px}
.pv-sig i{width:4px; border-radius:1px; background:var(--ink)}
.pv-sig i:nth-child(1){height:5px}
.pv-sig i:nth-child(2){height:8px}
.pv-sig i:nth-child(3){height:12px}
.pv-top{display:flex; align-items:center; justify-content:space-between; flex:none; padding:4px 18px 12px;
  background:color-mix(in srgb, var(--surface) 78%, transparent); border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent)}
.pv-top img{height:26px; width:auto}
.pv-avatar{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:700}
.pv-pages{flex:1 1 auto; min-height:0; overflow:hidden; padding:14px}
.pv-page{display:flex; flex-direction:column; gap:12px; height:100%}
.pv-page[hidden]{display:none}
.pv-askcard{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.pv-askcard .card-h{padding:12px 14px}
.pv-askcard .thread{flex:1 1 auto; height:auto; overflow:hidden; padding:14px}
.pv-askcard .msg{max-width:94%}
.pv-askcard .composer{padding:10px 12px}
.pv-stack{display:flex; flex-direction:column; gap:12px}
.pv-site .card-h{padding:13px 16px}
.pv-site .card-b{padding:14px 16px}
.pv-site .dropzone{padding:26px 14px}
.pv-wide{display:flex; justify-content:center; align-items:center; gap:9px}
.pv-list{display:flex; flex-direction:column; padding-top:4px; padding-bottom:4px}
.pv-li{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.pv-li:last-child{border-bottom:0}
.pv-li > span:first-of-type{flex:1 1 auto; min-width:0}
.pv-li .glyph{color:var(--accent)}
.pv-search{display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:14px}
.pv-course{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px 0; border-bottom:1px solid var(--line)}
.pv-course:last-child{border-bottom:0}
.pv-course b{font-size:14px}
.pv-bar{display:block; width:100%; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.pv-bar i{display:block; width:60%; height:100%; border-radius:3px; background:var(--grad)}
.pv-bar i.full{width:100%; background:var(--good)}
.pv-bar i.none{width:0}
.pv-tabs{display:flex; justify-content:space-around; gap:4px; flex:none; padding:8px 10px 30px;
  background:color-mix(in srgb, var(--surface) 88%, transparent); border-top:1px solid var(--line)}
.pv-tab{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 12px; border:0; border-radius:14px; background:none; color:var(--ink-2);
  font-size:11.5px; font-weight:600; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease)}
.pv-tab:hover{color:var(--ink)}
.pv-tab[aria-selected="true"]{color:var(--accent); background:var(--accent-soft)}
.pv-tab .glyph{width:21px; height:21px}
.pv-homebar{position:absolute; left:50%; bottom:9px; width:134px; height:5px; transform:translateX(-50%); border-radius:3px; background:var(--ink)}
.android .pv-homebar{width:100px; height:4px}

/* watch: silver case, white face with a black edge, faint strings flowing behind two pages (Ask, Upload) */
.pv-stage.watch{padding:76px 12px}
.pv-device.watch{width:184px; height:220px; padding:7px; border-radius:54px;
  background:linear-gradient(145deg, #FBFCFE 0%, #D5DAE2 42%, #F3F5F8 68%, #BCC3CE 100%);
  box-shadow:0 26px 50px -22px rgba(10,20,40,.5), inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -3px 5px rgba(0,0,0,.1)}
.pv-device.watch::before,.pv-device.watch::after{content:""; position:absolute; left:36px; right:36px; height:72px; z-index:-1;
  background:linear-gradient(90deg, #D9DEE5, #F2F4F7 50%, #D9DEE5)}
.pv-device.watch::before{top:-62px; border-radius:18px 18px 0 0}
.pv-device.watch::after{bottom:-62px; border-radius:0 0 18px 18px}
.pv-crown{position:absolute; right:-8px; top:56px; width:9px; height:30px; border-radius:0 5px 5px 0;
  background:repeating-linear-gradient(180deg, #C3CAD4 0 2px, #EEF1F5 2px 4px); box-shadow:1px 1px 2px rgba(0,0,0,.15)}
.pv-side{position:absolute; right:-4px; top:108px; width:4px; height:32px; border-radius:0 3px 3px 0; background:linear-gradient(90deg, #B7BFCA, #E3E7ED)}
.watch .pv-screen{position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:47px; background:#fff; box-shadow:inset 0 0 0 5px #0E1116}
.watch .pv-screen .strings{position:absolute; left:5px; top:24%; width:calc(100% - 10px); height:56%; transform-origin:50% 50%}
.pv-wtime{position:relative; padding:15px 26px 0; text-align:right; font-size:11.5px; font-weight:600; color:#4A5B73}
.pv-wpages{position:relative; flex:1 1 auto; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.pv-wpages::-webkit-scrollbar{display:none}
.pv-wpage{flex:0 0 100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; scroll-snap-align:center}
.pv-wlogo{display:grid; place-items:center; width:66px; height:66px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.88); box-shadow:0 8px 18px -10px rgba(30,107,216,.55), 0 0 0 1px rgba(30,107,216,.08); transition:transform .2s var(--ease)}
.pv-wlogo:hover{transform:scale(1.05)}
.pv-wlogo:focus-visible{outline:2px solid #1E6BD8; outline-offset:2px}
.pv-wlogo img{width:62%}
.pv-wpage b{font-size:17px; font-weight:700; letter-spacing:-.01em; color:#0E1B2E}
.pv-wpage small{font-size:10px; font-weight:600; color:#1E6BD8; opacity:0; transition:opacity .3s}
.pv-wdots{position:relative; display:flex; justify-content:center; align-items:center; gap:5px; padding:0 0 15px}
.pv-wdots button{width:6px; height:6px; padding:0; border:0; border-radius:3px; background:#D5DFEB; cursor:pointer; transition:width .25s var(--ease), background .25s}
.pv-wdots button[aria-current="true"]{width:14px; background:#1E6BD8}
/* the strings: thin, pale and always slowly flowing; while Nora listens or talks (.talk) they swell and the logo pulses */
.strings{pointer-events:none; opacity:.75; transition:opacity .4s}
.talk .strings{opacity:1}
.strings path{fill:none; stroke-width:1; vector-effect:non-scaling-stroke; animation:pv-flow 10s linear infinite}
.strings path:nth-child(3n+1){stroke:rgba(30,107,216,.24)}
.strings path:nth-child(3n+2){stroke:rgba(34,184,234,.3)}
.strings path:nth-child(3n){stroke:rgba(101,85,221,.18)}
@keyframes pv-flow{to{transform:translateX(-200px)}}
.talk .strings{animation:pv-talk 1.1s ease-in-out infinite}
@keyframes pv-talk{50%{transform:scaleY(1.75)}}
.talk .pv-wlogo{animation:pv-pulse 1.1s ease-in-out infinite}
@keyframes pv-pulse{50%{box-shadow:0 8px 18px -10px rgba(30,107,216,.55), 0 0 0 7px rgba(30,107,216,.1)}}
.talk .pv-wpage small{opacity:1}

/* Chrome window with the extension's popup open */
.pv-device.browser{width:100%; max-width:520px; border-radius:12px; overflow:hidden; background:#fff; font-family:"Google Sans", Roboto, system-ui, sans-serif;
  box-shadow:0 24px 50px -24px rgba(10,20,40,.45), 0 0 0 1px rgba(10,20,40,.08)}
.pv-tabbar{display:flex; align-items:flex-end; height:34px; padding:0 10px; background:#DEE3EA}
.pv-ctab{display:flex; align-items:center; gap:7px; height:27px; padding:0 14px; border-radius:9px 9px 0 0; background:#fff; font-size:11px}
.pv-ctab i{width:11px; height:11px; border-radius:3px; background:#C9D3E0}
.pv-urlbar{display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fff; border-bottom:1px solid #E6EAF0}
.pv-url{flex:1; min-width:0; padding:6px 12px; border-radius:999px; background:#EEF1F5; font-size:11px; color:#4A5B73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-ext{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:#E8F0FE}
.pv-ext img{width:15px}
.pv-cpage{display:flex; flex-direction:column; gap:10px; padding:20px 18px 120px}
.pv-cpage i{display:block; height:9px; border-radius:5px; background:#EDF1F6}
.pv-cpage i:nth-child(1){width:40%; height:14px}
.pv-cpage i:nth-child(2){width:90%}
.pv-cpage i:nth-child(3){width:75%}
.pv-cpage i:nth-child(4){width:85%}
.pv-cpage i:nth-child(5){width:60%}
.pv-cpage i:nth-child(6){width:70%}
.pv-popup{position:absolute; right:10px; top:70px; width:220px; display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:12px; background:#fff; font-size:11.5px;
  box-shadow:0 14px 34px -10px rgba(10,20,40,.35), 0 0 0 1px rgba(10,20,40,.06)}
.pv-ph{display:flex; align-items:center; gap:6px; font-size:13px}
.pv-ph img{width:18px}
.pv-live{margin-left:auto; display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; color:#1C9468; background:#E2F6EE}
.pv-live::before{content:""; width:6px; height:6px; border-radius:50%; background:#1C9468}
.pv-popup small{font-size:10px; color:#7B8BA3}
.pv-item{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:9px; background:#F3F7FC}
.pv-item .glyph{color:#1E6BD8}
.pv-pause{padding:7px; border-radius:9px; border:1px solid #D5DFEB; text-align:center; font-weight:600; color:#4A5B73}

/* wall kiosk: a landscape tablet hanging on a warm wall, one screen in the web app's style — ask, by voice or typing */
.pv-stage.kiosk{padding:34px 20px 42px;
  background:radial-gradient(420px 220px at 50% 0%, rgba(255,255,255,.7), transparent 70%), linear-gradient(180deg, #ECE8E2, #DFD9D1)}
.pv-device.tablet{width:100%; max-width:470px; padding:14px; border-radius:26px; background:#1A1D23;
  box-shadow:0 34px 50px -26px rgba(50,35,20,.6), 0 6px 12px -6px rgba(50,35,20,.35), inset 0 0 0 1.5px #2E323A}
.pv-tcam{position:absolute; left:50%; top:5px; width:5px; height:5px; border-radius:50%; transform:translateX(-50%); background:#3A3F4A}
.tablet .pv-screen{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 24px 22px; border-radius:14px; text-align:center; color:var(--ink);
  background:radial-gradient(400px 200px at 10% -10%, rgba(120,190,240,.14), transparent 60%), var(--bg)}
.tablet .pv-kmark{height:22px; width:auto}
.pv-kmic{display:grid; place-items:center; width:62px; height:62px; margin-top:4px; border-radius:50%; color:#fff; background:var(--grad);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 24px -10px rgba(47,107,214,.6)}
.pv-device .pv-kmic .glyph{width:28px; height:28px}
.pv-ktitle{margin-top:4px; font-size:17px; letter-spacing:-.01em}
.pv-kinput{display:flex; gap:8px; width:100%; max-width:330px}
.tablet .pv-textarea{height:36px; font-size:12.5px}
.tablet .btn{padding:7px 14px}
.tablet .chips{justify-content:center}
.tablet .chip{font-size:11.5px; cursor:default}

@media (prefers-reduced-motion: reduce){
  .apptile:hover,.apptile:focus-within,.apptile:hover .storebadge{transform:none}
  .apptile .peek{transition:none}
  .apppreview[open]{animation:none}
  .strings path,.talk .strings,.talk .pv-wlogo{animation:none}
}

/* ---------- buttons: a touch of white light ---------- */
.btn{background-image:var(--btn-sheen)}
.btn:hover{background-image:var(--btn-sheen-hover)}
.btn-p,.btn-p:hover{background-image:var(--btn-p-sheen), var(--grad); background-size:100% 100%, 180% 100%}
.btn-p{background-position:0 0, 0 0}
.btn-p:hover{background-position:0 0, 100% 0}
.btn-ghost,.btn-ghost:hover{background-image:none}
.iconbtn{width:32px; height:32px; padding:0; display:inline-grid; place-items:center}
.iconbtn svg{width:16px; height:16px}

/* ---------- knowledge map in full screen ---------- */
.card.mapfs{position:fixed; inset:0; z-index:70; margin:0; border-radius:0; border:0; display:flex; flex-direction:column; background:var(--surface); animation:screenin .25s var(--ease)}
.card.mapfs .brainwrap{flex:1 1 auto; min-height:0; display:flex; padding:10px 24px}
.card.mapfs #brain{max-height:none; height:100%; width:100%}
.card.mapfs .legend{padding:12px 24px 18px}
.card:fullscreen{background:var(--surface)}

/* ---------- knowledge: needs attention ---------- */
.attn-tabs{width:100%; max-width:none}
.attn-tabs button{display:inline-flex; align-items:center; gap:7px}
.attn-tabs .cnt{min-width:20px; padding:0 6px; border-radius:999px; background:var(--surface-3); color:var(--ink-2); font-size:11px; line-height:18px; text-align:center; font-variant-numeric:tabular-nums}
.attn-tabs button[aria-selected="true"] .cnt{background:var(--accent-soft); color:var(--accent)}
.attn-tabs .cnt.hot{background:var(--crit-soft); color:var(--crit)}
#kb-attn{display:flex; flex-direction:column; gap:10px}
.attnrow{display:flex; gap:14px; align-items:center; padding:12px 6px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.attnrow:last-child{border-bottom:0}
.attnrow .main{flex:1 1 300px; min-width:0}
.attnrow .t{appearance:none; border:0; background:none; padding:0; font:600 14px/1.35 inherit; color:var(--ink); cursor:pointer; text-align:left}
.attnrow .t:hover{color:var(--accent)}
.attnrow .t:disabled{cursor:default; color:var(--ink)}
.attnrow .s{font-size:12px; color:var(--ink-3); margin-top:3px}
.attnrow .why{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.attnrow .act{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.docchips{margin:2px 0 10px}
.docchips .chip{display:inline-flex; gap:6px; align-items:center}
.docchips .chip .n{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.docchips .chip.on{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.docchips .chip.on .n{color:var(--accent)}

/* "?" explanations: one floating tooltip positioned by util.js (no pseudo-element overflow) */
.info::after{content:none; display:none}
.tipfloat{position:fixed; z-index:90; max-width:min(320px, calc(100vw - 16px)); background:#0E1B2E; color:#fff; font:500 12.5px/1.45 "Plus Jakarta Sans",sans-serif;
  padding:9px 12px; border-radius:10px; box-shadow:var(--shadow-lg); pointer-events:none; opacity:0; transform:translateY(-3px); transition:opacity .15s, transform .15s}
.tipfloat.on{opacity:1; transform:none}

/* ---------- buttons, modern: flat diagonal gradient for primary, glass for the rest ---------- */
.btn{background:rgba(255,255,255,.55); background-image:none; border:1px solid rgba(15,40,90,.10); color:var(--ink);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 1px 2px rgba(15,40,90,.04);
  transition:transform .18s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s, background-position .45s var(--ease)}
.btn:hover{background:rgba(232,241,253,.8); background-image:none; border-color:rgba(47,107,214,.28); color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 16px -10px rgba(47,107,214,.35)}
.btn:active{transform:translateY(0) scale(.98); box-shadow:none}
.btn-p,.btn-p:hover{color:#fff; border:1px solid transparent; background-color:transparent;
  background-image:linear-gradient(135deg, #2F6BD6 0%, #3F6EE0 50%, #5A7BEA 100%); background-size:200% 200%}
.btn-p{background-position:0% 50%; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(47,107,214,.45)}
.btn-p:hover{background-position:100% 50%; filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -10px rgba(63,110,224,.55)}
.btn-danger{color:var(--crit); background:rgba(255,255,255,.5); border-color:rgba(210,69,63,.28)}
.btn-danger:hover{color:var(--crit); background:rgba(253,232,231,.75); border-color:rgba(210,69,63,.5); box-shadow:0 6px 16px -10px rgba(210,69,63,.35)}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.btn-ghost:hover{background:rgba(47,107,214,.07); border-color:transparent; box-shadow:none}
.btn:disabled,.btn:disabled:hover{opacity:.45; transform:none; box-shadow:none}
.btn-p:disabled,.btn-p:disabled:hover{background-position:0% 50%; color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); box-shadow:none}
  :root:not([data-theme="light"]) .btn:hover{background:rgba(79,163,255,.12); border-color:rgba(79,163,255,.35); color:var(--accent)}
  :root:not([data-theme="light"]) .btn-p,:root:not([data-theme="light"]) .btn-p:hover{background-image:linear-gradient(135deg, #3A78E0 0%, #4A76EC 50%, #6284F2 100%); color:#fff; border-color:transparent}
  :root:not([data-theme="light"]) .btn-p{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -10px rgba(0,0,0,.6)}
  :root:not([data-theme="light"]) .btn-danger{background:rgba(255,122,115,.06); border-color:rgba(255,122,115,.3)}
  :root:not([data-theme="light"]) .btn-danger:hover{background:rgba(255,122,115,.14)}
  :root:not([data-theme="light"]) .btn-ghost{background:transparent; border-color:transparent}
  :root:not([data-theme="light"]) .btn-ghost:hover{background:rgba(255,255,255,.06)}
}
:root[data-theme="dark"] .btn{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); box-shadow:none}
:root[data-theme="dark"] .btn:hover{background:rgba(79,163,255,.12); border-color:rgba(79,163,255,.35); color:var(--accent)}
:root[data-theme="dark"] .btn-p,:root[data-theme="dark"] .btn-p:hover{background-image:linear-gradient(135deg, #3A78E0 0%, #4A76EC 50%, #6284F2 100%); color:#fff; border-color:transparent}
:root[data-theme="dark"] .btn-p{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -10px rgba(0,0,0,.6)}
:root[data-theme="dark"] .btn-danger{background:rgba(255,122,115,.06); border-color:rgba(255,122,115,.3)}
:root[data-theme="dark"] .btn-danger:hover{background:rgba(255,122,115,.14)}
:root[data-theme="dark"] .btn-ghost{background:transparent; border-color:transparent}
:root[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.06)}

/* mid-size screens: keep every tab visible next to the logo and the person picker */
@media (min-width:641px) and (max-width:1260px){
  .topbar-inner{gap:12px; padding-left:18px; padding-right:18px}
  .tab{padding:8px 10px; font-size:13px}

  .logo img{height:26px}
}
@media (min-width:641px) and (max-width:1000px){
  .topbar-inner{flex-wrap:wrap; row-gap:6px}
  .topright{margin-left:auto}
  .tabs{order:2; flex-basis:100%}
}
@media (max-width:640px){
  .tabs{-webkit-mask-image:linear-gradient(90deg, #000 86%, transparent); mask-image:linear-gradient(90deg, #000 86%, transparent); padding-right:28px}
}

/* Signed-in user in the top bar (session.js) */
.session{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-2)}
.session:empty{display:none}
.session-name{font-weight:600; white-space:nowrap}
.topright .session-name{display:none}
a.btn{text-decoration:none}
a.tab{text-decoration:none}

/* Ask answers from the server: [1] references and the sentences each source contributes */
sup.ref{font:600 10px/1 "IBM Plex Mono",monospace; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:4px; padding:1px 4px; margin-left:2px; vertical-align:super}
.cite .grow{display:flex; flex-direction:column; gap:2px; min-width:0}
.cite .title{color:var(--ink); font-weight:600}
.cite .where{color:var(--ink-3)}
.cite q{display:block; font-style:italic; color:var(--ink-2); border-left:2px solid var(--line-2); padding-left:7px; margin-top:2px; quotes:"\201C" "\201D"}
.cite:disabled{cursor:default}
.cite:hover .title{text-decoration:underline}
.cite:hover span{text-decoration:none}

/* Ask: sources by topic, and a question handed to a person or a system */
.srcline{align-items:center; gap:6px}
.srcline .chip{font-size:12px; padding:3px 9px}
.handoff{border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius:10px; padding:10px 11px; display:flex; flex-direction:column; gap:7px; font-size:13px}
.handoff .h{font-weight:700; color:var(--accent)}
.handoff.answered{border-color:color-mix(in srgb, var(--good) 45%, var(--line)); background:color-mix(in srgb, var(--good) 7%, var(--surface))}
.handoff.answered .h{color:var(--good)}
.handoff p{margin:0}

/* ---------- AI guide editor (assets/js/guide-editor.js): structure.html and the knowledge map's popups ---------- */
html.ge-lock{overflow:hidden}
.ge-editor{display:flex; flex-direction:column; gap:16px; min-width:0}
.ge-head{display:flex; flex-direction:column; gap:5px}
.ge-kicker{font:500 11px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ge-crumb{appearance:none; border:0; background:none; padding:0; cursor:pointer; color:var(--accent); font:600 12.5px "Plus Jakarta Sans",sans-serif; text-transform:none; letter-spacing:0}
.ge-crumb::before{content:"‹ "}
.ge-crumb:hover{text-decoration:underline}
.ge-titlerow{display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap}
.ge-title{margin:0; font-size:19px; font-weight:700; letter-spacing:-.015em; min-width:0; overflow-wrap:anywhere}
.ge-score{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font:500 11.5px "IBM Plex Mono",monospace; color:var(--ink-3); white-space:nowrap}
.ge-meta{font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ge-meter{display:inline-flex; gap:2px; align-items:center; flex:none}
.ge-meter i{width:6px; height:9px; border-radius:2px; background:var(--surface-3)}
.ge-meter.low i.on{background:var(--warn)}
.ge-meter.part i.on{background:var(--accent)}
.ge-meter.good i.on{background:var(--good)}
.ge-proposed{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; margin-top:6px; padding:9px 11px; border-radius:10px; background:var(--violet-soft); color:var(--violet); font-size:12.5px}
.ge-proposed span{flex:1 1 240px}
.ge-topics{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--surface-2)}
.ge-topics-l{font:500 11px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-right:4px}
.ge-chip{appearance:none; display:inline-flex; align-items:center; gap:7px; max-width:100%; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:999px;
  padding:5px 10px 5px 12px; font:600 12.5px "Plus Jakarta Sans",sans-serif; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.ge-chip span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ge-chip::after{content:"›"; color:var(--ink-3); font-weight:700}
.ge-chip:hover,.ge-chip:focus-visible{border-color:var(--accent); box-shadow:var(--glow); outline:none}
.ge-chip.proposed{border-style:dashed; border-color:color-mix(in srgb, var(--violet) 55%, var(--line-2))}
.ge-form{display:flex; flex-direction:column; gap:18px}
.ge-sec{display:flex; flex-direction:column; gap:14px; padding-top:16px; border-top:1px solid var(--line)}
.ge-sec-h{margin:0; font-size:13.5px; font-weight:700}
.ge-note{margin:-8px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ge-row{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .ge-row{grid-template-columns:minmax(0,2fr) minmax(0,3fr)} }
.ge-field{display:flex; flex-direction:column; gap:3px; min-width:0}
.ge-label{font-size:12.5px; font-weight:700; color:var(--ink)}
.ge-hint{font-size:12px; color:var(--ink-3); line-height:1.45}
.ge-field > .input,.ge-field > .ge-tags,.ge-field > .ge-routes,.ge-field > .ge-gloss{margin-top:4px}
.ge-area{resize:vertical; min-height:38px; line-height:1.5}
.ge-mono{font-family:"IBM Plex Mono",monospace; font-size:12.5px}
.ge-editor .input:disabled,.ge-editor .ge-tags.disabled{background:var(--surface-2); color:var(--ink-2); cursor:default}
.ge-routes,.ge-gloss{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.ge-route-list,.ge-gloss-list{display:flex; flex-direction:column; gap:6px; width:100%}
.ge-route{display:grid; grid-template-columns:minmax(0,3fr) auto minmax(0,2fr) 28px; gap:6px; align-items:center; width:100%}
.ge-arrow{color:var(--ink-3); font-weight:700}
.ge-gloss-row{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr) 28px; gap:6px; align-items:center; width:100%}
.ge-gloss-head{font:500 10.5px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.ge-x{appearance:none; width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer}
.ge-x:hover{background:var(--crit-soft); color:var(--crit)}
.ge-add{margin-left:-6px; color:var(--accent)}
.ge-more{width:100%}
.ge-more summary{cursor:pointer; font-size:12.5px; color:var(--ink-2); padding:2px 0}
.ge-more textarea{margin-top:6px}
@media (max-width:560px){
  .ge-route{grid-template-columns:minmax(0,1fr) 28px; row-gap:4px; padding-bottom:6px; border-bottom:1px dashed var(--line)}
  .ge-route .ge-arrow{display:none}
  .ge-route .ge-what{grid-column:1; grid-row:1}
  .ge-route .ge-where{grid-column:1; grid-row:2}
  .ge-route .ge-x{grid-column:2; grid-row:1}
  .ge-gloss-row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 28px}
}
.ge-tags{display:flex; flex-wrap:wrap; gap:5px; align-items:center; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:5px 6px; min-height:38px; cursor:text}
.ge-tags:focus-within{border-color:var(--accent); box-shadow:var(--glow)}
.ge-tag{display:inline-flex; align-items:center; gap:1px; max-width:100%; background:var(--accent-soft); color:var(--accent); border-radius:6px; padding:2px 3px 2px 8px; font-size:12.5px; font-weight:600}
.ge-tag span{overflow-wrap:anywhere}
.ge-tag-x{appearance:none; border:0; background:transparent; color:inherit; opacity:.55; cursor:pointer; font-size:15px; line-height:1; padding:1px 4px; border-radius:4px}
.ge-tag-x:hover{opacity:1; background:color-mix(in srgb, var(--accent) 16%, transparent)}
.ge-tag-in{flex:1 1 140px; min-width:120px; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:13.5px; padding:4px}
.ge-tag-in::placeholder{color:var(--ink-3)}
.ge-msg:empty{display:none}
.ge-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line)}
.ge-status{font-size:12px; color:var(--ink-3)}
.ge-status.ok{color:var(--good); font-weight:600}
.ge-status.dirty{color:var(--warn); font-weight:600}
.ge-count{font:500 11.5px "IBM Plex Mono",monospace; color:var(--ink-3)}
.ge-count.over{color:var(--crit); font-weight:600}
.ge-tabs{max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
.ge-tabs::-webkit-scrollbar{display:none}
.ge-tabs button{white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.ge-tabs .n{font:500 10.5px "IBM Plex Mono",monospace; color:var(--ink-3)}
.ge-panel{display:flex; flex-direction:column; gap:16px}
.ge-loading{padding:40px 0; text-align:center; color:var(--ink-3); font-size:13px}

/* popups */
.ge-dialog{padding:0; border:0; border-radius:22px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
  width:min(720px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); overflow:hidden}
.ge-dialog.company{width:min(800px, calc(100vw - 32px)); height:min(860px, calc(100dvh - 40px))}
.ge-dialog.company .ge-dlg{height:100%}
.ge-dialog.company .ge-dlg-b{flex:1 1 auto; display:flex; flex-direction:column}
.ge-dialog.company .ge-editor{flex:1 1 auto}
.ge-dialog.company .ge-panels{flex:1 1 auto}
.ge-dialog::backdrop{background:rgba(10,18,32,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.ge-dialog[open]{animation:pv-in .25s var(--ease)}
.ge-dlg{position:relative; display:flex; flex-direction:column; max-height:calc(100dvh - 40px)}
.ge-dlg-b{overflow:auto; overscroll-behavior:contain; padding:22px 24px 0; min-height:0}
.ge-dlg-x{position:absolute; top:14px; right:14px; z-index:3; width:32px; height:32px; border:0; border-radius:50%; background:var(--surface-2); color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer}
.ge-dlg-x:hover{background:var(--surface-3)}
.ge-dlg-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ge-dialog .ge-head{padding-right:40px}
.ge-dialog .ge-foot{position:sticky; bottom:0; z-index:2; background:var(--surface); padding:12px 0 16px}
.ge-dialog .ge-dlg-b > .alert{margin:28px 0 24px}
@media (max-width:640px){
  .ge-dialog,.ge-dialog.company{width:100%; height:100%; max-height:none; margin:0; inset:0; border-radius:0}
  .ge-dlg{max-height:none; height:100%}
  .ge-dlg-b{padding:18px 16px 0; flex:1 1 auto}
  .ge-score{margin-left:0}
}

/* knowledge map: provider accounts edit departments, customer topics and the company right on the map */
#brain .cat.edit{cursor:pointer}
#brain .cat.edit:focus{outline:none}
#brain .cat.edit circle{transition:stroke-width .15s, fill .15s}
#brain .cat.edit:hover circle:not(.noguide),#brain .cat.edit:focus-visible circle:not(.noguide){stroke-width:3; fill:var(--accent-soft)}
#brain .cat.cust.edit:hover circle:not(.noguide),#brain .cat.cust.edit:focus-visible circle:not(.noguide){fill:var(--violet-soft)}
#brain .cat circle.noguide{fill:var(--warn); stroke:var(--surface); stroke-width:2}
#brain .compring{cursor:pointer}
#brain .compring:focus{outline:none}
#brain .compring-hit{fill:none; stroke:transparent; stroke-width:20; pointer-events:stroke}
#brain .compring-line{fill:none; stroke:var(--accent); stroke-opacity:.5; stroke-width:1.5; stroke-dasharray:2 5; stroke-linecap:round; pointer-events:none; transition:stroke-opacity .15s, stroke-width .15s}
#brain .compring:hover .compring-line,#brain .compring:focus-visible .compring-line{stroke-opacity:1; stroke-width:3}
#brain .compring.cust .compring-line{stroke:var(--violet)}
.legend .mapedit{margin-left:auto; display:inline-flex; gap:6px; flex-wrap:wrap}

/* ---------- reactions: like / dislike / great (u.reactions in util.js; Ask answers, the Knowledge reader) ---------- */
.react{display:flex; flex-direction:column; gap:7px; min-width:0; margin-top:4px}
.react-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.react-q{font-size:12.5px; color:var(--ink-2)}
.react-btn{appearance:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:4px 10px; font:600 12px "Plus Jakarta Sans",sans-serif; cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.react-btn .e{font-size:13px; line-height:1}
.react-btn .n{font:500 11px "IBM Plex Mono",monospace; opacity:.75}
.react-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.react-btn:focus-visible{outline:none; box-shadow:var(--glow)}
.react-btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.react-btn.dislike[aria-pressed="true"]{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.react-btn.great[aria-pressed="true"]{background:var(--violet-soft); border-color:var(--violet); color:var(--violet)}
.react-link{appearance:none; border:0; background:none; padding:2px 4px; color:var(--accent); font:600 12px "Plus Jakarta Sans",sans-serif; cursor:pointer}
.react-link:hover{text-decoration:underline}
.react-thanks{font-size:12px; color:var(--good); font-weight:600}
.react-explain{font-size:12px; color:var(--ink-3); line-height:1.45}
.react-more{display:flex; flex-direction:column; gap:7px; padding:10px 11px; border-radius:10px; background:var(--surface-2)}
.react-reasons{display:flex; gap:5px; flex-wrap:wrap}
.react-reason{appearance:none; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:3px 10px;
  font:500 12px "Plus Jakarta Sans",sans-serif; cursor:pointer}
.react-reason:hover{border-color:var(--ink-3)}
.react-reason[aria-pressed="true"]{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.react-note{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.react-note .input{flex:1 1 220px; width:auto}
.readfb{display:flex; flex-direction:column; gap:8px}
.readfb .note{display:flex; flex-direction:column; gap:5px}
.readfb-text{white-space:pre-wrap; font-size:13px; color:var(--ink-2)}

/* the AI's suggestion for a guide, learned from records rated high (guide-editor.js, guide_suggest.py) */
.ge-suggest{display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--violet) 35%, var(--line));
  background:color-mix(in srgb, var(--violet-soft) 60%, var(--surface))}
.ge-suggest-h{display:flex; gap:10px 14px; align-items:flex-start; flex-wrap:wrap}
.ge-suggest-t{flex:1 1 300px; display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ge-suggest-t b{color:var(--violet); font-size:13px}
.ge-suggest-f{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.ge-suggest-fh{display:flex; align-items:center; gap:8px; font-size:12.5px}
.ge-suggest-used{font-size:12px; font-weight:600; color:var(--good)}
.ge-suggest-new{white-space:pre-wrap; font-size:13px; line-height:1.5; padding:8px 10px; border-radius:8px; background:var(--good-soft); color:var(--ink)}
.ge-suggest-now summary{cursor:pointer; font-size:12px; color:var(--ink-3)}
.ge-suggest-now div{white-space:pre-wrap; font-size:12.5px; color:var(--ink-2); padding:6px 0 0}
.ge-suggest-chips{display:flex; flex-wrap:wrap; gap:5px}
.ge-tag.ge-add-tag{background:var(--good-soft); color:var(--good); padding:2px 8px}
.ge-tag.ge-drop-tag{background:var(--crit-soft); color:var(--crit); padding:2px 8px; text-decoration:line-through}
.sg-ai{flex:none; font-size:12px; line-height:1}

/* "Prefill with AI" in the company insights (guide-editor.js, api/guide.php?task=company_prefill) */
.ge-prefill-btn{margin-left:auto; border-color:color-mix(in srgb, var(--violet) 45%, var(--line-2)); color:var(--violet); font-weight:700}
.ge-prefill-btn:hover{border-color:var(--violet); background:var(--violet-soft)}
.ge-company .ge-titlerow .ge-score{margin-left:0}
.ge-prefill{display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--violet) 35%, var(--line));
  background:color-mix(in srgb, var(--violet-soft) 60%, var(--surface))}
.ge-prefill-h{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ge-prefill-h b{color:var(--violet); font-size:13px}
.ge-prefill-row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr); gap:8px}
@media (max-width:560px){ .ge-prefill-row{grid-template-columns:minmax(0,1fr)} }
.ge-prefill-check{font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:4px; cursor:pointer}
.ge-prefill-res{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink); padding-top:8px; border-top:1px solid color-mix(in srgb, var(--violet) 25%, var(--line))}
.ge-prefill-src{font-size:12px; color:var(--ink-3); line-height:1.6}
.ge-prefill-src a{color:var(--accent)}
.ge-field.ge-filled{padding-left:10px; border-left:3px solid var(--violet)}
.ge-filled-tag{margin-left:8px; font:600 10.5px "IBM Plex Mono",monospace; color:var(--violet); text-transform:uppercase; letter-spacing:.04em}