/* ==========================================================================
   Japan Go-Live · design tokens + component styles · v1
   Fonts (Google Fonts): IBM Plex Sans, IBM Plex Sans JP, IBM Plex Mono
   Theme: .jgl = light, .jgl.dark = dark. Language: lang="ja" on any node.
   ========================================================================== */

/* ---------- Tokens · light ---------- */
.jgl{
  /* neutrals, cool hue ~228 */
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#F0F2F6; --surface-3:#E4E7EE;
  --hover:#EBEEF4; --selected:#E8EBFA;
  --line:#DBDFE7; --line-strong:#BCC3D0; --field-line:#7F8CA5;
  --text:#121620; --text-2:#434A5C; --text-3:#5C6478;
  /* accent: ai (indigo) */
  --accent:#3340A6; --accent-hover:#28338C; --accent-weak:#E9ECFB; --accent-line:#A9B1EA; --on-accent:#FFFFFF;
  --focus:#3340A6; --focus-halo:rgba(51,64,166,.22);
  --ink:#121620; --on-ink:#FFFFFF;
  --scrim:rgba(14,18,28,.48);
  --toast-bg:#1B2030; --toast-fg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(16,22,36,.06),0 0 0 1px rgba(16,22,36,.03);
  --shadow-2:0 4px 12px rgba(16,22,36,.08),0 1px 3px rgba(16,22,36,.06);
  --shadow-3:0 18px 44px rgba(16,22,36,.18),0 2px 6px rgba(16,22,36,.08);
  /* messages */
  --ok:#1B6E35; --ok-bg:#E6F4EA; --ok-line:#8CC79E;
  --warn:#8A5000; --warn-bg:#FFF3DC; --warn-line:#E0A64A;
  --danger:#B42318; --danger-bg:#FDECEA; --danger-line:#E8958D;
  --info:#1D57B0; --info-bg:#E8F0FC; --info-line:#93B4E6;
  /* task status: bg / fg / line / solid (bars, gantt) */
  --s-plan-bg:#FFFFFF;  --s-plan-fg:#3B4254;  --s-plan-ln:#818BA0;  --s-plan-solid:#C5CBD6;
  --s-prog-bg:#E2F3F6;  --s-prog-fg:#065564;  --s-prog-ln:#3B98AB;  --s-prog-solid:#1A8BA1;
  --s-eval-bg:#F1EAFB;  --s-eval-fg:#56288C;  --s-eval-ln:#9C72CF;  --s-eval-solid:#8150C2;
  --s-done-bg:#E4F2E8;  --s-done-fg:#195B2C;  --s-done-ln:#5FA676;  --s-done-solid:#2E8A4B;
  --s-block-bg:#B42318; --s-block-fg:#FFFFFF; --s-block-ln:#8C1A11; --s-block-solid:#C4282E;
  --s-skipq-bg:#FFF2DA; --s-skipq-fg:#844800; --s-skipq-ln:#BE7E1F; --s-skipq-solid:#DD8E1F;
  --s-skip-bg:#ECEEF2;  --s-skip-fg:#434A5B;  --s-skip-ln:#A2A9B7;  --s-skip-solid:#8A92A3;
  --s-na-bg:transparent;--s-na-fg:#596174;   --s-na-ln:#828C9F;    --s-na-solid:#D6DAE2;
  /* flags */
  --f-upd-bg:#EEF1F6; --f-upd-fg:#47506A; --f-upd-ln:#A6AFC2;
  --f-att-bg:#FFEDE2; --f-att-fg:#9A3600; --f-att-ln:#E2834A;
  --f-tr-bg:#EEEBFA;  --f-tr-fg:#4B3A9A;  --f-tr-ln:#A99BDE;
  /* run identity */
  --run-mock-bg:#F3F4F7; --run-mock-fg:#434A5C; --run-mock-ln:#7F8CA5;
  --run-live-bg:#3340A6; --run-live-fg:#FFFFFF; --run-live-ln:#3340A6;
  /* type */
  --font-ui:"IBM Plex Sans","IBM Plex Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ja:"IBM Plex Sans JP","IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","IBM Plex Sans JP",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px;
  --fs-24:24px; --fs-32:32px; --fs-48:48px; --fs-72:72px;
  /* space (4px base, 2px half-step) */
  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:16px; --sp-7:20px; --sp-8:24px; --sp-9:32px; --sp-10:48px;
  /* radius */
  --r-1:3px; --r-2:5px; --r-3:8px; --r-4:12px; --r-pill:999px;
  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,.2,1);
  /* density */
  --row-pad:10px; --row-pad-compact:4px;

  font-family:var(--font-ui); font-size:13px; line-height:1.45; color:var(--text); background:var(--bg);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
/* ---------- Tokens · dark ---------- */
.jgl.dark{
  --bg:#0A0D13; --surface:#11151D; --surface-2:#161B25; --surface-3:#1F2531;
  --hover:#1A2030; --selected:#283063;
  --line:#252C3A; --line-strong:#384154; --field-line:#596785;
  --text:#E6E9F0; --text-2:#AAB1C0; --text-3:#8A92A4;
  --accent:#98A3FF; --accent-hover:#B3BBFF; --accent-weak:#1C2147; --accent-line:#4B55A8; --on-accent:#0A0D13;
  --focus:#A9B3FF; --focus-halo:rgba(152,163,255,.28);
  --ink:#E6E9F0; --on-ink:#0A0D13;
  --scrim:rgba(0,0,0,.62);
  --toast-bg:#2A3142; --toast-fg:#E6E9F0;
  --shadow-1:0 0 0 1px rgba(0,0,0,.3);
  --shadow-2:0 4px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03);
  --shadow-3:0 20px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  --ok:#6FD08F; --ok-bg:#12291A; --ok-line:#2F6B43;
  --warn:#F2B45A; --warn-bg:#2B210F; --warn-line:#7A5520;
  --danger:#FF8A85; --danger-bg:#2E1414; --danger-line:#7E302C;
  --info:#8DB8FF; --info-bg:#13213A; --info-line:#2E4D80;
  --s-plan-bg:transparent; --s-plan-fg:#C2C8D4; --s-plan-ln:#596276; --s-plan-solid:#3A4356;
  --s-prog-bg:#0C303A;  --s-prog-fg:#7DD9EA;  --s-prog-ln:#2A8DA2;  --s-prog-solid:#2FA8C0;
  --s-eval-bg:#2A1E43;  --s-eval-fg:#CDB4F4;  --s-eval-ln:#7F5CB7;  --s-eval-solid:#9B74DA;
  --s-done-bg:#12301C;  --s-done-fg:#8EDDA6;  --s-done-ln:#3C8A55;  --s-done-solid:#43A866;
  --s-block-bg:#F0696D; --s-block-fg:#1E0405; --s-block-ln:#F0696D; --s-block-solid:#F0696D;
  --s-skipq-bg:#33250B; --s-skipq-fg:#FFC979; --s-skipq-ln:#B9832D; --s-skipq-solid:#E3A23E;
  --s-skip-bg:#222836;  --s-skip-fg:#B9BFCC;  --s-skip-ln:#4F576A;  --s-skip-solid:#6E7689;
  --s-na-bg:transparent;--s-na-fg:#98A0B1;    --s-na-ln:#5C6780;    --s-na-solid:#2C3342;
  --f-upd-bg:#1C2230; --f-upd-fg:#B9C2D6; --f-upd-ln:#4E5A74;
  --f-att-bg:#33190B; --f-att-fg:#FFAD7A; --f-att-ln:#8A4521;
  --f-tr-bg:#221D3E;  --f-tr-fg:#C3B6F6;  --f-tr-ln:#5A4DA0;
  --run-mock-bg:#181D27; --run-mock-fg:#C2C8D4; --run-mock-ln:#5D6880;
  --run-live-bg:#98A3FF; --run-live-fg:#0A0D13; --run-live-ln:#98A3FF;
}
.jgl[lang="ja"], .jgl [lang="ja"]{font-family:var(--font-ja); line-height:1.6}
.jgl *, .jgl *::before, .jgl *::after{box-sizing:border-box}
:where(.jgl) :where(button, input, select, textarea){font:inherit; color:inherit}
.btn-reset{appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:inherit; cursor:pointer}
.jgl[lang="ja"], .jgl [lang="ja"]{word-break:auto-phrase; line-break:strict}
.jgl[lang="ja"] :is(.xs,.cap,.fstat,.badge,.tag,.thead,.etype,.role,.mockchip,.cnt,.zone,.kbd,.spec,.co,.nav .grp,.legend,.tbl th,.xg th,.nu,.lockln,.posts-teams){font-size:12px}
.jgl :focus-visible, .jgl .is-focus{outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 5px var(--focus-halo)}
@media (prefers-reduced-motion: reduce){ .jgl *{animation:none !important; transition:none !important} .jgl .trow.flash{background:var(--accent-weak)} }

/* ---------- Status sets (custom props only) ---------- */
.st-plan {--c-bg:var(--s-plan-bg); --c-fg:var(--s-plan-fg); --c-ln:var(--s-plan-ln); --c-solid:var(--s-plan-solid)}
.st-prog {--c-bg:var(--s-prog-bg); --c-fg:var(--s-prog-fg); --c-ln:var(--s-prog-ln); --c-solid:var(--s-prog-solid)}
.st-eval {--c-bg:var(--s-eval-bg); --c-fg:var(--s-eval-fg); --c-ln:var(--s-eval-ln); --c-solid:var(--s-eval-solid)}
.st-done {--c-bg:var(--s-done-bg); --c-fg:var(--s-done-fg); --c-ln:var(--s-done-ln); --c-solid:var(--s-done-solid)}
.st-block{--c-bg:var(--s-block-bg);--c-fg:var(--s-block-fg);--c-ln:var(--s-block-ln);--c-solid:var(--s-block-solid)}
.st-skipq{--c-bg:var(--s-skipq-bg);--c-fg:var(--s-skipq-fg);--c-ln:var(--s-skipq-ln);--c-solid:var(--s-skipq-solid)}
.st-skip {--c-bg:var(--s-skip-bg); --c-fg:var(--s-skip-fg); --c-ln:var(--s-skip-ln); --c-solid:var(--s-skip-solid)}
.st-na   {--c-bg:var(--s-na-bg);   --c-fg:var(--s-na-fg);   --c-ln:var(--s-na-ln);   --c-solid:var(--s-na-solid)}

/* Status glyphs: each status has its own shape, so colour is never the only cue */
.sg{display:inline-block; width:10px; height:10px; flex:none}
.st-plan .sg, .sg.st-plan{border:1.5px solid currentColor; border-radius:50%}
.st-prog .sg, .sg.st-prog{border:1.5px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.st-eval .sg, .sg.st-eval{border:1.5px solid currentColor; border-radius:50%; background:radial-gradient(circle,currentColor 0 1.7px,transparent 2.2px)}
.st-done .sg, .sg.st-done{background:currentColor; -webkit-mask:var(--m-check) center/100% no-repeat; mask:var(--m-check) center/100% no-repeat}
.st-block .sg,.sg.st-block{background:currentColor; -webkit-mask:var(--m-stop) center/100% no-repeat; mask:var(--m-stop) center/100% no-repeat}
.st-skipq .sg,.sg.st-skipq{background:currentColor; clip-path:polygon(0 0,100% 0,100% 10%,60% 50%,100% 90%,100% 100%,0 100%,0 90%,40% 50%,0 10%)}
.st-skip .sg, .sg.st-skip{background:currentColor; -webkit-mask:var(--m-ff) center/100% no-repeat; mask:var(--m-ff) center/100% no-repeat}
.st-na .sg,   .sg.st-na{border:1.5px solid currentColor; border-radius:50%; background:linear-gradient(135deg,transparent 43%,currentColor 43% 57%,transparent 57%)}
.sg.lg{width:14px; height:14px}
.sg.xl{width:22px; height:22px; border-width:2.5px}

/* ---------- Status pill + picker ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px 0 7px; border-radius:var(--r-pill);
  border:1px solid var(--c-ln); background:var(--c-bg); color:var(--c-fg); font-size:12px; font-weight:500; line-height:1; white-space:nowrap}
.pill.st-skipq, .pill.st-na{border-style:dashed}
.pill.st-block{font-weight:600}
.pill.st-skip, .pill.st-na{text-decoration:none}
.pill.lg{height:28px; font-size:13px; padding:0 11px 0 9px; gap:7px}
.pill.lg .sg{width:12px; height:12px}
.pill.xl{height:44px; font-size:20px; padding:0 18px 0 14px; gap:10px; font-weight:600}
.pill.xl .sg{width:18px; height:18px; border-width:2px}
button.pill{cursor:pointer}
.pill.picker::after{content:""; width:5px; height:5px; margin:-3px 0 0 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.75}
.pill.picker:hover, .pill.picker.is-hover{box-shadow:0 0 0 3px var(--hover); filter:saturate(1.1)}
.pill.picker[disabled]{cursor:not-allowed; opacity:.55}
.pill.picker.is-ro::after{display:none}
.pill.is-saving{border-style:dotted}
.menu{display:flex; flex-direction:column; padding:4px; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow-2)}
.menu-i{display:flex; align-items:center; gap:8px; height:30px; padding:0 8px; border:0; border-radius:var(--r-2); background:transparent; text-align:left; font-size:13px}
.menu-i:hover, .menu-i.is-hover{background:var(--hover)}
.menu-i[aria-checked="true"]{background:var(--selected)}
.menu-i .k{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-3)}
.menu-sep{height:1px; background:var(--line); margin:4px 0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-2);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease)}
.btn:hover, .btn.is-hover{background:var(--hover); border-color:var(--text-3)}
.btn:active, .btn.is-active{background:var(--surface-3)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover, .btn.primary.is-hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.ink{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.jgl.dark .btn.danger{color:#1E0405}
.btn.ghost{background:transparent; border-color:transparent; color:var(--text-2)}
.btn.ghost:hover, .btn.ghost.is-hover{background:var(--hover); color:var(--text)}
.btn.sm{height:26px; padding:0 9px; font-size:12px; gap:5px}
.btn.xs{height:22px; padding:0 7px; font-size:11px; gap:4px}
.btn.icon{width:32px; padding:0}
.btn.sm.icon{width:26px}
.btn.lg{height:40px; padding:0 18px; font-size:14px}
.btn.is-loading{color:transparent !important; position:relative; pointer-events:none}
.btn.is-loading::after{content:""; position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid var(--text-3); border-top-color:transparent; animation:spin .8s linear infinite}
.btn.primary.is-loading::after{border-color:var(--on-accent); border-top-color:transparent}
.btn.start, .btn.complete{color:var(--text); border-color:var(--field-line)}
.trow .qa{visibility:hidden}
.trow:hover .qa, .trow:focus-within .qa, .trow.is-hover .qa, .trow.focus .qa, .trow.show-qa .qa{visibility:visible}
@media (hover:none){.trow .qa{visibility:visible}}
.spin{display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .8s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.kbd{display:inline-block; font-family:var(--font-mono); font-size:11px; line-height:16px; padding:0 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px; background:var(--surface); color:var(--text-2)}

/* ---------- Segmented control (time zone, language, zoom, density) ---------- */
.segc{display:inline-flex; padding:2px; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-2)}
.segc button{height:24px; padding:0 9px; border:0; border-radius:3px; background:transparent; color:var(--text-2); font-size:12px; font-weight:500; cursor:pointer}
.segc button:hover{color:var(--text)}
.segc button[aria-pressed="true"]{background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow-1), inset 0 -2px 0 var(--accent)}
.jgl.dark .segc button[aria-pressed="true"]{background:var(--surface-3)}

/* ---------- Text helpers ---------- */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.id{font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--text); letter-spacing:-.01em; white-space:nowrap}
.t2{color:var(--text-2)} .t3{color:var(--text-3)}
.xs{font-size:11px} .sm{font-size:12px} .md{font-size:14px} .lg{font-size:16px}
.b5{font-weight:500} .b6{font-weight:600}
.cap{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2)}
.jgl[lang="ja"] .cap, .jgl [lang="ja"] .cap{letter-spacing:.02em; text-transform:none}
.h1{font-size:20px; font-weight:600; letter-spacing:-.005em; margin:0; line-height:1.25}
.h2{font-size:16px; font-weight:600; margin:0; line-height:1.3}
.h3{font-size:14px; font-weight:600; margin:0}
.link{color:var(--accent); text-decoration:none; font-weight:500}
.link:hover{text-decoration:underline}
.ell{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.zone{display:inline-flex; align-items:center; height:18px; padding:0 4px; border:1px solid var(--line-strong); border-radius:3px; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--text-2); letter-spacing:.02em; vertical-align:middle}
.dot-sep::before{content:"·"; margin:0 6px; color:var(--text-3)}
.hr{height:1px; background:var(--line); border:0; margin:0}

/* ---------- Badges & flags ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:4px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text-2); font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap; line-height:1}
.badge .ic{width:12px; height:12px}
.dia{display:inline-block; width:7px; height:7px; flex:none; background:currentColor; transform:rotate(45deg)}
.dia.o{background:transparent; border:1.5px solid currentColor}
.b-gate{background:var(--surface); border:1.5px solid var(--ink); color:var(--ink)}
.b-gate .dia{background:transparent; border:1.5px solid currentColor}
.b-gate-ok{background:transparent; border-color:var(--line-strong); color:var(--text-2)}
.b-gate-ok .dia{background:currentColor; border:0}
.b-next{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.b-decision{border-color:var(--accent-line); color:var(--accent); background:var(--accent-weak)}
.b-phaseend{border-color:var(--line-strong); color:var(--text-2)}
.b-milestone{border-color:var(--line-strong); color:var(--text)}
.b-mock{border:1px dashed var(--run-mock-ln); background:var(--run-mock-bg); color:var(--run-mock-fg)}
.b-live{border-color:var(--run-live-ln); color:var(--accent); background:var(--accent-weak)}
.f-upd{border-color:var(--f-upd-ln); background:var(--f-upd-bg); color:var(--f-upd-fg)}
.f-att{border-color:var(--f-att-ln); background:var(--f-att-bg); color:var(--f-att-fg)}
.f-tr{border-color:var(--f-tr-ln); background:var(--f-tr-bg); color:var(--f-tr-fg)}
.tag{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; border:1px solid var(--line-strong); color:var(--text-2); background:var(--surface)}
.tag.ok{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.tag.warn{border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}
.tag.danger{border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger)}
.tag.info{border-color:var(--info-line); background:var(--info-bg); color:var(--info)}
.tag.accent{border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent)}
.tag.solid-danger{border-color:var(--s-block-bg); background:var(--s-block-bg); color:var(--s-block-fg)}
.tag.dashed{border-style:dashed}
.tag.strike{text-decoration:line-through; color:var(--text-3)}
.tag .ic{width:12px; height:12px}

/* Priority: bar glyph fills 1–4; Critical is the only solid red */
.prio{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; white-space:nowrap}
.bars{display:inline-flex; align-items:flex-end; gap:1.5px; height:12px}
.bars i{width:3px; border-radius:1px; background:var(--line-strong)}
.bars i:nth-child(1){height:4px} .bars i:nth-child(2){height:7px} .bars i:nth-child(3){height:10px} .bars i:nth-child(4){height:12px}
.p-low{color:var(--text-2)} .p-low .bars i:nth-child(-n+1){background:currentColor}
.p-med{color:var(--info)} .p-med .bars i:nth-child(-n+2){background:currentColor}
.p-high{color:var(--warn)} .p-high .bars i:nth-child(-n+3){background:currentColor}
.p-crit{color:var(--s-block-fg); background:var(--s-block-bg); padding:0 7px 0 6px; height:20px; border-radius:4px; font-weight:600}
.p-crit .bars i{background:currentColor}

/* Run badge, countdown, Mock result chip */
.run{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 9px 0 3px; border-radius:var(--r-2); font-size:12px; font-weight:500; white-space:nowrap; border:1px solid}
.run b{display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.run.mock{border-style:dashed; border-color:var(--run-mock-ln); background:var(--run-mock-bg); color:var(--run-mock-fg)}
.run.mock b{background:transparent; border:1px dashed var(--run-mock-ln)}
.run.live{border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent)}
.run.live b{background:var(--run-live-bg); color:var(--run-live-fg)}
.countdown{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; color:var(--text-2); white-space:nowrap}
.countdown .n{font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--text)}
.mockchip{display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 7px; border:1px dashed var(--run-mock-ln); border-radius:4px;
  background:var(--run-mock-bg); color:var(--run-mock-fg); font-size:11px; font-weight:500; white-space:nowrap; line-height:1}
.mockchip .sg{width:9px; height:9px}
.mockchip .d{font-family:var(--font-mono)}
.mockchip.over{border-style:solid; border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}
.mockchip.over .tri{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:7px solid currentColor}

/* ---------- Progress ---------- */
.sbar{display:flex; gap:1px; height:10px; border-radius:3px; overflow:hidden; background:var(--surface-3)}
.sbar > i{display:block; height:100%; background:var(--c-solid)}
.sbar > i.st-skip, .sbar > i.st-na{background:repeating-linear-gradient(135deg,var(--c-solid) 0 3px,transparent 3px 5px), var(--surface-3)}
.sbar > i.st-skipq{background:repeating-linear-gradient(90deg,var(--c-solid) 0 4px,transparent 4px 6px)}
.sbar > i.st-block, .gbar.st-block > i{background:repeating-linear-gradient(45deg,var(--c-solid) 0 3px,var(--surface) 3px 4.5px)}
.sbar > i.st-eval, .gbar.st-eval > i{background:radial-gradient(circle,var(--surface) 0 1px,transparent 1.4px) 0 0/4px 4px, var(--c-solid)}
.sbar.slim{height:5px; border-radius:2px}
.sbar.xl{height:22px; border-radius:4px; gap:2px}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-2)}
.lg-i{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.lg-i .sg{color:var(--c-solid)}
.st-plan.lg-i .sg{color:var(--s-plan-ln)}
.lg-i .n{font-family:var(--font-mono); color:var(--text); font-weight:500}

.tile{display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); text-decoration:none; color:inherit; min-width:0}
.tile:hover, .tile.is-hover{border-color:var(--text-3)}
.tile .v{font-family:var(--font-mono); font-size:28px; font-weight:500; line-height:1; color:var(--text); letter-spacing:-.02em}
.tile .l{font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:6px}
.tile .go{font-size:11px; color:var(--accent); font-weight:500; margin-top:auto}
.tile.alert{border-color:var(--danger-line); background:var(--danger-bg)}
.tile.alert .v, .tile.alert .l{color:var(--danger)}
.tile.warn{border-color:var(--warn-line); background:var(--warn-bg)}
.tile.warn .v, .tile.warn .l{color:var(--warn)}

/* ---------- Icons (line, 16px, stroke 1.5) ---------- */
.ic{display:inline-block; width:16px; height:16px; flex:none; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat}
.ic.s12{width:12px; height:12px} .ic.s14{width:14px; height:14px} .ic.s20{width:20px; height:20px} .ic.s24{width:24px; height:24px}
.jgl{
  --m-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8.5l3.7 3.7 7.3-8'/></svg>");
  --m-stop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' fill='black' d='M5 .5h6L15.5 5v6L11 15.5H5L.5 11V5zM3.5 6.6h9v2.8h-9z'/></svg>");
  --m-ff:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 2l7 6-7 6zM8 2l7 6-7 6z' fill='black'/></svg>");
}
.i-search{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5 14 14'/></svg>")}
.i-chev-d{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>")}
.i-chev-r{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4l4 4-4 4'/></svg>")}
.i-chev-l{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4 6 8l4 4'/></svg>")}
.i-x{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>")}
.i-lock{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='7' width='9' height='6.5' rx='1.5'/><path d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/></svg>")}
.i-clock{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6'/><path d='M8 4.5V8l2.5 1.5'/></svg>")}
.i-globe{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6'/><path d='M2 8h12M8 2c1.8 2 1.8 10 0 12M8 2c-1.8 2-1.8 10 0 12'/></svg>")}
.i-user{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='5.5' r='2.5'/><path d='M3 13.5c.8-2.5 2.8-3.5 5-3.5s4.2 1 5 3.5'/></svg>")}
.i-user-x{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='5.5' r='2.5'/><path d='M2 13.5c.8-2.5 2.8-3.5 5-3.5 1 0 2 .2 2.8.7M11 10.5l3 3M14 10.5l-3 3'/></svg>")}
.i-people{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5.5' r='2.2'/><path d='M2 13c.6-2.2 2.2-3.2 4-3.2s3.4 1 4 3.2M10.5 3.5a2 2 0 0 1 0 4M12 9.8c1 .4 1.7 1.4 2 3.2'/></svg>")}
.i-play{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3.5v9l7-4.5z'/></svg>")}
.i-check{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>")}
.i-alert{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2.5 14 13H2z'/><path d='M8 6.5v3M8 11.2v.3'/></svg>")}
.i-info{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6'/><path d='M8 7.5v4M8 5v.2'/></svg>")}
.i-octa{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 2h5L14 5.5v5L10.5 14h-5L2 10.5v-5z'/><path d='M8 5v3.5M8 10.8v.2'/></svg>")}
.i-q{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 3h11v8H7.5l-3 2.5V11h-2z'/><path d='M6.5 5.6a1.5 1.5 0 1 1 2 1.4c-.4.2-.5.5-.5.9M8 9.3v.1'/></svg>")}
.i-msg{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 3h11v8H7.5l-3 2.5V11h-2z'/></svg>")}
.i-note{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 2.5h9v11h-9z'/><path d='M6 5.5h4M6 8h4M6 10.5h2'/></svg>")}
.i-filter{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 3.5h11L9.5 8.5v4l-3 1.5V8.5z'/></svg>")}
.i-download{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2.5v8M4.5 7.5 8 11l3.5-3.5M3 13.5h10'/></svg>")}
.i-upload{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 10.5v-8M4.5 6 8 2.5 11.5 6M3 13.5h10'/></svg>")}
.i-cal{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='3.5' width='11' height='10' rx='1.5'/><path d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/></svg>")}
.i-link{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9a3 3 0 0 0 4.2 0l2-2A3 3 0 0 0 9 2.8l-.8.8M9 7a3 3 0 0 0-4.2 0l-2 2A3 3 0 0 0 7 13.2l.8-.8'/></svg>")}
.i-ext{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2.5h4v4M13.5 2.5 7.5 8.5M12 9.5v4H2.5V4h4'/></svg>")}
.i-plus{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3v10M3 8h10'/></svg>")}
.i-swap{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 5.5h10L10 3M13.5 10.5h-10L6 13'/></svg>")}
.i-more{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M3.5 8h.01M8 8h.01M12.5 8h.01'/></svg>")}
.i-refresh{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13 8a5 5 0 1 1-1.5-3.6M13 2.5v3h-3'/></svg>")}
.i-gate{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.5 14.5 8 8 14.5 1.5 8z' fill='black'/></svg>")}
.i-gate-o{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M8 2 14 8 8 14 2 8z'/></svg>")}
.i-fork{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14V9M8 9 4 5M8 9l4-4M2.5 5.5V2.5h3M13.5 5.5V2.5h-3'/></svg>")}
.i-flag{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 14V2.5M3.5 3h8l-1.5 3 1.5 3h-8'/></svg>")}
.i-end{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8h8M8 5l3 3-3 3M13.5 3v10'/></svg>")}
.i-edit{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 2.5l3 3-8 8H2.5v-3z'/></svg>")}
.i-trash{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5h10M6.5 4.5v-2h3v2M4.5 4.5l.5 9h6l.5-9'/></svg>")}
.i-sort{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v10M2.5 10.5 5 13l2.5-2.5M11 13V3M8.5 5.5 11 3l2.5 2.5'/></svg>")}
.i-sort-d{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3v10M4.5 9.5 8 13l3.5-3.5'/></svg>")}
.i-translate{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 3.5h7M5 2v1.5M3 3.5c.5 2.5 2 4.3 4.5 5.3M7 3.5c-.5 2.5-2 4.3-4.5 5.3M8.5 14l2.7-6.5 2.8 6.5M9.4 12h3.6'/></svg>")}
.i-dash{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='2.5' y='2.5' width='4.5' height='5' rx='1'/><rect x='9' y='2.5' width='4.5' height='3' rx='1'/><rect x='9' y='7.5' width='4.5' height='6' rx='1'/><rect x='2.5' y='9.5' width='4.5' height='4' rx='1'/></svg>")}
.i-list{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M6 4h7.5M6 8h7.5M6 12h7.5M2.5 4h.5M2.5 8h.5M2.5 12h.5'/></svg>")}
.i-gantt{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M2 2v12h12'/><path d='M4.5 5h5M7 8h5M5.5 11h4' stroke-width='2'/></svg>")}
.i-issue{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='8' cy='8' r='5.8'/><path d='M8 5v3.5M8 10.8v.2'/></svg>")}
.i-bulb{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5h4M6.5 14.5h3M8 1.5a4.5 4.5 0 0 0-2.5 8.2V11h5V9.7A4.5 4.5 0 0 0 8 1.5z'/></svg>")}
.i-inbox{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 9.5 4 3.5h8l1.5 6v4h-11zM2.5 9.5H6l.5 1.5h3l.5-1.5h3.5'/></svg>")}
.i-doc{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 1.5h6l3 3v10h-9z'/><path d='M9.5 1.5v3h3'/></svg>")}
.i-pulse{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 8h3l2-5 3 10 2-5h3'/></svg>")}
.i-review{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 2h5v2h-5z'/><path d='M10.5 3h2v11.5h-9V3h2'/><path d='M5.5 9.5l1.8 1.8 3.2-3.3'/></svg>")}
.i-grid{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='2' y='2.5' width='12' height='11' rx='1'/><path d='M2 6h12M2 9.5h12M6 2.5v11'/></svg>")}
.i-shield{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M8 1.5 13 3.5v4c0 3.2-2.2 5.6-5 7-2.8-1.4-5-3.8-5-7v-4z'/></svg>")}
.i-signout{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2.5H3v11h3M10 5l3 3-3 3M13 8H6'/></svg>")}
.i-reply{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 4 2.5 7.5l4 3.5M2.5 7.5h7a4 4 0 0 1 4 4v1'/></svg>")}
.i-at{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='8' cy='8' r='2.5'/><path d='M10.5 8v1a2 2 0 0 0 4 0V8a6.5 6.5 0 1 0-2.5 5.1'/></svg>")}
.i-hour{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2h8M4 14h8M5 2.5v1.8L8 8l3-3.7V2.5M5 13.5v-1.8L8 8l3 3.7v1.8'/></svg>")}
.i-skip{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3.5 9 8l-6 4.5zM12.5 3.5v9'/></svg>")}
.i-eye{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z'/><circle cx='8' cy='8' r='2'/></svg>")}
.i-columns{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='2' y='2.5' width='12' height='11' rx='1'/><path d='M6 2.5v11M10 2.5v11'/></svg>")}
.i-merge{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2.5v3c0 2 4 2.5 4 5v3M12 2.5v3c0 2-4 2.5-4 5M5.5 12 8 14.5 10.5 12'/></svg>")}
.i-history{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8a5.5 5.5 0 1 0 1.6-3.9M2.5 2.5v2.5H5M8 5v3l2 1.5'/></svg>")}
.i-teams{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4.5h7v7H2z'/><path d='M4 6.5h3M5.5 6.5v3.5M11 6h2.5v4.5a2 2 0 0 1-2.5 1.9'/><circle cx='12' cy='3.2' r='1.2'/></svg>")}
.i-diff{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 2.5v6M1.5 5.5h6M8.5 11.5h6M3 13.5h4'/></svg>")}
.i-save{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M2.5 2.5h9l2 2v9h-11z'/><path d='M5 2.5v3.5h5V2.5M5 13.5v-4h6v4'/></svg>")}
.i-restore{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8a5 5 0 1 0 1.5-3.6M3 2.5v2.5h2.5'/></svg>")}
.i-keyboard{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='4' width='13' height='8.5' rx='1.5'/><path d='M4 6.5h.5M6.5 6.5H7M9 6.5h.5M11.5 6.5h.5M4.5 10h7'/></svg>")}
.i-menu{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M2.5 4h11M2.5 8h11M2.5 12h11'/></svg>")}

/* ---------- Shell ---------- */
.topbar{display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:nowrap; min-width:0}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; letter-spacing:-.005em; white-space:nowrap; color:var(--text); text-decoration:none}
.mark{display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--ink); flex:none}
.mark i{display:block; width:9px; height:9px; border:2px solid var(--on-ink); transform:rotate(45deg)}
.vsep{width:1px; height:24px; background:var(--line); flex:none}
.me{display:flex; align-items:center; gap:8px; white-space:nowrap}
.av{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--surface-3); color:var(--text-2); font-size:11px; letter-spacing:-.02em; font-weight:600; flex:none; letter-spacing:.02em}
.av.s18{width:20px; height:20px; font-size:11px}
.av.s28{width:28px; height:28px; font-size:11px}
.av.s32{width:32px; height:32px; font-size:12px}
.nav{display:flex; flex-direction:column; gap:1px; padding:12px 8px; background:var(--surface)}
.nav a{display:flex; align-items:center; gap:10px; height:32px; padding:0 8px 0 10px; border-radius:var(--r-2); color:var(--text-2); text-decoration:none; font-weight:500; white-space:nowrap}
.nav a:hover, .nav a.is-hover{background:var(--hover); color:var(--text)}
.nav a[aria-current="page"]{background:var(--selected); color:var(--accent); font-weight:600}
.nav .n{margin-left:auto; min-width:22px; height:18px; padding:0 6px; border-radius:9px; background:var(--surface-3); color:var(--text-2); font-family:var(--font-mono); font-size:11px; font-weight:500; display:grid; place-items:center}
.nav .n.alert{background:var(--danger); color:#fff}
.jgl.dark .nav .n.alert{color:#1E0405}
.nav .grp{display:flex; align-items:center; gap:6px; padding:14px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}

/* ---------- Filters ---------- */
.fbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.search{display:flex; align-items:center; gap:8px; height:32px; padding:0 10px; border:1px solid var(--field-line); border-radius:var(--r-2); background:var(--surface); color:var(--text-3); min-width:240px}
.search input{border:0; background:transparent; outline:none; flex:1; min-width:0; font-size:13px; color:var(--text)}
.search input::placeholder{color:var(--text-3)}
.search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo)}
.sel{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px 0 10px; border:1px solid var(--field-line); border-radius:var(--r-2); background:var(--surface); font-size:13px; white-space:nowrap; cursor:pointer}
.sel .k{color:var(--text-3)}
.sel .v{color:var(--text); font-weight:500}
.sel.on{border-color:var(--accent-line); background:var(--accent-weak)}
.sel.on .v{color:var(--accent)}
.sel .ic.i-chev-d{width:14px; height:14px; color:var(--text-3)}
.tgl{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--field-line); border-radius:var(--r-pill); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:500; white-space:nowrap; cursor:pointer}
.tgl:hover{border-color:var(--text-3); color:var(--text)}
.tgl .box{width:12px; height:12px; border:1.5px solid var(--field-line); border-radius:3px; flex:none}
.tgl[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent)}
.tgl[aria-pressed="true"] .box{border-color:var(--accent); background:var(--accent); -webkit-mask:none}
.tgl .c{font-family:var(--font-mono); font-size:11px; color:var(--text-3)}
.fchip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 3px 0 10px; border-radius:var(--r-pill); background:var(--accent-weak); border:1px solid var(--accent-line); color:var(--accent); font-size:12px; font-weight:500; white-space:nowrap}
.fchip .k{opacity:.8; font-weight:400}
.fchip button{display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; padding:0}
.fchip button:hover{background:var(--surface)}
.fchip .ic{width:12px; height:12px}
.fcount{font-size:12px; color:var(--text-2); white-space:nowrap}
.fcount b{font-family:var(--font-mono); color:var(--text); font-weight:600}

/* ---------- Person chips ---------- */
.pc{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 8px 0 3px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; color:var(--text); white-space:nowrap; line-height:1}
.pc .av{width:20px; height:20px; font-size:11px}
.co{display:inline-block; font-size:12px; font-weight:600; letter-spacing:0; padding:1px 4px; border-radius:2px; line-height:1; white-space:nowrap; vertical-align:middle}
.co.ping{background:var(--ink); color:var(--on-ink)}
.co.infor{border:1px solid var(--text-3); color:var(--text-2); padding:0 4px}
.co.joint{border:1px dashed var(--text-3); color:var(--text-2); padding:0 4px}
.pc .rm{display:grid; place-items:center; width:24px; height:24px; margin:0 -7px 0 1px; border:0; border-radius:50%; background:transparent; color:var(--text-3); cursor:pointer; padding:0}
.pc .rm:hover{background:var(--surface-3); color:var(--text)}
.pc .rm .ic{width:11px; height:11px}
.pc.none{background:transparent; border-style:dashed; color:var(--f-att-fg); border-color:var(--f-att-ln); padding:0 8px}
.role{font-size:11px; color:var(--text-3); white-space:nowrap}

/* ---------- Task rows ---------- */
.tlist{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden}
.thead{display:grid; grid-template-columns:20px 84px minmax(0,1fr) 200px 168px 64px; gap:0 14px; padding:7px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.trow{display:grid; grid-template-columns:20px 84px minmax(0,1fr) 200px 168px 64px; gap:0 14px; align-items:start; padding:var(--row-pad) 16px; border-bottom:1px solid var(--line); background:var(--surface); position:relative}
.trow:hover, .trow.is-hover{background:var(--hover)}
.trow.is-selected{background:var(--selected); box-shadow:inset 3px 0 0 var(--accent)}
.trow.focus{outline:2px solid var(--focus); outline-offset:-2px}
.trow.flash{animation:flash 2.4s var(--ease-out) 1}
.flash-static, .trow.flash-static{background:var(--accent-weak) !important}
@keyframes flash{0%,30%{background:var(--accent-weak)}100%{background:var(--surface)}}
.trow.other{background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--surface) 6px 12px); color:var(--text-3)}
.trow.other .desc, .trow.other .id{color:var(--text-3)}
.trow .gut{padding-top:2px; color:var(--text)}
.trow .main{display:flex; flex-direction:column; gap:5px; min-width:0}
.trow .badges{display:flex; flex-wrap:wrap; gap:4px}
.trow .desc{font-size:13.5px; font-weight:500; color:var(--text); line-height:1.4}
.trow .meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; font-size:12px; color:var(--text-2)}
.trow .ppl{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.trow .why{font-size:12px; color:var(--danger); display:flex; gap:6px; align-items:flex-start}
.trow .why.q{color:var(--s-skipq-fg)}
.trow .sched{display:flex; flex-direction:column; gap:3px; font-size:12px}
.trow .sched .t{font-family:var(--font-mono); font-size:12px; color:var(--text); white-space:nowrap}
.trow .sched .d{font-size:11px; color:var(--text-3)}
.trow .stc{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.trow .cnts{display:flex; flex-direction:column; gap:4px; align-items:flex-end; font-size:12px; color:var(--text-3)}
.cnt{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:12px; color:var(--text-3)}
.cnt.on{color:var(--accent); font-weight:600}
.cnt .ic{width:14px; height:14px}
.trow.compact{padding:var(--row-pad-compact) 16px; align-items:center; grid-template-columns:20px 84px minmax(0,1fr) 190px 168px 64px}
.trow.compact .sched .t{white-space:nowrap}
.trow.compact .desc{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trow.compact .main{flex-direction:row; align-items:center; gap:8px}
.trow.compact .sched{flex-direction:row; gap:6px; align-items:center}
.trow.compact .cnts{flex-direction:row; gap:8px}
.notrun{font-size:11px; font-weight:600; color:var(--text-3); border:1px dashed var(--line-strong); padding:2px 6px; border-radius:3px; white-space:nowrap}
.phead{display:grid; grid-template-columns:28px minmax(0,1fr) 180px 156px 132px; align-items:center; gap:14px; padding:10px 16px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.phead + .phead{border-top:0}
.phead .tw{display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:4px; background:transparent; color:var(--text-2); cursor:pointer}
.phead .tw:hover{background:var(--surface-3)}
.phead .nm{display:flex; align-items:center; gap:10px; min-width:0; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden}
.phead .nm > *{flex:none}
.phead .nm > .ell{flex:0 1 auto; min-width:0}
.pcode{display:inline-grid; place-items:center; min-width:30px; height:22px; padding:0 6px; border:1px solid var(--line-strong); border-radius:4px; background:var(--surface); font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text)}
.phead .frac{font-family:var(--font-mono); font-size:12px; color:var(--text-2); text-align:right; white-space:nowrap}
.phead .frac b{color:var(--text); font-weight:600}
.phead .span{font-family:var(--font-mono); font-size:12px; color:var(--text-2); white-space:nowrap}
.phead.done .nm{color:var(--text-2)}
.more{display:flex; justify-content:center; padding:8px; border-bottom:1px solid var(--line); background:var(--surface)}

/* ---------- Tables ---------- */
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.tbl th{position:sticky; top:0; z-index:1; background:var(--surface-2); text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); padding:8px 12px; border-bottom:1px solid var(--line-strong); white-space:nowrap}
.tbl th button{appearance:none; background:none; border:0; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; display:inline-flex; align-items:center; gap:4px; cursor:pointer}
.tbl th[aria-sort] {color:var(--text)}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; background:var(--surface)}
.tbl tr:hover td{background:var(--hover)}
.tbl td.num, .tbl th.num{text-align:right; font-family:var(--font-mono)}
.tbl .acts{display:flex; gap:2px; justify-content:flex-end}
.jgl[lang="ja"] .tbl th, .jgl[lang="ja"] .thead{letter-spacing:.02em; text-transform:none}

/* ---------- Cards, sections ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); min-width:0}
.card-h{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); min-height:48px}
.card-t{font-size:14px; font-weight:600; margin:0}
.card-b{padding:14px 16px}

/* ---------- Inputs & auto-saving fields ---------- */
.fld{display:flex; flex-direction:column; gap:5px; min-width:0}
.fld > .lbl{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text-2)}
.fld > .lbl .ic{width:12px; height:12px; color:var(--text-3)}
.inp{display:flex; align-items:center; gap:8px; height:32px; width:100%; padding:0 10px; border:1px solid var(--field-line); border-radius:var(--r-2); background:var(--surface); color:var(--text); font-size:13px; outline:none; white-space:nowrap; overflow:hidden; transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease)}
.inp::placeholder{color:var(--text-3)}
.inp:hover, .inp.is-hover{border-color:var(--text-3)}
.inp:focus, .inp.is-focus, .inp.is-editing{border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo); outline:none}
.inp.is-error{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg)}
.inp.is-saved{border-color:var(--ok-line)}
.inp[readonly], .inp.is-ro{background:var(--surface-2); border-color:var(--line); border-style:dashed; color:var(--text-2); box-shadow:none}
.inp[disabled], .inp.is-disabled{opacity:.5; cursor:not-allowed}
.inp.is-loading{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%); background-size:200% 100%; animation:sk 1.4s linear infinite; color:transparent; border-color:var(--line)}
textarea.inp{height:auto; min-height:76px; padding:8px 10px; resize:vertical; line-height:1.5; display:block}
.inp.ta{height:auto; min-height:76px; padding:8px 10px; align-items:flex-start; line-height:1.5; white-space:normal}
.inp .zone{margin-left:auto}
.inp .ic{color:var(--text-3)}
.inp.sel-like::after{content:""; margin-left:auto; width:6px; height:6px; border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3); transform:rotate(45deg) translateY(-2px)}
.fstat{display:flex; align-items:center; gap:5px; min-height:16px; font-size:11px; color:var(--text-3)}
.fstat .ic{width:12px; height:12px}
.fstat.saving{color:var(--text-2)}
.fstat.saved{color:var(--ok)}
.fstat.err{color:var(--danger)}
.fstat.ro{color:var(--text-3)}
.cbx{display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer}
.cbx input{width:16px; height:16px; margin:0; accent-color:var(--accent)}
.bi{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.bi .lang{font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--text-3); letter-spacing:.06em}

/* ---------- Panel ---------- */
.panel{display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-3); min-width:0}
.panel-h{display:flex; flex-direction:column; gap:10px; padding:16px 20px 12px}
.tabs{display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--line)}
.tab{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 8px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--text-2); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text); border-bottom-color:var(--accent); font-weight:600}
.tab .n{font-family:var(--font-mono); font-size:11px; padding:1px 5px; border-radius:8px; background:var(--surface-3); color:var(--text-2)}
.sec{display:flex; flex-direction:column; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.sec-h{display:flex; align-items:center; gap:8px}
.kv{display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 12px; align-items:center; font-size:13px}
.kv > dt{color:var(--text-2); font-size:12px}
.kv > dd{margin:0}

/* Banner (inline message) */
.banner{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--r-3); background:var(--surface-2); color:var(--text); font-size:13px}
.banner > .ic{margin-top:1px}
.banner.upd{border-color:var(--f-upd-ln); background:var(--f-upd-bg); color:var(--f-upd-fg)}
.banner.warn{border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}
.banner.danger{border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger)}
.banner.info{border-color:var(--info-line); background:var(--info-bg); color:var(--info)}
.banner.ok{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.banner .bt{font-weight:600}
.banner .bd{color:var(--text); font-size:12.5px}

/* ---------- Discussion ---------- */
.entry{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:12px 0}
.entry-h{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:var(--text-3)}
.entry-h .who{font-size:13px; font-weight:600; color:var(--text)}
.entry-b{font-size:13px; line-height:1.55; color:var(--text); margin-top:4px}
.entry-a{display:flex; gap:4px; margin-top:6px}
.etype{display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 6px; border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--text-2)}
.etype .ic{width:11px; height:11px}
.etype.q-open{border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn)}
.etype.q-ans{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.etype.dec{border-color:var(--accent-line); background:var(--accent-weak); color:var(--accent)}
.etype.ans{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.replies{margin-left:38px; padding-left:14px; border-left:2px solid var(--line)}
.mention{display:inline; padding:0 3px; border-radius:3px; background:var(--accent-weak); color:var(--accent); font-weight:500}
.mention.me{background:var(--f-upd-bg); color:var(--f-upd-fg); box-shadow:inset 0 0 0 1px var(--f-upd-ln)}
.entry.mine-mention{background:var(--surface-2); margin:0 -8px; padding:12px 8px; border-radius:var(--r-3)}
.composer{display:flex; flex-direction:column; border:1px solid var(--line-strong); border-radius:var(--r-3); background:var(--surface)}
.composer:focus-within, .composer.is-focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo)}
.composer .ct{display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--line)}
.composer .cb{padding:10px 12px; min-height:64px; font-size:13px; line-height:1.55}
.composer .cf{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 10px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-3) var(--r-3)}

/* ---------- History ---------- */
.day{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); padding:12px 0 6px; border-bottom:1px solid var(--line)}
.hl{display:grid; grid-template-columns:52px 24px minmax(0,1fr); gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.hl .tm{font-family:var(--font-mono); font-size:12px; color:var(--text-2); padding-top:2px}
.hl .what{line-height:1.5}
.old{color:var(--text-3); text-decoration:line-through; text-decoration-thickness:1px}
.new{color:var(--text); font-weight:500}
.arw{color:var(--text-3); margin:0 4px}
.hnote{margin-top:4px; font-size:12px; color:var(--text-2); font-style:normal; padding:4px 8px; background:var(--surface-2); border-radius:4px}

/* ---------- Dialogs, toasts ---------- */
.scrim{position:absolute; inset:0; background:var(--scrim); z-index:20}
.overlay{position:absolute; left:0; right:0; display:flex; justify-content:center; padding:0 16px; z-index:21}
.dlg{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-3); width:520px; max-width:100%; color:var(--text)}
.dlg-h{display:flex; gap:12px; align-items:flex-start; padding:20px 20px 6px}
.dlg-t{font-size:16px; font-weight:600; margin:0; line-height:1.35}
.dlg-s{font-size:13px; color:var(--text-2); margin:4px 0 0}
.dlg-b{display:flex; flex-direction:column; gap:12px; padding:10px 20px 18px; font-size:13px}
.dlg-f{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 12px 12px}
.dlg-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:8px; flex:none; background:var(--surface-2); color:var(--text)}
.dlg-ic.gate{background:var(--ink); color:var(--on-ink)}
.dlg-ic.warn{background:var(--warn-bg); color:var(--warn)}
.dlg-ic.danger{background:var(--danger-bg); color:var(--danger)}
.dlg-ic.block{background:var(--s-block-bg); color:var(--s-block-fg)}
.dlg-ic.skipq{background:var(--s-skipq-bg); color:var(--s-skipq-fg)}
.toast{display:flex; gap:10px; align-items:flex-start; width:380px; padding:12px 12px 12px 14px; border-radius:var(--r-3); background:var(--toast-bg); color:var(--toast-fg); box-shadow:var(--shadow-3); font-size:13px}
.toast .ic.ok{color:#6FD08F} .toast .ic.err{color:#FF8A85}
.toast .tt{font-weight:600}
.toast .td{opacity:.85; font-size:12.5px; margin-top:2px}
.toast .ta{display:flex; gap:12px; margin-top:8px}
.toast .ta button{appearance:none; background:none; border:0; padding:2px 0; font:inherit; font-weight:600; font-size:12px; color:#B3BBFF; cursor:pointer}
.toast .x{margin-left:auto; opacity:.7}

/* ---------- Loading, empty ---------- */
.sk{display:block; border-radius:4px; background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 50%,var(--surface-3) 100%); background-size:200% 100%; animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:36px 24px; color:var(--text-2)}
.empty .eic{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px dashed var(--line-strong); color:var(--text-3)}
.empty .et{font-size:14px; font-weight:600; color:var(--text)}
.empty .ed{font-size:13px; max-width:380px}

/* ---------- Timeline (Gantt) ---------- */
.gt{position:relative}
.gbar{position:absolute; min-width:24px; height:14px; border-radius:3px; border:1px solid var(--c-ln); background:var(--c-bg); overflow:hidden}
.gbar > i{display:block; height:100%; background:var(--c-solid)}
.gbar.st-skipq, .gbar.st-na{border-style:dashed}
.gghost{position:absolute; height:6px; border:1px dashed var(--text-3); border-radius:2px; opacity:.7}
.glabel{position:absolute; top:10px; margin-left:6px; font-family:var(--font-mono); font-size:11px; color:var(--text-2); white-space:nowrap}
.gdia{position:absolute; width:12px; height:12px; transform:rotate(45deg); border:2px solid var(--ink); background:var(--surface)}
.gdia.ok{background:var(--ink)}
.gspan{position:absolute; height:2px; background:var(--text-3)}

/* ---------- Spreadsheet grid ---------- */
.xg{border-collapse:separate; border-spacing:0; font-size:12.5px; width:max-content; min-width:100%}
.xg th, .xg td{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0 8px; height:32px; white-space:nowrap; background:var(--surface); text-align:left}
.xg th{position:sticky; top:0; background:var(--surface-2); font-size:11px; font-weight:600; color:var(--text-2); letter-spacing:.03em; z-index:2}
.xg .grp th{height:26px; text-transform:uppercase; letter-spacing:.07em; font-size:11px}
.xg .grp .g-mock{background:var(--run-mock-bg); color:var(--run-mock-fg); border-bottom:1px dashed var(--run-mock-ln)}
.xg .grp .g-live{background:var(--accent-weak); color:var(--accent); border-bottom:1px solid var(--accent-line)}
.xg .stk{position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--line-strong)}
.xg th.stk{z-index:3}
.xg td.mono{font-family:var(--font-mono)}
.xg td.cell-edit{box-shadow:inset 0 0 0 2px var(--accent); background:var(--surface); padding:0 6px}
.xg td.cell-err{box-shadow:inset 0 0 0 2px var(--danger); background:var(--danger-bg)}
.xg td.cell-saving{color:var(--text-3)}
.xg td.cell-saved{background:var(--ok-bg)}
.xg td.ro{color:var(--text-3); background:var(--surface-2)}
.xg tr.removed td{color:var(--text-3); text-decoration:line-through; background:var(--surface-2)}
.xg tr.removed td.acts{text-decoration:none}

/* ---------- Doc-board helpers (design-system artboards only) ---------- */
.doc{display:flex; flex-direction:column; gap:40px; padding:56px 64px}
.doc-k{font-family:var(--font-mono); font-size:12px; color:var(--text-3); letter-spacing:.02em}
.doc-h{font-size:36px; font-weight:600; letter-spacing:-.015em; margin:6px 0 0; line-height:1.15}
.doc-p{max-width:760px; margin:10px 0 0; font-size:14px; line-height:1.6; color:var(--text-2)}
.doc-sh{font-size:18px; font-weight:600; margin:0}
.doc-sec{display:flex; flex-direction:column; gap:16px}
.spec{font-family:var(--font-mono); font-size:11px; color:var(--text-3)}
.rule{display:flex; gap:10px; font-size:13px; line-height:1.55; color:var(--text-2)}
.rule b{color:var(--text)}
.swatch{height:44px; border-radius:6px; border:1px solid var(--line)}
.state{display:flex; flex-direction:column; gap:8px; align-items:flex-start}

/* ---------- Revision 1 additions ---------- */
.nu{display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-size:11px; color:var(--f-upd-fg); white-space:nowrap}
.nu .ic{width:13px; height:13px}
.pc.you{background:var(--accent-weak); border-color:var(--accent-line); color:var(--accent); font-weight:600}
.tipbox{display:inline-block; max-width:300px; padding:6px 9px; border-radius:5px; background:var(--toast-bg); color:var(--toast-fg); font-size:12px; line-height:1.45; box-shadow:var(--shadow-2)}
.meta .flags{display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:10px; vertical-align:middle}
.lockln{display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-2)}
.live-status{font-size:12px; color:var(--text-2)}
.posts-teams{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2)}
/* phone row: same markup as desktop, stacked */
.trow.phone{grid-template-columns:14px minmax(0,1fr) auto; grid-template-areas:"gut id cnts" "gut main main" "gut sched sched" "gut stc stc"; gap:6px 8px; padding:12px 14px}
.trow.phone .gut{grid-area:gut} .trow.phone .id{grid-area:id} .trow.phone .main{grid-area:main} .trow.phone .sched{grid-area:sched; flex-direction:row; flex-wrap:wrap; gap:4px 8px; align-items:center}
.trow.phone .stc{grid-area:stc; flex-direction:row; align-items:center; width:100%} .trow.phone .cnts{grid-area:cnts; flex-direction:row; gap:10px}
.trow.phone .stc .pill{height:44px; font-size:13px; padding:0 14px 0 12px} .trow.phone .stc .btn{height:44px; margin-left:auto}
.trow.phone .desc{font-size:14px}
@media (forced-colors: active){
  .jgl .ic, .jgl .sg, .jgl .dia{forced-color-adjust:none; background:CanvasText}
  .jgl .dia.o, .jgl .b-gate .dia{background:Canvas; border-color:CanvasText}
  .jgl .sbar > i, .jgl .gbar > i{forced-color-adjust:none; background:CanvasText}
  .jgl .gbar, .jgl .sbar, .jgl .pill, .jgl .badge, .jgl .tag{border:1px solid CanvasText}
  .jgl .gdia{forced-color-adjust:none; border-color:CanvasText; background:Canvas} .jgl .gdia.ok{background:CanvasText}
}
a.id{text-decoration:none} a.id:hover{color:var(--accent); text-decoration:underline}
.phone-top{display:flex; align-items:center; gap:3px; height:56px; padding:0 2px 0 10px; background:var(--surface); border-bottom:1px solid var(--line)}
.tap{min-height:44px; min-width:44px}
.np-cur{background:var(--selected); box-shadow:inset 3px 0 0 var(--accent)}
/* demo state classes for the Interaction states sheet (real UI uses :hover / :active) */
.tgl.is-hover, .sel.is-hover, .pc.is-hover{border-color:var(--text-3); color:var(--text)}
.tgl:active, .tgl.is-active, .sel:active, .sel.is-active{background:var(--surface-3)}
.nav a:active, .nav a.is-active{background:var(--surface-3); color:var(--text)}
.tab.is-hover{color:var(--text)} .tab:active, .tab.is-active{background:var(--hover)}
.pc .rm.is-hover{background:var(--surface-3); color:var(--text)}
.istat{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; border:1px solid var(--field-line); color:var(--text-2); background:var(--surface)}
.istat.open{border-color:var(--info-line); color:var(--info); background:var(--info-bg)}
.istat.prog{border-color:var(--accent-line); color:var(--accent); background:var(--accent-weak)}
.istat.res{border-color:var(--ok-line); color:var(--ok); background:var(--ok-bg)}
.istat.closed{border-style:dashed; color:var(--text-2); background:transparent}

.phone-top .brand-t{font-size:13px; white-space:nowrap}
.trow.phone{position:relative}