/* Node portal design system.
   No build step and no CDN (the portal's CSP is default-src 'self'), so this is a single
   token-driven sheet in the spirit of a utility framework: one scale for colour, space,
   radius, shadow and motion, then thin components on top. Colour states are derived with
   color-mix() and the whole surface has a light, a dim and a dark skin. */

@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Medium.woff2') format('woff2');font-weight:500 650;font-style:normal;font-display:swap}
@font-face{font-family:IRANSans;src:url('/fonts/IRANSansWeb_Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root{
  /* brand ramp */
  --brand-50:#eef6f1; --brand-100:#d9ebe0; --brand-200:#b3d7c3; --brand-300:#7ebb9c;
  --brand-400:#4d9b78; --brand-500:#2c7a5b; --brand-600:#1f5c43; --brand-700:#164634;
  --brand-800:#0f3327; --brand-900:#0a241c;
  --gold:#c9a961; --gold-soft:#f0e3bd;
  --danger:#c0574c; --danger-soft:#f7e6e4;
  --warning:#b5842a; --warning-soft:#fbf1dc;
  --success:#2f7d57; --success-soft:#e4f2ea;

  /* type scale */
  --text-2xs:10.5px; --text-xs:11.5px; --text-sm:12.5px; --text-md:14px; --text-lg:17px; --text-xl:23px; --text-2xl:29px;
  --leading:1.95; --leading-tight:1.6;
  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:64px;
  /* shape */
  --r-sm:5px; --r-md:7px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --fast:.16s; --slow:.34s;
}

/* Default skin: "dim" — dark chrome around light working surfaces. */
:root,[data-theme="dim"]{
  --chrome:var(--brand-900); --chrome-ink:#eaf2ec; --chrome-muted:#9db3a7; --chrome-line:#1c3a2e;
  --canvas:#f1f5f1; --canvas-2:#e8efe8;
  --surface:#ffffff; --surface-2:#fafcfa; --surface-sunken:#f4f8f4;
  --ink:#16261f; --ink-soft:#3f564a; --muted:#78897f;
  --line:#e2eae3; --line-soft:#edf2ed;
  --accent:var(--brand-600); --accent-ink:#ffffff; --accent-soft:var(--brand-50);
  --shadow-1:0 1px 2px rgba(10,36,28,.05),0 2px 8px rgba(10,36,28,.04);
  --shadow-2:0 4px 14px rgba(10,36,28,.07),0 18px 44px rgba(10,36,28,.08);
  --shadow-3:0 10px 30px rgba(10,36,28,.12),0 44px 90px rgba(10,36,28,.14);
  color-scheme:light;
}
[data-theme="light"]{
  --chrome:#ffffff; --chrome-ink:#16261f; --chrome-muted:#78897f; --chrome-line:#e2eae3;
  --canvas:#f6f9f5; --canvas-2:#eef4ee;
}
[data-theme="dark"]{
  --chrome:#07170f; --chrome-ink:#e8f1ea; --chrome-muted:#8ca396; --chrome-line:#173226;
  --canvas:#0b1c15; --canvas-2:#0f251b;
  --surface:#122a20; --surface-2:#163427; --surface-sunken:#0f2419;
  --ink:#e9f2ec; --ink-soft:#bcd0c3; --muted:#8ba395;
  --line:#1d3b2d; --line-soft:#183327;
  --accent:var(--brand-300); --accent-ink:#06180f; --accent-soft:#12302322;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45); --shadow-3:0 20px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --chrome:#07170f; --chrome-ink:#e8f1ea; --chrome-muted:#8ca396; --chrome-line:#173226;
    --canvas:#0b1c15; --canvas-2:#0f251b;
    --surface:#122a20; --surface-2:#163427; --surface-sunken:#0f2419;
    --ink:#e9f2ec; --ink-soft:#bcd0c3; --muted:#8ba395;
    --line:#1d3b2d; --line-soft:#183327;
    --accent:var(--brand-300); --accent-ink:#06180f; --accent-soft:#1230231f;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45); --shadow-3:0 20px 60px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;
  font-family:IRANSans,Vazirmatn,Tahoma,system-ui,sans-serif;font-size:var(--text-md);line-height:var(--leading);
  color:var(--ink);direction:rtl;text-align:right;background:var(--canvas);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 560px at 88% -10%,var(--canvas-2) 0%,transparent 60%),
    radial-gradient(900px 460px at 2% 4%,var(--canvas-2) 0%,transparent 55%);
}
h1,h2,h3,p{margin:0}
h1{font-size:var(--text-xl);font-weight:800;letter-spacing:-.2px;line-height:var(--leading-tight)}
h2{font-size:var(--text-lg);font-weight:800;letter-spacing:-.1px}
h3{font-size:var(--text-md);font-weight:600}
small{color:var(--muted);font-size:var(--text-xs)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit}
h1,h2,h3,p,li,td,th,small,summary,textarea,input{unicode-bidi:plaintext}
bdi{unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-sm);letter-spacing:.2px}
.sep{unicode-bidi:isolate}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ chrome */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:0 clamp(var(--s4),4vw,var(--s6));min-height:66px;
  background:color-mix(in srgb,var(--chrome) 92%,transparent);backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--chrome-line);color:var(--chrome-ink);
}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:15px;letter-spacing:-.1px}
.brand img{width:30px;height:30px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--chrome-ink) 12%,transparent);padding:4px}
/* A flex item will not shrink below its content unless it is told it may, so this bar kept its
   full width and hung off the edge of the top bar instead — between about 760px and 810px the
   settings tab sat at a negative offset, off-screen, on a bar that could not scroll to reach it.
   min-width:0 lets it shrink and overflow-x lets it scroll what no longer fits, at every width
   rather than only under the old 760px rule that happened to do this by accident. */
.tabs{display:flex;align-items:center;gap:var(--s1);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>*{flex:0 0 auto}
.tabs button{
  padding:var(--s2) var(--s4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--chrome-muted);
  font-size:var(--text-sm);font-weight:600;transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.tabs button:hover{background:color-mix(in srgb,var(--chrome-ink) 10%,transparent);color:var(--chrome-ink)}
.tabs button.active{background:var(--brand-400);color:#06180f;box-shadow:0 6px 18px color-mix(in srgb,var(--brand-400) 40%,transparent)}
.tabs .ghost{margin-inline-start:var(--s2);border:1px solid var(--chrome-line);color:var(--chrome-muted);background:transparent;min-height:36px;padding:0 var(--s4)}
.tabs .ghost:hover{color:var(--chrome-ink);border-color:color-mix(in srgb,var(--chrome-ink) 30%,transparent);background:transparent}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:1px solid var(--chrome-line);border-radius:var(--r-pill);background:transparent;color:var(--chrome-muted);font-size:15px;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)
}
.theme-toggle:hover{color:var(--chrome-ink);border-color:color-mix(in srgb,var(--chrome-ink) 30%,transparent)}

#app{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:clamp(var(--s4),3.4vw,var(--s6)) clamp(var(--s3),4vw,var(--s5)) var(--s8);display:flex;flex-direction:column;gap:var(--s4)}
.loading{margin:22vh auto;color:var(--muted);text-align:center;font-size:var(--text-sm)}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s3);padding:0 clamp(var(--s4),4vw,var(--s6)) var(--s5);color:var(--muted);font-size:var(--text-xs);text-align:center}
.foot span{direction:ltr;unicode-bidi:isolate}
.foot-mark{font-weight:600;letter-spacing:.2px}

/* ------------------------------------------------------------------ surfaces */
.card{
  container-type:inline-size;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(var(--s4),2.6vw,var(--s5));box-shadow:var(--shadow-1);
  animation:rise var(--slow) var(--ease) both;
}
.card+.card{margin-top:var(--s4)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card h2+p,.card h1+p{margin-top:var(--s2);color:var(--ink-soft)}
.mission{color:var(--ink-soft);line-height:2.1;max-width:72ch}

/* ------------------------------------------------------------------ sign in */
.login{
  /* an auto inline margin turns off flex stretch, so the width has to be definite for the container query */
  width:min(470px,100%);margin:clamp(var(--s5),9vh,86px) auto;padding:clamp(var(--s5),3.4vw,var(--s6));
  border-radius:var(--r-xl);box-shadow:var(--shadow-3);position:relative;overflow:hidden;
}
.login::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400),var(--gold))}
.login-mark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);font-size:var(--text-sm);font-weight:600;color:var(--accent)}
.login-mark img{width:34px;height:34px;padding:5px;border-radius:var(--r-sm);background:var(--accent-soft)}
.login h1{margin-bottom:var(--s1)}
.login>p{color:var(--ink-soft);font-size:var(--text-sm)}
.login form{margin-top:var(--s4)}

label{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);font-size:var(--text-sm);font-weight:600;color:var(--ink-soft)}
input:not([type=file]),textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  font-size:var(--text-md);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
input:not([type=file]):hover,textarea:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
input:not([type=file]):focus,textarea:focus,select:focus{outline:0;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
/* the browser's autofill paints its own light background; keep the field on the current skin */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;caret-color:var(--ink)}

.primary,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);
  border-radius:var(--r-md);font-size:var(--text-sm);font-weight:600;border:1px solid transparent;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));color:var(--accent-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 38%,transparent)}
.primary:active{transform:translateY(0)}
.primary[disabled]{opacity:.6;cursor:progress;transform:none}
.ghost{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
.ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--ink)}

.status{margin-top:var(--s3);font-size:var(--text-sm);color:var(--muted);min-height:1px}
.status.ok{color:var(--success)}
.status.error{color:var(--danger)}
.hint{color:var(--muted);font-size:var(--text-xs);line-height:1.9}
.hint.working{display:inline-flex;align-items:center;gap:var(--s2);color:var(--warning)}
.hint.working::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--warning);animation:pulse 1.5s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.empty{color:var(--muted);font-size:var(--text-sm);text-align:center;padding:var(--s5) var(--s2)}

/* Local preview notice: one quiet line in the page's own palette, not a warning slab. */
.local-preview{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin:var(--s4) 0 var(--s1);padding:var(--s3) var(--s4);border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}
.local-preview p{margin:0;font-size:var(--text-xs);color:var(--ink-soft);flex:1 1 200px}
.local-preview .hint{flex-basis:100%;color:var(--muted)}
.local-preview button{min-height:36px;padding:0 var(--s4);font-size:var(--text-sm)}

/* ------------------------------------------------------------------ data */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3);margin-top:var(--s4)}
.metric{padding:var(--s4);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-sunken)}
.metric b{display:block;font-size:var(--text-2xl);font-weight:800;letter-spacing:-.6px;color:var(--accent);line-height:1.45}
.metric small{display:block;color:var(--muted)}

.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 2px;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.row b{font-weight:600}
.row small{color:var(--muted)}

.badge{display:inline-flex;align-items:center;gap:var(--s1);padding:4px 11px;border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge.good{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 22%,transparent)}
.badge.warn{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 22%,transparent)}
.badge.bad{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.badge.neutral{background:var(--surface-sunken);color:var(--ink-soft);border-color:var(--line)}

/* ------------------------------------------------------------------ agents & chat */
.agent-row{cursor:pointer;border-radius:var(--r-md);padding-inline:var(--s3);margin-inline:calc(var(--s3) * -1);transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.agent-row:hover{background:var(--surface-sunken);transform:translateX(-3px)}
.agent-row::after{content:'گفتگو ‹';color:var(--accent);font-size:var(--text-xs);font-weight:600;opacity:0;transition:opacity var(--fast) var(--ease)}
.agent-row:hover::after{opacity:1}

.chat{margin-top:var(--s4)}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft);margin-bottom:var(--s3)}
.chat-log{
  display:flex;flex-direction:column;gap:var(--s3);max-height:54dvh;overflow:auto;padding:var(--s4);
  border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface-sunken);scroll-behavior:smooth;
}
.chat-log::-webkit-scrollbar{width:9px}
.chat-log::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 35%,transparent);border-radius:9px;border:2px solid transparent;background-clip:content-box}
.bubble{max-width:min(84%,580px);padding:11px 14px;border-radius:var(--r-lg);font-size:var(--text-md);line-height:2;box-shadow:var(--shadow-1);animation:rise .28s var(--ease) both}
.bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble small{display:block;margin-top:var(--s1);font-size:var(--text-2xs);color:var(--muted)}
.bubble.owner{align-self:flex-start;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-bottom-right-radius:var(--s1)}
.bubble.agent{align-self:flex-end;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:var(--s1)}
.chat form{margin-top:var(--s3)}
.chat textarea{min-height:88px;resize:vertical;line-height:2}
.chat-actions{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.chat-actions .hint{margin-inline-start:auto}

.files,.pending-files{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.pending-files:empty{display:none}
.file{display:inline-flex;align-items:center;gap:var(--s2);padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:var(--text-xs);color:var(--ink-soft)}
.file .drop{border:0;background:transparent;color:var(--danger);font-size:15px;line-height:1;padding:0 2px}
.file-pick{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--r-md);background:var(--surface-2);font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);margin:0;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}
.file-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

#toast{
  position:fixed;inset-inline-start:var(--s5);bottom:var(--s5);z-index:60;max-width:min(92vw,420px);
  padding:13px 18px;border-radius:var(--r-md);background:var(--brand-800);color:#eaf2ec;
  font-size:var(--text-sm);box-shadow:var(--shadow-3);animation:rise .28s var(--ease) both;
}

/* ------------------------------------------------------------------ responsive */
@container (max-width:420px){
  .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:13.5px}
  .topbar{min-height:auto;padding:var(--s2) var(--s3);flex-direction:column;align-items:stretch;gap:var(--s2)}
  .tabs{padding-bottom:2px}
  .tabs .ghost{margin-inline-start:0}
  #app{padding:var(--s4) var(--s3) var(--s7)}
  .login{margin:var(--s3) auto;border-radius:var(--r-lg)}
  .row{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .chat-log{max-height:60dvh;padding:var(--s3)}
  .bubble{max-width:94%}
  .chat-actions .hint{margin-inline-start:0;width:100%}
  #toast{inset-inline:var(--s3);bottom:var(--s3);text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The progress log: one row per state that actually happened, the live one breathing. */
.progress{margin:var(--s2) 0 0;padding:var(--s2) 0 0;list-style:none;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.progress li{display:flex;align-items:baseline;gap:var(--s2);padding:2px 0;font-size:var(--text-xs);color:var(--muted)}
.progress li b{font-weight:600;color:var(--ink-soft);min-width:9.5ch}
.progress li small{flex:1 1 auto;color:var(--muted)}
.progress li .tick{margin-inline-start:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.progress li.done b{color:var(--muted);font-weight:500}
.progress li.now b{color:var(--accent)}
.progress li.now::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:portal-pulse 1.4s var(--ease) infinite}
.progress li.done::before,.progress li.end::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent)}
@keyframes portal-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hint.working b{color:var(--accent)}
.hint.working .tick{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.progress li.now::before{animation:none}}

/* The upload queue: one row per file, each with its own bar, its own state and its own way out. */
.pending-files{display:grid;gap:var(--s2)}
.queue-head{font-size:var(--text-xs);color:var(--muted)}
.queue-head b{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.qfile{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.qfile-top{display:flex;align-items:center;gap:var(--s2);font-size:var(--text-xs)}
.qname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.qnote{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.qpath{display:block;margin-top:2px;color:var(--muted);font-size:var(--text-xs);opacity:.75;direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qbar{margin-top:5px;height:3px;border-radius:999px;background:color-mix(in srgb,var(--line) 80%,transparent);overflow:hidden}
.qbar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .18s var(--ease)}
.qfile.done .qbar i{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.qfile.failed{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.qfile.failed .qnote{color:var(--bad)}
.qfile.failed .qbar i{background:var(--bad)}
.qfile .drop{flex:none}
/* Dropping a folder should look like an invitation, not an accident. */
[data-drop-zone].dropping{outline:2px dashed var(--accent);outline-offset:3px;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media(prefers-reduced-motion:reduce){.qbar i{transition:none}}

/* His own connections: rows he manages himself, under the ones we gave him. */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.card-head h2{margin:0}
.row-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.row-actions .ghost{min-height:30px;padding:0 var(--s3);font-size:var(--text-xs)}
.row-actions .ghost.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.conn-form{display:grid;gap:var(--s3);margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.conn-form h3{margin:0;font-size:var(--text-sm)}
.conn-form .chat-actions{justify-content:flex-start}


/* The employment file: who the manager is, who they work with, and the assistant appointed
   for them. Built from the same tokens as every other card so it follows the theme. */
.card form h3{margin:var(--s5) 0 var(--s2);font-size:var(--text-md)}
[data-people]{display:grid;gap:var(--s2)}
.person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:var(--s2);align-items:center}
.person input,.person select{min-width:0;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.person input:focus-visible,.person select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.person-remove{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--muted);cursor:pointer;line-height:1}
.person-remove:hover,.person-remove:focus-visible{color:var(--danger);border-color:var(--danger)}
.card form>.ghost{justify-self:start;margin-top:var(--s2);border:1px dashed var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink-soft);min-height:36px;padding:0 var(--s4);cursor:pointer}
.card form>.ghost:hover,.card form>.ghost:focus-visible{color:var(--accent);border-color:var(--accent)}
.assistant-read{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.assistant-read h3{margin:0 0 var(--s2)}
.assistant-read p{margin:var(--s1) 0;color:var(--ink-soft);font-size:var(--text-sm)}
@media(max-width:620px){.person{grid-template-columns:minmax(0,1fr) auto}.person select{grid-column:1}}

/* The job description. Each activity folds away; the one being written stays open. */
.duty{margin-bottom:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.duty>summary{display:flex;align-items:center;gap:var(--s3);cursor:pointer;font-weight:650}
.duty-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duty-state{flex:none;padding:2px var(--s3);border-radius:var(--r-pill);background:var(--warning-soft);color:var(--warning);font-size:var(--text-2xs);font-weight:700}
.duty-state.ok{background:var(--success-soft);color:var(--success)}
.duty[open]>summary{margin-bottom:var(--s3)}
.duty label{display:grid;gap:6px;margin-bottom:var(--s3);font-size:var(--text-sm);font-weight:600}
.duty input[type=text],.duty input:not([type]),.duty textarea{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-weight:400;line-height:var(--leading)}
.duty textarea{resize:vertical}
.duty input:focus-visible,.duty textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.duty-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.duty-approve{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:var(--text-sm)}
.duty-approve input{width:auto}
.duty-remove{border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-sm);cursor:pointer;padding:var(--s1) var(--s2)}
.duty-remove:hover,.duty-remove:focus-visible{color:var(--danger)}

/* The archive: everything asked and everything delivered, searchable. */
.archive-form{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.archive-form input{flex:1;min-width:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit}
.archive-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.record{margin-bottom:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.record>summary{display:flex;align-items:baseline;gap:var(--s3);cursor:pointer}
.record-q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.record-at{flex:none;color:var(--muted);font-size:var(--text-2xs)}
.record-agent{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--text-xs)}
.record-body{margin-top:var(--s2)}
.record-body b{display:block;margin-top:var(--s3);color:var(--ink-soft);font-size:var(--text-2xs);font-weight:700}
.record-body p{margin:var(--s1) 0 0;line-height:var(--leading);white-space:pre-wrap}
.record-files{margin-top:var(--s3);color:var(--muted);font-size:var(--text-xs)}

/* The board: finished, in flight, waiting on the manager, and planned. */
.work-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.work-col{min-width:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.work-col h3{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0 0 var(--s3);font-size:var(--text-sm)}
.work-col h3 span{flex:none;min-width:22px;padding:1px var(--s2);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font-size:var(--text-2xs);text-align:center}
.work-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.work-col li{display:grid;gap:2px;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--surface);font-size:var(--text-xs);line-height:var(--leading)}
.work-what{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.work-who{color:var(--muted);font-size:var(--text-2xs)}
.work-empty{color:var(--muted);background:transparent;font-size:var(--text-2xs)}
.note-act{justify-self:start;margin-top:4px;padding:3px var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink-soft);font:inherit;font-size:var(--text-2xs);cursor:pointer}
.note-act:hover,.note-act:focus-visible{border-color:var(--accent);color:var(--accent)}
.note-act.ok{border-color:var(--accent);color:var(--accent)}
.suggestions{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.suggestions li{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.suggestions p{margin:0 0 var(--s2);line-height:var(--leading)}
.suggestion-acts{display:flex;gap:var(--s2)}
@media(max-width:760px){.work-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.work-board{grid-template-columns:minmax(0,1fr)}}

/* Setup: the way in for a manager whose node is not running yet. The entry point in the tab row
   is deliberately unlike the tabs — it is not a place, it is something left to do — and it leaves
   once there is nothing left to do. */
.tab-setup{margin-inline-end:var(--s3);padding:0 var(--s4);min-height:34px;border:1px solid var(--accent);border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font:inherit;font-weight:700;font-size:var(--text-xs);cursor:pointer;position:relative}
.tab-setup::before{content:'';display:inline-block;width:6px;height:6px;margin-inline-end:6px;border-radius:50%;background:var(--accent);vertical-align:middle;animation:setup-pulse 2.4s ease-in-out infinite}
@keyframes setup-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tab-setup:hover,.tab-setup:focus-visible{background:var(--accent);color:var(--accent-ink)}
.tab-setup:hover::before,.tab-setup:focus-visible::before{background:var(--accent-ink)}
.setup-dialog{width:min(560px,92vw);padding:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3)}
.setup-dialog::backdrop{background:#0b1a1480;backdrop-filter:blur(2px)}
.setup-head{padding:var(--s5) var(--s5) var(--s3)}
.setup-head h2{margin:0 0 var(--s2)}
.setup-head p{margin:0;color:var(--muted);font-size:var(--text-sm)}
.setup-steps{list-style:none;margin:0;padding:0 var(--s5);display:grid;gap:var(--s2)}
.setup-steps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.setup-steps li.ok{background:var(--success-soft);border-color:transparent}
.setup-steps li.skipped{opacity:.55}
.setup-mark{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--success);font-weight:700;font-size:var(--text-xs)}
.setup-steps b{font-size:var(--text-sm)}
.setup-steps p{margin:2px 0 0;color:var(--muted);font-size:var(--text-xs);line-height:var(--leading)}
.setup-acts{display:grid;gap:4px;justify-items:end}
.setup-go,.setup-skip{padding:3px var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink-soft);font:inherit;font-size:var(--text-2xs);cursor:pointer;white-space:nowrap}
.setup-go{border-color:var(--accent);color:var(--accent)}
.setup-skip:hover,.setup-go:hover{background:var(--surface)}
.setup-wait{color:var(--muted);font-size:var(--text-2xs);white-space:nowrap}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--line-soft)}
.setup-foot label{display:flex;align-items:center;gap:var(--s2);margin:0;color:var(--ink-soft);font-size:var(--text-xs)}
.setup-foot input{width:auto}
@media(max-width:520px){.setup-steps li{grid-template-columns:auto minmax(0,1fr)}.setup-acts{grid-column:2;justify-items:start}}

/* Where the manager has got to: what is finished, and what is theirs to do next. */
.setup-steps li.ok{background:var(--success-soft);border-color:transparent}
.setup-steps li.ok .setup-mark{background:var(--success);color:#fff}
.setup-steps li.ok b{color:var(--success)}
.setup-steps li.turn{position:relative;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.setup-arrow{position:absolute;inset-inline-start:-6px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:20px;line-height:1;animation:setup-point 1.4s ease-in-out infinite}
@keyframes setup-point{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-5px)}}
@media(prefers-reduced-motion:reduce){.setup-arrow,.tab-setup::before{animation:none}}

/* The footer: the checkbox belongs beside its label, not stacked above it, and the pair must not
   break apart when the dialog is narrow. */
.setup-foot{flex-wrap:nowrap;align-items:center}
.setup-foot label{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:8px;cursor:pointer}
.setup-foot input[type=checkbox]{flex:none;width:17px;height:17px;margin:0;accent-color:var(--accent)}
.setup-foot .primary{flex:none}
@media(max-width:480px){
  .setup-dialog[open]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0;display:flex;flex-direction:column}
  .setup-head{padding:var(--s4) var(--s4) var(--s2)}
  .setup-steps{padding:0 var(--s4);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
  .setup-steps li{grid-template-columns:auto minmax(0,1fr);padding:var(--s3) var(--s3)}
  .setup-acts{grid-column:2;grid-auto-flow:column;justify-items:stretch;gap:var(--s2);margin-top:var(--s2)}
  .setup-go,.setup-skip{min-height:38px;padding:0 var(--s3);font-size:var(--text-xs)}
  .setup-arrow{inset-inline-start:auto;inset-inline-end:8px;top:12px;transform:none}
  @keyframes setup-point{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
  .setup-foot{position:sticky;bottom:0;background:var(--surface);padding:var(--s3) var(--s4);padding-bottom:max(var(--s3),env(safe-area-inset-bottom))}
  .setup-foot label{font-size:var(--text-2xs)}
  .setup-foot .primary{min-height:42px;padding:0 var(--s5)}
}

/* Phone: the tab strip may scroll, but leaving and changing theme must never be behind a scroll.
   Sticky inside the scroller pins them to the edge without moving them out of the markup. */
@media(max-width:560px){
  .tabs{gap:6px;padding-inline-end:0}
  .tabs>button{min-height:40px;flex:none}
  .tab-setup{order:-1;min-height:40px}
}
/* Tap targets and comfortable spacing on a phone, across every card the manager uses. */
@media(max-width:480px){
  .card{padding:var(--s4) var(--s3)}
  .card form label{font-size:var(--text-sm)}
  .card input,.card textarea,.card select{min-height:42px;font-size:16px}  /* 16px stops iOS zooming on focus */
  .card textarea{min-height:88px}
  .person{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2)}
  .person input[name="prole"]{grid-column:1}
  .person select{grid-column:1}
  .person-remove{grid-row:1;width:42px;height:42px}
  .duty>summary{gap:var(--s2)}
  .duty-foot{gap:var(--s2)}
  .duty-approve{flex:1 1 100%}
  .archive-form{flex-direction:column}
  .archive-form button{min-height:44px}
  .work-col li{padding:var(--s3)}
  .suggestion-acts button{flex:1;min-height:40px}
}

/* Phone navigation: a menu, not a strip that scrolls things out of reach. */
.nav-toggle{display:none}
/* The menu, not a bar with things cut off it. Seven items plus the mark need about 890px; below
   that the bar was trimming whichever tab fell off the end — the settings one, usually — so the
   tidy menu now covers every width that cannot show them all, phone and tablet and half-screen
   window alike, instead of only phones. */
@media(max-width:900px){
  /* flex-direction back to row: the narrow rule above turns the bar into a column so a full tab
     strip can sit under the mark, and with the menu button instead of that strip the column left
     the button and the mark stacked and centred, one per line. */
  .topbar{flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:0}
  .nav-toggle{display:grid;place-content:center;gap:4px;margin-inline-start:auto;width:44px;height:44px;padding:0;border:1px solid var(--chrome-line);border-radius:var(--r-md);background:transparent;cursor:pointer}
  .nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--chrome-ink);transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .tabs{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:4px;overflow:visible;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--chrome-line)}
  body.nav-open .tabs{display:flex}
  .tabs>button{width:100%;min-height:46px;justify-content:flex-start;text-align:start;border-radius:var(--r-md)}
  .tabs .theme-toggle{order:9}
  .tabs .ghost{order:10}
  .tab-setup{order:-1;width:100%;justify-content:center}
}
@media(max-width:900px){.tabs .ghost{min-height:46px;height:auto}}

/* Icons: duotone, so the soft shape reads at a glance and the stroke carries the detail. */
.i{width:18px;height:18px;flex:none;vertical-align:-3px}
.i .i-f{opacity:.18}
.i-chip{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:var(--r-md);background:var(--surface);color:var(--muted)}
.i-chip .i{width:20px;height:20px}
button .i{margin-inline-end:6px}
button:has(.i) {display:inline-flex;align-items:center;justify-content:center}

/* Setup: the step whose turn it is breathes, instead of being pointed at. */
.setup-steps li{grid-template-columns:auto minmax(0,1fr) auto}
.setup-steps li.ok .i-chip{background:var(--success);color:#fff}
.setup-steps li.ok .i-chip .i-f{opacity:.28}
.setup-steps li.turn{border-color:var(--accent);animation:setup-breathe 2.6s ease-in-out infinite}
.setup-steps li.turn .i-chip{background:var(--accent-soft);color:var(--accent)}
@keyframes setup-breathe{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 5px var(--accent-soft)}}
@media(prefers-reduced-motion:reduce){.setup-steps li.turn{animation:none}}
.setup-go{display:inline-flex;align-items:center;gap:4px;min-height:34px}
.setup-wait{display:inline-flex;align-items:center;gap:5px}
.setup-acts .i.done{width:22px;height:22px;color:var(--success)}

/* Phone: the explanations are what make each row tall, and the modal was running off the screen. */
@media(max-width:480px){
  .setup-steps li p{display:none}
  .setup-steps li{padding:var(--s2) var(--s3);align-items:center}
  .setup-acts{grid-column:3;grid-row:1;margin-top:0}
  .i-chip{width:30px;height:30px}
  .setup-go{min-height:34px;padding:0 var(--s2)}
  .setup-go span{display:none}
  .setup-go .i{margin:0}
  .setup-wait{font-size:10px}
}
/* One line, checkbox first, so the pair reads as a single control rather than a stack. */
.setup-foot label{white-space:nowrap}
.setup-foot label>span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){.setup-foot label{font-size:11px;gap:7px}}

/* The header is the edge of the page, not a card floating on it. */
.topbar{border-radius:0}
/* Same 900px as the block that shows this button: it was left behind at 560, so on a tablet the
   menu appeared on the far side from the one the reader starts at. */
@media(max-width:900px){
  /* The menu button belongs on the side the reader starts from. No auto margin: the bar already
     spreads its two ends apart, and an auto margin here swallowed the whole row — 576px of it —
     so the mark had nowhere to sit and dropped onto a second line under the button. */
  .nav-toggle{order:-1;margin-inline-start:0;margin-inline-end:0}
  .topbar .brand{order:0}
}

/* The menu reads as a list: icon, then label, starting from the reader's edge. */
.tabs>button{display:inline-flex;align-items:center;gap:8px}
.tabs>button .i{opacity:.85}
.tabs>button.active .i{opacity:1}
@media(max-width:560px){
  .tabs{padding:var(--s2) 0 var(--s1)}
  .tabs>button{justify-content:flex-start;text-align:start;padding-inline:var(--s3);gap:10px;font-size:var(--text-sm)}
  .tabs>button .i{width:19px;height:19px}
  .tabs .ghost{margin-top:var(--s2);border-top:1px solid var(--chrome-line);border-radius:0;padding-top:var(--s3)}
  .tab-setup{margin:0 0 var(--s2);justify-content:flex-start}
}
@media(max-width:560px){
  .topbar .tabs>button,.topbar .tabs>button.active{justify-content:flex-start;text-align:start}
  .topbar .tabs>button>span{flex:1;text-align:start}
}
@media(max-width:560px){
  /* flex-basis alone still lets the row shrink it; the menu must own the whole line. */
  .topbar .tabs{flex:1 0 100%;width:100%;max-width:100%}
}

/* Colleagues: who else gets in, and how far. */
.member{margin-bottom:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.member>summary{display:flex;align-items:center;gap:var(--s3);cursor:pointer}
.member-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.member-role{flex:none;padding:2px var(--s3);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font-size:var(--text-2xs);font-weight:700}
.member-role.admin{background:var(--accent-soft);color:var(--accent)}
.member[open]>summary{margin-bottom:var(--s3)}
.member label{display:grid;gap:6px;margin-bottom:var(--s3);font-size:var(--text-sm);font-weight:600}
.member input:not([type=checkbox]),.member select{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-weight:400}
.member input:focus-visible,.member select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.scopes{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.scope{display:flex;align-items:center;gap:6px;margin:0;padding:5px var(--s3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--text-xs);font-weight:500;cursor:pointer}
.scope input{width:auto;margin:0;accent-color:var(--accent)}
.scope:has(input:checked){border-color:var(--accent);color:var(--accent)}
.scope:has(input:disabled){opacity:.5;cursor:not-allowed}
.member-foot{display:flex;justify-content:flex-end;padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.member-remove{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-sm);cursor:pointer;padding:var(--s1) var(--s2)}
.member-remove:hover,.member-remove:focus-visible{color:var(--danger)}
.whoami{display:inline-flex;align-items:center;gap:5px;margin-inline-start:var(--s3);padding:3px var(--s3);border-radius:var(--r-pill);background:var(--chrome-line);color:var(--chrome-ink);font-size:var(--text-2xs);font-weight:600}
@media(max-width:480px){.scopes{gap:6px}.scope{font-size:11px;padding:4px var(--s2)}.whoami{display:none}}

/* Phone: the dashboard should be readable in a glance or two, not a scroll. Explanations are for
   the first time someone sees a screen; on a phone they cost more than they teach. */
@media(max-width:560px){
  [data-view="overview"] .hint,[data-view="overview"] .card>p.hint{display:none}
  .card h1{font-size:var(--text-xl)}
  [data-view="overview"] .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
  .metric{padding:var(--s3);text-align:start}
  .metric small{font-size:var(--text-2xs)}
  .metric b{font-size:var(--text-lg);line-height:1.2}
  .work-board{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .work-col{padding:var(--s2) var(--s3)}
  .work-col h3{margin-bottom:var(--s2);font-size:var(--text-xs)}
  .work-col li{padding:6px var(--s2);font-size:11px}
  .work-empty{padding:4px var(--s2)}
  [data-view="overview"] .card{padding:var(--s3)}
  [data-view="overview"] .card+.card,[data-view="overview"] .grid+.card{margin-top:var(--s3)}
}
@media(max-width:560px){
  [data-view="overview"] .rows .row{padding:var(--s2) 0;gap:var(--s2)}
  [data-view="overview"] .rows .row b{font-size:var(--text-sm)}
  [data-view="overview"] .rows .row small{font-size:var(--text-2xs)}
  [data-view="overview"] .card h2{font-size:var(--text-md);margin-bottom:var(--s2)}
}

/* Nothing disappears on one tap. */
.confirm-dialog{width:min(420px,92vw);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3)}
.confirm-dialog::backdrop{background:#0b1a1480}
.confirm-dialog h2{margin:0 0 var(--s2);font-size:var(--text-lg)}
.confirm-dialog p{margin:0 0 var(--s5);color:var(--ink-soft);line-height:var(--leading)}
.confirm-acts{display:flex;gap:var(--s2);justify-content:flex-end}
.confirm-acts button{min-height:40px;padding:0 var(--s4);border-radius:var(--r-md);font:inherit;font-weight:650;cursor:pointer}
.confirm-acts .ghost{border:1px solid var(--line);background:transparent;color:var(--ink-soft)}
.confirm-acts .danger{border:1px solid var(--danger);background:var(--danger);color:#fff}
@media(max-width:480px){.confirm-dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}.confirm-acts button{flex:1}}

/* Connections. The manager could not tell what he was being asked for or what it would be allowed
   to do; every answer is on the card or in the form now, beside the question it answers. */
.conn-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s2);margin-top:var(--s3)}
.conn-pick{display:grid;gap:3px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);text-align:start;cursor:pointer}
.conn-pick:hover,.conn-pick:focus-visible{border-color:var(--accent);background:var(--surface)}
.conn-pick b{font-size:var(--text-sm)}
.conn-pick small{color:var(--muted);font-size:var(--text-xs);line-height:1.6}
.conn-list{display:grid;gap:var(--s3);margin-top:var(--s3)}
.conn-item{display:grid;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.conn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.conn-head b{display:block;font-size:var(--text-sm)}
.conn-head small{color:var(--muted);font-size:var(--text-xs)}
.conn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s1) var(--s3);margin:0}
.conn-facts>div{display:grid;gap:1px;min-width:0}
.conn-facts dt{color:var(--muted);font-size:var(--text-2xs)}
.conn-facts dd{margin:0;font-size:var(--text-xs);overflow-wrap:anywhere}
.conn-ok{color:var(--success)}
.conn-bad{color:var(--danger)}
.conn-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.conn-acts button{min-height:34px;font-size:var(--text-xs)}
.conn-guide{display:grid;gap:var(--s2);margin:var(--s2) 0;padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-sunken)}
.conn-guide p{margin:0;font-size:var(--text-xs);line-height:1.85}
.conn-what{font-weight:700}
.conn-steps{margin:0;padding-inline-start:var(--s4);display:grid;gap:4px;font-size:var(--text-xs);line-height:1.85}
.conn-safety{color:var(--muted)}
@media(max-width:560px){.conn-picker{grid-template-columns:1fr}.conn-acts button{flex:1 1 100%}}