/* Argus web. Brand: Argus Design Guidelines v1.1 (29 Sep 2026), GnB AI Teams / Olympus,
   output/brand-identity/argus/design.md. Tokens below are that file's section 13, with three
   overrides Ardian made on 29 Sep that win over the guideline, so do not "fix" them back:
   · one 4px radius for everything (the guideline says 8 / 12 / 16)
   · no left borders at all: no status stripe on cards, no bar on the active menu item
   · the dark theme is darker and neutral (the guideline's dark greys read green to him)
   Nothing else in this sheet may introduce a hex (chart slots excepted, see there).
   The card anatomy is still the one Ardian picked on 2026-09-23 (Ahrefs Projects layout).

   Rules carried from the guideline:
   · amber is the brand, not the warning colour; status wears its own token + icon + label
   · status badges sit on a neutral surface, never a status-coloured fill with white text
   · 44px targets for buttons and inputs, 2px focus ring at 3px offset, tabular numbers
   · light is the default; dark follows the OS unless the viewer picked one (app.js) */

/* ---- fonts: self-hosted, SIL OFL 1.1 (licences in static/fonts/) ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
 src:url(fonts/inter-latin.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
 src:url(fonts/inter-latin-ext.woff2) format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
 src:url(fonts/space-grotesk-latin.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
 src:url(fonts/space-grotesk-latin-ext.woff2) format("woff2");
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- tokens (design.md section 13) ---- */
:root[data-brand="argus"]{
 color-scheme:light;
 --brand-accent:#FFBC57;--brand-accent-hover:#F2AA3B;--brand-accent-pressed:#E69A24;
 --brand-text:#8B5200;--brand-soft:#FFF0D8;--on-accent:#141918;--gnb-accent:#C6FF00;
 --bg:#F4F3EE;--surface:#FFFFFF;--surface-raised:#ECEEE9;
 --text:#141918;--text-muted:#52615A;--border:#D8DEDA;--control-border:#7B8982;--focus-ring:#8B5200;
 --success:#176B46;--warning:#8A4B08;--danger:#B42318;--info:#175CD3;
 --font-heading:"Space Grotesk","Segoe UI",sans-serif;
 --font-body:"Inter","Segoe UI",sans-serif;
 --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
 --radius-control:4px;--radius-card:4px;--radius-dialog:4px;
 --duration-fast:120ms;--duration-standard:180ms;
 /* derived, not new colours */
 --hair:var(--surface-raised);          /* dividers inside a card */
 --logo-mark:var(--text);               /* light: charcoal symbol at header size (design.md s3) */
 --pop:0 8px 24px rgba(20,25,24,.12);   /* popovers only (s6) */
 --scrim:rgba(20,25,24,.4);
 --fav-tile:#FFFFFF;
 /* Chart slots. Slot 1 is the brand series (s4: brand-text = "seri grafik utama"); 2-5 are the
    dataviz reference hues in the order that validated with slot 1 (validate_palette.js,
    29 Sep 2026, surface #FFFFFF): lightness, chroma, CVD and normal-vision all PASS, worst adjacent
    CVD dE 23.1. Slots 3 and 5 sit under 3:1, so every chart keeps its table view. */
 --c1:#8B5200;--c2:#2a78d6;--c3:#1baf7a;--c4:#4a3aa7;--c5:#e87ba4;--c-rest:#D8DEDA;
 background:var(--bg);color:var(--text);font-family:var(--font-body)}
@media (prefers-color-scheme:dark){:root[data-brand="argus"]:not([data-theme="light"]){
 color-scheme:dark;
 --brand-text:#FFBC57;--brand-soft:#3D2D19;
 --bg:#0B0B0C;--surface:#141416;--surface-raised:#1D1D20;
 --text:#F4F3EE;--text-muted:#A9A9B1;--border:#2E2E33;--control-border:#76767F;--focus-ring:#FFBC57;
 --success:#75E0A7;--warning:#FEC84B;--danger:#FDA29B;--info:#84CAFF;
 --logo-mark:var(--brand-accent);--pop:none;--scrim:rgba(0,0,0,.55);
 /* #FFBC57 fails the dark lightness band (L .84 > .67), so slot 1 snaps to the reference amber step */
 --c1:#c98500;--c2:#3987e5;--c3:#199e70;--c4:#9085e9;--c5:#d55181;--c-rest:#34343A}}
:root[data-brand="argus"][data-theme="dark"]{
 color-scheme:dark;
 --brand-text:#FFBC57;--brand-soft:#3D2D19;
 --bg:#0B0B0C;--surface:#141416;--surface-raised:#1D1D20;
 --text:#F4F3EE;--text-muted:#A9A9B1;--border:#2E2E33;--control-border:#76767F;--focus-ring:#FFBC57;
 --success:#75E0A7;--warning:#FEC84B;--danger:#FDA29B;--info:#84CAFF;
 --logo-mark:var(--brand-accent);--pop:none;--scrim:rgba(0,0,0,.55);
 --c1:#c98500;--c2:#3987e5;--c3:#199e70;--c4:#9085e9;--c5:#d55181;--c-rest:#34343A}

/* Status and notice icons, drawn once, painted with a token through a mask. */
:root{
 --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 16.5v-5M12 7.5h.01'/%3E%3C/svg%3E");
 --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
 --i-danger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 2.5h8.2l5.4 5.4v8.2l-5.4 5.4H7.9l-5.4-5.4V7.9Z'/%3E%3Cpath d='M12 8v4.5M12 16h.01'/%3E%3C/svg%3E");
 --i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.2 9.5'/%3E%3C/svg%3E");
 --i-none:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}

/* ---- base ---- */
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:76px}   /* anchors land below the sticky top bar */
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.5rem var(--font-body);
 font-feature-settings:"cv11";-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;letter-spacing:0;color:var(--text)}
h1{font-size:2rem;line-height:2.5rem;margin:0 0 var(--space-2)}
.wrap{max-width:1440px;margin:0 auto;padding:var(--space-8) var(--space-8) var(--space-16)}
.sub{color:var(--text-muted);font-size:.875rem;line-height:1.25rem;margin:0 0 var(--space-1);max-width:980px}
code{font-family:var(--font-mono);font-size:.8125em;background:var(--surface-raised);
 border:1px solid var(--border);padding:1px 5px;border-radius:4px}
a{color:var(--brand-text);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--space-2);top:var(--space-2);background:var(--surface);color:var(--text);
 border:1px solid var(--control-border);border-radius:var(--radius-control);padding:10px 16px;z-index:60}
[hidden]{display:none!important}
.num,.n,.d,.mt td,.chip b,.kpi b,.cov-n,table.dt td{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* icon helper: element::before painted with --ico in --ico-c */
.st::before,.callout::before,.banner::before,.err::before{content:"";flex:none;
 width:20px;height:20px;background:var(--ico-c,currentColor);
 -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}

/* ---- buttons and fields (design.md s8) ---- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
 padding:10px 16px;border:1px solid var(--brand-text);border-radius:var(--radius-control);
 background:var(--brand-accent);color:var(--on-accent);font:600 .875rem/1.4 var(--font-body);cursor:pointer;
 text-decoration:none;transition:background-color var(--duration-fast) ease-out}
.btn-primary:hover:not(:disabled){background:var(--brand-accent-hover)}
.btn-primary:active:not(:disabled){background:var(--brand-accent-pressed)}
.btn-primary:disabled{background:var(--surface-raised);border-color:var(--control-border);color:var(--text-muted);cursor:not-allowed}
.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:44px;
 min-height:44px;padding:10px 16px;border:1px solid var(--control-border);border-radius:var(--radius-control);
 background:var(--surface);color:var(--brand-text);font:500 .875rem/1.4 var(--font-body);cursor:pointer;
 text-decoration:none;white-space:nowrap;transition:background-color var(--duration-fast) ease-out}
.btn-quiet:hover{background:var(--surface-raised)}
.field{font:400 1rem/1.5rem var(--font-body);min-height:44px;padding:9px 12px;border:1px solid var(--control-border);
 border-radius:var(--radius-control);background:var(--surface);color:var(--text)}
input.field{min-width:220px}
select.field{padding-right:32px}

/* ---- app shell: sidebar that folds to an icon rail, drawer below 1024px ---- */
.logo{display:block;flex:none}
.logo .lg-mk{fill:var(--logo-mark)}
.logo .lg-wm{fill:var(--text)}
.logo-accent .lg-mk{fill:var(--brand-accent)}   /* large display only (login) */
.brand{display:inline-flex;align-items:center;border-radius:var(--radius-control);text-decoration:none;color:var(--text)}
.brand .logo-mark{display:none}
.shell{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;flex:0 0 240px;width:240px;display:flex;flex-direction:column;
 background:var(--surface);border-right:1px solid var(--border);padding:var(--space-3) var(--space-3) var(--space-4);
 overflow-y:auto;overflow-x:hidden;z-index:30;
 transition:width var(--duration-standard) ease-out,flex-basis var(--duration-standard) ease-out}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 0 var(--space-4)}
.rail-btn,.theme-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-width:44px;
 min-height:44px;padding:0 var(--space-3);border:0;border-radius:var(--radius-control);background:none;color:var(--text-muted);
 font:500 .875rem/1.25rem var(--font-body);cursor:pointer;transition:background-color var(--duration-fast) ease-out}
.rail-btn:hover,.theme-btn:hover{color:var(--text);background:var(--surface-raised)}
.ico{width:20px;height:20px;flex:none}
.menu{display:flex;flex-direction:column;gap:var(--space-1)}
.item{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-3);
 border-radius:var(--radius-control);color:var(--text-muted);text-decoration:none;font:500 .875rem/1.25rem var(--font-body);
 white-space:nowrap;transition:background-color var(--duration-fast) ease-out}
.item:hover{background:var(--surface-raised);color:var(--text)}
.item.on{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
details.grp>summary{list-style:none;cursor:pointer}
details.grp>summary::-webkit-details-marker{display:none}
.item-link{display:flex;align-items:center;gap:var(--space-3);align-self:stretch;color:inherit;text-decoration:none;
 flex:1;min-width:0;border-radius:var(--radius-control)}
.chev{width:20px;height:20px;flex:none;display:grid;place-items:center}
.chev:before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
 transform:rotate(-45deg);transition:transform var(--duration-fast) ease-out}
details.grp[open] .chev:before{transform:rotate(45deg)}
.subnav{list-style:none;margin:var(--space-1) 0 var(--space-2);padding:0 0 0 44px;display:flex;flex-direction:column;gap:2px}
.subnav a{display:flex;align-items:center;min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-control);
 font-size:.875rem;color:var(--text-muted);text-decoration:none}
.subnav a:hover{background:var(--surface-raised);color:var(--text)}
.side-foot{margin-top:auto;border-top:1px solid var(--border);padding:var(--space-3) 0 0;display:flex;
 flex-direction:column;align-items:stretch;gap:var(--space-2);font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.side-foot .theme-btn{justify-content:flex-start}
.who-name{padding:0 var(--space-3)}
.side-foot form{margin:0}
.side-foot form .btn-quiet{width:100%}
.body{flex:1;min-width:0}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:25}
:root[data-nav=rail] .side{flex-basis:72px;width:72px;padding:var(--space-3) var(--space-3) var(--space-4)}
:root[data-nav=rail] .side .lbl,:root[data-nav=rail] .side .chev,:root[data-nav=rail] .side .subnav,
:root[data-nav=rail] .brand .logo-horizontal{display:none}
:root[data-nav=rail] .brand .logo-mark{display:block}
:root[data-nav=rail] .side-top{flex-direction:column;justify-content:center;gap:var(--space-2)}
:root[data-nav=rail] .item{justify-content:center;padding:0;box-shadow:none}
:root[data-nav=rail] .item-link{flex:none;justify-content:center;width:100%}
:root[data-nav=rail] .side-foot{border-top:0;align-items:center}
:root[data-nav=rail] .side-foot .theme-btn{justify-content:center;padding:0}
:root[data-nav=rail] .side-foot form .btn-quiet{padding:10px 4px;font-size:.75rem}

/* ---- top bar: the bell on every page; on a phone also the menu button and the logo ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-3);min-height:60px;
 padding:var(--space-2) var(--space-8);background:var(--bg);border-bottom:1px solid var(--border)}
.topbar .tb-menu,.topbar .brand{display:none}
.topbar .grow{flex:1}
.bell{position:relative}
.bell>summary{list-style:none}
.bell>summary::-webkit-details-marker{display:none}
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
 border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text);cursor:pointer;
 transition:background-color var(--duration-fast) ease-out}
.bell-btn:hover,.bell[open] .bell-btn{background:var(--surface-raised)}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-control);
 background:var(--brand-accent);color:var(--on-accent);font:700 .75rem/20px var(--font-body);text-align:center;
 font-variant-numeric:tabular-nums}
.bell-panel{position:absolute;right:0;top:calc(100% + var(--space-2));width:min(440px,calc(100vw - 32px));max-height:72vh;
 overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);
 box-shadow:var(--pop);z-index:40}
.bell-h{margin:0;padding:var(--space-3) var(--space-4);font:600 1rem/1.5rem var(--font-heading);
 border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.bell-list{list-style:none;margin:0;padding:var(--space-1) 0}
.bell-i{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);color:var(--text);
 text-decoration:none;font-size:.875rem;line-height:1.25rem}
.bell-i:hover{background:var(--surface-raised)}
.bell-i .st{flex:none;margin-top:1px}
.bell-t b{font-weight:600}
.bell-r{display:block;color:var(--text-muted);margin-top:2px}
.bell-e,.bell-f{margin:0;padding:var(--space-3) var(--space-4);font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.bell-f{border-top:1px solid var(--border)}

/* ---- notices: neutral surface, status icon + text (never colour alone) ---- */
.banner{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-8);
 background:var(--surface-raised);border-bottom:1px solid var(--border);font-size:.875rem;line-height:1.25rem;
 --ico:var(--i-info);--ico-c:var(--info)}
.banner.crit{font-weight:600;--ico:var(--i-danger);--ico-c:var(--danger)}
.callout{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);font-size:.875rem;line-height:1.25rem;
 color:var(--text-muted);margin:var(--space-3) 0;max-width:980px;--ico:var(--i-warn);--ico-c:var(--warning)}
.callout>div,.callout>span{min-width:0}
.callout b{color:var(--text)}
.callout p{margin:0 0 var(--space-2)}.callout p:last-child{margin-bottom:0}
.err{display:flex;gap:var(--space-3);align-items:flex-start;border:1px solid var(--danger);background:var(--surface);
 border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);font-size:.875rem;line-height:1.25rem;
 margin:var(--space-4) 0 0;--ico:var(--i-danger);--ico-c:var(--danger)}

/* ---- login ---- */
.login{max-width:400px;margin:10vh auto 0}
.login .logo{margin:0 auto}
.login-role{text-align:center;margin:var(--space-2) 0 var(--space-1);font:600 .75rem/1.125rem var(--font-body);
 letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.login .sub{text-align:center;margin:0 auto}
.login form{margin-top:var(--space-6);background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-card);padding:var(--space-6)}
.login label{display:block;font:600 .875rem/1.25rem var(--font-body);margin:var(--space-4) 0 var(--space-2)}
.login label:first-of-type{margin-top:0}
.login input{width:100%}
.login .btn-primary{width:100%;margin-top:var(--space-6)}

/* ---- dashboard: one summary card per PIC (click = filter to that PIC) ---- */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3);margin:var(--space-6) 0 var(--space-2)}
.pic{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);
 transition:border-color var(--duration-fast) ease-out,background-color var(--duration-fast) ease-out}
.pic:hover{border-color:var(--control-border)}
.pic.on{background:var(--brand-soft);border-color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--brand-text)}
.pic-name{font:600 1.125rem/1.625rem var(--font-heading)}
.pic-n{font-size:.875rem;line-height:1.25rem;color:var(--text-muted)}
.pic-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-raised)}
.seg{display:block;height:100%}
.seg.red{background:var(--danger)}.seg.yellow{background:var(--warning)}.seg.green{background:var(--success)}.seg.grey{background:var(--control-border)}
.pic-counts{display:flex;gap:var(--space-3);flex-wrap:wrap;font-size:.75rem;line-height:1.125rem}
.pic-counts b{font-weight:600}
.tr{color:var(--danger)}.ty{color:var(--warning)}.tg{color:var(--success)}.tx{color:var(--text-muted)}
.pic-red{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}

/* toolbar: PIC tabs, status chips, search and sort */
.bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-6) 0 var(--space-4);
 background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-2)}
.tabs{display:flex;gap:var(--space-1);flex-wrap:wrap}
.tab,.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--space-3);
 border:1px solid transparent;border-radius:var(--radius-control);background:none;color:var(--text-muted);
 font:500 .875rem/1.25rem var(--font-body);white-space:nowrap;cursor:pointer;
 transition:background-color var(--duration-fast) ease-out}
.tab:hover,.chip:hover{background:var(--surface-raised);color:var(--text)}
.tab.on,.chip.on{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-text);font-weight:600}
.chips{display:flex;gap:var(--space-1);flex-wrap:wrap}
.chip{border-color:var(--border)}
.chip b{font:600 .875rem/1.25rem var(--font-body);color:var(--text)}
.chip.red b{color:var(--danger)}.chip.yellow b{color:var(--warning)}.chip.green b{color:var(--success)}
.spacer{flex:1}
.tools{display:flex;gap:var(--space-2);flex-wrap:wrap}
.nomatch{color:var(--text-muted);margin:var(--space-8) 2px}

.ownerhead{font:600 1.125rem/1.625rem var(--font-heading);color:var(--text);margin:var(--space-8) 2px var(--space-3)}

/* ---- the client card ---- */
.c{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
 margin-bottom:var(--space-3);overflow:hidden;scroll-margin-top:var(--space-4)}
.c:target{outline:2px solid var(--focus-ring);outline-offset:3px}
.chead{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6) var(--space-3)}
.fav{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--radius-control);
 background:var(--fav-tile);border:1px solid var(--border);overflow:hidden;
 font:700 .875rem/1 var(--font-heading);color:var(--on-accent);text-transform:uppercase}
.fav img{width:22px;height:22px;display:block;object-fit:contain}
/* status: icon + word on a neutral surface (the grade words are the team's: merah, kuning, hijau) */
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:var(--radius-control);
 background:var(--surface-raised);color:var(--text);font:600 .75rem/1.125rem var(--font-body);white-space:nowrap}
.st::before{width:14px;height:14px}
.st.red::before{--ico:var(--i-danger);--ico-c:var(--danger)}
.st.yellow::before{--ico:var(--i-warn);--ico-c:var(--warning)}
.st.green::before{--ico:var(--i-ok);--ico-c:var(--success)}
.st.grey::before{--ico:var(--i-none);--ico-c:var(--text-muted)}
.bell-i .st{padding:0;background:none;width:16px;height:16px}
.bell-i .st::before{width:16px;height:16px}
.ctitle{min-width:0}
.cname{font:600 1.125rem/1.625rem var(--font-heading);margin:0}
.cname a{color:inherit;text-decoration:none}
.cname a:hover{text-decoration:underline;text-decoration-color:var(--control-border)}
.csub{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.badges{margin-left:auto;display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.b{font:500 .75rem/1.125rem var(--font-body);padding:3px 10px;border-radius:var(--radius-control);border:1px solid var(--border);
 color:var(--text-muted);background:var(--surface)}
.b.own{background:var(--surface-raised);border-color:transparent;font-weight:600;color:var(--text)}
.b.warn{color:var(--warning);border-color:var(--warning)}
.b.crit{color:var(--danger);border-color:var(--danger);font-weight:600}

.strip{display:flex;border-top:1px solid var(--hair);align-items:stretch;overflow-x:auto}
.m{padding:var(--space-3) var(--space-4) var(--space-4);border-right:1px solid var(--hair);flex:1 1 0;min-width:168px}
.m:first-child{padding-left:var(--space-6)}
.m:last-child{border-right:none;padding-right:var(--space-6)}
.m.cmp{flex:0 0 196px;min-width:196px}
.m.ads{flex:0 0 224px;min-width:224px}
.mlab{font:500 .75rem/1.125rem var(--font-body);color:var(--text-muted);margin-bottom:var(--space-1);white-space:nowrap}
.mval{display:flex;align-items:baseline;gap:var(--space-2)}
.n{font:600 1.5rem/2rem var(--font-heading)}
.n.sm{font-size:1.125rem;line-height:1.625rem}
.d{font:600 .75rem/1.125rem var(--font-body)}
.d.up{color:var(--success)}.d.down{color:var(--danger)}.d.flat{color:var(--text-muted)}
.sub2{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.mt{width:100%;border-collapse:collapse;margin-top:var(--space-1)}
.mt td{padding:3px 0;font-size:.75rem;line-height:1.125rem;white-space:nowrap}
.mt td.k{color:var(--text-muted);padding-right:var(--space-2)}
.mt td.v{text-align:right;padding-right:var(--space-2)}
.mt td.v.miss{color:var(--text-muted);padding-right:0}
.mt td.v.stop{color:var(--danger);padding-right:0}
.mt td.p{text-align:right;font-weight:600}
.mt td.p.up{color:var(--success)}.mt td.p.down{color:var(--danger)}
.mt td.p.flat,.mt td.p.na{color:var(--text-muted);font-weight:400}
abbr{text-decoration:none;cursor:help;color:var(--warning);font-weight:700}

/* sparkline: the SVG stretches to the column, the scale sits beside it in HTML */
.spkw{display:flex;gap:var(--space-2);align-items:stretch;margin-top:var(--space-2)}
.spk{flex:1 1 auto;min-width:0;width:100%;display:block;overflow:visible}
.spk .ar{stroke:none;opacity:.14}
.spk .ln{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.spk.up .ln{stroke:var(--success)}.spk.up .ar{fill:var(--success)}
.spk.down .ln{stroke:var(--danger)}.spk.down .ar{fill:var(--danger)}
.spk.flat .ln{stroke:var(--info)}.spk.flat .ar{fill:var(--info)}
.spk-edge{display:flex;flex-direction:column;justify-content:space-between;flex:none;min-width:36px;
 font-size:.75rem;line-height:1;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}
.empty{font-size:.875rem;line-height:1.25rem;color:var(--text-muted);padding-top:var(--space-1)}

details.note{border-top:1px solid var(--hair)}
details.note summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-2);min-height:44px;
 padding:0 var(--space-6);font:500 .875rem/1.25rem var(--font-body);color:var(--text-muted)}
details.note summary::-webkit-details-marker{display:none}
details.note summary:before{content:"";width:7px;height:7px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--duration-fast) ease-out;flex:none}
details.note[open] summary:before{transform:rotate(45deg)}
details.note summary:hover{color:var(--text)}
details.note .in{padding:0 var(--space-6) var(--space-4);font-size:.875rem;line-height:1.25rem;color:var(--text-muted);max-width:940px}
details.note .in p{margin:0 0 var(--space-2)}
details.note .in b{color:var(--text)}
.foot{margin-top:var(--space-12);padding-top:var(--space-2);border-top:1px solid var(--border)}
.foot details.note{border-top:0}
.foot details.note summary,.foot details.note .in{padding-left:0}
.foot .in p{max-width:880px}
.excl{border-collapse:collapse}
.excl td{padding:3px var(--space-4) 3px 0;font-size:.75rem;line-height:1.125rem;vertical-align:top}
.excl td.slug{font-family:var(--font-mono);color:var(--text);white-space:nowrap}

/* ---- client page ---- */
.crumb{font-size:.875rem;line-height:1.25rem;color:var(--text-muted);margin:0 0 var(--space-2)}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--text);text-decoration:underline}
.phead{display:flex;gap:var(--space-4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-4)}
.jump{display:flex;gap:var(--space-1);flex-wrap:wrap;margin:var(--space-6) 0 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-control);
 font:500 .875rem/1.25rem var(--font-body);color:var(--text-muted);text-decoration:none}
.jump a:hover{background:var(--surface-raised);color:var(--text)}
.sec{margin-top:var(--space-12);scroll-margin-top:var(--space-4)}
.sec>h2{font-size:1.5rem;line-height:2rem;margin:0 0 var(--space-4)}
.sec h3{font-size:1.125rem;line-height:1.625rem;margin:var(--space-8) 0 var(--space-1)}
.fine{font-size:.75rem;line-height:1.125rem;color:var(--text-muted);margin:var(--space-2) 0 var(--space-1);max-width:900px}
.dim{color:var(--text-muted)}

/* charts: slots --c1..--c5 are defined with the tokens above */
.fig{margin:0 0 var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
 padding:var(--space-4) var(--space-6) var(--space-3)}
.fig figcaption{display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap;font-size:.875rem;line-height:1.25rem;margin-bottom:var(--space-2)}
.fig figcaption b{font-weight:600}
.fig figcaption span{color:var(--text-muted);font-size:.75rem;line-height:1.125rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4)}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--hair);stroke-width:1}
.chart .axis{stroke:var(--border);stroke-width:1}
.chart text{font-family:var(--font-body)}
.chart .ytick{fill:var(--text-muted);font-size:12px;text-anchor:end;font-variant-numeric:tabular-nums}
.chart .xtick{fill:var(--text-muted);font-size:12px;text-anchor:middle}
.chart .ptag{fill:var(--text-muted);font-size:11px;text-anchor:middle;font-style:italic}
.chart .s1{fill:var(--c1)}.chart .s2{fill:var(--c2)}.chart .s3{fill:var(--c3)}
.chart .s4{fill:var(--c4)}.chart .s5{fill:var(--c5)}.chart .rest{fill:var(--c-rest)}
.chart .partial{opacity:.45}
.chart .col.hot>*{filter:brightness(1.12)}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:focus{outline:none}
.chart .hit:focus-visible{fill:var(--text);fill-opacity:.06}
.chart path.ln{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
 vector-effect:non-scaling-stroke}
.chart circle.dot{fill:var(--c1);stroke:var(--surface);stroke-width:2}
.chart .xh{stroke:var(--control-border);stroke-width:1;opacity:0;vector-effect:non-scaling-stroke}
.chart .xh.on{opacity:1}
.chart .algo-band{fill:var(--text);opacity:.06}
.chart .algo rect{fill:var(--surface);stroke:var(--control-border);stroke-width:1}
.chart .algo text{font-size:10.5px;text-anchor:middle;fill:var(--text-muted);font-weight:600}
.chart .algo{cursor:help}
.chart .algo:focus{outline:none}
.chart .algo:focus-visible rect,.chart .algo:hover rect{stroke:var(--text)}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;list-style:none;padding:0;margin:0 0 var(--space-2);
 font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.sw.s1{background:var(--c1)}.sw.s2{background:var(--c2)}.sw.s3{background:var(--c3)}
.sw.s4{background:var(--c4)}.sw.s5{background:var(--c5)}.sw.rest{background:var(--c-rest)}
.algo-list{list-style:none;padding:0;margin:var(--space-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);
 font-size:.75rem;line-height:1.125rem}
.algo-list .num{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
 border:1px solid var(--control-border);font-size:10px;font-weight:600;color:var(--text-muted);margin-right:6px}

/* tooltip: values lead, labels follow, line keys not boxes */
.tip{position:absolute;z-index:50;pointer-events:none;background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);font-size:.75rem;line-height:1.125rem;
 box-shadow:var(--pop);min-width:160px;max-width:300px}
.tip-t{color:var(--text-muted);margin-bottom:var(--space-1)}
.tip-r{display:flex;align-items:center;gap:var(--space-2);line-height:1.65}
.tip-r b{font-variant-numeric:tabular-nums;font-weight:600;min-width:58px}
.tip-r span{color:var(--text-muted)}
.tip .key{width:12px;height:2px;border-radius:1px;background:var(--control-border);flex:none}
.tip .key.s1{background:var(--c1)}.tip .key.s2{background:var(--c2)}.tip .key.s3{background:var(--c3)}
.tip .key.s4{background:var(--c4)}.tip .key.s5{background:var(--c5)}.tip .key.rest{background:var(--c-rest)}
.tip-n{margin-top:var(--space-1);color:var(--text-muted)}

/* table views + data tables */
details.tv{margin:var(--space-1) 0 var(--space-4)}
details.tv summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font:500 .875rem/1.25rem var(--font-body);
 color:var(--brand-text)}
.tscroll{overflow:auto;max-height:430px;border:1px solid var(--border);border-radius:var(--radius-card);margin-top:var(--space-2);background:var(--surface)}
table.dt{border-collapse:collapse;width:100%;font-size:.875rem;line-height:1.25rem}
table.dt th,table.dt td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
table.dt th:first-child,table.dt td:first-child{text-align:left}
table.dt tbody th{font-weight:500;color:var(--text);max-width:360px;overflow:hidden;text-overflow:ellipsis}
table.dt thead th{position:sticky;top:0;background:var(--surface);color:var(--text-muted);font-weight:600;z-index:1;
 box-shadow:inset 0 -1px 0 var(--border)}

/* what changed */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-3)}
.mv{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);min-width:0}
.mv h4{margin:0 0 var(--space-2);font-size:.875rem;line-height:1.25rem}
.mv table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem;table-layout:fixed}
.mv th{font-size:.75rem;color:var(--text-muted);font-weight:500;text-align:right;padding:2px 0 var(--space-1)}
.mv th:first-child{text-align:left;width:58%}
.mv td{padding:var(--space-1) 0;border-top:1px solid var(--hair)}
.mv td.k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--space-2)}
.mv td.nv{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.mv td.dp{color:var(--success);font-weight:600}.mv td.dn{color:var(--danger);font-weight:600}

/* ---- SEO: biggest query movers under the strip ---- */
.movers-line{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center;min-height:44px;padding:var(--space-1) var(--space-6);
 border-top:1px solid var(--hair);font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.movers-line b{font-weight:600;margin-right:var(--space-1);font-variant-numeric:tabular-nums}
.mvup b{color:var(--success)}.mvdn b{color:var(--danger)}
.movers-line a{margin-left:auto;font-size:.875rem;font-weight:500}

/* ---- Ads: top campaigns under the strip ---- */
.camps{border-top:1px solid var(--hair);padding:var(--space-2) var(--space-6) var(--space-3);overflow-x:auto}
.camps table{width:100%;border-collapse:collapse;font-size:.75rem;line-height:1.125rem;table-layout:fixed;min-width:520px}
.camps th{color:var(--text-muted);font-weight:500;text-align:right;padding:2px 0 var(--space-1)}
.camps th:first-child{text-align:left;width:52%}
.camps td{padding:var(--space-1) 0;border-top:1px solid var(--hair);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.camps td.k{text-align:left;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--space-3)}

/* ---- GBP ---- */
.sech{font-size:1.5rem;line-height:2rem;margin:var(--space-12) 0 var(--space-3)}
.errs{margin:var(--space-2) 0 0;padding-left:18px}
.errs li{margin:var(--space-1) 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin:var(--space-6) 0 var(--space-2)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);
 display:flex;flex-direction:column;gap:2px}
.kpi .kl{font-size:.875rem;line-height:1.25rem;color:var(--text-muted)}
.kpi b{font:600 2rem/2.5rem var(--font-heading)}
.kpi .ks{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.kpi.crit b{color:var(--danger)}.kpi.warn b{color:var(--warning)}.kpi.ok b{color:var(--success)}
.gclient{margin-top:var(--space-8)}
.gch{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin:0 2px var(--space-3);font-size:.875rem;
 line-height:1.25rem;color:var(--text-muted)}
.gch h2{margin:0;font-size:1.5rem;line-height:2rem}
.gch b{color:var(--text)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3)}
.gcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);
 display:flex;flex-direction:column;gap:var(--space-2)}
.gcard header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.gcard h3{margin:0;font-size:1.125rem;line-height:1.625rem}
.covrow{display:flex;align-items:baseline;gap:var(--space-2)}
.cov-n{font:600 1.5rem/2rem var(--font-heading)}
.cov-l{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.covbar{height:8px;border-radius:4px;background:var(--surface-raised);overflow:hidden}
.covbar i{display:block;height:100%;background:var(--success)}
.gl{margin:0;font-size:.75rem;line-height:1.125rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.gl.ok{color:var(--success)}
.gl b{color:var(--text)}
.tagc{border:1px solid var(--border);border-radius:var(--radius-control);padding:1px var(--space-2);font-size:.75rem}
.vchip{border-radius:var(--radius-control);padding:1px var(--space-2);font-size:.75rem;line-height:1.125rem;border:1px solid var(--border);
 white-space:nowrap;background:var(--surface)}
.vchip.try{color:var(--success);border-color:var(--success)}
.vchip.support_ticket{color:var(--warning);border-color:var(--warning)}
.vchip.blocked{color:var(--danger);border-color:var(--danger)}
.vchip.recreate{color:var(--info);border-color:var(--info)}
.vchip.wait{color:var(--text-muted)}
.wk{display:flex;align-items:center;gap:var(--space-3);margin-top:2px}
.wk svg{flex:1;min-width:0;height:36px}
.wk-axis{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.wk-r{fill:var(--success)}.wk-n{fill:var(--danger)}
.wk-hit{fill:transparent}
.wk-l{font-size:.75rem;color:var(--text-muted);white-space:nowrap}
.tscroll.tall{max-height:640px}
table.gt tbody th{white-space:normal;max-width:320px}
table.gt td{white-space:normal;vertical-align:top;text-align:left}
table.gt td.num{text-align:right;font-variant-numeric:tabular-nums}
table.gt td.ns{min-width:260px;color:var(--text-muted)}
table.gt .lt{display:block;font-weight:600}
table.gt .lt a{color:var(--text);text-decoration:none}
table.gt .lt a:hover{text-decoration:underline}
.ls{display:block;font-size:.75rem;line-height:1.125rem;color:var(--text-muted);font-weight:400}

/* ---- Settings: client brain ---- */
table.bt td,table.bt th{white-space:normal;text-align:left;vertical-align:top}
table.bt td.wrapc{min-width:280px;max-width:460px;color:var(--text-muted)}
table.bt td.stale{color:var(--danger)}
.lk{display:inline-flex;align-items:center;margin:0 6px var(--space-1) 0;padding:2px 10px;border-radius:var(--radius-control);font-size:.75rem;
 line-height:1.125rem;text-decoration:none;border:1px solid var(--border);color:var(--text);background:var(--surface)}
.lk.red{border-color:var(--danger)}.lk.yellow{border-color:var(--warning)}.lk.green{border-color:var(--success)}
.bfile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);
 margin:var(--space-4) 0;scroll-margin-top:var(--space-4)}
.bfile header{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;border-bottom:1px solid var(--hair);
 padding-bottom:var(--space-3);margin-bottom:var(--space-2)}
.bfile header h2{margin:0;font-size:1.125rem;line-height:1.625rem}
.bfile header .dim{font-size:.75rem}
.bfile header .btn-quiet{margin-left:auto}
.md{font-size:1rem;line-height:1.5rem;max-width:980px;overflow-x:auto}
.md h1{font-size:1.5rem;line-height:2rem;margin:var(--space-4) 0 var(--space-2)}
.md h2{font-size:1.25rem;line-height:1.75rem;margin:var(--space-6) 0 var(--space-2)}
.md h3{font-size:1.125rem;line-height:1.625rem;margin:var(--space-4) 0 var(--space-1)}
.md p{margin:var(--space-2) 0}.md ul,.md ol{margin:var(--space-2) 0;padding-left:24px}.md li{margin:2px 0}
.md table{border-collapse:collapse;margin:var(--space-2) 0;font-size:.875rem;line-height:1.25rem}
.md th,.md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}
.md th{background:var(--surface-raised)}
.md blockquote{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);background:var(--surface-raised);border-radius:var(--radius-control);color:var(--text-muted)}
.md pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-control);padding:var(--space-3);overflow-x:auto}
.md code{font-size:.8125em}
.editor textarea{width:100%;min-height:62vh;font:.875rem/1.55 var(--font-mono);padding:var(--space-3);border:1px solid var(--control-border);
 border-radius:var(--radius-control);background:var(--surface);color:var(--text);resize:vertical;tab-size:2}
.editor-bar{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;font-size:.875rem}

/* ---- goal, latest verdict and the verdict log (client page, admins only) ---- */
:root{
 --i-act:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12h8.5M12.5 8.5 16 12l-3.5 3.5'/%3E%3C/svg%3E");
 --i-wait:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11M6.5 21h11M8 3v2.5c0 2 1.6 3.4 4 6.5-2.4 3.1-4 4.5-4 6.5V21M16 3v2.5c0 2-1.6 3.4-4 6.5 2.4 3.1 4 4.5 4 6.5V21'/%3E%3C/svg%3E");
 --i-watch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
 --i-block:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m5.5 5.5 13 13'/%3E%3C/svg%3E");
 --i-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")}
.callout.info{--ico:var(--i-info);--ico-c:var(--info)}
.vd{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:var(--radius-control);background:var(--surface-raised);
 color:var(--text);font:600 .75rem/1.125rem var(--font-body);white-space:nowrap;--ico:var(--i-info);--ico-c:var(--text-muted)}
.vd::before,.gv-flag::before,.gv-stale::before{content:"";flex:none;width:14px;height:14px;background:var(--ico-c);
 -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.vd.act{--ico:var(--i-act);--ico-c:var(--brand-text)}
.vd.wait{--ico:var(--i-wait)}
.vd.watch{--ico:var(--i-watch);--ico-c:var(--warning)}
.vd.nothing{--ico:var(--i-none)}
.vd.blocked{--ico:var(--i-block)}
.vd.closed{--ico:var(--i-ok)}
.vd.edit{--ico:var(--i-edit)}
.gv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-4);margin:var(--space-4) 0}
.gv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);min-width:0}
.gv-k{font:600 .75rem/1.125rem var(--font-body);color:var(--text-muted);margin:0 0 var(--space-2)}
.gv-flag,.gv-stale{display:flex;gap:var(--space-2);align-items:center;--ico:var(--i-warn);--ico-c:var(--warning)}
.gv-flag{font-weight:600;margin:0 0 var(--space-1)}
.gv-flag::before,.gv-stale::before{width:16px;height:16px}
.gv-goal{margin:0}
.gv-g+.gv-g{margin-top:var(--space-3)}
.gv-lvl{display:inline-block;margin-bottom:2px;font:600 .75rem/1.125rem var(--font-body);color:var(--text-muted)}
.gv-lvl.grounded{color:var(--success)}
.gv-meta{margin:var(--space-3) 0 0;font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.gv-stale{margin:var(--space-3) 0 0;font-size:.875rem;line-height:1.25rem}
.gv-v+.gv-v{border-top:1px solid var(--hair);margin-top:var(--space-3);padding-top:var(--space-3)}
.gv-vh{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-2)}
.gv-t{font-weight:600;font-size:.875rem;line-height:1.25rem}
.gv-o{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.gv-b{font-size:.875rem;line-height:1.25rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gv-b p{margin:0}
.vlog{list-style:none;margin:var(--space-4) 0 0;padding:0}
.vl{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--space-1) var(--space-4);padding:var(--space-4) 0;
 border-top:1px solid var(--border)}
.vl:first-child{border-top:0;padding-top:0}
.vl-d{font:600 .875rem/1.5rem var(--font-body);font-variant-numeric:tabular-nums}
.vl-c{min-width:0}
.vl-h{display:flex;gap:var(--space-2) var(--space-3);align-items:center;flex-wrap:wrap}
.vl-t{font-weight:600;font-size:.875rem;line-height:1.25rem}
.vl-t.mono{font:500 .875rem/1.25rem var(--font-mono)}
.vl-o{font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.vl-s{margin-left:auto;font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.vl-b{margin-top:var(--space-2);font-size:.875rem;line-height:1.375rem;max-width:880px}
.vl-b p{margin:0 0 var(--space-2)}.vl-b p:last-child{margin-bottom:0}
.vl-n{margin:var(--space-1) 0 0;font-size:.75rem;line-height:1.125rem;color:var(--text-muted)}
.vl-more{margin-top:var(--space-1)}
.vl-more summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font:500 .875rem/1.25rem var(--font-body);color:var(--brand-text)}
.vl-more .md{font-size:.875rem;line-height:1.375rem;max-width:880px}

.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-6);
 max-width:820px;margin-top:var(--space-4);font-size:.875rem;line-height:1.25rem;color:var(--text-muted)}
.plan ul{margin:var(--space-2) 0 var(--space-3);padding-left:18px}
.plan li{margin:var(--space-1) 0}

/* ---- responsive (design.md s6: 32px from 1024, 24px 640-1023, 16px under 640) ---- */
@media (max-width:1100px){.trio{grid-template-columns:1fr}}
@media (max-width:1023px){
 .wrap{padding:var(--space-6) var(--space-6) var(--space-12)}
 .topbar{padding:var(--space-2) var(--space-4);background:var(--surface)}
 .banner{padding:var(--space-3) var(--space-6)}
 .side{position:fixed;left:0;top:0;width:280px;flex-basis:280px;transform:translateX(-100%);
  transition:transform var(--duration-standard) ease-out}
 .side.open{transform:none;box-shadow:var(--pop)}
 :root[data-nav=rail] .side{width:280px;flex-basis:280px;padding:var(--space-3) var(--space-3) var(--space-4)}
 :root[data-nav=rail] .side .lbl,:root[data-nav=rail] .side .chev,:root[data-nav=rail] .brand .logo-horizontal{display:inline}
 :root[data-nav=rail] .side .subnav{display:flex}
 :root[data-nav=rail] .brand .logo-mark{display:none}
 :root[data-nav=rail] .side-top{flex-direction:row;justify-content:space-between}
 :root[data-nav=rail] .item{justify-content:flex-start;padding:0 var(--space-3)}
 :root[data-nav=rail] .item-link{flex:1;justify-content:flex-start}
 :root[data-nav=rail] .side-foot{align-items:stretch}
 :root[data-nav=rail] .side-foot .theme-btn{justify-content:flex-start;padding:0 var(--space-3)}
 .rail-btn{display:none}
 .topbar .tb-menu,.topbar .brand{display:inline-flex}
 .movers{grid-template-columns:1fr}
 .gv{grid-template-columns:1fr}
}
@media (max-width:800px){.pair{grid-template-columns:1fr}}
@media (max-width:639px){
 h1{font-size:1.75rem;line-height:2.25rem}
 .wrap{padding:var(--space-4) var(--space-4) var(--space-12)}
 .banner{padding:var(--space-3) var(--space-4)}
 .bar{padding:var(--space-2)}
 .spacer{display:none}
 .tools{flex:1 1 100%}
 input.field,select.field{flex:1 1 100%;min-width:0}
 .badges{margin-left:0;justify-content:flex-start}
 .chead{flex-wrap:wrap;padding:var(--space-4)}
 .m:first-child{padding-left:var(--space-4)}.m:last-child{padding-right:var(--space-4)}
 details.note summary,details.note .in,.movers-line,.camps{padding-left:var(--space-4);padding-right:var(--space-4)}
 .pic,.fig,.kpi,.gcard,.bfile,.plan,.mv,.login form{padding:var(--space-4)}
 .vl{grid-template-columns:1fr}
}

/* ---- settings: owners per client and discipline, the team ---- */
.callout.ok{--ico:var(--i-ok);--ico-c:var(--success)}
.setnav{margin:var(--space-4) 0 var(--space-2)}
.setnav .tab{text-decoration:none}
.tscroll.free{max-height:none}
table.omx th,table.omx td,table.tmx th,table.tmx td,table.hist th,table.hist td{text-align:left}
table.omx td,table.tmx td{padding:var(--space-1) var(--space-2)}
table.omx tbody th{white-space:normal;min-width:220px;max-width:none}
table.omx select.field{min-width:112px;width:100%;font-size:.875rem;padding:8px 26px 8px 10px}
table.omx select.field.none{color:var(--text-muted)}
.omx-c{display:flex;gap:var(--space-2);align-items:center}
.omx-c img{flex:none;border-radius:var(--radius-control)}
table.tmx input.field{min-width:150px;width:100%}
table.tmx td:nth-child(2) input.field{min-width:240px}
table.tmx tr.off td{color:var(--text-muted)}
table.omx tr.off th,table.omx tr.off th a{color:var(--text-muted)}
table.omx tr.off img{opacity:.5}
table.tmx tr.newrow td{background:var(--surface-raised)}
input.cb{width:20px;height:20px;margin:12px 0;accent-color:var(--brand-accent)}
.rowform{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap;margin-top:var(--space-2)}
.rowform label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.875rem;color:var(--text-muted)}
table.hist td.wrapc{white-space:normal;min-width:320px}

/* ---- temuan: what the monitor found, per owner ---- */
.runline{font-size:.875rem;line-height:1.25rem;color:var(--text-muted);margin:var(--space-3) 0}
.runline .bad{color:var(--danger)}
table.ft th,table.ft td{text-align:left;vertical-align:top}
table.ft tbody th{white-space:normal;min-width:220px;max-width:none}
table.ft td.wrapc{white-space:normal;min-width:320px;max-width:560px}
table.ft .st{display:inline-flex;flex:none}

/* ---- motion and forced colours ---- */
.theme-swap *,.theme-swap *::before{transition:none!important}
@media (prefers-reduced-motion:reduce){:root[data-brand="argus"]{--duration-fast:0ms;--duration-standard:0ms}}
@media (forced-colors:active){
 .st::before,.callout::before,.banner::before,.err::before,.vd::before,.gv-flag::before,
 .gv-stale::before{background:CanvasText;forced-color-adjust:none}
 .item.on,.tab.on,.chip.on,.pic.on{outline:2px solid Highlight}
}