@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================ Newgarden AR — "Vault" (from the Claude Design project "Newgarden Dashboard Redesign", applied 2026-07-31) Graphite shell, one electric accent that only ever means action. Two themes: default (dark) and [data-theme="light"] on . Every color below is a token — themes only override tokens. ============================================================ */ :root{ /* surfaces */ --ng-bg:oklch(.17 .012 250); --ng-surface:oklch(.22 .014 250); --ng-surface-2:oklch(.26 .016 250); --ng-surface-3:oklch(.30 .016 250); --ng-hair:oklch(.30 .014 250); --ng-hair-soft:oklch(.26 .014 250); --ng-rail:oklch(.185 .013 250); --ng-thead:oklch(.20 .014 250); --ng-scrim:oklch(.17 .012 250/.8); --ng-hero-a:oklch(.28 .02 250); --ng-hero-b:oklch(.205 .014 250); --ng-plate-a:oklch(.255 .014 250); --ng-plate-b:oklch(.225 .014 250); /* text */ --ng-ink:oklch(.97 .003 250); --ng-muted:oklch(.68 .012 250); --ng-faint:oklch(.54 .012 250); /* accent — actions only. -txt is the stroke/label variant. */ --ng-accent:oklch(.86 .19 128); --ng-accent-hi:oklch(.90 .19 128); --ng-accent-txt:oklch(.86 .19 128); --ng-accent-dim:oklch(.86 .19 128/.16); --ng-accent-wash:oklch(.86 .19 128/.12); --ng-accent-ink:oklch(.25 .06 128); --ng-accent-tint:oklch(.26 .03 128); --ng-accent-tint-2:oklch(.27 .03 128); /* queue tiers */ --ng-auto:oklch(.80 .12 165); --ng-eyes:oklch(.83 .14 82); --ng-nomatch:oklch(.72 .15 22); --ng-auto-tint:oklch(.235 .025 165); --ng-eyes-tint:oklch(.245 .022 82); --ng-nomatch-tint:oklch(.235 .03 22); --ng-nomatch-tint-2:oklch(.25 .04 22); --ng-nomatch-ink:oklch(.92 .04 22); --ng-on-nomatch:oklch(.22 .05 22); /* crew comparison — chart-only hues, distinct from tier + accent colors */ --ng-crew-a:oklch(.76 .11 220); --ng-crew-b:oklch(.72 .13 305); /* type */ --ng-font-ui:'Space Grotesk',system-ui,sans-serif; --ng-font-data:'IBM Plex Mono',ui-monospace,monospace; /* rhythm */ --ng-r-sm:6px;--ng-r-md:9px;--ng-r-lg:12px;--ng-r-pill:999px; --ng-tap:46px; --ng-shadow:0 10px 30px rgba(0,0,0,.35); --ng-shadow-soft:0 12px 28px rgba(0,0,0,.45); /* legacy aliases — pre-redesign templates reference these names; they resolve through the theme tokens so both themes just work. */ --bg:var(--ng-bg); --surface:var(--ng-surface); --ink:var(--ng-ink); --ink-soft:var(--ng-muted); --line:var(--ng-hair); --green:var(--ng-accent-txt); --green-soft:var(--ng-accent-tint); --amber:var(--ng-eyes); --amber-soft:var(--ng-eyes-tint); --red:var(--ng-nomatch); --red-soft:var(--ng-nomatch-tint); --radius:var(--ng-r-lg); --shadow:none; } /* ---------- light theme ---------- */ [data-theme="light"]{ --ng-bg:oklch(.972 .004 250); --ng-surface:oklch(1 0 0); --ng-surface-2:oklch(.965 .005 250); --ng-surface-3:oklch(.925 .008 250); --ng-hair:oklch(.895 .008 250); --ng-hair-soft:oklch(.945 .006 250); --ng-rail:oklch(.948 .005 250); --ng-thead:oklch(.968 .005 250); --ng-scrim:oklch(1 0 0/.86); --ng-hero-a:oklch(.985 .01 128); --ng-hero-b:oklch(.955 .012 250); --ng-plate-a:oklch(.955 .006 250); --ng-plate-b:oklch(.985 .004 250); --ng-ink:oklch(.26 .016 250); --ng-muted:oklch(.47 .014 250); --ng-faint:oklch(.605 .013 250); --ng-accent:oklch(.83 .19 128); --ng-accent-hi:oklch(.87 .19 128); --ng-accent-txt:oklch(.50 .13 132); --ng-accent-dim:oklch(.72 .17 130/.22); --ng-accent-wash:oklch(.72 .17 130/.13); --ng-accent-ink:oklch(.27 .07 130); --ng-accent-tint:oklch(.965 .038 128); --ng-accent-tint-2:oklch(.955 .05 128); --ng-auto:oklch(.52 .12 162); --ng-eyes:oklch(.55 .13 68); --ng-nomatch:oklch(.52 .18 25); --ng-auto-tint:oklch(.975 .02 165); --ng-eyes-tint:oklch(.975 .028 82); --ng-nomatch-tint:oklch(.975 .018 22); --ng-nomatch-tint-2:oklch(.965 .028 22); --ng-nomatch-ink:oklch(.44 .18 25); --ng-on-nomatch:oklch(.99 .01 22); --ng-crew-a:oklch(.58 .12 230); --ng-crew-b:oklch(.55 .15 305); --ng-shadow:0 10px 28px oklch(.45 .03 250/.13); --ng-shadow-soft:0 12px 28px oklch(.45 .03 250/.18); } *{box-sizing:border-box} body{margin:0;background:var(--ng-bg);color:var(--ng-ink);font-family:var(--ng-font-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background-color .18s ease,color .18s ease} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0} .ng-mono{font-family:var(--ng-font-data)} .ng-num,.num{font-variant-numeric:tabular-nums} /* ---------- theme toggle ---------- */ .ng-theme{display:inline-flex;align-items:center;gap:2px;background:var(--ng-surface-2);border:1px solid var(--ng-hair);border-radius:var(--ng-r-pill);padding:3px;flex:none} .ng-theme button{appearance:none;border:none;background:none;cursor:pointer;width:28px;height:26px;border-radius:var(--ng-r-pill);display:grid;place-items:center;color:var(--ng-faint);font:500 12px var(--ng-font-ui);padding:0} .ng-theme button:hover{color:var(--ng-ink)} .ng-theme button[aria-pressed="true"]{background:var(--ng-surface);color:var(--ng-ink);box-shadow:0 1px 2px rgba(0,0,0,.18)} .ng-theme svg{width:13px;height:13px;display:block} .ng-theme--float{position:fixed;top:14px;right:16px;z-index:99;box-shadow:var(--ng-shadow)} /* ---------- nav shell ---------- */ .ng-nav{display:flex;align-items:center;gap:28px;height:64px;padding:0 26px;background:var(--ng-surface);border-bottom:1px solid var(--ng-hair);position:sticky;top:0;z-index:10} .ng-brand{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;letter-spacing:-.015em} .ng-brand img{height:26px;width:auto;display:block} .ng-tabs{display:flex;gap:4px;flex:1;font-size:13px;color:var(--ng-muted);min-width:0} .ng-tabs a{padding:8px 13px;border-radius:var(--ng-r-pill);color:inherit;display:inline-flex;align-items:center;white-space:nowrap} .ng-tabs a:hover{background:var(--ng-surface-2);color:var(--ng-ink)} .ng-tabs a.on{background:var(--ng-surface-2);color:var(--ng-ink);font-weight:500} .ng-count{margin-left:8px;background:var(--ng-accent);color:var(--ng-accent-ink);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--ng-r-pill);font-family:var(--ng-font-data)} .ng-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(var(--ng-surface-3),var(--ng-surface-2));border:1px solid var(--ng-hair);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none;color:var(--ng-ink);font-family:inherit;cursor:pointer;padding:0} .ng-av:hover,.ng-av[aria-expanded="true"]{border-color:var(--ng-accent)} .ng-user{position:relative;flex:none;display:grid;place-items:center} .ng-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:196px;background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:12px;padding:6px;z-index:70;box-shadow:0 10px 34px rgb(0 0 0/.28)} .ng-menu a,.ng-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;border-radius:8px;background:none;color:var(--ng-ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;white-space:nowrap} .ng-menu a:hover,.ng-menu button:hover{background:var(--ng-surface-2)} .ng-menu svg{color:var(--ng-faint);flex:none} .ng-menu-sep{height:1px;background:var(--ng-hair);margin:6px 4px} /* ---------- modal (keyboard shortcuts) ---------- */ .ng-modal{position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:90;display:grid;place-items:center;padding:20px} .ng-modal[hidden]{display:none} .ng-modal-card{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:16px;padding:22px 24px;width:min(430px,100%);box-shadow:0 18px 60px rgb(0 0 0/.35)} .ng-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .ng-modal-head h2{font-size:16px;margin:0} .ng-modal-x{border:0;background:none;color:var(--ng-faint);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px} .ng-modal-x:hover{color:var(--ng-ink)} .ng-kbd-group{margin-bottom:14px} .ng-kbd-group-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ng-faint);margin-bottom:8px} .ng-kbd-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0;font-size:13.5px} .ng-kbd-row kbd,.ng-kbd-note kbd{background:var(--ng-surface-2);border:1px solid var(--ng-hair);border-bottom-width:2px;border-radius:6px;padding:2px 8px;font-family:var(--ng-font-data);font-size:12px} .ng-kbd-note{color:var(--ng-faint);font-size:12.5px;line-height:1.5;margin:6px 0 0} /* ---------- page guide (walkthrough) ---------- */ .gd-overlay{position:fixed;inset:0;background:transparent;z-index:80} .gd-overlay.gd-dim{background:rgb(0 0 0/.42)} .gd-ring{position:fixed;border:2px solid var(--ng-accent);border-radius:12px;box-shadow:0 0 0 6px color-mix(in oklab,var(--ng-accent) 25%,transparent),0 0 0 9999px rgb(0 0 0/.42);pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s;z-index:81} .gd-card{position:fixed;z-index:82;width:min(340px,calc(100vw - 24px));background:var(--ng-surface);border:1px solid color-mix(in oklab,var(--ng-accent) 35%,var(--ng-hair));border-left:3px solid var(--ng-accent);border-radius:14px;padding:16px 18px;box-shadow:0 14px 48px rgb(0 0 0/.35),0 0 24px color-mix(in oklab,var(--ng-accent) 14%,transparent)} .gd-title{font-weight:650;font-size:14.5px;margin-bottom:6px} .gd-title::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ng-accent);margin-right:8px;vertical-align:1px} .gd-text{font-size:13.5px;line-height:1.55;color:var(--ng-muted)} .gd-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px} .gd-count{font-size:11.5px;color:var(--ng-faint);font-family:var(--ng-font-data)} .gd-btns{display:flex;gap:6px} .gd-btns button{border:1px solid var(--ng-hair);background:var(--ng-surface);color:var(--ng-ink);font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer} .gd-btns .gd-next{background:var(--ng-accent);color:var(--ng-accent-ink);border-color:var(--ng-accent)} .gd-btns .gd-skip{border:0;color:var(--ng-faint)} .gd-btns button:hover{filter:brightness(1.06)} .gd-pill{position:fixed;right:18px;bottom:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--ng-hair);background:var(--ng-surface);color:var(--ng-faint);font-size:16px;font-weight:700;cursor:pointer;z-index:65;box-shadow:0 4px 16px rgb(0 0 0/.18)} .gd-pill:hover{color:var(--ng-ink);border-color:var(--ng-accent)} @media print{.gd-pill,.gd-overlay{display:none}} .ng-pull{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:7px 14px;border:1px solid var(--ng-hair);border-radius:999px;background:var(--ng-surface);color:var(--ng-ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;flex:none} .ng-pull:hover{border-color:var(--ng-accent)} .ng-pull:disabled{cursor:default;opacity:.85} .ng-pull.pulling .pull-icon{animation:ng-spin 1s linear infinite} @keyframes ng-spin{to{transform:rotate(360deg)}} .ng-gear{width:32px;height:32px;border-radius:50%;border:1px solid var(--ng-hair);display:grid;place-items:center;color:var(--ng-faint);flex:none} .ng-gear:hover{color:var(--ng-ink);border-color:var(--ng-accent)} /* themed scrollbars — the OS-white default clashes with the dark surfaces */ *{scrollbar-width:thin;scrollbar-color:var(--ng-surface-3) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--ng-surface-3);border-radius:8px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--ng-hair)} .ng-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);opacity:0;transition:transform .3s,opacity .3s;background:var(--ng-surface-2);border:1px solid var(--ng-hair);color:var(--ng-ink);border-radius:12px;padding:12px 18px;font-size:13.5px;max-width:min(480px,90vw);z-index:60;box-shadow:0 8px 30px rgb(0 0 0/.25)} .ng-toast.show{transform:translate(-50%,0);opacity:1} .ng-toast.err{border-color:#c0392b} /* ---------- page ---------- */ .page{max-width:1440px;margin:0 auto;padding:26px 28px 56px} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px} .page-title{font-size:25px;font-weight:500;letter-spacing:-.025em} .page-sub{font-size:12.5px;color:var(--ng-faint);margin-top:5px;font-family:var(--ng-font-data)} /* ---------- surfaces ---------- */ .card{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg)} .card-pad{padding:20px 22px} .card-title{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ng-faint)} .card-title--warn{color:var(--ng-eyes)} .card-title--sm{margin-top:20px;padding-top:20px;border-top:1px solid var(--ng-hair-soft)} /* ---------- badges (tier pills) ---------- Routes emit badge-green / badge-amber / badge-red / badge-gray; each one just sets the tier color the pill renders with. */ .badge-green,.t-auto{--tier:var(--ng-auto)} .badge-amber,.t-eyes{--tier:var(--ng-eyes)} .badge-red,.t-nomatch{--tier:var(--ng-nomatch)} .badge-gray{--tier:var(--ng-muted)} .badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:var(--ng-r-pill);border:1px solid color-mix(in oklab,var(--tier) 45%,transparent);color:var(--tier);white-space:nowrap} .badge .dot{width:5px;height:5px;border-radius:50%;background:var(--tier)} /* ---------- filter chips ---------- */ .chip-row{display:flex;gap:7px;flex-wrap:wrap} .chip{padding:8px 14px;border-radius:var(--ng-r-pill);border:1px solid var(--ng-hair);background:var(--ng-surface);color:var(--ng-muted);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:7px;cursor:pointer} .chip:hover{background:var(--ng-surface-2);color:var(--ng-ink)} .chip.active{background:var(--ng-ink);border-color:var(--ng-ink);color:var(--ng-bg);font-weight:600} /* ---------- buttons ---------- */ .btn{min-height:var(--ng-tap);padding:12px 20px;border-radius:var(--ng-r-md);font:500 14px var(--ng-font-ui);border:1px solid var(--ng-hair);background:var(--ng-surface-2);color:var(--ng-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px} .btn:hover{background:var(--ng-surface-3)} .btn-primary{background:var(--ng-accent);border-color:var(--ng-accent);color:var(--ng-accent-ink);font-weight:600} .btn-primary:hover{background:var(--ng-accent-hi)} .btn-ghost,.btn-danger-ghost{background:none;border-color:transparent;color:var(--ng-muted)} .btn-ghost:hover,.btn-danger-ghost:hover{background:var(--ng-surface-2);color:var(--ng-ink)} .btn[disabled]{background:var(--ng-surface);border-color:var(--ng-hair-soft);color:var(--ng-faint);cursor:not-allowed;box-shadow:none;opacity:1} .btn[disabled]:hover{background:var(--ng-surface)} .btn,.btn-sm{white-space:nowrap} .btn-sm{min-height:36px;padding:8px 14px;font-size:12.5px;border-radius:var(--ng-r-sm)} .link-green{color:var(--ng-accent-txt);font-weight:500} .link-green:hover{color:var(--ng-accent-hi)} [data-theme="light"] .link-green:hover{color:oklch(.42 .13 132)} /* ---------- tables ---------- */ .table{width:100%;border-collapse:collapse} .table th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ng-faint);padding:13px 16px;border-bottom:1px solid var(--ng-hair);white-space:nowrap;background:var(--ng-thead)} .table td{padding:14px 16px;border-bottom:1px solid var(--ng-hair-soft);font-size:13px;vertical-align:middle} .table tr:last-child td{border-bottom:none} .table tr.rowlink:hover{background:var(--ng-surface-2);cursor:pointer} .table .num{text-align:right;font-family:var(--ng-font-data);font-variant-numeric:tabular-nums} .table .acct{font-family:var(--ng-font-data);color:var(--ng-muted);font-size:12.5px} /* ---------- forms ---------- */ .input,.select,.textarea{width:100%;padding:12px 14px;border-radius:var(--ng-r-md);border:1px solid var(--ng-hair);background:var(--ng-surface-2);color:var(--ng-ink);font:400 14px var(--ng-font-ui);min-height:var(--ng-tap)} .textarea{min-height:0} .input::placeholder,.textarea::placeholder{color:var(--ng-faint)} .input:focus,.textarea:focus{outline:none;border-color:var(--ng-accent-txt)} .label{display:block;font-size:12px;font-weight:600;color:var(--ng-muted);margin-bottom:6px} /* ---------- kpi ---------- */ .ng-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px} .ng-kpi{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);padding:19px 21px;position:relative;overflow:hidden} .ng-kpi--hero{background:linear-gradient(140deg,var(--ng-hero-a),var(--ng-hero-b))} .ng-kpi--hero:after{content:"";position:absolute;right:-40px;bottom:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,var(--ng-accent-dim),transparent 70%);pointer-events:none} .ng-kpi-label{font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ng-muted)} .ng-kpi-value{font-size:34px;font-weight:500;letter-spacing:-.035em;margin-top:11px;font-variant-numeric:tabular-nums} .ng-kpi-sub{margin-top:7px;font-size:12.5px;color:var(--ng-faint)} .ng-kpi-sub.up{color:var(--ng-accent-txt);font-weight:500} /* ---------- chart ---------- */ .chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .ng-legend{display:flex;gap:14px;font-size:11.5px;color:var(--ng-muted)} .ng-legend-item{display:inline-flex;align-items:center;gap:6px} .ng-legend-dot{width:9px;height:9px;border-radius:3px;flex:none} .ng-legend-dot.dot-a{background:var(--ng-crew-a)} .ng-legend-dot.dot-b{background:var(--ng-crew-b)} .ng-chart{display:flex;align-items:flex-end;gap:16px;height:230px;margin-top:26px} .ng-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:9px} .ng-chart-val{font-family:var(--ng-font-data);font-size:11.5px;color:var(--ng-faint);font-variant-numeric:tabular-nums;white-space:nowrap} .ng-chart-val .val-s{display:none} .ng-chart-duo{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:100%;min-height:0} .ng-chart-bar{width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:var(--ng-surface-3);min-height:4px;position:relative;transition:filter .15s ease} .ng-chart-bar.bar-a{background:linear-gradient(var(--ng-crew-a),color-mix(in oklab,var(--ng-crew-a) 55%,var(--ng-surface)))} .ng-chart-bar.bar-b{background:linear-gradient(var(--ng-crew-b),color-mix(in oklab,var(--ng-crew-b) 55%,var(--ng-surface)))} .ng-chart-bar:hover{filter:brightness(1.22)} .ng-chart-lab{font-size:11px;color:var(--ng-faint);letter-spacing:.08em;text-transform:uppercase} .ng-chart-col.now .ng-chart-val{color:var(--ng-accent-txt)} .ng-chart-col.now .ng-chart-lab{color:var(--ng-ink)} .ng-chart--sm{height:150px;margin-top:18px;gap:10px} .ng-chart--sm .ng-chart-bar{max-width:20px} /* hover tooltip — pure CSS, reads the bar's data-tip */ .ng-chart-bar[data-tip]:hover::after{ content:attr(data-tip); position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%); background:var(--ng-surface-3);border:1px solid var(--ng-hair);color:var(--ng-ink); font:500 11px var(--ng-font-data);white-space:nowrap;padding:5px 9px; border-radius:var(--ng-r-sm);box-shadow:var(--ng-shadow);z-index:30;pointer-events:none; } /* edge columns: keep the tooltip inside the card */ .ng-chart-col:first-child .ng-chart-bar[data-tip]:hover::after{left:0;transform:none} .ng-chart-col:last-child .ng-chart-bar[data-tip]:hover::after{left:auto;right:0;transform:none} /* load animation — bars grow up, values fade in, staggered per column */ @keyframes ng-bar-in{from{transform:scaleY(0)}} @keyframes ng-fade-in{from{opacity:0}} .ng-chart-bar{transform-origin:bottom;animation:ng-bar-in .55s cubic-bezier(.22,.9,.35,1) backwards;animation-delay:calc(var(--d,0)*60ms)} .ng-chart-val{animation:ng-fade-in .45s ease backwards;animation-delay:calc(var(--d,0)*60ms + 250ms)} .ng-kpi-value{animation:ng-fade-in .5s ease backwards} @media (prefers-reduced-motion:reduce){ .ng-chart-bar,.ng-chart-val,.ng-kpi-value{animation:none} } /* ---------- attention list ---------- */ .ng-att{display:flex;flex-direction:column;margin-top:8px} .ng-att-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--ng-hair-soft)} .ng-att-row:last-of-type{border-bottom:none} .ng-att-name{font-size:13px;font-weight:500;line-height:1.35} .ng-att-meta{font-family:var(--ng-font-data);font-size:11.5px;color:var(--ng-faint);margin-top:4px} .ng-att-meta--eyes{color:var(--ng-eyes)} .ng-att-meta--nomatch{color:var(--ng-nomatch)} .ng-flag-chip{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:var(--ng-r-pill);border:1px solid var(--ng-eyes);color:var(--ng-eyes);font:500 10px var(--ng-font-data);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;cursor:help} .ng-att-amt{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- clients toolbar ---------- */ .ng-search{display:flex;align-items:center;gap:10px;background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-md);padding:0 14px;min-height:var(--ng-tap);width:320px} .ng-search input{flex:1;background:none;border:none;color:var(--ng-ink);font:400 13.5px var(--ng-font-ui);padding:12px 0;min-width:0} .ng-search input:focus{outline:none} .ng-search input::placeholder{color:var(--ng-faint)} .ng-search .icon{width:13px;height:13px;border:1.5px solid var(--ng-faint);border-radius:50%;flex:none;position:relative} .ng-search .icon:after{content:"";position:absolute;right:-4px;bottom:-3px;width:6px;height:1.5px;background:var(--ng-faint);transform:rotate(45deg)} .ng-toggle{display:flex;background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-md);padding:3px} .ng-toggle a{padding:9px 16px;border-radius:var(--ng-r-sm);font-size:12.5px;font-weight:500;color:var(--ng-muted)} .ng-toggle a.active{background:var(--ng-surface-3);color:var(--ng-ink)} .ng-fu{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ng-muted)} .ng-fu .dot{width:6px;height:6px;border-radius:50%;background:var(--ng-eyes);flex:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--ng-eyes) 18%,transparent)} /* ---------- review shell ---------- */ .review-shell{display:flex;align-items:stretch;min-height:calc(100vh - 64px)} .queue-rail{width:398px;flex:0 0 398px;border-right:1px solid var(--ng-hair);padding:20px;background:var(--ng-rail);overflow-y:auto} .queue-empty{color:var(--ng-faint);font-size:13px;padding:20px 4px} .detail-pane{flex:1;min-width:0;padding:22px 30px 30px;display:flex;flex-direction:column;gap:14px} .detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} .detail-title{font-size:23px;font-weight:500;letter-spacing:-.025em;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:11px} .detail-position{font-family:var(--ng-font-data);font-size:12px;color:var(--ng-faint);white-space:nowrap;padding-top:6px} /* ---------- queue card ---------- */ .queue-card{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);padding:14px 16px;display:flex;gap:13px;align-items:flex-start;cursor:pointer;transition:background .12s,border-color .12s;margin-bottom:8px} .queue-card:hover{background:var(--ng-surface-2)} .queue-card .bar{width:6px;align-self:stretch;min-height:34px;border-radius:4px;background:var(--tier);flex:none} .queue-card.selected{background:var(--ng-surface-2);border-color:color-mix(in oklab,var(--ng-accent-txt) 55%,transparent);box-shadow:0 0 0 1px var(--ng-accent-dim),var(--ng-shadow)} .queue-card-main{flex:1;min-width:0} .queue-card-payer{font-size:13.5px;font-weight:500;letter-spacing:-.005em;line-height:1.3} .queue-card-match{font-size:12px;color:var(--ng-muted);margin-top:5px;font-family:var(--ng-font-data)} .queue-card-amount{font-size:17px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap} .queue-card .badge{margin-top:9px} /* ---------- check viewer ---------- */ .check-image-box{position:relative;border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);background:var(--ng-surface);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--ng-faint);min-height:420px;padding:22px} .check-image-box img{max-width:100%;max-height:480px;cursor:crosshair;border-radius:var(--ng-r-sm)} .zoom-glyph{font-size:26px} .magnifier{position:absolute;display:none;pointer-events:none;z-index:5;width:520px;height:320px;border-radius:var(--ng-r-md);border:1.5px solid var(--ng-accent-txt);background-color:#fff;background-repeat:no-repeat;box-shadow:var(--ng-shadow-soft),0 0 0 6px var(--ng-accent-wash)} .check-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:var(--ng-font-data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ng-muted);background:var(--ng-scrim);padding:4px 10px;border-radius:var(--ng-r-pill);white-space:nowrap;pointer-events:none} .check-hint--coarse{display:none} @media (pointer:coarse){ .check-hint--fine{display:none} .check-hint--coarse{display:block} } /* ---------- field chips ---------- */ .field-chips{display:flex;gap:11px;flex-wrap:wrap;align-items:stretch} .field-chip{flex:1 1 190px;background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);padding:13px 15px;min-width:0} .field-chip.flagged{border-color:color-mix(in oklab,var(--ng-eyes) 50%,transparent);background:linear-gradient(var(--ng-eyes-tint),var(--ng-surface))} .field-chip-label{font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ng-muted);display:flex;align-items:center;gap:7px} .field-chip.flagged .field-chip-label{color:var(--ng-eyes)} .field-chip.flagged .field-chip-label:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ng-eyes);flex:none} .field-chip-value{font-size:20px;font-weight:500;letter-spacing:-.02em;margin-top:7px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .field-chip-value.sm{font-size:14px;letter-spacing:0;line-height:1.35} .field-chip-note{font-size:11.5px;line-height:1.45;color:var(--ng-faint);margin-top:8px} .amount-edit{display:flex;align-items:center;gap:2px;font-size:22px;font-weight:500;margin-top:6px;letter-spacing:-.02em} .amount-edit input{font:inherit;color:inherit;width:118px;border:none;background:var(--ng-surface-2);border-radius:var(--ng-r-sm);border-bottom:2px solid var(--ng-accent-txt);padding:3px 9px;font-variant-numeric:tabular-nums;min-height:38px} .amount-edit input:focus{outline:none;background:var(--ng-surface-3)} /* ---------- memo / note strip ---------- */ .note-strip{background:var(--ng-surface);border:1px solid var(--ng-hair);border-left:3px solid var(--ng-surface-3);border-radius:var(--ng-r-lg);padding:14px 17px;font-size:13px;line-height:1.6;color:var(--ng-muted)} .note-strip b{display:block;font-family:var(--ng-font-data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ng-faint);margin-bottom:6px;font-weight:500} /* ---------- match block ---------- */ .match-block{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px} .match-block-text strong{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em} .match-block-text span{display:block;font-size:12.5px;color:var(--ng-faint);margin-top:3px} .match-block .acct{display:inline;font-family:var(--ng-font-data);color:var(--ng-accent-txt)} .match-block.nomatch{border-color:color-mix(in oklab,var(--ng-nomatch) 45%,transparent);background:linear-gradient(var(--ng-nomatch-tint),var(--ng-surface))} .match-block.done{border-color:color-mix(in oklab,var(--ng-auto) 40%,transparent);background:linear-gradient(var(--ng-auto-tint),var(--ng-surface))} .match-block form{margin:0} .ng-link{font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ng-accent-txt);border-bottom:1px solid color-mix(in oklab,var(--ng-accent-txt) 45%,transparent);padding-bottom:1px} .ng-link:hover{color:var(--ng-accent-hi)} /* ---------- banners ---------- */ .undo-banner,.error-banner{border-radius:var(--ng-r-lg);padding:13px 14px 13px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;line-height:1.45} .undo-banner{background:linear-gradient(var(--ng-accent-tint),var(--ng-surface));border:1px solid color-mix(in oklab,var(--ng-accent-txt) 40%,transparent)} .undo-banner>span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ng-accent-txt);margin-right:9px;vertical-align:middle} .undo-banner form{margin:0} .error-banner{background:linear-gradient(var(--ng-nomatch-tint-2),var(--ng-surface));border:1px solid color-mix(in oklab,var(--ng-nomatch) 55%,transparent);color:var(--ng-nomatch-ink);font-weight:500} .error-banner:before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ng-nomatch);color:var(--ng-on-nomatch);font-size:12px;font-weight:700;flex:none} /* ---------- correction picker ---------- */ .correct-block{background:var(--ng-surface);border:1px solid var(--ng-hair);border-radius:var(--ng-r-lg);padding:17px 18px} .correct-block .label{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ng-ink);margin-bottom:13px} .candidate-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--ng-r-md);border:1px solid var(--ng-hair);background:var(--ng-surface-2);cursor:pointer;min-height:var(--ng-tap);margin-bottom:7px} .candidate-row:hover{background:var(--ng-surface-3)} .candidate-row.chosen{border-color:var(--ng-accent-txt);background:linear-gradient(var(--ng-accent-tint-2),var(--ng-surface-2))} .candidate-row input{accent-color:var(--ng-accent-txt);width:18px;height:18px;flex:none;margin:0} .candidate-row strong{font-size:13.5px;font-weight:500} .candidate-row .meta{font-family:var(--ng-font-data);font-size:11.5px;color:var(--ng-faint);margin-top:3px} .candidate-empty{padding:16px;border-radius:var(--ng-r-md);border:1px dashed var(--ng-hair);color:var(--ng-muted);font-size:13px;text-align:center} .rule-check{display:flex;align-items:flex-start;gap:11px;margin-top:11px;padding:12px 14px;border-radius:var(--ng-r-md);border:1px solid var(--ng-hair-soft);background:var(--ng-surface-2);font-size:12.5px;line-height:1.45;color:var(--ng-muted);cursor:pointer} .rule-check input{accent-color:var(--ng-accent-txt);width:17px;height:17px;flex:none;margin:1px 0 0} /* ---------- action row ---------- */ .action-row{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:6px} .action-row form{margin:0} .kbd-hint{margin-left:auto;font-family:var(--ng-font-data);font-size:11px;color:var(--ng-faint);letter-spacing:.03em} .kbd-hint kbd{background:var(--ng-surface-2);border:1px solid var(--ng-hair);border-radius:4px;padding:2px 6px;font:inherit;color:var(--ng-muted)} /* ---------- empty state ---------- */ .empty-state{display:grid;place-items:center;text-align:center;padding:70px 20px;gap:14px;width:100%} .empty-state .glyph{width:56px;height:56px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--ng-accent-txt) 50%,transparent);background:var(--ng-accent-wash);display:grid;place-items:center;color:var(--ng-accent-txt);font-size:24px} .empty-state h2{font-size:19px;font-weight:500;letter-spacing:-.02em} .empty-state p{margin:0;font-size:13px;color:var(--ng-faint);max-width:330px;line-height:1.55} .empty-state .undo-banner{width:min(480px,100%)} /* ---------- utility ---------- */ .muted{color:var(--ng-muted)} .small{font-size:12px} .grid{display:grid;gap:16px} .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px} .flex{display:flex}.aic{align-items:center}.jcsb{justify-content:space-between} .gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px} /* ---------- login ---------- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ng-bg)} .login-card{width:400px;text-align:center} .login-card .brand-mark{height:44px;margin-bottom:12px} /* ---------- mobile (Christine reviews from her phone) ---------- */ @media (max-width:760px){ .ng-nav{gap:8px;padding:0 10px;height:56px} .ng-brand span.brand-name{display:none} .ng-brand img{height:22px} .ng-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;gap:2px;font-size:12px; -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)} .ng-tabs::-webkit-scrollbar{display:none} .ng-tabs a{padding:6px 8px;flex:0 0 auto} .ng-pull{width:32px;height:32px;padding:0;justify-content:center;border-radius:50%} .ng-pull .pull-label{display:none} .ng-gear{width:26px;height:26px} .ng-count{margin-left:5px} .ng-theme{padding:2px} .ng-theme button{width:22px;height:20px} .ng-av{width:26px;height:26px;font-size:10px} .page{padding:16px 14px 48px} .page-head{flex-wrap:wrap;align-items:flex-start} .ng-kpis{grid-template-columns:repeat(2,1fr);gap:10px} .ng-kpi-value{font-size:24px} .card{overflow-x:auto;-webkit-overflow-scrolling:touch} /* swipe cue: cards whose tables overflow fade out at the right edge until scrolled to the end (same affordance as the nav tabs) */ .card:has(> .table),.card:has(> table),.stmt-scroll{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),rgb(0 0 0/.15)); mask-image:linear-gradient(to right,#000 calc(100% - 28px),rgb(0 0 0/.15))} /* charts fit 7 columns on a phone: compact money labels, tighter gaps */ .ng-chart{gap:7px} .ng-chart-val{font-size:10px} .ng-chart-val .val-f{display:none} .ng-chart-val .val-s{display:inline} .ng-chart-duo{gap:2px} .chart-head{flex-wrap:wrap} .ng-att-meta{overflow-wrap:anywhere} } /* a pathological search string must wrap, not stretch the page */ .clients-empty{overflow-wrap:anywhere}