/* CrewAi UI. Every value traces to DESIGN.md (measured on fal.ai app shell, 2026-10-25).
   This file is design/src/crewai.css plus the additions marked ADDED (CSP: no inline style, fonts are files). */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/PublicSans-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/PublicSans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ChivoMono-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ChivoMono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --font-sans:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Chivo Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --content-strong:#19191A;
  --content-base:#202022;
  --content-light:rgba(22,22,24,.8);
  --content-lighter:rgba(22,22,24,.7);
  --content-muted:rgba(22,22,24,.6);
  --content-disabled:#A6A6AE;

  --surface:#FFFFFF;
  --surface-100:#F4F4F5;
  --surface-alpha-3:rgba(18,18,22,.03);
  --surface-control:rgba(18,18,22,.05);
  --surface-control-hover:rgba(18,18,22,.10);

  --stroke-light:rgba(18,18,22,.05);
  --stroke-base:rgba(18,18,22,.10);
  --stroke-strong:rgba(18,18,22,.15);
  --stroke-stronger:rgba(18,18,22,.20);

  --primary:#762FF8;
  --primary-hover:#5718C0;
  --primary-foreground:#FAFAFA;
  --focus-brand:#8553FF;
  --cta:#202022;
  --cta-hover:#494950;

  /* status: text on 10% tint, dot */
  --ok-text:#0C6F25;   --ok-bg:#E7FBEC;   --ok-dot:#00A544;
  --warn-text:#B74806; --warn-bg:#F8EDE6; --warn-dot:#F99C00;
  --bad-text:#D20041;  --bad-bg:#FAE6EC;  --bad-dot:#FF2357;
  --idle-text:#494950; --idle-bg:rgba(18,18,22,.05); --idle-dot:#A6A6AE;
  --info-text:#681DE4; --info-bg:rgba(104,29,228,.10);

  --radius-xs:0px; --radius-sm:0px; --radius-lg:0px;
  --shadow-md:none;
  --shadow-lg:none;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;font-variant-ligatures:none}
body{margin:0;background:var(--surface);color:var(--content-base);font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,dl,dd,ul,ol,figure{margin:0;padding:0}
p,.help,.sub,.dd,.inc-d,.msg-b,.ph-sub{text-wrap-style:pretty}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
svg{display:block}
  .btn.keybtn-m{display:none}
.role{display:block}
.nm{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.muted{color:var(--content-lighter)}
.container{max-width:1408px;margin:0 auto;padding:0 24px}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-12{width:12px;height:12px}

/* focus: 3px brand ring on fields (measured), 2px outline offset 2 everywhere else */
:focus-visible{outline:2px solid var(--focus-brand);outline-offset:2px}
.input:focus-visible,.textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-brand)}

/* ---------- type ---------- */
.t-title{font-size:30px;line-height:32px;font-weight:600;letter-spacing:-.02em;color:var(--content-base)}
.t-title .nm{display:inline;font-weight:600;color:inherit;letter-spacing:inherit}
.t-title .pre{font-weight:400;color:var(--content-light)}
.t-h2{font-size:24px;line-height:32px;font-weight:600;color:var(--content-strong)}
.t-card{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.025em;color:var(--content-base)}
/* Tek gate 5: no single-word widows on crew detail titles, meta and next-step lines. */
.t-title,.t-card,.kv dd,.ph-meta,.hm-next-t{text-wrap:pretty}
.t-cap{font-size:12px;line-height:16px}
.t-ctl{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em}
.t-mono{font-family:var(--font-mono);font-size:14px;line-height:20px}

/* ---------- sidebar (fal-style rail: 240px, hairline, 0 radius, no shadow; phone: 48px bar and a menu button) ---------- */
body{display:flex;align-items:flex-start}
#app{flex:1;min-width:0}
.hdr{width:240px;flex:none;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--stroke-base);z-index:20}
.hdr .brand{display:flex;align-items:center;gap:8px;flex:none;height:48px;padding:0 16px}
.logo{width:24px;height:24px;flex:none}
.brand-name{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.025em;color:var(--content-strong)}
.hdr .hdr-menu{display:none}
.nav{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.nav a{position:relative;display:flex;align-items:center;height:32px;padding:0 16px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.02em;color:var(--content-lighter);transition:color .15s var(--ease),background-color .15s var(--ease)}
.nav a:hover{background:var(--surface-alpha-3);color:var(--content-light)}
.nav a[aria-current=page]{background:var(--surface-control);color:var(--content-strong)}
.nav a[aria-current=page]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--content-strong)}
.hdr-right{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0;border-top:1px solid var(--stroke-base)}
.hdr-right .state{height:32px;padding:0 16px;font-size:12px;line-height:16px}
.hdr-right .hdr-out{justify-content:flex-start;gap:8px;margin:0;padding:0 16px;color:var(--content-lighter)}
.hdr-right .hdr-out:hover{color:var(--content-strong)}
@media (max-width:767px){
  body{flex-direction:column;align-items:stretch}
  .hdr{width:100%;align-self:stretch;height:52px;position:sticky;top:0;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--stroke-base);padding:0;gap:0}
  .hdr .brand{height:48px;border-bottom:0;flex:1;min-width:0}
  .hdr .hdr-menu{display:inline-flex;width:44px;min-width:44px;height:44px;margin:0;padding:0;border-radius:0}
  .hdr .nav,.hdr .hdr-right{display:none}
  .hdr.open{height:auto}
  .hdr.open .nav{display:flex;flex-basis:100%;padding:4px 0;border-top:1px solid var(--stroke-base)}
  .hdr.open .nav a{height:44px;padding:0 16px}
  .hdr.open .hdr-right{display:flex;flex-basis:100%;margin-top:0;padding:4px 0}
  .hdr.open .hdr-right .btn{min-height:44px}
  /* Tek gate 2 (phone touch targets): crew name link and attachment summary link to 44px. */
  .hm-card-h .t-card a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  /* S9 30/10: remaining phone touch targets to 44px (tab height, week links, home crew links). */
  .tabs .tab{height:44px}
  .wk{display:inline-flex;align-items:center;min-height:44px}
  .hm-compact-name a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .att>summary .fn{display:inline-flex;align-items:center;min-height:44px}
  #app{flex:none;width:100%}
}

/* ---------- page ---------- */
.page{padding:24px 0 64px}
.crumbs{display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--content-lighter);margin-bottom:8px}
.crumbs a:hover{color:var(--content-strong);text-decoration:underline}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.ph-split{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ph-split.solo{margin-bottom:24px}
.ph-split+.ph-meta{margin:4px 0 24px}
.ph-main{min-width:0}
.ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:4px;font-size:14px;line-height:20px;color:var(--content-lighter);font-variant-numeric:tabular-nums}
.ph-meta b{font-weight:600;color:var(--content-base)}
.ph-sub{margin-top:4px;font-size:14px;line-height:20px;color:var(--content-lighter)}
.ph-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-actions{display:flex;gap:8px;flex:none}
.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}.col-5{grid-column:span 5}.col-7{grid-column:span 7}

/* ---------- buttons (heights 28/32/36/40, 14/20 600, radius 4) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--content-base);font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease),opacity .16s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-xs{height:28px;padding:0 12px}
.btn-sm{height:32px;padding:0 12px}
.btn-md{height:36px}
.btn-lg{height:40px}
.btn-icon{padding:0;width:32px}
.btn-icon.btn-xs{width:28px}
.btn-primary{background:var(--cta);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--cta-hover)}
.btn-brand{background:var(--primary);color:var(--primary-foreground)}
.btn-brand:hover{background:var(--primary-hover)}
.btn-outline{background:var(--surface);border-color:var(--stroke-strong)}
.btn-outline:hover{background:var(--surface-control);border-color:var(--stroke-stronger)}
.btn-ghost:hover{background:var(--surface-control)}
.card-h>.btn-ghost:last-child,.ph-actions>.btn-ghost:last-child{margin-right:-12px}
.btn-ghost.danger{color:var(--bad-text)}
.btn-ghost.danger:hover{background:var(--bad-bg)}
.btn-danger{background:var(--surface);border-color:var(--stroke-strong);color:var(--bad-text)}
.btn-danger:hover{background:var(--bad-bg);border-color:rgba(210,0,65,.3)}
.btn:disabled,.btn[aria-disabled=true]{color:var(--content-disabled);cursor:not-allowed;pointer-events:none}
.btn-primary:disabled,.btn-brand:disabled{background:var(--surface-control);color:var(--content-disabled)}

/* ---------- fields ---------- */
.field>*+*{margin-top:8px}
.label{display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--content-strong)}
.label .req{color:var(--primary)}
.label .opt{margin-left:4px;padding:0 6px;border-radius:var(--radius-sm);background:var(--surface-control);color:var(--idle-text);font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em}
.help{font-size:14px;line-height:20px;color:var(--content-lighter)}
.input,.textarea{display:block;width:100%;border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:14px;line-height:20px;color:var(--content-base);transition:box-shadow .16s var(--ease),border-color .16s var(--ease)}
.input{height:40px;padding:0 12px}
.textarea{min-height:80px;padding:8px 12px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--content-muted)}
.input:hover,.textarea:hover{border-color:var(--stroke-stronger)}
.input[aria-invalid=true]{border-color:var(--bad-dot)}
.input[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px rgba(255,35,87,.35)}
.input[aria-invalid=true]~.help{display:none}
.err{display:none;font-size:14px;line-height:20px;color:var(--bad-text)}
.input[aria-invalid=true]~.err{display:block}
.search{position:relative}
.search .ic{position:absolute;left:12px;top:12px;color:var(--content-lighter);pointer-events:none}
.search .input{padding-left:36px}
.search.sm .input{height:32px}.search.sm .ic{top:8px}

/* ---------- card / panel ---------- */
.card{background:var(--surface);border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;min-height:56px}
.card-h .sub{font-size:14px;line-height:20px;color:var(--content-lighter);margin-top:4px}
.card-h+.card-b{border-top:1px solid var(--stroke-base)}
.card.flat>.card-h+.card-b{border-top:0}
.card.flat>.card-h+.wait{border-top:0;padding-top:0}
.card.collapsed>.card-b{display:none}
.att>summary{cursor:default}
.tl-head{justify-content:flex-start}
.card-b{padding:16px}
.card-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--stroke-base)}
.panel{background:var(--surface-alpha-3);border:1px solid var(--stroke-base);border-radius:var(--radius-sm)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:2px 6px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.state{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--content-base);white-space:nowrap}
.state.sm{font-size:12px;line-height:16px;color:var(--content-lighter)}
.state .dot{background:var(--idle-dot)}
.state.ok .dot{background:var(--ok-dot)}
.dot{width:8px;height:8px;border-radius:0;flex:none;background:currentColor}
.b-ok{background:var(--ok-bg);color:var(--ok-text)}.b-ok .dot{background:var(--ok-dot)}
.b-warn{background:var(--warn-bg);color:var(--warn-text)}.b-warn .dot{background:var(--warn-dot)}
.b-bad{background:var(--bad-bg);color:var(--bad-text)}.b-bad .dot{background:var(--bad-dot)}
.b-idle{background:var(--idle-bg);color:var(--idle-text)}.b-idle .dot{background:var(--idle-dot)}

.badge-lg{height:24px;padding:2px 8px;font-size:14px;line-height:20px}
.badge.leader{flex:none}
.tag{display:inline-flex;align-items:center;gap:2px;padding:2px 4px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:10px;line-height:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.tag.outline{background:var(--surface);border-color:rgba(104,29,228,.2);color:var(--info-text)}
.tag.warn{background:var(--surface);border-color:rgba(183,72,6,.25);color:var(--warn-text)}
.tag.id{background:var(--surface-control);color:var(--idle-text);font-family:var(--font-mono);font-weight:400;font-size:12px;line-height:16px;padding:0 4px}

/* ---------- tabs and segmented ---------- */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--stroke-base)}
.tab{position:relative;display:inline-flex;align-items:center;height:40px;padding:4px 10px;border:1px solid transparent;border-radius:var(--radius-lg);font-size:14px;line-height:16.8px;font-weight:600;letter-spacing:-.02em;color:var(--content-light)}
.tab:hover,.tab[aria-selected=true]{color:var(--content-strong)}
.tab[aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--content-strong)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--radius-sm);background:var(--surface);box-shadow:0 0 0 1px var(--stroke-base)}
.seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--radius-xs);background:transparent;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;color:var(--content-lighter);transition:background-color .16s var(--ease),color .16s var(--ease)}
.seg button:hover{color:var(--content-strong)}
.seg button[aria-pressed=true]{background:var(--surface-control);color:var(--content-base)}
.seg .n{font-variant-numeric:tabular-nums;font-weight:500;color:var(--content-lighter)}

/* ---------- stats ---------- */

/* ---------- status key popover ---------- */
.anchor{position:relative}
.keybtn{vertical-align:middle;margin-left:2px;color:var(--content-lighter)}
.keybtn[aria-expanded=true]{background:var(--surface-control);color:var(--content-strong)}
.pop{position:absolute;z-index:30;top:36px;left:20%;width:380px;max-width:calc(100% - 16px);background:var(--surface);border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.scrim{display:none}
.pop-h{display:none}
.pop .pr{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--stroke-light)}
.pop .pr:last-child{border-bottom:0}
.pop .pr p{font-size:14px;line-height:20px;color:var(--content-lighter)}

/* ---------- table ---------- */
.nm{font-weight:600;color:var(--content-strong);letter-spacing:-.01em}

/* ---------- 24h strip ---------- */
.strip{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:32px}
.strip i{border-radius:var(--radius-xs);background:var(--stroke-strong)}
.strip i.w{background:var(--warn-dot)}
.strip i.d{background:var(--bad-dot)}
.strip-mark{position:relative;height:28px;margin-top:4px}
  .strip-mark .br{position:absolute;top:0;left:calc(var(--a) / var(--n) * 100%);width:calc((var(--b) - var(--a)) / var(--n) * 100%);height:6px;border:2px solid var(--bad-dot);border-top:0;border-radius:0 0 var(--radius-xs) var(--radius-xs)}
.strip-mark .lb,.strip-mark .ax{position:absolute;top:12px;font-size:12px;line-height:16px;white-space:nowrap}
.strip-mark .lb{right:calc((var(--n) - var(--b)) / var(--n) * 100%);font-weight:600;letter-spacing:-.01em;color:var(--bad-text)}
.strip-mark .ax{color:var(--content-lighter)}
.strip-mark .ax.l{left:0}.strip-mark .ax.m{left:50%;transform:translateX(-50%)}.strip-mark .ax.r{right:0}
.s48{display:none}

/* ---------- metrics grid (inside card) ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.metric{padding:16px;min-width:0}
.metric+.metric{border-left:1px solid var(--stroke-base)}
.metric .k{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--content-lighter)}
.metric .v{margin-top:4px;font-size:24px;line-height:32px;font-weight:600;color:var(--content-strong);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.metric .v small{font-size:14px;line-height:20px;font-weight:600;color:var(--content-lighter);margin-left:4px}
.metric .s{margin-top:4px;font-size:12px;line-height:16px;color:var(--content-lighter)}

/* ---------- log ---------- */
.logbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--stroke-base);flex-wrap:wrap}
.logbar .grow{flex:1 1 200px;min-width:0}
.heat{height:240px}
.perf-spark{height:64px}
.assign-btn{margin-left:auto}
.log{border-top:1px solid var(--stroke-base);font-family:var(--font-mono);font-size:12px;line-height:16px}
.log-row{display:grid;grid-template-columns:76px 52px 72px minmax(0,1fr);gap:12px;align-items:start;padding:6px 16px;border-bottom:1px solid var(--stroke-light)}
.log-row:last-child{border-bottom:0}
.log-row:hover{background:var(--surface-alpha-3)}
.log-row .m .lvl{display:none}
.log-row .t{color:var(--content-lighter);font-variant-numeric:tabular-nums}
.log-row .m{color:var(--content-base);overflow-wrap:anywhere;text-wrap-style:pretty}
.log-row .src{color:var(--content-lighter)}
.lvl{display:inline-flex;align-items:center;justify-content:center;height:16px;min-width:40px;padding:0 4px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:10px;line-height:15px;font-weight:600;letter-spacing:-.01em}
.lvl.warn{background:var(--warn-bg);color:var(--warn-text)}
.lvl.error{background:var(--bad-bg);color:var(--bad-text)}
.log-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--stroke-base);font-size:12px;line-height:16px;color:var(--content-lighter)}

/* ---------- actions list, incidents, dl ---------- */
.act{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--stroke-light)}
.act:last-child{border-bottom:0}
.act .tx{flex:1;min-width:0}
.act .btn{min-width:80px}
.act .tt{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--content-strong)}
.act .dd{font-size:12px;line-height:16px;color:var(--content-lighter);margin-top:2px}
.inc{padding:12px 16px;border-bottom:1px solid var(--stroke-light)}
.inc:last-child{border-bottom:0}
.inc-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inc-t{font-size:14px;line-height:20px;font-weight:600;color:var(--content-strong);letter-spacing:-.01em}
.inc-d{margin-top:4px;font-size:14px;line-height:20px;color:var(--content-lighter)}
.inc-m{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;font-size:12px;line-height:16px;color:var(--content-lighter)}
.inc-a{margin-top:8px;display:flex;justify-content:flex-end}
.empty{padding:16px;font-size:14px;line-height:20px;color:var(--content-lighter)}
.kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0}
.kv dt,.kv dd{padding:10px 16px;font-size:14px;line-height:20px;border-bottom:1px solid var(--stroke-light)}
.kv dt{color:var(--content-lighter)}
.kv dd{color:var(--content-base);overflow-wrap:anywhere}
.kv dt:nth-last-of-type(1),.kv dd:last-of-type{border-bottom:0}

/* ---------- stepper, code, notice, checks ---------- */
.code{position:relative;background:var(--surface-alpha-3);border:1px solid var(--stroke-base);border-radius:var(--radius-sm)}
.code-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:4px 8px 4px 16px;border-bottom:1px solid var(--stroke-base);font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--content-lighter)}
.code-body{position:relative}
.code pre{margin:0;padding:12px 16px;font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--content-base);white-space:pre;overflow-x:auto}
.code .tk{color:var(--info-text)}
.notice{display:flex;gap:12px;padding:12px 16px;border:1px solid var(--stroke-base);border-radius:var(--radius-sm);background:var(--surface-alpha-3);color:var(--content-lighter)}
.notice .tt{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--content-strong)}
.notice p{font-size:14px;line-height:20px;color:var(--content-base);margin-top:2px}
.notice .ic{margin-top:2px}
.wait{display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap}
.wait .tt-s{font-size:20px;line-height:32px;font-weight:600;letter-spacing:-.01em;color:var(--content-strong)}
.wait .okc{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:0;background:var(--ok-dot);color:#fff}
.wait .okc .ic{width:12px;height:12px;stroke-width:2.5}
.wait .grow{flex:1;min-width:0}
.spin{display:block;width:20px;height:20px;border:2px solid var(--stroke-stronger);border-top-color:var(--content-base);border-radius:50%;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.checks{border-top:1px solid var(--stroke-base)}
.check{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--stroke-light);font-size:14px;line-height:20px}
.check:last-child{border-bottom:0}
.check .st{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:0;border:1.5px solid var(--stroke-stronger);color:transparent}
.check.ok .st{background:var(--ok-dot);border-color:var(--ok-dot);color:#fff}
.check .when{margin-left:auto;font-size:12px;line-height:16px;color:var(--content-lighter);font-variant-numeric:tabular-nums;white-space:nowrap}
.check .st .ic{width:12px;height:12px;stroke-width:2.5}
[data-state]{display:none}
[data-show~="1"]{display:block}

/* ---------- tasks and thread ---------- */
.tl{border-top:1px solid var(--stroke-base)}
.tk-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--stroke-light);transition:background-color .15s var(--ease)}
.tk-row:last-child{border-bottom:0}
.tk-row:hover{background:var(--surface-alpha-3)}
.tk-row[aria-current=true]{background:var(--surface-control)}
.tk-row .tt{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--content-strong);overflow-wrap:anywhere}
.tk-row .meta{grid-column:1/-1;display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;font-size:12px;line-height:16px;color:var(--content-lighter)}
.thread{padding:0}
.msg{padding:16px;border-bottom:1px solid var(--stroke-light)}
.msg-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg-h .nm{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--content-strong)}
.msg-h .rl{font-size:12px;line-height:16px;color:var(--content-lighter)}
.msg-h .tm{margin-left:auto;font-size:12px;line-height:16px;color:var(--content-lighter);font-variant-numeric:tabular-nums}
.msg-b{margin-top:4px;font-size:14px;line-height:20px;color:var(--content-base);max-width:68ch}
.evt{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--stroke-light);font-size:12px;line-height:16px;color:var(--content-lighter)}
.evt .tm{margin-left:auto;font-variant-numeric:tabular-nums}
.att{margin-top:12px;border:1px solid var(--stroke-base);border-radius:var(--radius-sm);background:var(--surface)}
.att>summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 12px;list-style:none;cursor:pointer}
.att>summary::-webkit-details-marker{display:none}
.att .att-body{display:none;align-items:center;gap:8px;padding:0 12px 12px 56px}
.vfy{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em;color:var(--content-lighter)}
.att .fi{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-control);color:var(--content-base)}
.att .fn{font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--content-strong);overflow-wrap:anywhere}
.att .fm{font-size:12px;line-height:16px;color:var(--content-lighter)}
.hash{display:inline-flex;align-items:center;gap:4px;min-width:0}
.hash code{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--content-base);background:var(--surface-alpha-3);padding:2px 6px;border-radius:var(--radius-sm);border:1px solid var(--stroke-light)}
.att .right .badge,.att .right .vfy{min-width:92px;justify-content:center}
.att .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.back{display:none}
.composer{padding:16px;border-top:1px solid var(--stroke-base)}
.composer-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.thread-head{padding:16px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.thread-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font-size:14px;line-height:20px;color:var(--content-lighter)}
.thread-meta b{font-weight:600;color:var(--content-base)}

/* ---------- ADDED: replaces the inline style="" attributes of the design markup (CSP style-src 'self') ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.container.narrow{max-width:704px}
.add-single{max-width:704px}
.container.narrower{max-width:416px}
.bt{border-top:1px solid var(--stroke-base)}
.ph-sub.wrap{display:flex;flex-wrap:wrap;gap:4px 16px}
.tag-gap{margin-left:4px}
.wk{font-weight:600;color:var(--content-strong)}
.thread-main{min-width:0}
.thread-head .back{margin-left:-12px}
.ic.rot{transform:rotate(180deg)}
.ic-bold{stroke-width:2.5}
.fm-block{display:block}
.fn-wrap{min-width:0}
.msg.last{border-bottom:0}
.self-start{align-self:start}
.strip i.n{background:var(--stroke-light)}
.state.sm.warn .dot{background:var(--warn-dot)}
.state.sm.bad .dot{background:var(--bad-dot)}
.err.on{display:block}
.msg-b{white-space:pre-wrap;overflow-wrap:anywhere}
.code pre.wrap{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
.copy-tmp{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.tag.ok{background:var(--surface);border-color:rgba(12,111,37,.25);color:var(--ok-text)}
.tag.bad{background:var(--surface);border-color:rgba(210,0,65,.25);color:var(--bad-text)}
.empty-card{padding:24px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.empty-card p{font-size:14px;line-height:20px;color:var(--content-lighter)}
.empty-card .tt{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.025em;color:var(--content-strong)}
.hdr-out{margin-left:4px}
.hdr-right .state.sm{white-space:nowrap}
.page-nf{padding:48px 0}

/* banner: "Could not load" with Retry. Built from the notice primitive, title in the Down text colour */
.banner{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;border:1px solid rgba(210,0,65,.3);border-radius:var(--radius-sm);background:var(--surface)}
.banner .ic{color:var(--bad-text)}
.banner .tx{flex:1;min-width:0}
.banner .tt{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--bad-text)}
.banner p{font-size:14px;line-height:20px;color:var(--content-base);margin-top:2px}
.banner.ok{border-color:var(--stroke-base);background:var(--surface-alpha-3)}
.banner.ok .ic{color:var(--ok-text)}
.banner.ok .tt{color:var(--content-strong)}

/* form-level feedback line inside cards and sheets */
.fb{display:flex;align-items:flex-start;gap:8px;padding:0 16px 12px;font-size:14px;line-height:20px;color:var(--content-base)}
.fb.ok{color:var(--ok-text)}
.fb.bad{color:var(--bad-text)}
.fb .ic{margin-top:2px}

/* select: the input look with a chevron (data: svg is allowed by img-src) */
.select{appearance:none;-webkit-appearance:none;padding-right:32px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737374' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px 16px}
.select.sm{height:32px}

/* sheet: the status-key popover and bottom sheet primitive as a native dialog (focus trap, Esc, backdrop) */
dialog.sheet{width:440px;max-width:calc(100vw - 32px);padding:0;border:1px solid var(--stroke-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--content-base);box-shadow:var(--shadow-lg)}
dialog.sheet::backdrop{background:rgba(18,18,22,.4)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;min-height:56px;border-bottom:1px solid var(--stroke-base)}
.sheet-b{padding:16px}
.sheet-b>*+*{margin-top:16px}
.sheet-b .lead{font-size:14px;line-height:20px;color:var(--content-lighter)}
.sheet-b .lead b{font-weight:600;color:var(--content-base)}
.sheet .card-f{padding:12px 16px}
.cnt{font-size:12px;line-height:16px;color:var(--content-lighter);font-variant-numeric:tabular-nums}
.warnbox{display:flex;gap:12px;padding:12px 16px;border:1px solid rgba(183,72,6,.3);border-radius:var(--radius-sm);background:var(--warn-bg);font-size:14px;line-height:20px;color:var(--content-base)}
.warnbox .ic{margin-top:2px;color:var(--warn-text)}
.warnbox b{font-weight:600}

/* in-place command result (remote actions) */
.res{margin:0 16px 12px;border:1px solid var(--stroke-base);border-radius:var(--radius-sm);background:var(--surface-alpha-3)}
.res-row{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--stroke-light);font-size:12px;line-height:16px}
.res-row:last-child{border-bottom:0}
.res-row .tx{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--content-base)}
.res-row .id{font-family:var(--font-mono);color:var(--content-lighter)}
.act-wrap{border-bottom:1px solid var(--stroke-light)}
.act-wrap:last-child{border-bottom:0}
.act-wrap .act{border-bottom:0}
.act .dd.live{color:var(--content-base)}
.spin.sm{width:16px;height:16px}
.live-line{display:flex;align-items:center;gap:8px}

/* access card */
.tok{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px;border-bottom:1px solid var(--stroke-light)}
.tok:last-child{border-bottom:0}
.tok .pf{font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--content-strong)}
.tok .lu{grid-column:1/-1;font-size:12px;line-height:16px;color:var(--content-lighter)}
.evt .dot{background:var(--idle-dot)}
.evt .tm{white-space:nowrap}
.evt,.res-row,.inc-d,.act .dd,.tok .lu,.fb,.banner p,.empty,.empty-card p,.notice p,.warnbox,.thread-meta,.ph-meta{text-wrap-style:pretty}
.evt span:nth-child(2){min-width:0}
.inst-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.strip-mark .lb.l{right:auto;left:calc(var(--a) / var(--n) * 100%)}
.strip-mark .lb.l.r{left:auto;right:0}
.textarea[aria-invalid=true]{border-color:var(--bad-dot)}
.textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px rgba(255,35,87,.35)}
.textarea[aria-invalid=true]~.help{display:none}
.textarea[aria-invalid=true]~.err{display:block}
.acc-btns{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.acc-inst{padding:0 16px 16px}

/* reasons in words on the crew header */
.reasons{margin-bottom:24px}
.reasons ul>li{font-size:14px;line-height:20px;color:var(--content-base)}
.reasons ul>li+li{margin-top:2px}

/* composer attachments, tasks */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fchip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:0 4px 0 8px;min-height:28px;border:1px solid var(--stroke-base);border-radius:var(--radius-sm);background:var(--surface-alpha-3);font-size:12px;line-height:16px;color:var(--content-base)}
.fchip .nm2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}
.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.composer .err{margin-bottom:8px}
.att .fn{text-decoration:none}
a.fn:hover{text-decoration:underline}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:active{transform:none}
  .spin{border-top-color:var(--stroke-stronger);border-right-color:var(--content-base)}
}

/* ---------- tablet and below ---------- */
@media (max-width:1023px){
  .grid-12{gap:24px}
  .col-5,.col-7{grid-column:span 12}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(3){border-left:0}
  .metric:nth-child(n+3){border-top:1px solid var(--stroke-base)}
}

/* ---------- phone (390) ---------- */
@media (max-width:767px){
  .container{padding:0 16px}
  .page{padding:16px 0 48px}
  .ph{flex-direction:column;align-items:stretch;gap:16px}
  .ph-actions{flex-wrap:wrap}
  .ph-actions .btn{flex:1}
  .ph-split{flex-direction:row}
  .ph-split .btn{flex:none}
  .ph-split+.ph-meta{margin:8px 0 16px}
  .d-only{display:none!important}
    /* controls reach 44px on touch */
  .brand{min-height:44px}
  .btn{min-height:44px}
  .btn-icon{min-width:44px}
  .btn-xs,.btn-sm{min-height:44px}
  .input{height:44px}
  .search.sm .input{height:44px}.search .ic{top:14px}.search.sm .ic{top:14px}
  .seg button{height:36px}
  .nav a{padding:0 10px}
  body{background:var(--surface-100)}
  .card{border-left-width:0;border-right-width:0;border-radius:0;margin-left:-16px;margin-right:-16px}
  .card.keep{border-left-width:1px;border-right-width:1px;border-radius:var(--radius-sm);margin-left:0;margin-right:0}

  /* crew table: one 64px row per crew (dot + name, last seen / working on, status word) */
  .role{display:none}

  /* status key becomes a bottom sheet */
  .scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(18,18,22,.4)}
  .scrim[hidden]{display:none}
  .pop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);padding-bottom:16px}
  .pop-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 16px;border-bottom:1px solid var(--stroke-base)}
  .keybtn[aria-expanded=true]{background:transparent}
  .btn.keybtn-m{display:inline-flex;margin:-8px 0 -8px -8px}

  .metric{padding:12px 16px}
  .metric .v{font-size:24px}
  .s96{display:none}.s48{display:block}
  .strip{gap:2px;height:28px}
  .log-row{grid-template-columns:64px minmax(0,1fr);gap:8px}
  .log-row>.lvl,.log-row .src{display:none}
  .log-row .m .lvl{display:inline-flex;margin-right:6px;vertical-align:1px}
  .kv{grid-template-columns:96px minmax(0,1fr)}
  .code pre{font-size:12px;line-height:16px}
  .code-h{min-height:52px}
  .act .btn{min-width:72px}
  .att>summary{cursor:pointer;min-height:44px;grid-template-columns:minmax(0,1fr) auto}
  .att .fi{display:none}
  .att .fn{font-size:12px;line-height:16px}
  .att .fm{font-size:12px}
  .att .right{justify-content:flex-end}
  .att .right .badge,.att .right .vfy{min-width:0}
  .att[open] .att-body{display:flex;flex-wrap:wrap;padding-left:12px}
  .card-h{flex-wrap:wrap}
  .thread-head{flex-direction:column}
  .tk-row[aria-current=true]{background:transparent}
  .tk-row[aria-current=true]:hover{background:var(--surface-alpha-3)}
  .list-card .card-h{min-height:56px}
  .composer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:12px 16px}
  .composer .textarea{min-height:44px;height:44px;resize:none}
  .composer-bar{display:contents}
  .composer .lbl{display:none}
  .composer .btn{width:44px;padding:0}
  .att .fn-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .att .fn{display:flex;align-items:center;min-height:44px}
  .att .fm-block{display:inline}
  [data-view=thread] .thread-head{background:var(--surface-100)}
  [data-view=thread] .thread-card .thread{border-top-color:var(--stroke-strong)}
  [data-view=thread] .page{padding-top:0}
  [data-view=thread] .thread-card{border-top-width:0;overflow:visible}
  [data-view=thread] .thread-card .composer{position:sticky;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--stroke-strong)}
  [data-view=list] .thread-card{display:none}
  [data-view=thread] .list-card{display:none}
  [data-view=thread] .back{display:inline-flex}
  [data-view=thread] .tasks-head{display:none}
}

/* ---------- ADDED: phone additions (inputs 16px so iOS does not zoom, 44px segmented, bottom-sheet dialog) ---------- */
@media (max-width:767px){
  .input,.textarea{font-size:16px;line-height:24px}
  .select.sm{height:44px}
  .seg{padding:2px;gap:2px}
  .seg button{height:44px;min-width:44px;padding:0 12px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .kv dd a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-10px 0}
  .crumbs{margin-bottom:0}
  .hdr-out{margin-left:0}
  dialog.sheet{width:100%;max-width:none;margin:auto 0 0 0;border:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .sheet-b{padding-bottom:8px}
  .fchip{min-height:44px}
  .tok{padding:12px 16px}
  .composer .fchips{grid-column:1/-1}
  .composer .err{grid-column:1/-1;margin:0}
  .banner{margin-left:-16px;margin-right:-16px;border-left-width:0;border-right-width:0;border-radius:0}
  .banner .btn{flex:none}
  .acc-btns .btn{flex:1 1 140px}
  .fb{padding-left:16px;padding-right:16px}
  .empty-card .btn{align-self:stretch}
}

.ic-24{width:24px;height:24px}
.hm-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:400;letter-spacing:-.01em}
.hm-colon{margin:0 -.14em}
.hm-head{margin-bottom:16px}
.hm-head .ph-sub{margin-top:4px}

#col{flex:1;min-width:0}
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--stroke-base)}
.needs-toggle,.theme-toggle{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px;border:1px solid var(--stroke-base);color:var(--content-lighter)}
.needs-toggle .ic,.theme-toggle .ic{width:20px;height:20px}
.needs-toggle:hover,.needs-toggle.is-on,.theme-toggle:hover{color:var(--content-strong)}
.hdr .needs-toggle-m,.hdr .theme-toggle-m{display:none}
.needs-n{min-width:20px;justify-content:center}
.needs{position:sticky;top:0;flex:none;display:flex;flex-direction:column;width:340px;height:100vh;height:100dvh;background:var(--surface);border-left:1px solid var(--stroke-base);border-top:2px solid var(--accent);z-index:20}
.needs.is-empty{border-top-color:var(--stroke-stronger)}
.needs-h{display:flex;align-items:center;gap:12px;flex:none;height:46px;padding:0 16px;border-bottom:1px solid var(--stroke-base)}
.needs-h .t-card{flex:0 1 auto}
.needs-x{display:none;margin:0 -8px 0 auto}
.needs-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.needs.is-empty .hm-rail-none{display:flex;flex-direction:column;justify-content:flex-start;min-height:0}
.needs-scrim{display:none}
.hm-rail-none{padding:12px 16px}
.hm-rail-none-t{font-size:14px;line-height:20px;color:var(--content-lighter)}
.hm-rail-chk{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--content-muted);font-variant-numeric:tabular-nums}
.hm-nrow{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px 16px;color:inherit}
.hm-nrow+.hm-nrow{border-top:1px solid var(--stroke-base)}
a.hm-nrow:hover{background:var(--surface-alpha-3)}
a.hm-nrow:hover .hm-ntitle{text-decoration:underline}
a.hm-nrow:hover .hm-nchev{color:var(--content-strong)}
.hm-nrow:focus-visible{outline-offset:-2px}
.hm-nbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hm-ntitle{font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.01em;color:var(--content-strong);overflow-wrap:anywhere;text-wrap-style:balance}
.hm-nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.hm-nstate,.hm-nwho,.hm-ndue{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--content-lighter)}
.hm-nstate{color:var(--content-base)}
.hm-nwho{gap:8px}
.hm-ndue{margin-left:auto;font-variant-numeric:tabular-nums}
.hm-ndue:empty{display:none}
.hm-nchev{flex:none;width:16px;height:16px;color:var(--content-muted)}
@media (min-width:1200px){
  body.needs-collapsed .needs{display:none}
}
@media (max-width:1199px){
  .needs{position:fixed;top:0;right:0;width:min(360px,100vw);z-index:40;transform:translateX(100%);visibility:hidden;border-left-color:var(--stroke-strong);transition:transform .2s var(--ease),visibility 0s linear .2s}
  body.needs-open .needs{transform:none;visibility:visible;transition-delay:0s}
  .needs-x{display:inline-flex}
  .needs-scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:35;background:rgba(18,18,22,.35);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s}
  body.needs-open .needs-scrim{opacity:1;visibility:visible;transition-delay:0s}
}
@media (max-width:767px){
  .topbar{display:none}
  #col{flex:none;width:100%}
  .hdr .needs-toggle-m,.hdr .theme-toggle-m{display:inline-flex;height:44px;margin:0 4px;padding:0 8px;min-width:44px}
}
/* the other screens size their columns by viewport width: with the panel docked, the middle column is 340px narrower */
.hm-layout{display:block}
.hm-main{container-type:inline-size;min-width:0}
.hm-crews{container-type:inline-size;margin-top:16px}
.hm-chip{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 6px;background:var(--primary);color:var(--primary-foreground);font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

.hm-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px;border:1px solid var(--stroke-strong);background:var(--surface)}
.hm-kpi>div{min-width:0;padding:12px 16px}
.hm-kpi>div+div{border-left:1px solid var(--stroke-base)}
.hm-k{font-size:14px;line-height:20px;color:var(--content-lighter)}
.hm-v{margin-top:2px;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--content-strong)}
.hm-v small{margin-left:0;font-size:24px;line-height:32px;font-weight:600;color:var(--content-muted)}
.hm-v.is-need{color:var(--primary)}
.hm-s{min-height:16px;margin-top:2px;font-size:12px;line-height:16px;color:var(--content-lighter);text-wrap-style:balance}

.hm-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--stroke-base)}
.hm-panel-h .t-card{white-space:nowrap}
.hm-aside{font-size:12px;line-height:16px;color:var(--content-lighter);text-align:right}
.hm-panel-b{flex:1;display:flex;flex-direction:column;padding:12px 16px 8px}
.hm-chart{width:100%;height:176px}
.hm-chart.ontime{flex:1;height:auto;min-height:112px}
.hm-rate{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.hm-rate .hm-v{margin:0;font-size:30px;line-height:32px;letter-spacing:-.02em}
.hm-rate span:last-child{font-size:12px;line-height:16px;color:var(--content-lighter)}

.hm-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hm-sec .cnt{font-size:12px;line-height:16px;color:var(--content-lighter)}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.hm-card{display:flex;flex-direction:column;min-width:0;overflow:visible}
.hm-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px}
.hm-card-h .t-card a:hover{text-decoration:underline}
.hm-role{margin-top:2px;font-size:14px;line-height:20px;color:var(--content-lighter);text-wrap-style:balance}
.hm-card-h .state,.hm-card-h .badge{margin-top:2px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em}
.hm-card-h .state{height:20px;color:var(--content-base)}
.hm-needrow{padding:12px 16px;border-top:1px solid var(--stroke-base)}
.hm-needrow .hm-label{margin-bottom:6px}
.hm-needrow .badge{padding:0;background:transparent;color:var(--content-base);font-weight:400}
.hm-needrow .badge .dot{display:none}
.hm-needrow .hm-meta .tag.id{order:1}
.hm-needrow .hm-meta>:nth-child(2){order:2}
.hm-needrow .hm-chip{height:16px;padding:0;background:none;color:var(--content-base);font-size:12px;line-height:16px;font-weight:600}
.hm-needrow .hm-chip::before{content:"";display:inline-block;flex:none;width:8px;height:8px;margin-right:6px;background:var(--accent)}
.hm-sect{padding:12px 16px;border-top:1px solid var(--stroke-base)}
.hm-label{margin-bottom:4px;font-size:12px;line-height:16px;font-weight:400;color:var(--content-lighter)}
.hm-task+.hm-task{margin-top:12px}
.hm-task>a{display:block;font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.01em;color:var(--content-strong);overflow-wrap:anywhere;text-wrap-style:balance}
.hm-task>a:hover{text-decoration:underline}
.hm-task.is-done>a{font-weight:400;letter-spacing:0;color:var(--content-base)}
.hm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:12px;line-height:16px;color:var(--content-lighter)}

.hm-overdue{font-weight:600;letter-spacing:-.01em;color:var(--bad-text)}
.hm-empty{font-size:14px;line-height:20px;color:var(--content-lighter);text-wrap-style:pretty}
.hm-act{margin-top:12px}
.hm-pulse{margin-top:auto;padding:8px 16px 4px;border-top:1px solid var(--stroke-base)}
.hm-pulse-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:var(--content-lighter)}
.hm-pct{font-weight:400;font-variant-numeric:tabular-nums;color:var(--content-base)}
.hm-spark{width:100%;height:24px;margin-top:6px}
.hm-spark-empty{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;color:var(--content-lighter);background:var(--surface-alpha-3);border:1px solid var(--stroke-light)}
.hm-ax{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;line-height:16px;color:var(--content-muted)}
.hm-ax.is-blank{visibility:hidden}
.hm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 16px;border-top:1px solid var(--stroke-base);font-size:12px;line-height:16px;color:var(--content-lighter)}
.hm-foot .btn-sm{padding:0 8px;color:var(--content-lighter)}
.hm-foot .btn-sm:hover{color:var(--content-strong)}

/* chart tooltips: classes only, the page CSP forbids style="" in markup */
.ct-h{font-size:12px;line-height:16px;color:var(--content-lighter)}
.ct-r{margin-top:2px;font-size:14px;line-height:20px;color:var(--content-base)}
.ct-r b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--content-strong)}
.ct-s{margin-top:2px;font-size:12px;line-height:16px;color:var(--content-lighter)}

/* the main column decides its own density, whatever the sidebar and the rail leave it */
@container (max-width:559px){
  .hm-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-kpi>div:nth-child(odd){border-left:0}
  .hm-kpi>div:nth-child(n+3){border-top:1px solid var(--stroke-base)}
}
@container (max-width:719px){
}
@container (min-width:560px){
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:1080px){
  .hm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1023px){
}
@media (max-width:767px){
  .hm-kpi{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:-16px;margin-right:-16px;border-left-width:0;border-right-width:0}
  .hm-kpi>div:nth-child(odd){border-left:0}
  .hm-kpi>div:nth-child(n+3){border-top:1px solid var(--stroke-base)}
  .hm-grid{grid-template-columns:minmax(0,1fr)}
  .hm-chart{height:168px}
  .hm-foot .btn-sm{padding:0 12px}
}

/* ---- round 3: one purple, a real top bar, the panel as the twin of the left sidebar ---- */
.btn-brand{background:var(--cta);color:var(--primary-foreground)}
.btn-brand:hover{background:var(--cta-hover)}

.crumb{display:flex;align-items:center;min-width:0}
.crumb-t{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.02em;color:var(--content-strong)}
.topback{margin-left:-8px;gap:6px;color:var(--content-strong)}
.thread-head{flex-direction:column;align-items:stretch}
.thread-head .t-h2{font-size:20px;line-height:32px}
@media (min-width:768px){.hdr .brand{border-bottom:1px solid var(--stroke-base)}}
a.hm-nrow{position:relative}
a.hm-nrow[aria-current=page]{background:var(--surface-control)}
a.hm-nrow[aria-current=page]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--content-strong)}
.hm-rail-none.is-err .hm-rail-none-t::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--bad-dot)}
.hm-rail-retry{align-self:flex-start;margin-top:12px}
@media (min-width:1200px){body:not(.needs-collapsed) .needs-toggle-t .needs-n{display:none}}
@media (max-width:1199px){body.needs-open .needs-toggle .needs-n{display:none}}

:root{--cta-fg:#FAFAFA;--accent:var(--primary)}
.btn-primary,.btn-brand{color:var(--cta-fg)}
:root[data-theme=dark]{
  color-scheme:dark;
  --content-strong:#F4F4F5;
  --content-base:rgba(255,255,255,.80);
  --content-light:rgba(255,255,255,.72);
  --content-lighter:rgba(255,255,255,.65);
  --content-muted:rgba(255,255,255,.50);
  --content-disabled:#6B6B73;

  --surface:#19191A;
  --surface-100:#202022;
  --surface-alpha-3:rgba(255,255,255,.03);
  --surface-control:rgba(255,255,255,.06);
  --surface-control-hover:rgba(255,255,255,.10);

  --stroke-light:rgba(255,255,255,.05);
  --stroke-base:rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.15);
  --stroke-stronger:rgba(255,255,255,.22);

  --primary-hover:#8F55FF;
  --focus-brand:#9B78FF;
  --cta:#F4F4F5;
  --cta-hover:#C9C9CE;
  --cta-fg:#19191A;
  --accent:#8B5CF6;

  --ok-text:#5BD67C;   --ok-bg:rgba(0,165,68,.16);    --ok-dot:#17B955;
  --warn-text:#FBB040; --warn-bg:rgba(249,156,0,.14); --warn-dot:#F99C00;
  --bad-text:#FF6B8A;  --bad-bg:rgba(255,35,87,.16);  --bad-dot:#E5484D;
  --idle-text:rgba(255,255,255,.72); --idle-bg:rgba(255,255,255,.07); --idle-dot:#8A8A93;
  --info-text:#B79CFF; --info-bg:rgba(133,83,255,.18);
}
:root[data-theme=dark] dialog.sheet::backdrop,:root[data-theme=dark] .scrim,:root[data-theme=dark] .needs-scrim{background:rgba(0,0,0,.6)}
:root[data-theme=dark] .banner,:root[data-theme=dark] .btn-danger:hover{border-color:rgba(255,107,138,.35)}
:root[data-theme=dark] .warnbox{border-color:rgba(251,176,64,.35)}

/* ---- shared crew card: next step, foot ---- */
.hm-next-t{font-size:14px;line-height:20px;color:var(--content-base);text-wrap-style:pretty}
.hm-foot-t{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px}

#app{container-type:inline-size}
@container (max-width:999px){
  .grid-12{gap:24px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(3){border-left:0}
  .metric:nth-child(n+3){border-top:1px solid var(--stroke-base)}
}

/* ---- tags (Question, overdue, ok, bad): 12px on a tint, no outline, like the badges and the overview ---- */
.tag{padding:0 6px;font-size:12px;line-height:16px}
.tag.outline{background:var(--info-bg);border-color:transparent;color:var(--info-text)}
.tag.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn-text)}
.tag.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-text)}
.tag.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad-text)}

:root{--page:var(--surface);--panel:var(--surface);--card:var(--surface);--hover:var(--surface-alpha-3);--card-line:var(--stroke-strong)}
:root[data-theme=dark]{
  --page:#0A0A0A;
  --panel:#121212;
  --card:#1A1A1A;
  --hover:#212121;
  --card-line:rgba(255,255,255,.08);
  --stroke-base:rgba(255,255,255,.06);
  --stroke-light:rgba(255,255,255,.04);
  --field:#212121;
  --surface:#1A1A1A;
  --surface-100:#212121;
  --surface-alpha-3:rgba(255,255,255,.04);
  --surface-control:rgba(255,255,255,.07);
  --surface-control-hover:rgba(255,255,255,.11);
}
html{background:var(--page)}
body{background:var(--page)}
.hdr,.topbar,.needs{background:var(--panel)}
.card,.hm-kpi{background:var(--card);border-color:var(--card-line)}
.pop,dialog.sheet{border-color:var(--card-line)}
:root[data-theme=dark] a.hm-nrow{background:var(--card)}
:root[data-theme=dark] a.hm-nrow:hover,:root[data-theme=dark] a.hm-nrow[aria-current=page]{background:var(--hover)}
:root[data-theme=dark] .tk-row:hover{background:rgba(255,255,255,.04)}

/* ---- next step: the install command shown in place; focus ring in ink, never purple (purple is for "Needs you") ---- */
.hm-cmd{margin:0 0 8px;padding:8px 10px;border:1px solid var(--stroke-base);background:var(--page);font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--content-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-act-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hm-next-body .hm-next-t{margin-bottom:8px}
:root{--focus-brand:#19191A}
:root[data-theme=dark]{--focus-brand:rgba(255,255,255,.8)}
/* Tek gate 3: required-field asterisk on dark. Light keeps #762FF8 (5.95:1 on white);
   dark uses #A78BFA: 6.46:1 on #19191A, 6.40:1 on card #1A1A1A (both >= 4.5:1). */
:root[data-theme=dark]{--primary-light:#A78BFA}
:root[data-theme=dark] .label .req{color:var(--primary-light)}
/* S9 30/10: need-count badge on dark. Light keeps #762FF8 (5.95:1 on white);
   dark uses #A78BFA like the asterisk above (6.88:1 on #121212). */
:root[data-theme=dark] .nav-n.is-need{color:var(--primary-light)}

:root{--field:var(--surface)}
.input,.textarea,.select,.seg{background-color:var(--field)}

.nav .nav-i{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 12px 0 16px;border:0;background:none;font-family:inherit;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.02em;color:var(--content-lighter);text-align:left;cursor:pointer}
.nav .nav-i:hover{background:var(--surface-alpha-3);color:var(--content-light)}
.nav .nav-i[aria-current=page],.nav .nav-s[aria-current=page]{background:var(--surface-control);color:var(--content-strong)}
.nav .nav-i[aria-current=page]::before,.nav .nav-s[aria-current=page]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--content-strong)}
.nav-g.is-has .nav-p{color:var(--content-strong)}
.nav-n{margin-left:auto;font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;color:var(--content-lighter);font-variant-numeric:tabular-nums}
.nav-n.is-bad{color:var(--bad-text)}
.nav-chev{flex:none;width:16px;height:16px;color:var(--content-muted);transition:transform .15s var(--ease)}
.nav-p[aria-expanded=true] .nav-chev{transform:rotate(90deg)}
.nav-l{flex:1;min-width:0}
.nav-p .nav-n{margin-left:0}
.nav-sub{position:relative;display:none;padding:2px 0 6px}
.nav-g.is-open .nav-sub{display:block}
.nav-sub::before{content:"";position:absolute;left:23px;top:2px;bottom:6px;width:1px;background:var(--stroke-base)}
.nav .nav-s{position:relative;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 36px;font-size:14px;line-height:20px;font-weight:400;color:var(--content-lighter)}
.nav .nav-s:hover{background:var(--surface-alpha-3);color:var(--content-light)}
.nav .nav-s[aria-current=page]{font-weight:500}
.nav-s .sd{flex:none;order:3;margin-left:auto;width:8px;height:8px;background:var(--idle-dot)}
.nav-s .sd.is-ok{background:var(--ok-dot)}
.nav-s .sd.is-bad{background:var(--bad-dot)}
.nav .nav-s.nav-add{color:var(--content-lighter)}
.nav-s.nav-add .ic{width:14px;height:14px}
.tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--stroke-base);overflow-x:auto}
.tab{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.02em;color:var(--content-lighter);white-space:nowrap}
.tab:hover{color:var(--content-light)}
.tab[aria-current=page]{color:var(--content-strong)}
.tab[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--content-strong)}
.tab .nav-n{margin-left:0}
.crumb-t .crumb-sep{margin:0 6px;color:var(--content-muted);font-weight:400}
.crumb-t .crumb-up{font-weight:400;color:var(--content-lighter)}

/* ================= IA step 1 gaps: purple only for the Can anh count, warn status dot, mobile group rows, compact overview rows ================= */
.nav-n.is-need{color:var(--primary)}
.nav-s .sd.is-warn{background:var(--warn-dot)}
@media (max-width:767px){
  .hdr.open .nav .nav-i,.hdr.open .nav .nav-s{height:44px}
  .hdr.open .nav .nav-sub{padding-bottom:2px}
}
.hm-compact{border:1px solid var(--stroke-strong);background:var(--surface)}
.hm-compact-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--stroke-base)}
.hm-compact-row:last-child{border-bottom:0}
.hm-compact-name{flex:1 1 160px;min-width:0;font-weight:600}
.hm-compact-name a{color:var(--content-strong)}
.hm-compact-work{flex:2 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--content-lighter);font-size:14px;line-height:20px}
.col-12{grid-column:span 12}

@media (min-width:1024px){
  .page.split-page{display:flex;flex-direction:column;height:calc(100vh - 48px);height:calc(100dvh - 48px);padding-bottom:0;overflow:hidden}
  .page.split-page>.container{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
  .page.split-page .tasks-head,.page.split-page .banner{flex:none}
  .grid-12.split{flex:1;min-height:0}
  .grid-12.split>.split-col{align-self:stretch;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .split-col>*{flex:none}
  .split-col.list-card>.tl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .split-col.thread-card>.thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}

:root{--run-text:#1D4ED8;--run-bg:rgba(37,99,235,.10);--run-dot:#2563EB}
:root[data-theme=dark]{--run-text:#93B4FF;--run-bg:rgba(96,140,255,.16);--run-dot:#6E9BFF}
.badge.b-run{background:var(--run-bg);color:var(--run-text)}
.badge.b-run .dot{background:var(--run-dot)}
.badge.b-todo{background:var(--idle-bg);color:var(--content-strong)}
.badge.b-todo .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--content-strong)}
.badge.b-run{background:var(--run-bg);color:var(--run-text)}
.badge.b-run .dot{background:var(--run-dot)}
.badge.b-todo{background:var(--idle-bg);color:var(--content-strong)}
.badge.b-todo .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--content-strong)}

/* Add-member page: prompt/command blocks stay compact and scroll inside. */
.code.code-compact .code-body pre{max-height:168px;overflow-y:auto}

.code-h>span{min-width:0}
.code .mcp-foot{padding:4px 16px 12px}
.code .code-body .help{padding:0 16px 12px}
.code .code-body .help:first-child{padding-top:12px}
.mcp-copied{font-size:12px;line-height:16px;color:var(--content-lighter);white-space:nowrap}

/* CREWAi wordmark (logo chot 30/10: Archivo 800, chu i cuoi viet thuong) */
/* CREWAi wordmark (logo chot 30/10: Archivo 800, chu i cuoi viet thuong).
   Mask, khong dung <img>: cong xss_inert cua S9 cam <img> ngoai sprite SVG. */
.brand-name{display:inline-flex;align-items:center}
.brand-logo{display:inline-block;width:92px;height:26px;background:var(--content-strong);-webkit-mask:url(/ui/crewai-logo.svg) no-repeat center/contain;mask:url(/ui/crewai-logo.svg) no-repeat center/contain}

/* Batch 1: Add-member DONE state (confetti completion card). */
.add-done .col-7 { display: none; }
.add-done .col-5 > .card.flat:not(#ready-conn) { display: none; }
.add-done .col-5 > .card-f { display: none; }
.done-head { display: flex; gap: 12px; align-items: center; padding: 16px 16px 4px; }
.done-av { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; background: var(--surface-100); }
.done-ticks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; }
.done-ticks span { font-size: 13px; }
.done-line { padding: 4px 16px 12px; font-weight: 600; }

.done-tick{display:inline-flex;align-items:center;gap:4px}
.done-tick .ic{width:12px;height:12px;stroke-width:2.5}

.nav-ic{display:inline-block;flex:none;width:16px;height:16px;fill:currentColor;stroke:none}
.brand-mark{display:none;font-size:16px;line-height:16px;font-weight:800;color:var(--content-strong)}
.side-toggle{justify-content:flex-start;gap:8px;margin:0;padding:0 16px;color:var(--content-lighter)}
.side-toggle:hover{color:var(--content-strong)}
@media (max-width:767px){.side-toggle{display:none}}
@media (min-width:768px){
  html[data-side="rail"] .hdr{width:60px}
  html[data-side="rail"] .brand{justify-content:center;padding:0}
  html[data-side="rail"] .brand-logo{display:none}
  html[data-side="rail"] .brand-mark{display:inline-block}
  html[data-side="rail"] .nav-ic{width:16px;height:16px}
  html[data-side="rail"] .nav .nav-i{justify-content:center;padding:0}
  html[data-side="rail"] .nav-l,html[data-side="rail"] .nav-chev,html[data-side="rail"] .nav .nav-n{display:none}
  html[data-side="rail"] .nav-g{position:relative}
  html[data-side="rail"] .nav .nav-sub{display:none;position:absolute;left:100%;top:0;min-width:208px;padding:6px;background:var(--surface);border:1px solid var(--stroke-base);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:60}
  html[data-side="rail"] .nav-g:hover .nav-sub,html[data-side="rail"] .nav-g:focus-within .nav-sub{display:block}
  html[data-side="rail"] .nav-sub::before{display:none}
  html[data-side="rail"] .nav-sub .nav-l{display:inline}
  html[data-side="rail"] .nav-sub .nav-n{display:inline-block}
  html[data-side="rail"] .nav .nav-s{padding:0 12px}
  html[data-side="rail"] .hdr-right{padding:8px 6px}
  html[data-side="rail"] .hdr-right .state{justify-content:center;padding:0;font-size:0;line-height:0}
  html[data-side="rail"] .hdr-out{justify-content:center;padding:0}
  html[data-side="rail"] .hdr-out span{display:none}
  html[data-side="rail"] .side-toggle{justify-content:center;padding:0}
  html[data-side="rail"] .side-toggle span{display:none}
}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;padding:4px 16px 16px}
.hm-spark{height:40px;margin-top:6px}
.funnel-box{height:230px}
.rank-box{height:150px}
.inc-chart{height:180px}

.msg-x{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.rep-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:8px 0;border-top:1px solid var(--stroke-base)}
.rep-md{white-space:pre-wrap;font:inherit;font-size:14px;line-height:21px;margin:0}
.kn-row{padding:10px 0;border-top:1px solid var(--stroke-base)}
.kn-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:6px}

.info-row{display:flex;gap:8px;align-items:center}
.info-row-top{align-items:flex-start}
.info-row .input,.info-row .textarea{flex:1 1 auto;min-width:0;width:auto}
.info-row .btn{flex:none}
.info-row{display:flex;gap:8px;align-items:center}.info-row-top{align-items:flex-start}.info-row .input,.info-row .textarea{flex:1;min-width:0;width:auto}.info-row .btn{flex:none}