/* ClearGrid Tech KPI Tracker — Command theme. Tokens below are copied verbatim from cg-crm-v3-F/src/styles/tokens (primitives + semantic + scale + type). Theme is driven by (set by theme.js before first paint). */ [hidden]{display:none!important} img{max-width:100%} /* ─────────────────────────────────────────── primitives (Command) */ :root{ --color-primary-50:#e6f7f7;--color-primary-100:#c4ecec;--color-primary-200:#8edada;--color-primary-300:#4ec3c3; --color-primary-400:#1eacac;--color-primary-500:#069494;--color-primary-600:#057878;--color-primary-700:#045e5e; --color-primary-800:#034646;--color-primary-900:#022f2f;--color-primary-950:#032727; --color-success-50:#e7f7ee;--color-success-100:#c2ebd2;--color-success-200:#8cd8a8;--color-success-300:#4ec27e; --color-success-400:#1faf60;--color-success-500:#129a4d;--color-success-600:#0e7f3f;--color-success-700:#0a6432; --color-success-800:#074d27;--color-success-900:#04331a;--color-success-950:#162720; --color-warning-50:#fbf3df;--color-warning-100:#f5e2a8;--color-warning-200:#edcb6c;--color-warning-300:#e3b53b; --color-warning-400:#d6a72c;--color-warning-500:#b88a1f;--color-warning-600:#956f17;--color-warning-700:#735611; --color-warning-800:#55400c;--color-warning-900:#2a2517;--color-warning-950:#2a2517; --color-error-50:#fceaea;--color-error-100:#f5c3c3;--color-error-200:#eb9090;--color-error-300:#e26161; --color-error-400:#d84545;--color-error-500:#c43333;--color-error-600:#a32626;--color-error-700:#7f1c1c; --color-error-800:#5e1313;--color-error-900:#3d0c0c;--color-error-950:#2a1b1c; --color-info-50:#e8f1fe;--color-info-100:#c5dafb;--color-info-200:#8eb9f7;--color-info-300:#5e9cf2; --color-info-400:#3d83ec;--color-info-500:#2670dc;--color-info-600:#1d59b3;--color-info-700:#16448a; --color-info-800:#103265;--color-info-900:#0a2042;--color-info-950:#18222f; --color-white:#ffffff;--color-black:#000000; --color-neutral-0:#ffffff;--color-neutral-25:#fbfbfc;--color-neutral-50:#f5f6f8;--color-neutral-100:#eceef1; --color-neutral-150:#e3e6ea;--color-neutral-200:#d6dade;--color-neutral-300:#c0c6cd;--color-neutral-400:#aab1bb; --color-neutral-500:#848e99;--color-neutral-600:#7c8590;--color-neutral-700:#6a707a;--color-neutral-800:#515862; --color-neutral-900:#15181c;--color-neutral-1000:#0a0b0d; --color-chart-1:#069494;--color-chart-2:#7c3aed;--color-chart-3:#b88a1f;--color-chart-4:#c43355; --color-chart-5:#2670dc;--color-chart-6:#129a4d;--color-chart-7:#c4612a;--color-chart-8:#565d66; } :root[data-theme="dark"]{ --color-neutral-0:#000000;--color-neutral-25:#09090b;--color-neutral-50:#0e1012;--color-neutral-100:#131618; --color-neutral-150:#181b1e;--color-neutral-200:#1f2226;--color-neutral-300:#262a2f;--color-neutral-400:#353a41; --color-neutral-500:#494f57;--color-neutral-600:#6c727a;--color-neutral-700:#8d939c;--color-neutral-800:#b3b8be; --color-neutral-900:#d9dce0;--color-neutral-1000:#f5f6f7; --color-chart-1:#1eacac;--color-chart-2:#a78bfa;--color-chart-3:#f0b528;--color-chart-4:#f4798a; --color-chart-5:#5e9cf2;--color-chart-6:#4ec27e;--color-chart-7:#f08a4b;--color-chart-8:#8d939c; } /* ─────────────────────────────────────────── semantic (Command) */ :root{ --bg-canvas:var(--color-neutral-0);--bg-surface:var(--color-neutral-25);--bg-elevated:var(--color-neutral-50); --bg-raised:var(--color-neutral-50);--bg-sunken:var(--color-neutral-50);--bg-overlay:var(--color-neutral-0); --bg-inverse:var(--color-neutral-1000);--bg-hover:var(--color-neutral-100);--bg-selected:var(--color-neutral-150); --tooltip-bg:var(--color-neutral-100);--tooltip-text:var(--color-black); --border-subtle:var(--color-neutral-50);--border-default:var(--color-neutral-100);--border-strong:var(--color-neutral-150); --border-inverse:var(--color-neutral-600);--border-focus:var(--color-primary-500);--border-error:var(--color-error-500); --border-success:var(--color-success-500);--border-warning:var(--color-warning-500); --text-primary:var(--color-neutral-1000);--text-secondary:var(--color-neutral-800);--text-tertiary:var(--color-neutral-700); --text-quaternary:var(--color-neutral-600);--text-disabled:var(--color-neutral-500);--text-placeholder:var(--color-neutral-500); --text-link:var(--color-primary-500);--text-brand:var(--color-primary-600);--text-success:var(--color-success-700); --text-warning:var(--color-warning-700);--text-error:var(--color-error-600);--text-info:var(--color-info-600); --text-on-brand:var(--color-white);--text-inverse:var(--color-neutral-25); --icon-primary:var(--color-neutral-1000);--icon-secondary:var(--color-neutral-700);--icon-tertiary:var(--color-neutral-500); --icon-disabled:var(--color-neutral-400);--icon-brand:var(--color-primary-500); --interactive-primary-bg:var(--color-primary-500);--interactive-primary-bg-hover:var(--color-primary-400); --interactive-primary-bg-pressed:var(--color-primary-600);--interactive-primary-text:var(--color-white); --interactive-secondary-bg:var(--color-neutral-0);--interactive-secondary-bg-hover:var(--color-neutral-50); --interactive-secondary-text:var(--color-neutral-1000);--interactive-secondary-border:var(--border-default); --interactive-secondary-border-hover:var(--border-strong); --interactive-danger-bg:var(--color-error-400);--interactive-danger-bg-hover:var(--color-error-600);--interactive-danger-text:var(--color-white); --status-active-bg:var(--color-success-50);--status-active-text:var(--color-success-700);--status-active-border:var(--color-success-200); --status-pending-bg:var(--color-warning-50);--status-pending-text:var(--color-warning-700);--status-pending-border:var(--color-warning-200); --status-inactive-bg:var(--color-neutral-100);--status-inactive-text:var(--color-neutral-600);--status-inactive-border:var(--color-neutral-200); --status-error-bg:var(--color-error-50);--status-error-text:var(--color-error-600);--status-error-border:var(--color-error-200); --status-info-bg:var(--color-info-50);--status-info-text:var(--color-info-600);--status-info-border:var(--color-info-200); --status-brand-bg-soft:#e6efef; --brand-subtle-bg:var(--color-primary-50);--brand-subtle-text:var(--color-primary-700);--brand-subtle-border:var(--color-primary-200); --input-bg:var(--color-neutral-25);--input-bg-disabled:var(--color-neutral-50);--input-border:var(--color-neutral-100); --input-border-hover:var(--color-neutral-150);--input-border-focus:var(--color-primary-500); --label-purple-bg:#f2effa;--label-purple-text:#6a4bc4; --focus-ring:0 0 0 3px var(--color-primary-100); --shadow-sm:0 1px 2px rgba(10,11,13,.05); --shadow-md:0 2px 6px rgba(10,11,13,.06),0 8px 24px rgba(10,11,13,.06); --shadow-lg:0 4px 12px rgba(10,11,13,.08),0 24px 48px rgba(10,11,13,.12); --scrim:rgba(10,11,13,.32); } :root[data-theme="dark"]{ --bg-canvas:var(--color-neutral-50);--bg-elevated:var(--color-neutral-100);--bg-raised:var(--color-neutral-150); --bg-sunken:var(--color-neutral-0);--bg-overlay:var(--color-neutral-100);--bg-hover:var(--color-neutral-150);--bg-selected:var(--color-neutral-200); --tooltip-bg:var(--color-neutral-150);--tooltip-text:var(--color-white); --border-subtle:var(--color-neutral-100);--border-default:var(--color-neutral-150);--border-strong:var(--color-neutral-200); --border-inverse:var(--color-neutral-700);--border-error:var(--color-error-400);--border-success:var(--color-success-400);--border-warning:var(--color-warning-400); --text-placeholder:var(--color-neutral-600);--text-link:var(--color-primary-600);--text-brand:var(--color-primary-400); --text-success:var(--color-success-300);--text-warning:var(--color-warning-300);--text-error:var(--color-error-300);--text-info:var(--color-info-300); --icon-secondary:var(--color-neutral-800);--icon-tertiary:var(--color-neutral-700);--icon-disabled:var(--color-neutral-500);--icon-brand:var(--color-primary-400); --interactive-secondary-bg:var(--color-neutral-100);--interactive-secondary-bg-hover:var(--color-neutral-150); --status-active-bg:var(--color-success-900);--status-active-text:var(--color-success-300);--status-active-border:var(--color-success-600); --status-pending-bg:var(--color-warning-900);--status-pending-text:var(--color-warning-300);--status-pending-border:var(--color-warning-600); --status-inactive-bg:var(--color-neutral-150);--status-inactive-text:var(--color-neutral-700);--status-inactive-border:var(--color-neutral-300); --status-error-bg:var(--color-error-900);--status-error-text:var(--color-error-300);--status-error-border:var(--color-error-600); --status-info-bg:var(--color-info-900);--status-info-text:var(--color-info-300);--status-info-border:var(--color-info-600); --status-brand-bg-soft:#162527; --brand-subtle-bg:var(--color-primary-900);--brand-subtle-text:var(--color-primary-300);--brand-subtle-border:var(--color-primary-700); --input-bg:var(--color-neutral-100);--input-border:var(--color-neutral-200);--input-border-hover:var(--color-neutral-300); --label-purple-bg:#20212a;--label-purple-text:#b3a6f0; --focus-ring:0 0 0 3px var(--color-primary-900); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 6px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 24px 48px rgba(0,0,0,.45); --scrim:rgba(0,0,0,.55); } /* ─────────────────────────────────────────── scale + type (Command) */ :root{ --space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-10:10px;--space-12:12px;--space-14:14px;--space-16:16px; --space-18:18px;--space-20:20px;--space-24:24px;--space-28:28px;--space-32:32px;--space-40:40px;--space-48:48px; --radius-2xs:4px;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px; --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --rail:240px; } /* ─────────────────────────────────────────── bridge: legacy names app.js still uses inline */ :root{ --ground:var(--bg-canvas);--surface:var(--bg-canvas);--surface-2:var(--bg-surface);--surface-3:var(--bg-elevated); --ink:var(--text-primary);--ink-2:var(--text-secondary);--muted:var(--text-tertiary); --line:var(--border-default);--line-soft:var(--border-subtle); --accent:var(--color-primary-500);--accent-soft:var(--brand-subtle-bg);--accent-ink:var(--brand-subtle-text); /* chart / stripe colours (app.js references these inline) */ --ok:var(--color-chart-6);--ok-bg:var(--status-active-bg); --warn:var(--color-chart-3);--warn-bg:var(--status-pending-bg); --bad:var(--color-error-400);--bad-bg:var(--status-error-bg); --info:var(--color-chart-5);--info-bg:var(--status-info-bg); --hold:var(--color-chart-2);--hold-bg:var(--label-purple-bg); --neutral:var(--color-neutral-150);--neutral-strong:var(--color-neutral-300);--neutral-bg:var(--status-inactive-bg); --mono:var(--font-mono);--sans:var(--font-sans);--shadow:var(--shadow-md); } /* ─────────────────────────────────────────── base */ *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light} :root[data-theme="dark"] body{color-scheme:dark} h1,h2,h3,h4{margin:0;text-wrap:balance} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border:3px solid transparent;background-clip:padding-box;border-radius:var(--radius-full)} ::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300);background-clip:padding-box;border:3px solid transparent} .ic{display:inline-flex;width:16px;height:16px;flex-shrink:0;align-items:center;justify-content:center} .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round} /* ─────────────────────────────────────────── shell */ .app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100%} nav.rail{background:var(--bg-surface);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:0; padding:var(--space-12) var(--space-8);position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow:auto} .brand{display:flex;align-items:center;gap:var(--space-10);height:32px;padding:0 var(--space-8);margin-bottom:var(--space-16)} .brand .brand-mark{width:20px;height:20px;color:var(--text-primary);flex-shrink:0} .brand .brand-mark svg{width:20px;height:20px;display:block} .brand .t{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.1px;color:var(--text-primary);min-width:0} .brand .t small{display:block;font-size:11px;font-weight:400;color:var(--text-tertiary);letter-spacing:0} .nav-section{display:flex;flex-direction:column;margin-bottom:var(--space-8)} .nav-section-title{display:flex;align-items:center;height:28px;padding:var(--space-4) var(--space-8); font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;color:var(--text-quaternary)} .navbtn{display:flex;align-items:center;gap:var(--space-8);width:100%;height:30px;padding:0 var(--space-8); background:transparent;border:0;border-radius:var(--radius-xs);color:var(--text-secondary); font-size:13px;font-weight:500;line-height:1.4;letter-spacing:-.2px;text-align:left;white-space:nowrap} .navbtn .ic{color:var(--icon-secondary)} .navbtn:hover{background:var(--bg-hover);color:var(--text-primary)} .navbtn[aria-current="page"]{background:var(--bg-selected);color:var(--text-primary)} .navbtn[aria-current="page"] .ic{color:var(--color-primary-500)} .navbtn .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-quaternary);font-variant-numeric:tabular-nums} .railfoot{margin-top:auto;padding-top:var(--space-8);border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:0} .me{display:flex;gap:var(--space-8);align-items:center;height:40px;padding:0 var(--space-8);margin-bottom:var(--space-4)} .avatar{width:24px;height:24px;border-radius:var(--radius-full);background:var(--color-primary-500);color:var(--color-white); display:grid;place-items:center;font-size:10px;font-weight:500;flex-shrink:0;letter-spacing:.2px} .me .n{font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)} .me .r{display:block;font-size:11px;font-weight:400;color:var(--text-tertiary);line-height:1.3} .theme-row{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 var(--space-8);color:var(--text-secondary);font-size:13px;font-weight:500;letter-spacing:-.2px} .seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-hover);border-radius:var(--radius-xs)} .seg button{width:24px;height:22px;border:0;border-radius:4px;background:transparent;color:var(--icon-secondary);display:grid;place-items:center;padding:0} .seg button .ic{width:14px;height:14px}.seg button .ic svg{width:14px;height:14px} .seg button[aria-pressed="true"]{background:var(--bg-canvas);color:var(--icon-brand);box-shadow:var(--shadow-sm)} :root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--color-neutral-300)} main.content{min-width:0;padding:var(--space-24) var(--space-32) 80px;max-width:1200px;margin:0 auto;width:100%} .page-head{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-20);align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-20)} .page-head h2{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.2px} .page-head p{margin:var(--space-4) 0 0;color:var(--text-tertiary);font-size:13px;line-height:1.5;max-width:72ch} .page-actions{display:flex;gap:var(--space-8);align-items:center;flex-shrink:0} .linkbtn.back{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);margin:-6px 0 var(--space-8) -6px;color:var(--text-tertiary)} .linkbtn.back:hover{color:var(--text-link);text-decoration:none} .linkbtn.back .ic{width:14px;height:14px}.linkbtn.back .ic svg{width:14px;height:14px;stroke-width:1.5} .active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin:calc(-1 * var(--space-6)) 0 var(--space-14)} .af-label{font-size:12px;color:var(--text-quaternary);margin-right:var(--space-2)} .chip.on{background:var(--brand-subtle-bg);border-color:var(--brand-subtle-border);color:var(--brand-subtle-text);padding-right:var(--space-8)} .chip.on .ic{width:12px;height:12px;opacity:.7}.chip.on .ic svg{width:12px;height:12px;stroke-width:2} .chip.on:hover .ic{opacity:1} .page-actions .btn{text-decoration:none} .btn .ic{width:14px;height:14px}.btn .ic svg{width:14px;height:14px;stroke-width:1.5} /* ─────────────────────────────────────────── cards + stats */ .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-12);margin-bottom:var(--space-16)} .tiles.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.tiles,.tiles.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}} .tile{display:flex;flex-direction:column;gap:var(--space-6);text-align:left;min-width:0; background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-14) var(--space-16) var(--space-12); transition:border-color .12s,box-shadow .12s,transform .12s} .tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)} .tile[aria-pressed="true"]{border-color:var(--border-focus);box-shadow:var(--focus-ring)} .tile-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)} .tile-label{font-size:12px;font-weight:500;color:var(--text-tertiary);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile-ic{width:26px;height:26px;border-radius:var(--radius-full);display:grid;place-items:center;flex-shrink:0;background:var(--bg-elevated);color:var(--icon-secondary)} .tile-ic .ic svg{width:14px;height:14px;stroke-width:1.5} .tile-ic.crit{background:var(--status-error-bg);color:var(--status-error-text)} .tile-ic.warn{background:var(--status-pending-bg);color:var(--status-pending-text)} .tile-ic.good{background:var(--status-active-bg);color:var(--status-active-text)} .tile-n{font-size:28px;font-weight:600;letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text-primary)} .tile-n.crit{color:var(--text-error)} .tile-meta{font-size:12px;color:var(--text-quaternary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .n.crit{color:var(--text-error)} .n.warn{color:var(--text-warning)} .n.good{color:var(--text-success)} .panel-card{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-18) var(--space-20);margin-bottom:var(--space-16)} .panel-card h3{font-size:14px;font-weight:600;line-height:1.4} .panel-card .sub{font-size:12px;color:var(--text-tertiary);margin-bottom:var(--space-14)} .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-14)} .card-head .sub{margin-bottom:0;margin-top:1px} .card-head .linkbtn{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);white-space:nowrap;flex-shrink:0;margin:-4px -6px 0 0} .card-head .linkbtn .ic{width:14px;height:14px}.card-head .linkbtn .ic svg{width:14px;height:14px;stroke-width:1.5} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)} @media (max-width:900px){.grid2{grid-template-columns:1fr}} /* ─────────────────────────────────────────── charts */ .legend{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-14);margin-top:var(--space-12);font-size:12px;color:var(--text-secondary)} .legend span.sw{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:var(--space-6);vertical-align:0} .bartrack{display:flex;gap:2px;height:10px;border-radius:var(--radius-full);overflow:hidden;background:var(--bg-elevated)} .bartrack.big{height:14px;margin:var(--space-4) 0 var(--space-14)} .bartrack i{display:block;height:100%;transition:opacity .12s} .bartrack:hover i:not(:hover){opacity:.55} .legend-rows{display:flex;flex-direction:column} .legend-row{display:grid;grid-template-columns:10px 1fr auto 44px;gap:var(--space-10);align-items:center;height:32px;padding:0 var(--space-8);margin:0 calc(-1 * var(--space-8)); background:none;border:0;border-radius:var(--radius-xs);font-size:13px;color:var(--text-secondary);text-align:left;width:calc(100% + 2 * var(--space-8))} .legend-row:hover{background:var(--bg-hover);color:var(--text-primary)} .legend-row .sw{width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .legend-row .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .legend-row .cnt{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-primary);font-variant-numeric:tabular-nums} .legend-row .pct{font-family:var(--font-mono);font-size:12px;color:var(--text-quaternary);text-align:right;font-variant-numeric:tabular-nums} .verdict-rows{display:flex;flex-direction:column} .verdict-rows .bartrack i{opacity:.85} .barrow{display:grid;grid-template-columns:140px 1fr 64px;gap:var(--space-12);align-items:center;height:32px;padding:0 var(--space-8);margin:0 calc(-1 * var(--space-8)); background:none;border:0;border-radius:var(--radius-xs);font-size:13px;text-align:left;width:calc(100% + 2 * var(--space-8));color:var(--text-secondary)} button.barrow:hover{background:var(--bg-hover);color:var(--text-primary)} .barrow .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .barrow .num{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .barrow .num small{font-size:11px;font-weight:400;color:var(--text-quaternary);margin-left:var(--space-6)} .area-rows{display:flex;flex-direction:column} .area-row{display:grid;grid-template-columns:200px 1fr 130px 16px;gap:var(--space-16);align-items:center;min-height:48px;padding:var(--space-6) var(--space-8);margin:0 calc(-1 * var(--space-8)); background:none;border:0;border-bottom:1px solid var(--border-subtle);border-radius:var(--radius-xs);text-align:left;width:calc(100% + 2 * var(--space-8));color:var(--text-secondary)} .area-row:last-child{border-bottom:0} .area-row:hover{background:var(--bg-hover)} .area-row:hover .ic{color:var(--icon-brand)} .area-row .t{min-width:0} .area-row .t b{display:block;font-size:13px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .area-row .t span{font-size:12px;color:var(--text-quaternary)} .area-row .sum{font-size:12px;text-align:right;white-space:nowrap} .area-row .ic{color:var(--icon-tertiary)} .ok-t{color:var(--text-tertiary)} .warn-t{color:var(--text-warning)} .bad-t{color:var(--text-error)} .mute-t{color:var(--text-quaternary)} /* ─────────────────────────────────────────── inputs, buttons, chips */ .bar{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;margin-bottom:var(--space-14)} .bar input[type=search],.bar select,.inp,.entry input,.entry select,.entry textarea,.form input,.form select,.form textarea{ background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:0 var(--space-12);height:32px; font-size:13px;color:var(--text-primary);transition:border-color .12s,box-shadow .12s} .bar input[type=search]{flex:1 1 240px;min-width:0} .bar select{flex:0 1 auto;max-width:220px;text-overflow:ellipsis} input::placeholder,textarea::placeholder{color:var(--text-placeholder)} input:hover,select:hover,textarea:hover{border-color:var(--input-border-hover)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-border-focus);box-shadow:var(--focus-ring)} select{appearance:none;-webkit-appearance:none;padding-right:var(--space-28); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a707a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center} .chk{display:inline-flex;align-items:center;gap:var(--space-8);height:32px;font-size:13px;font-weight:500;color:var(--text-secondary); background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--space-12);cursor:pointer;white-space:nowrap} .chk:hover{border-color:var(--border-strong)} .chk input{width:16px;height:16px;margin:0;accent-color:var(--color-primary-500)} .linkbtn{background:none;border:0;color:var(--text-link);font-size:13px;font-weight:500;cursor:pointer;padding:var(--space-6) var(--space-2);border-radius:var(--radius-2xs)} .linkbtn:hover{text-decoration:underline} .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:32px;padding:0 var(--space-18); background:var(--interactive-primary-bg);color:var(--interactive-primary-text);border:1px solid transparent;border-radius:var(--radius-sm); font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background .12s,border-color .12s} .btn:hover:not([disabled]){background:var(--interactive-primary-bg-hover)} .btn:active:not([disabled]){background:var(--interactive-primary-bg-pressed)} .btn.ghost{background:var(--interactive-secondary-bg);color:var(--interactive-secondary-text);border-color:var(--interactive-secondary-border)} .btn.ghost:hover:not([disabled]){background:var(--interactive-secondary-bg-hover);border-color:var(--interactive-secondary-border-hover)} .btn.sm{height:28px;padding:0 var(--space-14);font-size:13px} .btn.danger{background:var(--interactive-danger-bg);color:var(--interactive-danger-text)} .btn.danger:hover:not([disabled]){background:var(--interactive-danger-bg-hover)} .btn[disabled]{opacity:.4;cursor:not-allowed} .chips{display:flex;flex-wrap:wrap;gap:var(--space-6)} .chip{border:1px solid var(--border-default);background:var(--bg-elevated);border-radius:var(--radius-full);padding:0 var(--space-12);height:28px; font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-6)} .chip:hover{border-color:var(--border-strong);color:var(--text-primary)} .chip[aria-pressed="true"]{background:var(--brand-subtle-bg);border-color:var(--brand-subtle-border);color:var(--brand-subtle-text)} /* ─────────────────────────────────────────── table (Command DataTable spec) */ .tablewrap{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:auto} table{width:100%;border-collapse:collapse} th{font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;color:var(--text-tertiary);text-align:left; height:44px;padding:0 var(--space-12);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);white-space:nowrap;cursor:pointer;user-select:none} th:first-child,td:first-child{padding-left:var(--space-20)} th:last-child,td:last-child{padding-right:var(--space-20)} th:hover{color:var(--text-primary)} th[aria-sort="ascending"]::after{content:" ↑";color:var(--text-brand)} th[aria-sort="descending"]::after{content:" ↓";color:var(--text-brand)} td{padding:var(--space-10) var(--space-12);border-bottom:1px solid var(--border-subtle);vertical-align:middle;font-size:13px;line-height:1.4;color:var(--text-primary)} tr:last-child td{border-bottom:0} tbody tr{cursor:pointer;transition:background .08s} tbody tr:hover{background:var(--bg-hover)} .kname{font-weight:500;font-size:13px;letter-spacing:-.1px;color:var(--text-primary)} .ksub{display:block;font-size:12px;color:var(--text-tertiary);margin-top:1px;font-weight:400} .vcell{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-primary);font-variant-numeric:tabular-nums} .vcell.empty{color:var(--text-quaternary);font-weight:400} td.tcell{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);max-width:230px} /* KPI table: fixed column plan (KPI · Owner · Cadence · Current · Target · Status · Verdict · Updated) */ .kpitable table{table-layout:fixed} .kpitable th:nth-child(1){width:25%} .kpitable th:nth-child(2){width:13%} .kpitable th:nth-child(3){width:10%} .kpitable th:nth-child(4){width:11%} .kpitable th:nth-child(5){width:14%} .kpitable th:nth-child(6){width:8%} .kpitable th:nth-child(7){width:13%} .kpitable th:nth-child(8){width:6%} .kpitable td{overflow-wrap:anywhere} /* KPI table scrolls inside its own box (Command DataTable pattern); offset is set by app.js from the table top */ @media (min-width:861px){.kpitable{max-height:calc(100dvh - var(--kpitable-offset,240px))} main.content.has-kpitable{padding-bottom:var(--space-24)}} .kpitable thead th{position:sticky;top:0;z-index:2;border-bottom:0;box-shadow:inset 0 -1px 0 var(--border-subtle)} td.kcell{position:relative} .kwrap{display:block} .pill{display:inline-flex;align-items:center;gap:var(--space-6);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.2px; padding:3px var(--space-8);border-radius:var(--radius-full);white-space:nowrap;border:1px solid transparent} .p-ok{background:var(--status-active-bg);color:var(--status-active-text)} .p-warn{background:var(--status-pending-bg);color:var(--status-pending-text)} .p-bad{background:var(--status-error-bg);color:var(--status-error-text)} .p-info{background:var(--status-info-bg);color:var(--status-info-text)} .p-hold{background:var(--label-purple-bg);color:var(--label-purple-text)} .p-none{background:var(--status-inactive-bg);color:var(--status-inactive-text)} .p-cat{background:var(--bg-elevated);color:var(--text-secondary);border-color:var(--border-default)} .p-cat-strong{color:var(--text-primary);border-color:var(--border-strong)} .pill.mini{font-size:10px;padding:1px 6px;vertical-align:2px;margin-left:var(--space-4)} .row-actions{display:flex;gap:var(--space-4);justify-content:flex-end;white-space:nowrap} .row-actions .btn.sm{padding:0 var(--space-10);gap:var(--space-4)} .row-actions .btn .ic{width:13px;height:13px}.row-actions .btn .ic svg{width:13px;height:13px} .btn.danger-text{color:var(--text-error)} tr.is-archived td{opacity:.6} table.admin-kpis td:last-child{width:1%} .kform-card{border-color:var(--brand-subtle-border)} .kform{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12) var(--space-16)} .kform .kf.full{grid-column:1 / -1} .kform label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-6)} .kform label .req{color:var(--text-error)} .kform .inp{width:100%} .kform textarea.inp{min-height:64px;height:auto;padding:var(--space-8) var(--space-12);resize:vertical;line-height:1.5} .kform .inp[hidden]{display:none} .kform .inp + .inp{margin-top:var(--space-6)} .kform-foot{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-16)} @media (max-width:760px){.kform{grid-template-columns:1fr}} .settings .panel-card{margin-bottom:var(--space-12)} .grace{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-12)} .grace label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-6)} .grace .days{display:flex;align-items:center;gap:var(--space-8)} .grace .days .inp{width:100%;font-family:var(--font-mono);font-variant-numeric:tabular-nums} .grace .days span{font-size:12px;color:var(--text-quaternary)} @media (max-width:900px){.grace{grid-template-columns:repeat(2,minmax(0,1fr))}} .verdict-list{display:flex;flex-direction:column;gap:var(--space-6)} .verdict-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,1.2fr) 70px auto 32px;gap:var(--space-10);align-items:center;padding:var(--space-4) 0} .verdict-row .vkey{font-size:12px;color:var(--text-quaternary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .verdict-row .vuse{font-size:12px;color:var(--text-tertiary);white-space:nowrap} .verdict-row.is-retired .inp,.verdict-row.is-retired .vkey{opacity:.55} .chk.sm{height:28px;font-size:12px;padding:0 var(--space-10)} .chk.sm input{width:14px;height:14px} @media (max-width:760px){.verdict-row{grid-template-columns:1fr 32px}.verdict-row .vkey,.verdict-row .vuse{grid-column:1}} .stripe{display:inline-block;width:3px;height:28px;border-radius:2px;vertical-align:middle;margin-right:var(--space-10);flex-shrink:0} .due{font-size:11px;font-weight:500;color:var(--text-warning);letter-spacing:.2px;display:block;margin-top:2px} .empty-state{background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--space-40);text-align:center;color:var(--text-tertiary);font-size:13px} .attn{display:flex;flex-direction:column} .attn-row{display:flex;gap:var(--space-12);align-items:center;min-height:44px;padding:var(--space-8) var(--space-4);border-bottom:1px solid var(--border-subtle);cursor:pointer;border-radius:var(--radius-xs)} .attn-row:hover{background:var(--bg-hover)} .attn-row:last-child{border-bottom:0} .attn-row .t{flex:1;min-width:0} .attn-row .t b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)} .attn-row .t span{font-size:12px;color:var(--text-tertiary)} .due-tag{display:inline-flex;align-items:center;gap:var(--space-4);font-size:11px;font-weight:500;color:var(--text-warning);white-space:nowrap} .due-tag .ic{width:12px;height:12px}.due-tag .ic svg{width:12px;height:12px;stroke-width:1.5} .timeline{display:flex;flex-direction:column} .tl-item{display:flex;gap:var(--space-12);align-items:flex-start;padding:var(--space-10) var(--space-4);border-bottom:1px solid var(--border-subtle);cursor:pointer;border-radius:var(--radius-xs)} .tl-item:hover{background:var(--bg-hover)} .tl-item:last-child{border-bottom:0} .tl-item .t{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--space-4)} .tl-line{font-size:13px;color:var(--text-secondary);line-height:1.4} .tl-line b{font-weight:500;color:var(--text-primary)} .tl-meta{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap} .tl-meta .mono{font-size:12px;font-weight:500;color:var(--text-primary)} .tl-meta .when{font-size:12px;color:var(--text-quaternary)} .avatar.sm{width:24px;height:24px;font-size:10px;background:var(--brand-subtle-bg);color:var(--brand-subtle-text);margin-top:1px} /* ─────────────────────────────────────────── drawer */ .scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;opacity:0;transition:opacity .16s} .scrim.on{opacity:1} aside.panel{position:fixed;top:0;right:0;height:100%;width:min(600px,100%);background:var(--bg-canvas);border-left:1px solid var(--border-default); box-shadow:var(--shadow-lg);z-index:41;display:flex;flex-direction:column;transform:translateX(101%);transition:transform .2s cubic-bezier(.2,.8,.2,1)} aside.panel.on{transform:none} .panel-head{padding:var(--space-20) var(--space-24) var(--space-16);border-bottom:1px solid var(--border-subtle);display:flex;gap:var(--space-12);align-items:flex-start;justify-content:space-between} .panel-head h3{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.2px} .eyebrow{font-size:11px;font-weight:500;color:var(--text-quaternary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--space-6)} .x{background:var(--interactive-secondary-bg);border:1px solid var(--interactive-secondary-border);border-radius:var(--radius-sm);width:32px;height:32px; cursor:pointer;color:var(--icon-secondary);flex-shrink:0;display:grid;place-items:center;font-size:16px;line-height:1} .x:hover{background:var(--interactive-secondary-bg-hover);border-color:var(--interactive-secondary-border-hover);color:var(--text-primary)} .panel-body{overflow-y:auto;padding:var(--space-16) var(--space-24) var(--space-48);display:flex;flex-direction:column;gap:var(--space-16)} .field{border-top:1px solid var(--border-subtle);padding-top:var(--space-12)} .field .k{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--text-quaternary);margin-bottom:var(--space-4)} .field .v{font-size:13px;color:var(--text-secondary);line-height:1.5} .field .v strong{color:var(--text-primary);font-weight:500} .entry{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-12)} .entry label,.form label{font-size:12px;font-weight:500;color:var(--text-secondary);display:block;margin-bottom:var(--space-6);letter-spacing:.1px} .entry input,.entry select,.entry textarea,.form input,.form select,.form textarea{width:100%} .entry textarea,.form textarea{min-height:72px;height:auto;padding:var(--space-8) var(--space-12);resize:vertical;line-height:1.5} .log-item{font-size:13px;color:var(--text-secondary);border-left:2px solid var(--border-strong);padding:var(--space-2) 0 var(--space-2) var(--space-12);margin-bottom:var(--space-10);line-height:1.5} .log-item .when{font-size:11px;color:var(--text-quaternary);font-weight:500} .hint{font-size:12px;color:var(--text-tertiary)} .err{font-size:13px;color:var(--text-error)} .ok-msg{font-size:13px;color:var(--text-success)} .form{display:flex;flex-direction:column;gap:var(--space-12);max-width:520px} .rowf{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)} .tabs{display:flex;gap:var(--space-4);border-bottom:1px solid var(--border-default);margin-bottom:var(--space-16);flex-wrap:wrap} .tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:var(--space-8) var(--space-12);cursor:pointer;color:var(--text-tertiary);font-size:13px;font-weight:500} .tab:hover{color:var(--text-primary)} .tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--color-primary-500)} .steps{display:flex;flex-direction:column;gap:var(--space-10)} .step{display:flex;gap:var(--space-12);align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.5} .step .num{width:22px;height:22px;border-radius:var(--radius-full);background:var(--brand-subtle-bg);color:var(--brand-subtle-text); display:grid;place-items:center;font-size:11px;font-weight:500;flex-shrink:0} .step b{color:var(--text-primary);font-weight:500} .banner{background:var(--brand-subtle-bg);border:1px solid var(--brand-subtle-border);border-radius:var(--radius-md);padding:var(--space-16) var(--space-20);margin-bottom:var(--space-20)} .banner h3{font-size:14px;font-weight:600;margin-bottom:var(--space-4);color:var(--brand-subtle-text)} .banner p{margin:0 0 var(--space-12);font-size:13px;color:var(--text-secondary);max-width:66ch} /* ─────────────────────────────────────────── gate (sign in / register / pending) */ .app.gated{grid-template-columns:1fr} .app.gated main.content{padding:0;max-width:none} .gate{min-height:100vh;display:grid;place-items:center;padding:var(--space-40) var(--space-20);background:var(--bg-surface)} .gatecard{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:var(--space-32) var(--space-32) var(--space-24);width:100%;max-width:440px} .gatecard .brandline{display:flex;align-items:center;margin-bottom:var(--space-24)} .gatecard .brandline img{height:26px;width:auto;display:block} .lockup-light{display:block}.lockup-dark{display:none} :root[data-theme="dark"] .lockup-light{display:none}:root[data-theme="dark"] .lockup-dark{display:block} .gatecard h2{font-size:22px;font-weight:600;letter-spacing:-.2px;line-height:1.25} .gatecard p.lead{margin:var(--space-6) 0 var(--space-24);font-size:13px;color:var(--text-tertiary);line-height:1.5} .gatecard .form{max-width:none;gap:var(--space-14)} .gatecard .rowf{grid-template-columns:1fr 1fr;gap:var(--space-14)} .gatecard input,.gatecard select{height:40px;font-size:14px} .gatecard .btn{width:100%;height:40px;font-size:16px;font-weight:600;border-radius:10px;margin-top:var(--space-4)} .gatefoot{margin-top:var(--space-20);padding-top:var(--space-16);border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-tertiary);line-height:1.5} @media (max-width:540px){ .gatecard{padding:var(--space-24) var(--space-20) var(--space-20)} .gatecard .rowf{grid-template-columns:1fr} } /* ─────────────────────────────────────────── responsive */ @media (max-width:860px){ .app{grid-template-columns:1fr} nav.rail{position:sticky;top:env(safe-area-inset-top,0px);height:auto;flex-direction:row;align-items:center;overflow-x:auto;gap:var(--space-4); padding:var(--space-8) var(--space-12);border-right:0;border-bottom:1px solid var(--border-subtle);z-index:20} .brand{margin:0 var(--space-8) 0 0;padding:0 var(--space-4)} .brand .t{white-space:nowrap} .brand .t small{display:none} .nav-section{flex-direction:row;margin:0;gap:var(--space-2)} .nav-section-title{display:none} .navbtn{width:auto} .navbtn .count{display:none} .railfoot{margin:0 0 0 auto;padding:0;border:0;flex-direction:row;align-items:center;gap:var(--space-2)} .me{height:30px;margin:0;padding:0 var(--space-4)} .me .n,.me .r{display:none} .theme-row{padding:0 var(--space-4)} .theme-row > span:first-child{display:none} .navbtn.foot-label span:not(.ic){display:none} main.content{padding:var(--space-16) var(--space-16) 60px} .barrow{grid-template-columns:104px 1fr 56px} .area-row{grid-template-columns:120px 1fr 16px} .area-row .sum{display:none} .tcell{display:none} aside.panel{width:100%;border-left:0} }