@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* =============================================================================
skin.css — Shopify-admin layout in Pinoyaya colours (milestone 1, 2026-10-05).
Loads LAST. Re-points the tokens base.css/app.css already read, then reshapes
the shell (dark ground, topbar on the ground, content in one rounded panel),
headers, metric strips, tables, pills and overlays. base.css is not edited:
its ratio history stays true for the palette it documents; the ratios for
THIS palette are measured below (scratchpad contrast.py, WCAG 2.x formula).
Colour has one job each:
navy #2C264E the ONE accent — primary button, active nav, selection, links, focus
periwinkle #EEF0FA soft fills / tints
green good states only (verified, paid, visible, active access)
amber waiting
coral #E16C69 / its text-safe red urgent — counts that need action, danger
grey neutral
============================================================================= */
:root{
/* ---- shell (the dark ground behind everything) -------------------------
rail-ink #FFFFFF on #1B1730 17.33:1 rail-ink-2 #C9C5DE on #1B1730 10.34:1
rail-ink-3 #9A95B5 on #1B1730 6.06:1 on active #2E2850 4.78:1, on search fill 5.02:1
(lifted from the mockup's #8E89AA, which measured 4.31:1 on the search fill)
rail-ink #FFFFFF on active #2E2850 13.68:1
The active fill is only 1.27:1 against the ground, so the state is also carried by
white + bolder text and a periwinkle icon — never by the fill alone. */
--shell:#1B1730;
--rail:#1B1730; --rail-2:rgba(255,255,255,.06); --rail-3:rgba(255,255,255,.1);
--rail-line:rgba(255,255,255,.09);
--rail-ink:#FFFFFF; --rail-ink-2:#C9C5DE; --rail-ink-3:#9A95B5;
--rail-active:#B9B2F2; --rail-active-bg:#2E2850;
--shell-fill:rgba(255,255,255,.07); --shell-line:rgba(255,255,255,.1);
--shell-focus:#B9B2F2; /* 8.84:1 on #1B1730 (navy focus would be 2.66:1 there) */
/* ---- page --------------------------------------------------------------
ink #1B1730 on surface 17.33 · page 15.97 · raised 16.12 · sunken 15.15
ink-2 #4B4860 on surface 8.77 · raised 8.15 · sunken 7.67
ink-3 #6A6783 on surface 5.41 · page 4.99 · raised 5.03 · sunken 4.73 · wash 4.76 */
--ground:#F6F5F9; --surface:#FFFFFF; --raised:#F7F6FB; --sunken:#F0EFF4;
--line:#E3E1EA; --line-soft:#EFEEF3;
/* input boundary: #8C88A3 on surface 3.41, on raised 3.17 (≥3:1 for an empty field) */
--line-input:#8C88A3;
--ink:#1B1730; --ink-2:#4B4860; --ink-3:#6A6783;
/* ---- the one accent: navy ----------------------------------------------
#2C264E on surface 14.05 · page 12.95 · wash 12.37 ; white on #2C264E 14.05 */
--accent:#2C264E; --accent-2:#221D3E; --accent-wash:#EEF0FA; --accent-wash-h:#E3E6F6;
--accent-ink:#FFFFFF; --accent-hi:#2C264E; --accent-lo:#2C264E;
--pri-hi:#2C264E; --pri-lo:#2C264E; --pri-2:#2C264E; --on-pri:#FFFFFF;
--sh-action:0 1px 0 rgba(27,23,48,.08);
--sh-pri:0 1px 0 rgba(27,23,48,.08);
--lk-hover:#1B1730;
--focus:#2C264E;
/* "info" is not a fifth status colour any more: it is the accent family (links, the
selected facet, the funnel bar). Status pills that used it render neutral — see .st-info. */
--info:#2C264E; --info-wash:#EEF0FA; --on-info:#FFFFFF;
/* ---- states (text on its own wash / on white)
ok #1F7A3A on #E6F4EA 4.74 · on white 5.38 dot #1C9A3C on wash 3.22
warn #8A5A12 on #FCF1DC 5.28 · on white 5.91 dot #A9711A on wash 3.70
danger #B4342F on #FBE8E6 5.12 · on white 6.05 dot #CC4642 on wash 3.93
neutral #4B4860 on #F0EFF4 7.67 dot #7F7C95 on wash 3.52
coral #E16C69: urgent-count pill, ink #1B1730 on it 5.41 ; as a mark on white 3.21 */
--ok:#1F7A3A; --ok-wash:#E6F4EA; --ok-dot:#1C9A3C;
--warn:#8A5A12; --warn-wash:#FCF1DC; --warn-dot:#A9711A;
--danger:#B4342F; --danger-wash:#FBE8E6; --bad-dot:#CC4642; --on-danger:#FFFFFF;
--neu:#4B4860; --neu-wash:#F0EFF4; --neu-dot:#7F7C95;
--coral:#E16C69; --on-coral:#1B1730;
--dgr-line:#EDC6C2;
/* charts: series 1 navy (14.05 on white), series 2 #8A82D0 (3.40 on white, 4.14 vs navy).
Amber is no longer a chart series — it means "waiting". */
--chart-bar:#2C264E; --chart-bar-h:#4A4280; --series-2:#8A82D0;
--pic-bg:#EEF0FA; --pic-ink:#2C264E;
--scroll:#D3D0DE; --scroll-h:#B7B3C8;
/* radii: the content panel is 14, cards 14, controls 9 */
--r-xs:6px; --r-sm:9px; --r:10px; --r-lg:14px;
--h-ctl:32px;
--rail-w:236px;
--sh-1:0 1px 0 rgba(27,23,48,.04);
--sh-2:0 1px 2px rgba(27,23,48,.06), 0 6px 16px -8px rgba(27,23,48,.16);
--sh-3:0 18px 48px -12px rgba(14,12,24,.38);
--sh-ctl:0 1px 0 rgba(27,23,48,.05);
--sh-ctl-h:0 1px 0 rgba(27,23,48,.07);
--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* ---- dark: navy-tinted near-black ------------------------------------------
ink #EEECF6 on surface 15.44 · page 16.13 · raised 14.33 · sunken 13.36
ink-2 #C9C6D8 on surface 10.79 · raised 10.02 · sunken 9.33
ink-3 #A6A2BE on surface 7.33 · page 7.66 · raised 6.81 · sunken 6.34 · wash 6.41
primary #B9B2F2 on surface 9.21 · page 9.62 · wash 8.05 ; ink #17151F on it 9.21
ok #7AD596/#173022 7.95 · warn #EDBB66/#302512 8.51 · danger #F2918A/#36191A 7.01
dots: ok 6.28 · warn 6.77 · coral on danger wash 5.00 · neutral 4.61
rail-ink-3 #8A85A6 on ground #0E0C18 5.52, on search fill 4.73 ; focus #B9B2F2 9.88
input #6A6683 on surface 3.30, on raised 3.06 ; series 2 #635CAD on surface 3.15 */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
--shell:#0E0C18; --rail:#0E0C18; --rail-active-bg:#262140; --rail-ink-3:#8A85A6;
--ground:#121019; --surface:#17151F; --raised:#1E1C29; --sunken:#24222F;
--line:#2B2839; --line-soft:#211F2C; --line-input:#6A6683;
--ink:#EEECF6; --ink-2:#C9C6D8; --ink-3:#A6A2BE;
--accent:#B9B2F2; --accent-2:#A79FEA; --accent-wash:#232036; --accent-wash-h:#2B2742;
--accent-ink:#17151F; --accent-hi:#B9B2F2; --accent-lo:#B9B2F2;
--pri-hi:#B9B2F2; --pri-lo:#B9B2F2; --pri-2:#B9B2F2; --on-pri:#17151F;
--sh-action:none; --sh-pri:none; --lk-hover:#D6D1FA; --focus:#B9B2F2;
--info:#B9B2F2; --info-wash:#232036; --on-info:#17151F;
--ok:#7AD596; --ok-wash:#173022; --ok-dot:#3FC46A;
--warn:#EDBB66; --warn-wash:#302512; --warn-dot:#E0A33A;
--danger:#F2918A; --danger-wash:#36191A; --bad-dot:#E16C69; --on-danger:#17151F;
--neu:#C9C6D8; --neu-wash:#24222F; --neu-dot:#8C89A0;
--dgr-line:#5A2C2D;
--chart-bar:#B9B2F2; --chart-bar-h:#D0CBF7; --series-2:#635CAD;
--pic-bg:#232036; --pic-ink:#B9B2F2;
--scroll:#34313F; --scroll-h:#45415A;
--sh-1:none; --sh-2:0 8px 24px -10px rgba(0,0,0,.7); --sh-3:0 20px 50px -12px rgba(0,0,0,.8);
--sh-ctl:none; --sh-ctl-h:none;
}}
:root[data-theme="dark"]{
--shell:#0E0C18; --rail:#0E0C18; --rail-active-bg:#262140; --rail-ink-3:#8A85A6;
--ground:#121019; --surface:#17151F; --raised:#1E1C29; --sunken:#24222F;
--line:#2B2839; --line-soft:#211F2C; --line-input:#6A6683;
--ink:#EEECF6; --ink-2:#C9C6D8; --ink-3:#A6A2BE;
--accent:#B9B2F2; --accent-2:#A79FEA; --accent-wash:#232036; --accent-wash-h:#2B2742;
--accent-ink:#17151F; --accent-hi:#B9B2F2; --accent-lo:#B9B2F2;
--pri-hi:#B9B2F2; --pri-lo:#B9B2F2; --pri-2:#B9B2F2; --on-pri:#17151F;
--sh-action:none; --sh-pri:none; --lk-hover:#D6D1FA; --focus:#B9B2F2;
--info:#B9B2F2; --info-wash:#232036; --on-info:#17151F;
--ok:#7AD596; --ok-wash:#173022; --ok-dot:#3FC46A;
--warn:#EDBB66; --warn-wash:#302512; --warn-dot:#E0A33A;
--danger:#F2918A; --danger-wash:#36191A; --bad-dot:#E16C69; --on-danger:#17151F;
--neu:#C9C6D8; --neu-wash:#24222F; --neu-dot:#8C89A0;
--dgr-line:#5A2C2D;
--chart-bar:#B9B2F2; --chart-bar-h:#D0CBF7; --series-2:#635CAD;
--pic-bg:#232036; --pic-ink:#B9B2F2;
--scroll:#34313F; --scroll-h:#45415A;
--sh-1:none; --sh-2:0 8px 24px -10px rgba(0,0,0,.7); --sh-3:0 20px 50px -12px rgba(0,0,0,.8);
--sh-ctl:none; --sh-ctl-h:none;
}
/* ============================== TYPE ===================================== */
/* One face everywhere. base.css/app.css name IBM Plex Sans on ~30 numeric and
meta rules; each is caught here rather than edited in place. */
body{font:400 13.5px/1.5 var(--font);background:var(--shell);color:var(--ink)}
body *:not(svg):not(path){font-family:var(--font)}
.num,td.r,.tbl .num,.nav-count,.kpi-v,.mval,.pstage-n,.fn-n,.sd-n,.nu-n,.gsx-c,.ml-v,.dk b,
.pa-row .n,.frow .n,.pager,.when-abs,.zh-n{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rail :focus-visible,.topbar :focus-visible{outline-color:var(--shell-focus)}
/* Sentence case everywhere: no uppercase micro-labels. */
.rail-sec-label,.rail-word small,.tile-k,.kpi-k,thead th,.tbl th,.fgrp-h,.fgrp-k,.dr-sec,.rk,.rec-fk,
.pal-g,.pal-k,.src,.zh-k,.hl-cap,.pa-sec-h span,.nu-g,.fld-l,.push-app,.apps-t,.section-label,
.pstage-h,.fn-g,.agrp-k,.finding-k,.gs,.tier-k,.signin-brand span,.promo-pill,.dlg-code,.th-s,
thead th button,.st,.tag{text-transform:none;letter-spacing:0}
/* ============================== SHELL ==================================== */
.app{background:var(--shell);grid-template-columns:var(--rail-w) minmax(0,1fr)}
.app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
.rail{background:var(--shell)}
.rail-fade{background:linear-gradient(to bottom,transparent,var(--shell));bottom:96px}
.shell{background:var(--shell)}
/* brand: the mark in periwinkle, "Pinoyaya" + a small "admin" */
.rail-brand{padding:14px 16px 12px;gap:9px}
.rail-logo{width:26px;height:26px;border-radius:0;background:none;box-shadow:none;color:#B9B2F2}
.rail-logo svg{width:24px!important;height:24px!important}
.rail-word{display:flex;align-items:baseline;gap:7px;font:800 16px/1 var(--font);letter-spacing:-.01em;color:#FFFFFF}
.rail-word small{display:inline;font:600 11.5px/1 var(--font);color:var(--rail-ink-3);margin:0}
.rail-scroll{padding:2px 10px 12px}
.rail-sec-label{font:700 12px/1 var(--font);color:var(--rail-ink-3);padding:16px 10px 7px}
.nav-a{gap:10px;padding:7px 10px;border-radius:9px;color:var(--rail-ink-2);
font:600 13.5px/1.35 var(--font)}
.nav-a .ico{width:18px;height:18px;stroke-width:1.8}
.nav-a:hover{background:var(--rail-2);color:#FFFFFF}
.nav-a.on{background:var(--rail-active-bg);color:#FFFFFF;font-weight:700}
.nav-a.on .ico{color:var(--rail-active)}
.nav-a:focus-visible{outline:2px solid var(--shell-focus);outline-offset:-2px}
/* counts: quiet numbers by default … */
.nav-count{flex:0 0 auto;font:600 12px/1 var(--font);color:var(--rail-ink-3)}
.nav-a.on .nav-count{color:var(--rail-ink-2)}
/* … a coral pill only on the Work items, and only when there is something to do */
.nav-count.hot:not(:empty){color:var(--on-coral);background:var(--coral);font:700 11.5px/1 var(--font);
border-radius:99px;padding:3px 7px;min-width:20px;text-align:center}
.nav-count.hot.zero{background:none;color:var(--rail-ink-3);padding:0;min-width:0;font-weight:600}
/* guided setup + collapse, on the ground */
.rail-promo{padding:8px 10px 6px}
.gs{gap:9px;padding:9px 11px;border-radius:10px;background:var(--shell-fill);border:1px solid var(--shell-line);
color:var(--rail-ink-2);font:600 13px/1 var(--font)}
.gs:hover{background:var(--rail-3);color:#FFFFFF}
.gs-dot{background:var(--rail-active);box-shadow:0 0 0 3px rgba(185,178,242,.18)}
.rail-foot{border-top:1px solid var(--rail-line);padding:6px 10px 8px}
.rail-collapse{border-radius:9px;color:var(--rail-ink-3);font:600 13px/1 var(--font);padding:8px 10px}
.rail-collapse:hover{background:var(--rail-2);color:#FFFFFF}
.app.rail-collapsed .nav-a{padding:9px 0}
.subnav.flyout{background:#2A2546;border-color:var(--shell-line)}
#railTip{background:#FFFFFF;color:#1B1730;font:600 12px var(--font)}
/* ---- topbar: sits on the ground, no surface of its own ------------------- */
.topbar{background:transparent;border-bottom:0;height:56px;padding:0 12px 0 6px;gap:10px}
.omnibtn{margin:0 auto;max-width:560px;height:36px;border-radius:10px;background:var(--shell-fill);
border:1px solid var(--shell-line);color:var(--rail-ink-3);font:500 13.5px/1 var(--font)}
.omnibtn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.16);color:var(--rail-ink-2)}
.omnibtn .ico{color:var(--rail-ink-3)}
.omnibtn .kbd{background:transparent;border-color:rgba(255,255,255,.16);color:var(--rail-ink-3);font:600 11px/1 var(--font)}
.top-right{margin-left:0;gap:6px}
.topbar .bb{color:var(--rail-ink-2);font:500 12.5px/1 var(--font)}
.topbar .bb svg{color:var(--rail-ink-3)}
.tier{height:32px;border-radius:9px;background:var(--shell-fill);border:1px solid var(--shell-line);box-shadow:none;
color:var(--rail-ink-2);font:600 12.5px/1 var(--font);cursor:default}
.tier:hover{box-shadow:none}
.tier-k{font:600 12px/1 var(--font);color:var(--rail-ink-3)}
.tier b{color:#FFFFFF;font-weight:700}
.topbar .icon-btn{width:34px;height:34px;border-radius:9px;color:var(--rail-ink-2)}
.topbar .icon-btn:hover{background:var(--rail-3);color:#FFFFFF}
.me{width:30px;height:30px;border-radius:8px;background:#E9E6FB;color:#2C264E;box-shadow:none;
font:800 12.5px/1 var(--font);margin-left:4px}
/* ---- the content panel: ONE rounded surface, inset from rail and topbar --- */
.body{background:var(--ground);margin:0 8px 8px 0;border-radius:14px;
scrollbar-color:var(--scroll) transparent}
.body::-webkit-scrollbar-thumb{border-color:var(--ground)}
.page{padding:20px 26px 48px;max-width:1480px;margin:0 auto}
/* ============================== PAGE HEADER ============================== */
.pg-head{align-items:center;gap:12px;margin-bottom:16px}
.pg-title{display:flex;align-items:center;gap:9px;font:700 20px/1.25 var(--font);letter-spacing:-.012em;color:var(--ink)}
.pg-title .pg-ico{width:20px;height:20px;flex:0 0 auto;color:var(--ink-2);stroke-width:1.9}
.pg-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.pg-act{align-items:center;flex-wrap:wrap;gap:8px}
/* secondary actions on a page header are outline buttons */
.pg-act .btn.qui,.pg-act .btn{background:var(--surface);border:1px solid var(--line);color:var(--ink);
box-shadow:var(--sh-ctl);font-weight:600}
.pg-act .btn.qui:hover,.pg-act .btn:hover{background:var(--raised);border-color:var(--line)}
.pg-act .btn.pri{background:var(--pri-lo);border-color:var(--pri-lo);color:var(--on-pri)}
.pg-act .btn.pri:hover{background:var(--pri-lo);filter:brightness(1.18)}
.src{font:600 12px/1.6 var(--font);padding:1px 9px;background:var(--warn-wash);color:var(--warn)}
.src.live{background:var(--ok-wash);color:var(--ok)}
.stat-chip{border-radius:99px;background:var(--surface);border-color:var(--line);font-size:12.5px}
.crumb{font-size:12.5px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}
/* ============================== CONTROLS ================================= */
.btn{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
color:var(--ink);font:600 13px/1 var(--font);letter-spacing:0;box-shadow:var(--sh-ctl)}
.btn:hover{background:var(--raised);border-color:var(--line);box-shadow:var(--sh-ctl-h)}
.btn:active{background:var(--sunken)}
.btn svg{color:var(--ink-3)}
.btn.pri{background:var(--pri-lo);border-color:var(--pri-lo);color:var(--on-pri);box-shadow:var(--sh-action)}
.btn.pri:hover{background:var(--pri-lo);border-color:var(--pri-lo);filter:brightness(1.18)}
.btn.pri:active{background:var(--pri-lo);filter:brightness(.95)}
.btn.qui{background:none;border-color:transparent;box-shadow:none;color:var(--ink-2);font-weight:600}
.btn.qui:hover{background:var(--sunken);color:var(--ink)}
.btn.dgr{color:var(--danger);border-color:var(--dgr-line);background:var(--surface)}
.btn.dgr:hover{background:var(--danger-wash);border-color:var(--danger)}
.btn.sm,.btn.qui.sm,.mini .btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn[disabled]{cursor:not-allowed}
.act-blocked[disabled]{background:var(--sunken);color:var(--ink-3);border-color:var(--line-soft)}
.why{font-size:11.5px;color:var(--ink-3)}
.vsel,.fbar-s{height:32px;border-radius:9px;border:1px solid var(--line);background-color:var(--surface);
color:var(--ink);font:600 13px/1 var(--font);box-shadow:var(--sh-ctl);padding:0 28px 0 10px;
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.vsel:hover{background-color:var(--raised)}
.vsel.sm{height:28px;font-size:12.5px;font-weight:600;padding:0 26px 0 9px;border-radius:8px}
.fld,.dlg textarea,.period .fld.sm{border:1px solid var(--line-input);background:var(--surface);color:var(--ink);
border-radius:9px;font-family:var(--font)}
.fld:focus,.dlg textarea:focus,.filter-bar input:focus,.fbar-s:focus{border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-wash);outline:0}
.fld-l{font:600 12.5px/1.3 var(--font);color:var(--ink-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--pri-lo)}
.kbd{font:600 11px/1 var(--font);border-radius:5px}
.lk{color:var(--accent)}
.lk:hover{color:var(--lk-hover)}
.page a:not(.btn):not(.nav-a){color:var(--accent)}
/* ============================== CARDS ==================================== */
.card{border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);background:var(--surface)}
.card-h{min-height:48px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.card-t{font:700 14px/1.3 var(--font);letter-spacing:-.005em}
.card-h .info{color:var(--ink-3);border-bottom:1px dotted var(--ink-3);line-height:1.1}
.chart-note,.fn-note,.act-foot{color:var(--ink-3);font-size:12.5px}
.chart-note code,.fn-note code,.act-foot code,.finding code{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
background:var(--sunken);color:var(--ink-2);padding:2px 5px;border-radius:5px}
.chart-note b{color:var(--ink-2)}
.finding{border-radius:12px;font-size:13px}
.finding-k{font:700 11.5px/1.6 var(--font);background:var(--surface)}
details.more summary{border-radius:14px}
details.more[open] summary{border-radius:14px 14px 0 0}
/* ============================== METRICS STRIP ============================
KPI tile grids become ONE card with cells side by side, split by hairlines.
The hairline is an outside box-shadow on each cell; the strip clips it at
its own edges, so a short last row never leaves a grey gap. */
.kpis{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
box-shadow:var(--sh-1);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:16px}
.kpi{background:transparent;border:0;border-radius:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);
min-height:0;padding:13px 16px 14px;transition:background .13s var(--ease)}
.kpi.hot,.kpi.warn,.kpi.ok{border-left:0}
button.kpi:hover{background:var(--raised);box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);border-color:transparent}
.kpis-4 .kpi{min-height:0}
.kpi-k{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.3 var(--font);color:var(--ink)}
.kpi[title] .kpi-k,.kpi .kpi-k[title]{border-bottom:1px dotted var(--ink-3);cursor:help}
/* a tile's tone is a dot beside its label — coral = act now, amber = waiting, green = good */
.kpi.hot .kpi-k::before,.kpi.warn .kpi-k::before,.kpi.ok .kpi-k::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.kpi.hot .kpi-k::before{background:var(--coral)}
.kpi.warn .kpi-k::before{background:var(--warn-dot)}
.kpi.ok .kpi-k::before{background:var(--ok-dot)}
.kpi-v{margin-top:7px;font:700 20px/1.15 var(--font);letter-spacing:-.01em;color:var(--ink)}
.kpi-v small{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.kpi-s{margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink-3)}
.kpi-s.warn{color:var(--warn)}
.kpi-s.dn,.pd.dn{color:var(--danger)}
.pd.up{color:var(--ok)}
.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpis-8{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
@media (min-width:1500px){.kpis-8{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:1400px){.kpis-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.kpis-4,.kpis-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a strip inside a card is part of that card: quieter edge, no second shadow */
.card .kpis{box-shadow:none;border-color:var(--line-soft);border-radius:10px}
.card .kpi{box-shadow:-1px 0 0 var(--line-soft),0 -1px 0 var(--line-soft)}
.kpis.overlap{margin:0 0 16px}
/* ============================== TABLES =================================== */
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
.card .tbl-wrap{background:none;border:0;border-radius:0}
.tbl{font-size:13.5px}
.tbl th,.tbl th:not(:has(.th-s)){background:var(--surface);font:600 12.5px/1.2 var(--font);color:var(--ink-3);
padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:has(.th-s){padding:0}
.th-s{padding:10px 12px;color:var(--ink-3);font:600 12.5px/1.2 var(--font);border-radius:0}
.th-s:hover,.th-s.on{color:var(--ink)}
.th-s.on .th-i{color:var(--ink)}
.tbl td{padding:12px 12px;border-top:1px solid var(--line-soft);color:var(--ink);font-size:13.5px}
.tbl tbody tr:first-child td{border-top:0}
.tbl .who{font-weight:600;color:var(--ink)}
.tbl .sub{color:var(--ink-3);font-size:12px}
.tbl tbody tr:hover td{background:var(--raised)}
.tbl-static tbody tr:hover td{background:none}
.tbl tr.sel td{background:var(--accent-wash)}
.tbl .cb{width:40px;padding-left:14px;padding-right:0}
.tbl .cb input{width:15px;height:15px}
.tbl .empty-row,.empty-row{color:var(--ink-3);padding:32px 14px}
/* "When" columns etc. read in tabular figures */
.tbl td{font-variant-numeric:tabular-nums}
/* ---- status pills: a dot + a word. grey neutral, green good, amber waiting, red bad ---- */
.st,.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:99px;
font:600 12px/1.45 var(--font);white-space:nowrap;border:0}
.st::before,.tag::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--neu-dot)}
.tag s{display:none}
.st-ok,.tag.ok{background:var(--ok-wash);color:var(--ok)}
.st-ok::before,.tag.ok::before{background:var(--ok-dot)}
.st-warn,.tag.warn{background:var(--warn-wash);color:var(--warn)}
.st-warn::before,.tag.warn::before{background:var(--warn-dot)}
.st-dang,.tag.bad{background:var(--danger-wash);color:var(--danger)}
.st-dang::before,.tag.bad::before{background:var(--bad-dot)}
/* "info" and "mute" are both neutral: four tones, not six */
.st-info,.st-mute,.tag.mut,.tag.info{background:var(--neu-wash);color:var(--neu)}
.st-info::before,.st-mute::before,.tag.mut::before,.tag.info::before{background:var(--neu-dot)}
/* a count or a label riding inside a control is not a status — no dot */
.btn .st::before,.fgrp-h .st::before,.card-h .st::before,.dlg .st::before,.pal .st::before{display:none}
.btn .st,.fgrp-h .st{padding:0 7px;font-size:11.5px}
.card-h .st{background:none;padding:0;color:var(--ink-3);font-weight:600}
/* ---- list layout: facet card + table card -------------------------------- */
.lay{grid-template-columns:220px minmax(0,1fr);gap:16px}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 8px 6px;top:12px;
box-shadow:var(--sh-1)}
.fgrp-h{font:700 13.5px/1.2 var(--font);color:var(--ink);padding:6px 8px 8px;align-items:center}
.fgrp{border-top:1px solid var(--line-soft);padding:8px 0 8px}
.fgrp-k{font:600 12.5px/1.2 var(--font);color:var(--ink-3);padding:0 8px;margin-bottom:5px}
.filters .frow,.filters .frow:hover,.filters .frow.on{font:500 13px/1.35 var(--font)}
.frow{padding:5px 8px 5px 28px;border-radius:8px;color:var(--ink-2)}
.frow::before{left:9px;width:12px;height:12px;margin-top:-6px;border:1.5px solid var(--line-input)}
.filters .frow:hover{background:var(--raised)}
.filters .frow.on{background:var(--accent-wash);color:var(--ink);font-weight:600}
.frow.on::before{border-color:var(--pri-lo);background:var(--pri-lo);box-shadow:inset 0 0 0 2.5px var(--surface)}
.frow .n{font-size:12px;color:var(--ink-3)}
.chips{gap:6px}
.chip{height:28px;border-radius:99px;font-size:12.5px;border-color:var(--line);background:var(--surface)}
.chip.on{background:var(--accent-wash);color:var(--accent);border-color:transparent}
.chip button{background:none;border:0;cursor:pointer}
.pager{padding:10px 12px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line-soft)}
.mass{background:var(--pri-lo);color:var(--on-pri);border-radius:14px 14px 0 0;padding:8px 12px}
.mass .btn{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 40%,transparent);box-shadow:none}
.mass .btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.pop{border-radius:12px;border-color:var(--line);box-shadow:var(--sh-3)}
.pop-row:hover{background:var(--raised)}
/* ============================== HOME ===================================== */
.period .fld.sm{height:28px;font-size:12.5px}
.bar-g i{background:var(--chart-bar)}
.bar-g i.h,.legend i.h{background:var(--series-2)}
.legend i{background:var(--chart-bar)}
.bar-g span{color:var(--ink-3)}
.fn-track,.mbar,.bar{background:var(--sunken)}
.nu-g{font:700 12.5px/1 var(--font);color:var(--ink-3)}
.nu{border-radius:9px}
.nu:hover{background:var(--raised)}
.nu-n{font:700 13.5px/1 var(--font)}
.nu-n.hot,.gsx-c.hot{color:var(--danger)}
.kv .v.warn{color:var(--danger);font-weight:700}
.kv .v.ok{color:var(--ok)}
.pa-tabs{border-bottom:1px solid var(--line-soft)}
.pa-tab{background:none;border-radius:8px 8px 0 0;font:600 13px/1 var(--font);color:var(--ink-3)}
.pa-tab.on{background:none;color:var(--ink);border-bottom-color:var(--accent)}
.pstage{background:var(--surface);border-color:var(--line)}
.pstage:hover{background:var(--raised)}
.pstage-h{font:600 12.5px/1.4 var(--font)}
.pstage-h.info{background:var(--accent-wash);color:var(--accent)}
/* The funnel's last stage is Hired: good news, so green (it was the danger red, a leftover of the coral brand). */
.pstage-h.ok{background:var(--ok-wash);color:var(--ok)}
.pipeline{box-shadow:var(--sh-1)}
.pipeline .pstage:first-child{border-radius:14px 0 0 14px}
.pipeline .pstage:last-child{border-radius:0 14px 14px 0}
.fn-g{font:700 12.5px/1 var(--font);color:var(--ink-3)}
/* ============================== RECORD =================================== */
.rec-av{background:var(--accent-wash);color:var(--accent);border-radius:12px;font:800 15px/1 var(--font)}
.tabs{padding:0 12px;border-bottom:1px solid var(--line-soft)}
.tabs .tab{font:600 13px/1 var(--font);color:var(--ink-3);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.agrp-k{font:700 12.5px/1 var(--font);color:var(--ink-3)}
.agrp-k.dgr{color:var(--danger)}
.rk{font:600 12.5px/1.6 var(--font);color:var(--ink-3)}
.recnav{font-size:12.5px}
.recpage .pg-act .btn{height:32px}
.tk-msg{border-radius:10px;background:var(--raised)}
.tk-msg.tk-cust{border-left-color:var(--accent)}
/* ============================== OVERLAYS ================================= */
.dlg-scrim,.rec-scrim,.pal-wrap,.rail-scrim{background:rgba(14,12,24,.46)}
.dlg{border-radius:16px;border-color:var(--line);box-shadow:var(--sh-3);background:var(--surface)}
.dlg-h{padding:18px 20px 0}
.dlg-t{font:700 17px/1.25 var(--font)}
.dlg-s{color:var(--ink-3)}
.dlg-b{padding:16px 20px 4px}
.dlg-f{padding:16px 20px 18px;border-top:1px solid var(--line-soft);margin-top:12px}
.dlg-code{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:6px}
.dlg-warn{border-radius:10px}
.pal{border-radius:16px;border-color:var(--line);max-width:600px}
.pal-in{padding:14px 16px}
.pal-in input{font:500 15px/1.3 var(--font)}
.pal-res{padding:6px 8px 8px}
.pal-g{font:700 12px/1 var(--font);color:var(--ink-3);padding:12px 10px 6px}
.pal-i{border-radius:9px;align-items:center}
.pal-i:hover,.pal-i.on{background:var(--accent-wash)}
.pal-i.on .pal-l{color:var(--accent)}
.toast{border-radius:10px;font:600 13px/1.4 var(--font)}
/* guided setup drawer */
.rec{background:var(--surface);border-left:1px solid var(--line);border-radius:16px 0 0 16px}
.gsx{border-radius:12px;border-color:var(--line)}
.gsx:hover{background:var(--raised);border-color:var(--line)}
.gsx-n{background:var(--sunken);color:var(--ink-2);font-family:var(--font)}
.gsx-n.ok{background:var(--ok-wash);color:var(--ok)}
.gsx-c em{font-family:var(--font)}
/* sign-in: the same dark ground, one card */
.signin{background:var(--shell)}
.signin-card{border-radius:16px;border-color:var(--line);box-shadow:var(--sh-3)}
.signin-brand .rail-logo{background:var(--shell);color:#B9B2F2;border-radius:10px;display:grid;place-items:center}
.signin-brand .rail-logo svg{width:20px!important;height:20px!important}
.signin-brand b{font:800 17px/1.1 var(--font)}
.signin-brand span{font:600 12px/1.3 var(--font);color:var(--ink-3)}
/* ============================== NARROW =================================== */
@media (max-width:1360px){ .lay{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
.app,.app.rail-collapsed{grid-template-columns:minmax(0,1fr)}
.rail{background:var(--shell);width:264px;border-radius:0 14px 14px 0}
.topbar{padding:0 8px 0 6px}
.omnibtn{margin:0;flex:1 1 auto}
.body{margin:0 6px 6px;border-radius:12px}
.page{padding:16px 14px 40px}
.kpis-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
.topbar .icon-btn,.me{width:38px;height:38px}
.tier{height:38px}
}
@media (max-width:520px){
.omnibtn{flex:0 0 auto;width:38px;height:38px;justify-content:center;padding:0}
.top-right{margin-left:auto}
.pg-act{width:100%}
.kpis-4,.kpis-8{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- fixes found on the first screenshot pass ---------------------------- */
/* base.css gives .who display:flex for avatar rows; on a | that turns the cell into a
flex box and the row's divider breaks under the first column. */
.tbl td.who{display:table-cell}
/* the mark carries an inline color:#fff; the brand mark is periwinkle now */
.rail-logo svg{color:#B9B2F2!important}
a.btn,a.btn:hover{text-decoration:none}
.page a.btn{color:var(--ink)}
.page a.btn.qui{color:var(--ink-2)}
/* The mobile rail scrim is a plain block on desktop; as an auto-placed grid item it opened a
second implicit row, and on a short page (e.g. an empty Support view) the free height was
split between the two rows — the panel stopped ~60px above the window. One row, always. */
.app{grid-template-rows:minmax(0,1fr)}
@media (min-width:901px){ .rail-scrim{display:none} }
/* list notes sit under the strip as plain muted text, not a ruled-off chart caption */
.pg-head ~ .chart-note{border-top:0;padding-top:0}
/* compact rows: cells keep to one line and the card scrolls sideways instead (as Shopify does) */
.tbl td,.tbl th{white-space:nowrap}
.page > .finding{margin-bottom:16px}
/* destructive confirm: white on #B4342F 6.05:1 (light) · #17151F on #F2918A 7.90:1 (dark) */
.btn.pri.dgr-fill,.btn.pri.dgr-fill:hover{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
/* =============================================================================
M2 (2026-10-05): list bar on top of the table + per-list metrics strip.
New pairs measured (light / dark):
tab label ink-3 on surface 5.41 / 7.33 · selected tab ink on neutral fill 15.15 / 13.36,
its count ink-2 on the fill 7.67 / 9.33
search text ink 17.33 / 15.44 · placeholder ink-3 5.41 / 7.33 · field edge #8C88A3 3.41 / #6A6683 3.30
change: green #1F7A3A 5.38 / #7AD596 10.13 · red #B4342F 6.05 / #F2918A 7.90 · flat ink-3 5.41 / 7.33
sparkline navy #2C264E 14.05 / periwinkle #B9B2F2 9.21 (graphic, needs 3:1)
============================================================================= */
.lcard{overflow:visible}
.lbar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);
border-radius:14px 14px 0 0;background:var(--surface)}
.vtabs{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vtabs::-webkit-scrollbar{display:none}
.vtab{flex:0 0 auto;border:0;background:none;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;
font:600 13px/1.25 var(--font);color:var(--ink-3)}
.vtab .c{margin-left:6px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.vtab:hover{background:var(--raised);color:var(--ink)}
.vtab.on{background:var(--neu-wash);color:var(--ink)}
.vtab.on .c{color:var(--ink-2)}
.vtab:focus-visible{outline-offset:-2px}
.lbar-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.lsearch{display:flex;align-items:center;gap:7px;height:32px;width:250px;padding:0 10px;border:1px solid var(--line-input);
border-radius:9px;background:var(--surface);color:var(--ink-3);cursor:text}
.lsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.lsearch input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;font:500 13px/1 var(--font);color:var(--ink)}
.lsearch input::placeholder{color:var(--ink-3);opacity:1}
.lsearch input::-webkit-search-cancel-button{cursor:pointer}
.tb-btn{gap:6px;height:32px}
.tb-btn.has{border-color:var(--accent);background:var(--accent-wash)}
.lbar .pop{top:38px}
.fpop-wrap{position:relative}
.fpop{display:none;position:absolute;right:0;top:38px;z-index:25;width:300px;max-height:min(540px,70vh);flex-direction:column;
background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3)}
.fpop.on{display:flex}
.fpop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:6px 8px 6px 14px;
border-bottom:1px solid var(--line-soft);font-size:13.5px}
.fpop-b{overflow-y:auto;padding:2px 6px 6px}
.fpop-f{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border-top:1px solid var(--line-soft)}
.fpop .fgrp:first-child{border-top:0}
.fpop .frow{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;cursor:pointer;text-align:left;
font:500 13px/1.35 var(--font);color:var(--ink-2)}
.fpop .frow:hover{background:var(--raised)}
.fpop .frow.on{background:var(--accent-wash);color:var(--ink);font-weight:600}
.fpop .frow:focus-visible{outline-offset:-2px}
.lchips{margin:0;padding:8px 12px;border-bottom:1px solid var(--line-soft);align-items:center}
.lcard .mass{border-radius:0}
.lcard .pager{border-radius:0 0 14px 14px}
/* ---- metrics strip ---- */
.kpis.strip{grid-template-columns:150px repeat(var(--cells,4),minmax(0,1fr))}
.kpi-range{display:flex;align-items:center}
.range{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 10px;border:1px solid var(--line);
border-radius:9px;background:var(--surface);font:600 13px/1 var(--font);color:var(--ink);box-shadow:var(--sh-ctl);white-space:nowrap}
.range .ico{color:var(--ink-3)}
.range select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;
padding:0 16px 0 0;outline:0;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 0 center;background-size:13px}
.range:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.range select option{color:#1B1730;background:#FFFFFF}
.range.static{border-style:dashed;box-shadow:none;color:var(--ink-2);cursor:help}
.kpi-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:7px}
.kpi-row .kpi-v{margin-top:0;white-space:nowrap}
.chg{margin-left:6px;font:700 12px/1 var(--font);white-space:nowrap}
.chg.good{color:var(--ok)}
.chg.bad{color:var(--danger)}
.chg.flat{color:var(--ink-3)}
.spk{flex:0 0 auto;display:block}
.spk path{fill:none;stroke:var(--chart-bar);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:1280px){ .lsearch{width:200px} }
@media (max-width:1100px){
.kpis.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis.strip .kpi-range{grid-column:1/-1}
}
@media (max-width:900px){
.lbar{flex-wrap:wrap}
.vtabs{flex:1 1 100%}
.lbar-tools{flex:1 1 100%}
.lsearch{flex:1 1 auto;width:auto}
}
@media (max-width:600px){
.tb-t{display:none}
.tb-btn{min-height:38px;padding:0 10px}
.lsearch{height:38px}
.fpop{position:fixed;left:12px;right:12px;top:118px;width:auto;max-height:70vh}
}
.kpis.strip{grid-template-columns:176px repeat(var(--cells,4),minmax(0,1fr))}
/* more tabs than room: they scroll in their own track; the fade says so */
.vtabs{padding-right:28px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
@media (max-width:1100px){ .kpis.strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lbar-tools,.lsearch{min-width:0}
.lsearch input{width:100%}
.vtabs{position:relative}
/* native controls (checkboxes, select menus, date inputs) follow the theme */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark} }
:root[data-theme="dark"]{color-scheme:dark}
|