/* SYG design system, ported unchanged from Mock_v5_Procurement_Platform (2).html. Shared by the API host's account pages and the React app: change it here only. */
/* ============================================================
   tokens.css — canonical, per SYG_DesignStandard_v4.2 §22.
   This is the ONLY block permitted to contain raw hex values.
   ============================================================ */
:root{
  --syg-white:#FFFFFF; --syg-black:#000000;
  --syg-grey-10:#F2F2F2; --syg-grey:#E6E6E6; --syg-grey-20:#C8C8C8;
  --syg-grey-40:#9E9E9E; --syg-grey-60:#707070; --syg-grey-80:#444444;
  --syg-cyan:#1E88C7; --syg-cyan-d20:#1971A5; --syg-cyan-d40:#145A83; --syg-cyan-d60:#0F4666;
  --syg-cyan-80:#4BA0D2; --syg-cyan-60:#78B8DD; --syg-cyan-40:#A5CFE9; --syg-cyan-20:#D2E7F4;
  --syg-orange:#F37521;
  --syg-success:#6EA046; --syg-success-bg:#E9F1E1; --syg-success-text:#4C7A2F;
  --syg-warning:#E69123; --syg-warning-bg:#FBF0DC; --syg-warning-text:#8A5A0B;
  --syg-danger:#C8443A;  --syg-danger-bg:#F7E4E2;  --syg-danger-text:#A5342C;
  --syg-info:#1E88C7;    --syg-info-bg:#D2E7F4;    --syg-info-text:#145A83;

  --syg-bg:var(--syg-white); --syg-bg-panel:var(--syg-grey);
  --syg-bg-selected:var(--syg-cyan-20); --syg-bg-hover:var(--syg-grey-10);
  --syg-action:var(--syg-cyan-d20); --syg-action-hover:var(--syg-cyan-d40);
  --syg-action-pressed:var(--syg-cyan-d60); --syg-bg-inverse:var(--syg-cyan-d40);
  --syg-text:var(--syg-black); --syg-text-secondary:var(--syg-grey-60);
  --syg-text-disabled:var(--syg-grey-40); --syg-text-inverse:var(--syg-white);
  --syg-text-link:var(--syg-cyan-d40);
  --syg-border:var(--syg-grey-20); --syg-border-strong:var(--syg-grey-40);
  --syg-border-base:var(--syg-grey-80);
  --syg-focus:var(--syg-cyan-d20); --syg-scrim:rgba(20,90,131,0.55);

  --syg-font:Carlito,Calibri,"Segoe UI",system-ui,sans-serif;
  --syg-font-mono:"Courier New","Cascadia Mono",Consolas,monospace;
  --syg-fs-display:28px; --syg-lh-display:36px;
  --syg-fs-h1:24px;      --syg-lh-h1:32px;
  --syg-fs-h2:20px;      --syg-lh-h2:28px;
  --syg-fs-h3:16px;      --syg-lh-h3:24px;
  --syg-fs-body-l:16px;  --syg-lh-body-l:24px;
  --syg-fs-body:14px;    --syg-lh-body:20px;
  --syg-fs-small:12px;   --syg-lh-small:16px;
  --syg-fs-caption:11px; --syg-lh-caption:16px;
  --syg-fs-mono:13px;    --syg-lh-mono:20px;
  --syg-fs-stat:40px;    --syg-lh-stat:44px;
  --syg-fw-regular:400;  --syg-fw-bold:700;
  --syg-ls-upper:0.04em;

  --syg-space-1:4px; --syg-space-2:8px; --syg-space-3:12px; --syg-space-4:16px;
  --syg-space-5:24px; --syg-space-6:32px; --syg-space-7:48px; --syg-space-8:64px;
  --syg-radius:0; --syg-border-w:1px; --syg-focus-w:2px; --syg-focus-offset:1px;

  --syg-control-h-compact:32px; --syg-control-h:36px; --syg-control-h-touch:44px;
  --syg-row-h-compact:32px; --syg-row-h:40px; --syg-row-h-relaxed:48px;
  --syg-topbar-h:56px; --syg-sidenav-w:240px; --syg-sidenav-w-rail:56px;
  --syg-pageheader-h:72px; --syg-content-max:1280px; --syg-gutter:24px;

  --syg-motion-fast:120ms; --syg-motion-base:200ms; --syg-motion-slow:320ms;
  --syg-ease-in:cubic-bezier(0.2,0,0,1); --syg-ease-out:cubic-bezier(0.4,0,1,1);

  --syg-z-sticky:100; --syg-z-dropdown:300; --syg-z-scrim:400;
  --syg-z-modal:401; --syg-z-toast:500; --syg-z-tooltip:600;
}

/* ---------- global floor (§22) ---------- */
button,input,select,textarea,fieldset,dialog,img,table,td,th,
.card,.panel,.modal,.dropdown,.popover,.tooltip,.badge,.chip,.avatar{
  border-radius:var(--syg-radius); box-shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--syg-font); font-size:var(--syg-fs-body); line-height:var(--syg-lh-body);
  color:var(--syg-text); background:var(--syg-bg); -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
a{color:var(--syg-text-link)}
:focus-visible{outline:var(--syg-focus-w) solid var(--syg-focus);outline-offset:var(--syg-focus-offset)}
code,.mono,.tid{font-family:var(--syg-font-mono);font-size:var(--syg-fs-mono)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;transition-duration:1ms !important}
}

/* ---------- utilities (replace inline colour) ---------- */
.t-pos{color:var(--syg-success-text)}
.t-neg{color:var(--syg-danger-text)}
.t-warn{color:var(--syg-warning-text)}
.t-mute{color:var(--syg-text-secondary)}
.t-dis{color:var(--syg-text-disabled)}
.t-accent{color:var(--syg-cyan-d40);font-weight:var(--syg-fw-bold)}
.cap{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption)}
.mt-1{margin-top:var(--syg-space-1)} .mt-3{margin-top:var(--syg-space-3)}
.mt-4{margin-top:var(--syg-space-4)} .ml-auto{margin-left:auto}
.row-2{display:flex;gap:var(--syg-space-2)} .grow{flex:1;justify-content:center}
.tall{max-height:none}
.quote{border-left:3px solid var(--syg-cyan);padding-left:var(--syg-space-3);
  margin-bottom:var(--syg-space-3);font-size:var(--syg-fs-small);line-height:var(--syg-lh-small)}
.ta{width:100%;height:76px;padding:var(--syg-space-2);border:var(--syg-border-w) solid var(--syg-border-strong);
  font:inherit;font-size:var(--syg-fs-body);background:var(--syg-white);resize:vertical}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--syg-space-2);top:var(--syg-space-2);z-index:var(--syg-z-toast);
  background:var(--syg-action);color:var(--syg-text-inverse);padding:var(--syg-space-2) var(--syg-space-4)}
ul.plain{list-style:none;font-size:var(--syg-fs-small);line-height:1.9}
ul.plain li::before{content:"—";color:var(--syg-cyan-d40);margin-right:var(--syg-space-2)}
ul.plain.cols2{column-count:2;column-gap:var(--syg-space-5)}
.ic{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;display:block}
.ic-sm{width:13px;height:13px;stroke-width:1.9}
.ic-xs{width:11px;height:11px;stroke-width:2.2}
.ic-lg{width:24px;height:24px}

/* ============================================================
   §10 App shell
   ============================================================ */
.axis{
  height:var(--syg-topbar-h); background:var(--syg-white);
  border-bottom:var(--syg-border-w) solid var(--syg-border);
  display:flex; align-items:center; padding:0 var(--syg-gutter);
  position:sticky; top:0; z-index:var(--syg-z-sticky);
}
.axis .logo{height:32px;width:auto;display:block;margin-right:var(--syg-space-4);flex-shrink:0}
.axis .divider{width:1px;height:28px;background:var(--syg-border);margin-right:var(--syg-space-4);flex-shrink:0}
.axis .product .pn{font-size:var(--syg-fs-body);font-weight:var(--syg-fw-bold);line-height:1.2}
.axis .product .ps{font-size:var(--syg-fs-caption);color:var(--syg-text-secondary);line-height:1.3}
.axis-right{margin-left:auto;display:flex;align-items:center;gap:var(--syg-space-2)}
.sample-chip{
  display:inline-flex;align-items:center;gap:var(--syg-space-2);height:var(--syg-control-h-compact);
  padding:0 var(--syg-space-3);border:var(--syg-border-w) solid var(--syg-warning);
  background:var(--syg-warning-bg);color:var(--syg-warning-text);
  font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);
  text-transform:uppercase;letter-spacing:var(--syg-ls-upper);
}
.iconbtn{
  height:var(--syg-control-h);min-width:var(--syg-control-h);padding:0 var(--syg-space-2);
  border:var(--syg-border-w) solid transparent;display:inline-flex;align-items:center;
  justify-content:center;gap:var(--syg-space-2);font-size:var(--syg-fs-small);color:var(--syg-grey-80);
  transition:background var(--syg-motion-fast) var(--syg-ease-in);
}
.iconbtn:hover,.iconbtn[aria-expanded="true"]{background:var(--syg-bg-hover);border-color:var(--syg-border)}
.iconbtn .badge-n{
  min-width:18px;height:18px;padding:0 var(--syg-space-1);background:var(--syg-danger-text);
  color:var(--syg-text-inverse);font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);
  display:inline-flex;align-items:center;justify-content:center;
}
.entity-btn{
  height:var(--syg-control-h);padding:0 var(--syg-space-3);
  border:var(--syg-border-w) solid var(--syg-border-strong);display:flex;align-items:center;gap:var(--syg-space-2);
}
.entity-btn:hover{border-color:var(--syg-cyan-d20);background:var(--syg-bg-hover)}
.entity-btn .lbl{font-size:var(--syg-fs-caption);color:var(--syg-text-secondary);
  text-transform:uppercase;letter-spacing:var(--syg-ls-upper);line-height:1.1;display:block}
.entity-btn .val{font-size:var(--syg-fs-small);font-weight:var(--syg-fw-bold);line-height:1.3;
  white-space:nowrap;display:block}
.user-btn{height:var(--syg-control-h);padding:0 var(--syg-space-1) 0 var(--syg-space-3);
  display:flex;align-items:center;gap:var(--syg-space-2)}
.user-btn:hover{background:var(--syg-bg-hover)}
.user-btn .um{text-align:right;line-height:1.25}
.user-btn .ur{font-size:var(--syg-fs-caption);color:var(--syg-text-secondary)}
.user-btn .un{font-size:var(--syg-fs-small);font-weight:var(--syg-fw-bold)}
.ava{width:32px;height:32px;background:var(--syg-cyan-20);color:var(--syg-cyan-d40);display:flex;
  align-items:center;justify-content:center;font-weight:var(--syg-fw-bold);font-size:var(--syg-fs-small)}

/* ---------- §11 E2 dropdown: white + 1px grey80 ---------- */
.dd{position:relative}
.dd-panel{
  position:absolute;top:calc(100% + var(--syg-space-1));right:0;min-width:268px;
  background:var(--syg-white);border:var(--syg-border-w) solid var(--syg-border-base);
  z-index:var(--syg-z-dropdown);padding:var(--syg-space-1) 0;display:none;
}
.dd-panel[data-open="true"]{display:block}
.dd-head{padding:var(--syg-space-2) var(--syg-space-4) var(--syg-space-1);
  font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);text-transform:uppercase;
  letter-spacing:var(--syg-ls-upper);color:var(--syg-text-secondary)}
.dd-item{display:flex;align-items:flex-start;gap:var(--syg-space-2);
  padding:var(--syg-space-2) var(--syg-space-4);font-size:var(--syg-fs-small);width:100%;min-height:32px}
.dd-item:hover{background:var(--syg-bg-hover)}
.dd-item .tick{margin-left:auto;color:var(--syg-cyan-d40);font-weight:var(--syg-fw-bold)}
.dd-note{padding:var(--syg-space-2) var(--syg-space-4);font-size:var(--syg-fs-caption);
  line-height:var(--syg-lh-caption);color:var(--syg-text-secondary);border-top:var(--syg-border-w) solid var(--syg-grey)}
.dd-sep{height:1px;background:var(--syg-grey);margin:var(--syg-space-1) 0}

/* ---------- §10 side nav: grey surface, white active + 3px cyan marker ---------- */
.shell{display:flex;min-height:calc(100vh - var(--syg-topbar-h))}
.aside{
  width:var(--syg-sidenav-w);background:var(--syg-bg-panel);flex-shrink:0;
  border-right:var(--syg-border-w) solid var(--syg-border);padding-bottom:var(--syg-space-7);
}
.aside .grp{padding:var(--syg-space-4) var(--syg-space-4) var(--syg-space-1);
  font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);text-transform:uppercase;
  letter-spacing:var(--syg-ls-upper);color:var(--syg-grey-60)}
.nav-item{
  display:flex;align-items:center;width:100%;min-height:var(--syg-row-h);
  padding:var(--syg-space-2) var(--syg-space-4);font-size:var(--syg-fs-small);
  color:var(--syg-grey-80);border-left:3px solid transparent;
  transition:background var(--syg-motion-fast) var(--syg-ease-in);
}
.nav-item > svg.ic{margin-right:var(--syg-space-3);color:var(--syg-cyan-d40)}
.nav-item:hover{background:var(--syg-bg-hover)}
.nav-item[aria-current="page"]{
  background:var(--syg-white);color:var(--syg-text);font-weight:var(--syg-fw-bold);
  border-left-color:var(--syg-cyan);
}
.nav-item .nb{margin-left:auto;background:var(--syg-cyan-d20);color:var(--syg-text-inverse);
  font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);padding:1px var(--syg-space-2)}
.nav-item .caret{margin-left:auto;width:11px;height:11px;stroke-width:2.4;
  transition:transform var(--syg-motion-fast) var(--syg-ease-in)}
.nav-item[aria-expanded="true"] .caret{transform:rotate(90deg)}
.nav-item[hidden]{display:none}
.navgroup{display:none}
.navgroup[data-open="true"]{display:block}
.navgroup .nav-item{padding-left:var(--syg-space-8);font-size:var(--syg-fs-small);
  position:relative;min-height:var(--syg-row-h-compact)}
.navgroup .nav-item::before{content:"";width:4px;height:4px;background:var(--syg-grey-40);
  position:absolute;left:var(--syg-space-6);top:14px}
.navgroup .nav-item[aria-current="page"]::before{background:var(--syg-cyan)}

/* ---------- §10 page header + content ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--syg-white)}
.subhead{padding:var(--syg-space-4) var(--syg-gutter) var(--syg-space-3);
  border-bottom:var(--syg-border-w) solid var(--syg-border);background:var(--syg-white)}
.crumbs{display:flex;gap:var(--syg-space-2);font-size:var(--syg-fs-caption);
  color:var(--syg-text-secondary);margin-bottom:var(--syg-space-1);align-items:center;flex-wrap:wrap}
.crumbs button{font-size:var(--syg-fs-caption);color:var(--syg-text-link)}
.crumbs button:hover{text-decoration:underline}
.subhead h1{font-size:var(--syg-fs-h1);line-height:var(--syg-lh-h1);font-weight:var(--syg-fw-bold)}
.subhead .sh-sub{font-size:var(--syg-fs-small);line-height:var(--syg-lh-small);
  color:var(--syg-text-secondary);margin-top:var(--syg-space-1);max-width:90ch}
.subhead-row{display:flex;align-items:flex-end;gap:var(--syg-space-4);flex-wrap:wrap}
.subhead-actions{margin-left:auto;display:flex;gap:var(--syg-space-2);flex-wrap:wrap}
.content{padding:var(--syg-space-5) var(--syg-gutter) var(--syg-space-7);flex:1;
  max-width:calc(var(--syg-content-max) + var(--syg-gutter)*2);width:100%}
.screen[hidden]{display:none}

/* ---------- §12.1 buttons ---------- */
.btn{
  height:var(--syg-control-h);padding:0 var(--syg-space-4);font-size:var(--syg-fs-body);
  display:inline-flex;align-items:center;gap:var(--syg-space-2);white-space:nowrap;
  border:var(--syg-border-w) solid var(--syg-cyan);background:var(--syg-white);
  color:var(--syg-cyan-d40);transition:background var(--syg-motion-fast) var(--syg-ease-in);
}
.btn:hover{background:var(--syg-cyan-20)}
.btn:active{background:var(--syg-cyan-40)}
.btn-primary{background:var(--syg-action);border-color:var(--syg-action);
  color:var(--syg-text-inverse);font-weight:var(--syg-fw-bold)}
.btn-primary:hover{background:var(--syg-action-hover);border-color:var(--syg-action-hover)}
.btn-primary:active{background:var(--syg-action-pressed);border-color:var(--syg-action-pressed)}
.btn-quiet{border-color:transparent;color:var(--syg-cyan-d40)}
.btn-quiet:hover{background:var(--syg-bg-hover)}
.btn-quiet:active{background:var(--syg-grey)}
.btn-danger{border-color:var(--syg-danger);color:var(--syg-danger-text)}
.btn-danger:hover{background:var(--syg-danger-bg)}
.btn-sm{height:var(--syg-control-h-compact);padding:0 var(--syg-space-3);font-size:var(--syg-fs-small)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--syg-grey);border-color:var(--syg-grey-20);
  color:var(--syg-text-disabled);cursor:not-allowed}

/* ---------- §11 E1 panel ---------- */
.panel{border:var(--syg-border-w) solid var(--syg-border);background:var(--syg-white);
  margin-bottom:var(--syg-space-5)}
.panel-head{display:flex;align-items:center;gap:var(--syg-space-3);
  padding:var(--syg-space-3) var(--syg-space-4);border-bottom:var(--syg-border-w) solid var(--syg-border);
  min-height:var(--syg-row-h-relaxed)}
.panel-head h2{font-size:var(--syg-fs-h3);line-height:var(--syg-lh-h3);font-weight:var(--syg-fw-bold)}
.panel-head .ph-sub{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);font-weight:var(--syg-fw-regular);display:block;margin-top:2px}
.panel-tools{margin-left:auto;display:flex;gap:var(--syg-space-2);align-items:center;flex-wrap:wrap}
.panel-body{padding:var(--syg-space-4)}
.panel-body.grey{background:var(--syg-bg-panel)}
.panel[data-collapsed="true"] .panel-body{display:none}

/* ---------- §14 forms ---------- */
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--syg-space-4)}
.filters.c5{grid-template-columns:repeat(5,1fr)}
.filters.c3{grid-template-columns:repeat(3,1fr)}
.f label{display:block;font-size:var(--syg-fs-body);font-weight:var(--syg-fw-bold);
  margin-bottom:var(--syg-space-1)}
.ctrl{width:100%;height:var(--syg-control-h);border:var(--syg-border-w) solid var(--syg-border-strong);
  background:var(--syg-white);padding:0 var(--syg-space-3);font:inherit;
  font-size:var(--syg-fs-body);color:var(--syg-text)}
.ctrl:hover{border-color:var(--syg-grey-60)}
select.ctrl{appearance:none;cursor:pointer;padding-right:var(--syg-space-6);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath fill='%23707070' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--syg-space-3) center}
.filter-foot{display:flex;gap:var(--syg-space-2);justify-content:flex-end;
  margin-top:var(--syg-space-4);padding-top:var(--syg-space-3);
  border-top:var(--syg-border-w) solid var(--syg-border)}

/* ---------- §19.2 metric strip ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--syg-border-w);
  background:var(--syg-border);border:var(--syg-border-w) solid var(--syg-border);
  margin-bottom:var(--syg-space-5)}
.metric{background:var(--syg-white);padding:var(--syg-space-4)}
.metric .num{font-size:var(--syg-fs-stat);line-height:var(--syg-lh-stat);
  font-weight:var(--syg-fw-bold);letter-spacing:-0.02em}
.metric .num.c{color:var(--syg-cyan-d40)}
.metric .num.o{background:var(--syg-orange);color:var(--syg-black);
  display:inline-block;padding:0 var(--syg-space-2)}
.metric .lab{font-size:var(--syg-fs-small);color:var(--syg-text-secondary);margin-top:var(--syg-space-2)}
.metric .basis{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);margin-top:var(--syg-space-1)}

/* ---------- inline alert ---------- */
.notice{display:flex;gap:var(--syg-space-3);padding:var(--syg-space-3) var(--syg-space-4);
  background:var(--syg-info-bg);border-left:4px solid var(--syg-cyan-d20);
  margin-bottom:var(--syg-space-5);font-size:var(--syg-fs-body);line-height:var(--syg-lh-body)}
.notice .nt{font-weight:var(--syg-fw-bold)}
.notice .sub{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-grey-80);margin-top:var(--syg-space-1);display:block}
.notice button.x{margin-left:auto;color:var(--syg-grey-60);line-height:1;
  padding:0 var(--syg-space-1);min-width:24px;min-height:24px}
.notice.danger{background:var(--syg-danger-bg);border-left-color:var(--syg-danger)}
.notice.warning{background:var(--syg-warning-bg);border-left-color:var(--syg-warning)}

/* ---------- §13 data grid ---------- */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--syg-fs-body)}
table.t thead th{background:var(--syg-bg-panel);color:var(--syg-text);
  font-weight:var(--syg-fw-bold);font-size:var(--syg-fs-body);text-align:left;
  padding:var(--syg-space-2) var(--syg-space-3);
  border-bottom:var(--syg-border-w) solid var(--syg-border-base);white-space:nowrap}
table.t thead th.n{text-align:right}
table.t thead th.c{text-align:center}
.sortbtn{display:inline-flex;align-items:center;gap:var(--syg-space-1);
  font-weight:var(--syg-fw-bold);font-size:var(--syg-fs-body)}
.sortbtn .ic{color:var(--syg-grey-40)}
.sortbtn .sort-on{color:var(--syg-cyan-d40)}
table.t tbody td{padding:var(--syg-space-3);border-bottom:var(--syg-border-w) solid var(--syg-border);
  vertical-align:top;height:var(--syg-row-h)}
table.t tbody td.n{text-align:right;white-space:nowrap}
table.t tbody td.c{text-align:center}
table.t tbody tr:last-child td{border-bottom:var(--syg-border-w) solid var(--syg-border-base)}
table.t tbody tr:hover{background:var(--syg-bg-hover)}
table.t tbody tr[aria-selected="true"]{background:var(--syg-bg-selected)}
table.t tbody tr[aria-selected="true"] td:first-child{border-left:3px solid var(--syg-cyan)}
/* attention marker — border, never box-shadow (§0.2) */
table.t tbody tr.marked td:first-child{border-left:4px solid var(--syg-danger)}
table.t tbody tr.marked-orange td:first-child{border-left:4px solid var(--syg-orange)}
.tid{font-size:var(--syg-fs-mono);font-weight:var(--syg-fw-bold)}
.sub2{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);margin-top:2px;display:block}
.strong{font-weight:var(--syg-fw-bold)}

/* status chip — icon carries meaning alongside colour (§18.3) */
.st{display:inline-flex;align-items:center;gap:var(--syg-space-1);
  padding:2px var(--syg-space-2);font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  font-weight:var(--syg-fw-bold);border:var(--syg-border-w) solid;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;flex-shrink:0;background:currentColor}
.st-green{color:var(--syg-success-text);border-color:var(--syg-success);background:var(--syg-success-bg)}
.st-green::before{clip-path:polygon(0 45%,40% 100%,100% 10%,100% 35%,40% 100%,0 70%)}
.st-amber{color:var(--syg-warning-text);border-color:var(--syg-warning);background:var(--syg-warning-bg)}
.st-amber::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.st-red{color:var(--syg-danger-text);border-color:var(--syg-danger);background:var(--syg-danger-bg)}
.st-red::before{clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.st-cyan{color:var(--syg-info-text);border-color:var(--syg-info);background:var(--syg-info-bg)}
.st-cyan::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.st-grey{color:var(--syg-grey-80);border-color:var(--syg-border-strong);background:var(--syg-grey)}
.st-grey::before{clip-path:polygon(0 35%,100% 35%,100% 65%,0 65%)}

.tbl-toolbar{display:flex;align-items:center;gap:var(--syg-space-3);
  padding:var(--syg-space-3) var(--syg-space-4);
  border-bottom:var(--syg-border-w) solid var(--syg-border);flex-wrap:wrap}
.tbl-toolbar .ctrl{width:auto;height:var(--syg-control-h-compact);font-size:var(--syg-fs-small)}
.chip-x{display:inline-flex;align-items:center;gap:var(--syg-space-2);height:var(--syg-control-h-compact);
  padding:0 var(--syg-space-2) 0 var(--syg-space-3);border:var(--syg-border-w) solid var(--syg-border-strong);
  background:var(--syg-white);font-size:var(--syg-fs-caption)}
.chip-x:hover{border-color:var(--syg-cyan-d20);background:var(--syg-bg-hover)}
.chip-x .x{font-weight:var(--syg-fw-bold);color:var(--syg-grey-60)}
.tbl-foot{display:flex;align-items:center;gap:var(--syg-space-3);
  padding:var(--syg-space-3) var(--syg-space-4);flex-wrap:wrap}
.tbl-foot .info{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);max-width:100ch}
.pager{margin-left:auto;display:flex;gap:1px}
.pg{width:var(--syg-control-h);height:var(--syg-control-h);
  border:var(--syg-border-w) solid var(--syg-border);font-size:var(--syg-fs-small);
  display:flex;align-items:center;justify-content:center}
.pg:hover{border-color:var(--syg-cyan-d20);background:var(--syg-bg-hover)}
.pg[aria-current="true"]{background:var(--syg-action);border-color:var(--syg-action);
  color:var(--syg-text-inverse);font-weight:var(--syg-fw-bold)}
.pg[disabled]{background:var(--syg-grey);border-color:var(--syg-border);
  color:var(--syg-text-disabled);cursor:not-allowed}

/* row action menu — E2 */
.rowact{position:relative;display:inline-block}
.rowact .menu{position:absolute;right:0;top:calc(100% + 2px);min-width:280px;
  background:var(--syg-white);border:var(--syg-border-w) solid var(--syg-border-base);
  z-index:var(--syg-z-dropdown);padding:var(--syg-space-1) 0;display:none;text-align:left}
.rowact .menu[data-open="true"]{display:block}
.rowact .menu button{display:flex;width:100%;min-height:var(--syg-row-h-compact);
  padding:var(--syg-space-2) var(--syg-space-3);font-size:var(--syg-fs-small);
  gap:var(--syg-space-2);align-items:center}
.rowact .menu button:hover{background:var(--syg-bg-hover)}
.rowact .menu button[disabled]{background:var(--syg-grey);color:var(--syg-text-disabled);cursor:not-allowed}
.rowact .menu button[disabled]:hover{background:var(--syg-grey)}
.perm{margin-left:auto;font-family:var(--syg-font-mono);font-size:var(--syg-fs-caption);
  color:var(--syg-text-secondary);white-space:nowrap}

/* ---------- §19.6 gate flow ---------- */
.gate-wrap{padding:var(--syg-space-5) var(--syg-space-4) var(--syg-space-2);
  background:var(--syg-bg-panel);overflow-x:auto}
.gates{display:flex;align-items:flex-start;min-width:980px;position:relative;
  padding:var(--syg-space-6) 0 var(--syg-space-6)}
.gates::before{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);
  height:2px;background:var(--syg-grey-80)}
.gate{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.gate .node{width:28px;height:28px;border:2px solid var(--syg-cyan);background:var(--syg-white);
  display:flex;align-items:center;justify-content:center;font-size:var(--syg-fs-small);
  font-weight:var(--syg-fw-bold);color:var(--syg-cyan-d40)}
.gate.done .node{background:var(--syg-cyan-d40);border-color:var(--syg-cyan-d40);color:var(--syg-text-inverse)}
.gate.current .node{background:var(--syg-orange);border-color:var(--syg-orange);
  color:var(--syg-black);width:34px;height:34px}
.gate.todo .node{border-color:var(--syg-grey-40);color:var(--syg-grey-40)}
.gate .lab{position:absolute;width:118px;text-align:center;
  font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption)}
.gate .lab .gn{font-weight:var(--syg-fw-bold);display:block}
.gate .lab .gd{color:var(--syg-text-secondary);font-family:var(--syg-font-mono);font-size:var(--syg-fs-caption)}
.gate.up .lab{bottom:calc(50% + 24px)}
.gate.dn .lab{top:calc(50% + 24px)}
.gate-legend{display:flex;gap:var(--syg-space-5);padding:var(--syg-space-2) var(--syg-space-4) var(--syg-space-3);
  background:var(--syg-bg-panel);font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-grey-80);flex-wrap:wrap}
.gate-legend span{display:flex;align-items:center;gap:var(--syg-space-2)}
.gate-legend i{width:12px;height:12px;display:block;border:2px solid var(--syg-cyan)}
.gl-done{background:var(--syg-cyan-d40);border-color:var(--syg-cyan-d40) !important}
.gl-cur{background:var(--syg-orange);border-color:var(--syg-orange) !important}
.gl-todo{border-color:var(--syg-grey-40) !important}

.two{display:grid;grid-template-columns:1fr 360px;gap:var(--syg-space-5);align-items:start}
.kv{width:100%;border-collapse:collapse;font-size:var(--syg-fs-small)}
.kv th{text-align:left;font-weight:var(--syg-fw-regular);color:var(--syg-text-secondary);
  padding:var(--syg-space-2) 0;width:44%;border-bottom:var(--syg-border-w) solid var(--syg-grey);vertical-align:top}
.kv td{padding:var(--syg-space-2) 0;border-bottom:var(--syg-border-w) solid var(--syg-grey);
  font-weight:var(--syg-fw-bold);vertical-align:top}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:none}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;gap:var(--syg-space-4)}
.msg{padding:var(--syg-space-3) var(--syg-space-4);font-size:var(--syg-fs-body);
  line-height:var(--syg-lh-body);max-width:92%}
.msg .who2{display:block;font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);
  text-transform:uppercase;letter-spacing:var(--syg-ls-upper);margin-bottom:var(--syg-space-1);
  color:var(--syg-grey-60)}
.msg.user{background:var(--syg-bg-selected);border-left:3px solid var(--syg-cyan);align-self:flex-end}
.msg.bot{background:var(--syg-bg-panel);border-left:3px solid var(--syg-grey-40)}
.msg.bot.deny{border-left-color:var(--syg-danger)}
.msg .cite{display:block;margin-top:var(--syg-space-2);font-size:var(--syg-fs-caption);
  line-height:var(--syg-lh-caption);color:var(--syg-text-secondary);
  border-top:var(--syg-border-w) solid var(--syg-border);padding-top:var(--syg-space-2)}
.chat-input{display:flex;gap:var(--syg-space-2);margin-top:var(--syg-space-4);
  padding-top:var(--syg-space-4);border-top:var(--syg-border-w) solid var(--syg-border)}

/* ---------- §16 system states ---------- */
.state{background:var(--syg-bg-panel);padding:var(--syg-space-7) var(--syg-space-5);text-align:left}
.state .ic-lg{color:var(--syg-grey-40);margin-bottom:var(--syg-space-3)}
.state h3{font-size:var(--syg-fs-h3);line-height:var(--syg-lh-h3);font-weight:var(--syg-fw-bold);
  margin-bottom:var(--syg-space-1)}
.state p{font-size:var(--syg-fs-body);color:var(--syg-grey-80);max-width:60ch;margin-bottom:var(--syg-space-4)}
.state .ref{font-family:var(--syg-font-mono);font-size:var(--syg-fs-caption);color:var(--syg-text-secondary)}
.skel{display:block;background:var(--syg-grey-20);height:12px;margin-bottom:var(--syg-space-2);
  animation:skelpulse 1.4s ease-in-out infinite}
@keyframes skelpulse{0%,100%{opacity:1}50%{opacity:.45}}
.stale{display:flex;align-items:center;gap:var(--syg-space-3);padding:var(--syg-space-2) var(--syg-space-4);
  background:var(--syg-warning-bg);border-bottom:var(--syg-border-w) solid var(--syg-warning);
  font-size:var(--syg-fs-small);color:var(--syg-warning-text)}

/* ---------- §11 E3 drawer / modal ---------- */
.ovl,.modal-ovl{position:fixed;inset:0;background:var(--syg-scrim);display:none}
.ovl{z-index:var(--syg-z-scrim)}
.modal-ovl{z-index:var(--syg-z-scrim)}
.ovl[data-open="true"],.modal-ovl[data-open="true"]{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:94vw;background:var(--syg-white);
  z-index:var(--syg-z-modal);border-left:var(--syg-border-w) solid var(--syg-border-base);
  display:none;flex-direction:column}
.drawer[data-open="true"]{display:flex}
.drawer-head,.modal-head{padding:var(--syg-space-4);
  border-bottom:var(--syg-border-w) solid var(--syg-border-base);
  display:flex;gap:var(--syg-space-3);align-items:flex-start}
.drawer-head h2,.modal-head h2{font-size:var(--syg-fs-h3);line-height:var(--syg-lh-h3);
  font-weight:var(--syg-fw-bold)}
.drawer-head p,.modal-head p{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);margin-top:2px}
.drawer-head .x,.modal-head .x{margin-left:auto;width:var(--syg-control-h-compact);
  height:var(--syg-control-h-compact);border:var(--syg-border-w) solid var(--syg-border-strong);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.drawer-head .x:hover,.modal-head .x:hover{border-color:var(--syg-danger);
  color:var(--syg-danger-text);background:var(--syg-danger-bg)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--syg-space-4) var(--syg-space-4) var(--syg-space-6)}
.drawer-foot,.modal-foot{padding:var(--syg-space-3) var(--syg-space-4);
  border-top:var(--syg-border-w) solid var(--syg-border);display:flex;gap:var(--syg-space-2)}
.drawer-foot .btn{flex:1;justify-content:center}
.modal-foot{justify-content:flex-end}
.dsec{font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold);text-transform:uppercase;
  letter-spacing:var(--syg-ls-upper);color:var(--syg-text-secondary);
  margin:var(--syg-space-5) 0 var(--syg-space-3);padding-bottom:var(--syg-space-1);
  border-bottom:var(--syg-border-w) solid var(--syg-grey)}
.dsec:first-child{margin-top:0}
.dstats{display:grid;grid-template-columns:1fr 1fr;gap:var(--syg-border-w);
  background:var(--syg-border);border:var(--syg-border-w) solid var(--syg-border)}
.dstat{background:var(--syg-white);padding:var(--syg-space-3)}
.dstat .v{font-size:var(--syg-fs-h2);line-height:var(--syg-lh-h2);font-weight:var(--syg-fw-bold)}
.dstat .l{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);margin-top:var(--syg-space-1)}
.slabar{height:10px;background:var(--syg-grey);position:relative;margin:var(--syg-space-2) 0 var(--syg-space-1)}
.slabar span{display:block;height:100%;background:var(--syg-cyan-d20)}
.slalegend{display:flex;justify-content:space-between;font-size:var(--syg-fs-caption);
  color:var(--syg-text-secondary)}
.sess{display:flex;gap:var(--syg-space-3);padding:var(--syg-space-3) 0;
  border-bottom:var(--syg-border-w) solid var(--syg-grey);align-items:flex-start}
.sess:last-child{border-bottom:none}
.sess .sv{width:32px;height:32px;background:var(--syg-cyan-20);color:var(--syg-cyan-d40);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:var(--syg-fs-caption);
  font-weight:var(--syg-fw-bold)}
.sess .sv.av-danger{background:var(--syg-danger-bg);color:var(--syg-danger-text)}
.sess .sv.av-warn{background:var(--syg-warning-bg);color:var(--syg-warning-text)}
.sess .sv.av-ok{background:var(--syg-success-bg);color:var(--syg-success-text)}
.sess .sn{font-size:var(--syg-fs-body);font-weight:var(--syg-fw-bold)}
.sess .sm{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);margin-top:2px;display:block}
.sess .sr{margin-left:auto;text-align:right;flex-shrink:0}
.sess .sr .p{font-size:var(--syg-fs-body);font-weight:var(--syg-fw-bold)}
.sess .sr .d{font-size:var(--syg-fs-caption);font-weight:var(--syg-fw-bold)}
.guards{display:flex;flex-wrap:wrap;gap:var(--syg-space-2)}
.guards span{font-size:var(--syg-fs-caption);border:var(--syg-border-w) solid var(--syg-border-strong);
  padding:var(--syg-space-1) var(--syg-space-2);background:var(--syg-white)}
.guards b{color:var(--syg-cyan-d40)}
.log{border:var(--syg-border-w) solid var(--syg-border-strong);background:var(--syg-bg-panel);
  padding:var(--syg-space-3);max-height:260px;overflow-y:auto}
.logline{display:flex;gap:var(--syg-space-2);font-size:var(--syg-fs-small);
  line-height:var(--syg-lh-small);margin-bottom:var(--syg-space-2)}
.logline:last-child{margin-bottom:0}
.logt{font-family:var(--syg-font-mono);font-size:var(--syg-fs-caption);
  color:var(--syg-text-secondary);flex-shrink:0}
.who{font-weight:var(--syg-fw-bold)}
.who.bot{color:var(--syg-cyan-d40)} .who.sup{color:var(--syg-grey-80)} .who.gr{color:var(--syg-success-text)}

.modal{position:fixed;top:9vh;left:50%;transform:translateX(-50%);width:640px;max-width:94vw;
  max-height:82vh;background:var(--syg-white);border:var(--syg-border-w) solid var(--syg-border-base);
  z-index:var(--syg-z-modal);display:none;flex-direction:column}
.modal[data-open="true"]{display:flex}
.modal-body{flex:1;overflow-y:auto;padding:var(--syg-space-5) var(--syg-space-4)}
.modal-body p{font-size:var(--syg-fs-body);line-height:var(--syg-lh-body);margin-bottom:var(--syg-space-3)}
.modal-body .filters{grid-template-columns:1fr 1fr}
.mnote{font-size:var(--syg-fs-caption);line-height:var(--syg-lh-caption);
  color:var(--syg-text-secondary);border-top:var(--syg-border-w) solid var(--syg-grey);
  padding-top:var(--syg-space-3);margin-top:var(--syg-space-4)}
.mnote b{color:var(--syg-text)}

.foot{padding:var(--syg-space-3) var(--syg-gutter);border-top:var(--syg-border-w) solid var(--syg-border);
  display:flex;gap:var(--syg-space-3);font-size:var(--syg-fs-caption);
  line-height:var(--syg-lh-caption);color:var(--syg-text-secondary);align-items:center;flex-wrap:wrap;
  min-height:40px}
.foot .idx{margin-left:auto;font-family:var(--syg-font-mono)}

/* ---------- §3.4 breakpoints ---------- */
@media (max-width:1440px){.two{grid-template-columns:1fr 320px}}
@media (max-width:1024px){
  .two{grid-template-columns:1fr}
  .filters,.filters.c5,.filters.c3{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .aside{width:var(--syg-sidenav-w-rail)}
  .aside .grp,.nav-item span,.nav-item .nb,.navgroup{display:none}
  .nav-item{justify-content:center;padding:var(--syg-space-2)}
  .nav-item > svg.ic{margin-right:0}
  .axis .product,.axis .divider{display:none}
  /* The top bar is a fixed-height flex row that cannot wrap, so everything in it must be able to shrink or go away:
     without this the right-hand cluster alone is wider than a 400px screen and the whole page scrolls sideways. */
  .axis-right{gap:var(--syg-space-1);min-width:0}
  .sample-chip{display:none}
  .entity-btn{min-width:0}
  .entity-btn .val{overflow:hidden;text-overflow:ellipsis}
  /* The avatar stays as the menu's target; the name and role are in the menu itself. */
  .user-btn .um{display:none}
  .filters,.filters.c5,.filters.c3{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  /* §18.4 touch targets */
  .btn,.ctrl,.pg{min-height:var(--syg-control-h-touch)}
  .rowact .menu button,.dd-item{min-height:var(--syg-control-h-touch)}
}

/* ---------- §29 print ---------- */
@media print{
  .aside,.axis-right,.subhead-actions,.panel-tools,.pager,.tbl-toolbar,
  .drawer,.ovl,.modal,.modal-ovl,.skip,.foot .idx{display:none !important}
  .shell{display:block}
  .content{max-width:none;padding:0}
  .panel{border:1px solid var(--syg-grey-80);break-inside:avoid}
  table.t tbody tr.marked td:first-child,table.t tbody tr.marked-orange td:first-child{border-left:4px solid var(--syg-grey-80)}
  .st{border-color:var(--syg-grey-80);background:var(--syg-white);color:var(--syg-black)}
  a[href]::after{content:""}
}