/* ============================================================ SKETCHPLAY 4.0 — UI KIT COMPONENT CSS (extracted from the ACCEPTED style guide v0.7/v0.8). Tokens first, components after. Page-specific styleguide CSS intentionally NOT included. ============================================================ */ /* ============================================================ SKETCHPLAY 4.0 — DESIGN TOKENS v0.6 One source of truth. Consumed by every web surface (CSS vars) and mirrored to mobile design.ts (build step, later). Light = default. Dark = [data-theme="dark"] on . v0.4 (2026-07-04, Lance's review round 3): - Accent family → GOLD (luxury trial). White FAILS on gold, so on-accent is near-ink; accent-ink is a darkened gold that passes 4.5:1 for links on paper. - Selects get designed: appearance:none + token chevron with real right padding (see ui-kit .selectwrap). - Kanit still brand-wordmark only; labels/data/small locked. ============================================================ */ :root { /* -- color: neutrals (warm ink-on-paper scale) -- */ --bg: #FAFAF9; --surface: #FFFFFF; --surface-2: #F2F1EE; --border: #E8E6E1; --border-strong: #D3D0C9; --text: #0F0F14; --text-2: #46464F; --text-3: #6E6D76; /* ≥4.5:1 on bg — "Readable at 60" */ /* -- color: accent — THE TENANT'S BRAND COLOR (Lance, v0.5) -- The accent tier is INJECTED PER TENANT at runtime (from the client's BrandKit): agamehoops.com/admin wears AGAME's color, Mothership wears Sketchplay's. Values below are the SKP platform defaults only. accent-ink and on-accent are COMPUTED from the brand color (contrast math), never hand-picked per client. Current SKP default: gold (trial). */ --accent: #C9A227; /* fills, indicators, selected states */ --accent-ink: #85691A; /* links/emphasis text on light (≥4.5:1) */ --on-accent: #17130A; /* near-ink — white fails AA on gold */ /* -- color: semantic (muted, editorial — never neon) -- */ --ok: #0B8A43; --warn: #A94E08; --danger: #B3261E; --info: #0369A1; --ok-bg: #E9F7EE; --warn-bg: #FBF1E6; --danger-bg: #FAECEB; --info-bg: #E8F4FB; /* -- type -- Product voice = Manrope, all levels. Data = tabular-nums, never monospace. Kanit 800 italic = BRAND WORDMARK ONLY. */ --font-brand: "Kanit", "Manrope", ui-sans-serif, sans-serif; /* wordmark only */ --font-ui: "Manrope", ui-sans-serif, system-ui, sans-serif; --type-display: 600 clamp(34px, 5vw, 44px)/1.08 var(--font-ui); /* letter-spacing -.025em */ --type-h1: 600 28px/1.15 var(--font-ui); --type-h2: 600 21px/1.25 var(--font-ui); --type-h3: 600 16px/1.35 var(--font-ui); --type-body: 400 15px/1.6 var(--font-ui); --type-small: 500 13.5px/1.5 var(--font-ui); --type-label: 700 11.5px/1.3 var(--font-ui); /* uppercase, tracked */ --type-data: 500 14px/1.5 var(--font-ui); /* + font-variant-numeric: tabular-nums */ --tracking-label: 0.06em; /* -- space: 4px grid -- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* -- tap targets: sports hands -- */ --tap-min: 48px; /* -- radius: crisp. no pill cards, ever. -- */ --r-1: 4px; /* inputs, chips, buttons */ --r-2: 8px; /* cards, modals */ --r-full: 9999px; /* toggles + status dots ONLY */ /* -- elevation: two-layer, barely-there -- */ --shadow-1: 0 1px 2px rgba(15,15,20,.05), 0 1px 1px rgba(15,15,20,.03); --shadow-2: 0 2px 6px rgba(15,15,20,.06), 0 8px 24px rgba(15,15,20,.06); /* -- motion: fast, eased, never bouncy -- */ --t-fast: 140ms; --t-base: 220ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* -- focus -- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* -- inset surface: expanded rows / nested areas (Lance-picked) -- */ --surface-inset: #F7F7F7; /* -- breakpoints (reference; mobile-first, admin-on-the-go is a primary persona; design at 1024, verify at 360) -- --bp-sm: 640px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px */ } [data-theme="dark"] { --bg: #0A0A0F; --surface: #121218; --surface-2: #18181F; --border: #26262E; --border-strong: #3A3A45; --text: #F4F4F1; --text-2: #B4B4BD; --text-3: #8B8B95; --accent-ink: #E0BE55; /* readable gold on dark */ --on-accent: #17130A; --ok: #4CE88A; --warn: #E8A75B; --danger: #F2827A; --info: #4CC3F7; --ok-bg: #10241A; --warn-bg: #2A2015; --danger-bg: #2B1715; --info-bg: #10222E; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3); --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.45); --surface-inset: #050508; /* reads black — inside the row */ } /* ====== BASE PRIMITIVES ====== */ /* The kit OWNS the reset: every component was designed border-box. (Learned 2026-07-05: without this, input padding inflates heights ~30px and width:100% fields overflow their cards.) */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} [hidden]{display:none!important} /* hidden attr is HTML-only — SVGs need this to hide */ .label{font:700 11.5px/1.3 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)} .data{font:500 14px/1.5 var(--font-ui);font-variant-numeric:tabular-nums} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-1)} /* ====== 04 BUTTONS ====== */ .btnrow{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-bottom:var(--s-5)} .btn{ appearance:none;border:1px solid transparent;cursor:pointer; font:700 13.5px/1 var(--font-ui);letter-spacing:.01em; padding:0 18px;min-height:44px;border-radius:var(--r-1); display:inline-flex;align-items:center;gap:8px; transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease); } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--text);color:var(--bg)} .btn-primary:hover{opacity:.88} .btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)} .btn-secondary:hover{border-color:var(--text-3)} .btn-accent{background:var(--accent);color:var(--on-accent)} .btn-accent:hover{opacity:.9} .btn-ghost{background:transparent;color:var(--text-2)} .btn-ghost:hover{background:var(--surface-2);color:var(--text)} .btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)} .btn-danger:hover{background:var(--danger-bg)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn-sm{min-height:36px;padding:0 14px;font-size:12.5px} .btn-lg{min-height:52px;padding:0 26px;font-size:15px} /* ====== 05 INPUTS + DESIGNED SELECTS ====== */ .formgrid{display:grid;gap:var(--s-6);max-width:560px} .field label{display:block;font:700 13px/1 var(--font-ui);margin-bottom:var(--s-2)} .field .hint{font-size:13px;color:var(--text-3);margin-top:var(--s-2)} .input,select.input,textarea.input{ width:100%;background:var(--surface);color:var(--text); border:1px solid var(--border-strong);border-radius:var(--r-1); font:500 15px/1.4 var(--font-ui);padding:14px 14px;min-height:var(--tap-min); transition:border-color var(--t-fast) var(--ease); } .input::placeholder{color:var(--text-3);font-weight:400} .input.is-file{padding:6px} .input:hover{border-color:var(--text-3)} .input:focus{outline:none;border-color:var(--text);box-shadow:var(--focus-ring)} .field.invalid .input{border-color:var(--danger)} /* password show/hide */ .pwwrap{position:relative;display:block} .pwwrap .input{padding-right:52px} .pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--text-3);padding:10px;border-radius:var(--r-1);min-height:40px;display:flex;align-items:center} .pwtoggle:hover{color:var(--text);background:var(--surface-2)} .field.invalid .hint{color:var(--danger)} /* selects: no UA chrome, token chevron, REAL right padding */ .selectwrap{position:relative;display:block} .selectwrap select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;width:100%} .selectwrap::after{ content:"";position:absolute;right:17px;top:50%; width:9px;height:9px;pointer-events:none; border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2); transform:translateY(-70%) rotate(45deg); } .selectwrap.sw-toolbar select{min-height:40px;padding-top:9px;padding-bottom:9px;font-size:14px} /* custom listbox (design direction for the open state — future htmx/JS module) */ .listbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-2);min-width:220px;padding:6px;display:inline-block;text-align:left} .listbox a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;font:600 14px var(--font-ui);color:var(--text);text-decoration:none;border-radius:var(--r-1)} .listbox a:hover{background:var(--surface-2)} .listbox a.selected{color:var(--accent-ink)} .listbox a.selected::after{content:"✓";font-weight:800} .check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2);min-height:var(--tap-min);padding:var(--s-2) 0;cursor:pointer} .check input{accent-color:var(--accent);width:20px;height:20px;margin-top:2px;flex:none} .switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:var(--text-2);min-height:var(--tap-min)} .switch input{position:absolute;opacity:0;pointer-events:none} .switch .track{width:44px;height:24px;border-radius:var(--r-full);background:var(--border-strong);transition:background var(--t-fast) var(--ease);flex:none} .switch .track::after{content:"";display:block;width:18px;height:18px;border-radius:var(--r-full);background:var(--surface);margin:3px;transition:transform var(--t-fast) var(--ease);box-shadow:var(--shadow-1)} .switch input:checked + .track{background:var(--accent)} .switch input:checked + .track::after{transform:translateX(20px)} .switch input:focus-visible + .track{box-shadow:var(--focus-ring)} .switch.sw-sm{min-height:0} .switch.sw-sm .track{width:36px;height:20px} .switch.sw-sm .track::after{width:14px;height:14px} .switch.sw-sm input:checked + .track::after{transform:translateX(16px)} /* ====== 06 SURFACES ====== */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1)} .card .card-h{padding:var(--s-5) var(--s-5);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s-3)} @media(min-width:640px){.card .card-h{padding:var(--s-5) var(--s-6)}} .card .card-h h3{font-size:15px;font-weight:700;letter-spacing:-.01em} .card .card-b{padding:var(--s-5)} @media(min-width:640px){.card .card-b{padding:var(--s-6)}} .grid-2{display:grid;gap:var(--s-6)} @media(min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}} .grid-3{display:grid;gap:var(--s-6)} @media(min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}} .table-scroll{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:14px} thead th{text-align:left;font:700 11.5px/1.3 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--border);white-space:nowrap} tbody td{padding:var(--s-4) var(--s-4);border-bottom:1px solid var(--border);color:var(--text-2)} tbody td:first-child{color:var(--text);font-weight:600} tbody tr:hover{background:var(--surface-2)} tbody tr:last-child td{border-bottom:none} td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:500} .pager{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid var(--border);color:var(--text-3);font-size:13px} .pager .btn{margin-left:auto} .badge{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);letter-spacing:.05em;padding:5px 9px;border-radius:var(--r-1);white-space:nowrap} .badge i{width:6px;height:6px;border-radius:var(--r-full);background:currentColor} .badge.ok{color:var(--ok);background:var(--ok-bg)} .badge.warn{color:var(--warn);background:var(--warn-bg)} .badge.danger{color:var(--danger);background:var(--danger-bg)} .badge.info{color:var(--info);background:var(--info-bg)} .badge.neutral{color:var(--text-2);background:var(--surface-2)} .badge.accent{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,var(--surface))} .kpi{font-weight:800;font-size:36px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi .delta{color:var(--accent-ink);font-size:14px;font-weight:800;vertical-align:middle} .chart-axis{font:600 10.5px var(--font-ui);fill:var(--text-3);letter-spacing:.04em} .chart-val{font:700 11px var(--font-ui);fill:var(--text-2);font-variant-numeric:tabular-nums} /* h-bars */ .hbar{display:grid;grid-template-columns:minmax(110px,160px) 1fr 48px;gap:12px;align-items:center;padding:9px 0;font-size:13.5px} .hbar .track{height:12px;background:var(--surface-2);border-radius:3px;overflow:hidden} .hbar .fill{height:100%;background:var(--accent);border-radius:3px} .hbar .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-2);font-size:12.5px} .hbar span:first-child{color:var(--text-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* legend */ .legend{display:flex;flex-direction:column;gap:8px;font-size:13px} .legend div{display:flex;align-items:center;gap:8px;color:var(--text-2)} .legend i{width:10px;height:10px;border-radius:2px;flex:none} .legend b{margin-left:auto;font-variant-numeric:tabular-nums} /* spark kpis */ .sparkrow{display:grid;gap:1px;background:var(--border);grid-template-columns:1fr} @media(min-width:640px){.sparkrow{grid-template-columns:repeat(3,1fr)}} .spark{background:var(--surface);padding:var(--s-5) var(--s-6)} .spark .v{font-weight:800;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px} .spark .d{font-size:12px;font-weight:700;margin-left:6px} .spark .d.up{color:var(--ok)}.spark .d.down{color:var(--danger)} .spark svg{display:block;margin-top:8px} /* ====== 07 TABLES ====== */ .toolbar{display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center} .toolbar .input{max-width:240px;min-height:40px;padding-top:9px;padding-bottom:9px;font-size:14px} .toolbar .selectwrap{max-width:190px} .filterchip{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-ui);padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--r-1);background:var(--surface);color:var(--text-2)} .filterchip button{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:14px;line-height:1;padding:2px} .filterchip button:hover{color:var(--danger)} .bulkbar{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-bottom:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--accent-ink);flex-wrap:wrap} .bulkbar .sep{color:var(--border-strong)} .bulkbar a{color:var(--accent-ink);text-decoration:none;font-weight:700;padding:6px 4px;display:inline-block} .bulkbar a:hover{text-decoration:underline} .bulkbar a.danger{color:var(--danger)} th.sortable{cursor:pointer} th.sortable .arr{color:var(--accent-ink);font-size:10px} td .rowcheck,th .rowcheck{accent-color:var(--accent);width:18px;height:18px;display:block;cursor:pointer} .person{display:flex;align-items:center;gap:10px;min-width:0} .person>span:last-child{min-width:0;overflow:hidden} .person .avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font:700 12px var(--font-ui);flex:none} .person .avatar.n2{background:#0369A1;color:#fff}.person .avatar.n3{background:#A94E08;color:#fff}.person .avatar.n4{background:#0B8A43;color:#fff} .person small{display:block;font-size:12px;color:var(--text-3);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} tr.selected{background:color-mix(in srgb,var(--accent) 6%,var(--surface))} /* a row that exists but is switched off (draft video, retired plan) — readable, clearly secondary, never display:none (staff needs to see it) */ tr.is-off td{opacity:.55} tr.selected:hover{background:color-mix(in srgb,var(--accent) 9%,var(--surface))} .rowactions{display:flex;align-items:center;gap:4px;justify-content:flex-end} .iconbtn{border:0;background:none;cursor:pointer;color:var(--text-3);font:600 12.5px var(--font-ui);padding:8px 10px;border-radius:var(--r-1);min-height:36px} .iconbtn:hover{background:var(--surface-2);color:var(--text)} .kebab{position:relative} .kebab > button{border:0;background:none;cursor:pointer;color:var(--text-2);font-size:17px;font-weight:800;padding:6px 12px;border-radius:var(--r-1);min-height:36px;letter-spacing:1px} .kebab > button:hover{background:var(--surface-2)} .menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-2);min-width:190px;padding:6px;text-align:left} .menu a{display:block;padding:10px 12px;font:600 13.5px var(--font-ui);color:var(--text);text-decoration:none;border-radius:var(--r-1)} .menu a:hover{background:var(--surface-2)} .menu a.disabled{color:var(--text-3);cursor:not-allowed;font-weight:500} .menu a.danger{color:var(--danger)} .menu a.danger:hover{background:var(--danger-bg)} .menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px} .menu.floating{position:fixed;z-index:60;box-shadow:var(--shadow-2)} /* inline edit */ .editing td{background:color-mix(in srgb,var(--accent) 5%,var(--surface))} .score-in{width:64px;text-align:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-1);font:600 14px var(--font-ui);padding:9px 6px;min-height:40px;font-variant-numeric:tabular-nums} /* expandable rows */ tr.exp td:first-child button{margin-right:6px} .expbtn{border:0;background:none;cursor:pointer;color:var(--text-3);font-size:12px;padding:4px 6px;border-radius:var(--r-1)} .expbtn:hover{background:var(--surface-2);color:var(--text)} tr.detail td{background:var(--surface-inset);padding:var(--s-5) var(--s-6)} .detailgrid{display:grid;gap:var(--s-4);grid-template-columns:1fr} @media(min-width:640px){.detailgrid{grid-template-columns:repeat(3,1fr)}} .detailgrid .kv b{display:block;font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px} .detailgrid .kv span{font-size:13.5px;color:var(--text)} /* dense + grouped */ table.dense td{padding:9px var(--s-4);font-size:13.5px} tr.group td{background:var(--surface-2);font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:7px var(--s-4);border-bottom:1px solid var(--border)} tr.group td:first-child{color:var(--text-3)} /* ====== REAL mobile collapse: same markup, CSS transforms it ====== */ table.collapsing{min-width:820px} @media(max-width:639px){ .card .table-scroll:has(.collapsing){overflow:visible} table.collapsing{min-width:0;display:block} table.collapsing thead{display:none} table.collapsing tbody{display:block;padding:var(--s-3)} table.collapsing tbody tr{ display:block;position:relative;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-2); padding:var(--s-4);margin-bottom:var(--s-3);box-shadow:var(--shadow-1); } table.collapsing tbody tr.selected{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))} table.collapsing tbody tr:hover{background:var(--surface)} /* the collapse contract BEATS leftover desktop inline styles (nowrap / min-width) — a collapsed card must never widen the phone viewport */ table.collapsing td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:9px 0;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere} table.collapsing td>a{min-width:0;max-width:100%;overflow:hidden} /* long badges (plan names, policy labels) wrap inside the card instead of widening it past the viewport */ table.collapsing td .badge{white-space:normal;min-width:0} table.collapsing td[data-label]::before{ content:attr(data-label); font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3); } table.collapsing td.cell-check{position:absolute;top:14px;right:14px;padding:0;width:auto} table.collapsing td.cell-person{padding-right:40px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:2px} table.collapsing td.cell-actions{border-top:1px solid var(--border);margin-top:4px;padding-top:12px;justify-content:flex-end} table.collapsing td.num{text-align:left} } /* ====== 08 FEEDBACK ====== */ .toast-stack{position:fixed;top:calc(56px + var(--s-4));right:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);z-index:50} @media(min-width:640px){.toast-stack{right:var(--s-6)}} .toast{ background:var(--text);color:var(--bg); border-radius:var(--r-2);box-shadow:0 10px 36px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18); padding:18px 20px;min-width:300px;max-width:400px; display:flex;gap:14px;align-items:flex-start; animation:toast-in .4s var(--ease); } .toast.leaving{opacity:0;transform:translateY(-10px);transition:all var(--t-base) var(--ease)} @keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}} .toast .tick{flex:none;width:26px;height:26px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-top:1px} .toast b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em} .toast p{font-size:13.5px;color:color-mix(in srgb,var(--bg) 78%,transparent);margin-top:2px} .empty{border:1px dashed var(--border-strong);border-radius:var(--r-2);padding:var(--s-10) var(--s-6);text-align:center;color:var(--text-2)} .empty b{display:block;color:var(--text);font-weight:700;font-size:15px;margin-bottom:var(--s-1)} .empty .btn{margin-top:var(--s-5)} /* ====== 09 MODAL (native ) ============================ Lance rule 2026-07-10: no browser alert()/confirm() ever. Forms declare data-skp-confirm="message" (+ optional data-skp-confirm-danger, data-skp-confirm-label="Verb") and ui-kit.js does the rest. */ dialog.skp-modal{ margin:auto; /* the kit reset kills the UA's dialog centering — restore it */ border:1px solid var(--border);border-radius:var(--r-2);padding:0; background:var(--surface);color:var(--text); width:min(420px, calc(100vw - 48px)); box-shadow:0 24px 64px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.14); } dialog.skp-modal::backdrop{background:rgba(10,10,15,.44);backdrop-filter:blur(2px)} dialog.skp-modal[open]{animation:skp-modal-in .16s var(--ease)} @keyframes skp-modal-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}} .skp-modal .m-body{padding:22px 24px 6px} .skp-modal .m-title{font:700 15.5px/1.35 var(--font-ui);letter-spacing:-.01em;margin-bottom:6px} .skp-modal .m-msg{font:400 13.5px/1.55 var(--font-ui);color:var(--text-2)} .skp-modal .m-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px 20px} .skp-modal.danger .m-title{color:var(--danger)} /* nav-item: sidebar link (promoted from mothership 2026-07-11 — the nav-group pattern references it, so the kit owns it now) */ .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-1,6px);font:600 13.5px/1 var(--font-ui,inherit);color:var(--text-2,#555);text-decoration:none;white-space:nowrap;min-height:40px} .nav-item:hover{background:var(--surface-2,rgba(0,0,0,.04));color:var(--text,inherit)} .nav-item.on{background:var(--accent,#0F0F14);color:var(--on-accent,#fff)} /* ---- nav-group: collapsible sidebar section (native
) ---------- Usage:
Finance Child
Server renders `open` when a child is active; ui-kit.js persists the user's toggle per data-nav-group in localStorage. No frameworks. */ .nav-group{margin:2px 0} .nav-group>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:10px 12px;border-radius:var(--r-1,6px);font:700 10.5px/1 var(--font-ui,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3,#888);user-select:none} .nav-group>summary::-webkit-details-marker{display:none} .nav-group>summary:hover{background:var(--surface-2,rgba(0,0,0,.04));color:var(--text-2,#555)} .nav-group>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;flex-shrink:0} .nav-group[open]>summary::after{transform:rotate(45deg)} .nav-group>.nav-item{padding-left:24px} /* nav-group easing — smooth open/close (Chromium 131+; graceful no-anim fallback elsewhere). interpolate-size lets height animate to auto. */ :root{interpolate-size:allow-keywords} .nav-group::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .26s cubic-bezier(.4,0,.2,1),content-visibility .26s allow-discrete,opacity .2s ease} .nav-group[open]::details-content{block-size:auto;opacity:1} /* ====== 10 APP SHELL (promoted from mothership 2026-07-12 — Client HQ is the second wearer; every admin surface shares this chrome). The app's still owns: body font/bg (one line) and its surface brand (--accent overrides). Sidebar collapses to a horizontal strip under 1024px. ====== */ .shell{display:grid;grid-template-columns:1fr;min-height:100vh} @media(min-width:1024px){.shell{grid-template-columns:224px 1fr}} .side{border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:4px;overflow-x:auto;min-width:0} @media(min-width:1024px){ .side{border-bottom:0;border-right:1px solid var(--border);flex-direction:column;align-items:stretch;padding:20px 12px;gap:2px;position:sticky;top:0;height:100vh;overflow:visible} } .side .brandmark{font-family:var(--font-brand);font-style:italic;font-weight:800;font-size:16px;padding:6px 12px;margin-bottom:4px;white-space:nowrap} @media(min-width:1024px){.side .brandmark{margin-bottom:20px}} .side .brandmark small{font:700 10px var(--font-ui);letter-spacing:.08em;color:var(--text-3);display:block;font-style:normal} .side .foot{margin-top:auto;display:none} @media(min-width:1024px){.side .foot{display:block}} .main{min-width:0} /* wrap under pressure: on phones the action cluster drops below the h1 instead of pushing document scrollWidth past the viewport (390 check) */ .topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap} .topbar h1{font-weight:600;font-size:19px;letter-spacing:-.015em} .topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;min-width:0} /* Data surfaces fill large monitors (Lance rule) — no width cap. */ .content{padding:24px} @media(min-width:1800px){.content{padding:32px 40px}} .kpis{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)} @media(min-width:480px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}} a.plain{color:var(--accent-ink);text-decoration:none;font-weight:700} a.plain:hover{text-decoration:underline} /* ====== 11 JOURNEY: steps · notice · receipt · celebrate ====== Added 2026-07-15 (Friday-journey push). ONE vocabulary for multi-step flows and success moments — never hand-roll progress bars, inline alert boxes, money summaries, or success animations again. */ /* Labeled step progress:
  1. Label
    2. … */ .steps{display:flex;gap:6px;list-style:none;margin:0 0 28px;padding:0} .steps li{flex:1;font:700 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);min-width:0} .steps li span{display:block;padding-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .steps li::after{content:"";display:block;height:3px;border-radius:var(--r-full);background:var(--border)} .steps li.done{color:var(--text-2)} .steps li.done::after{background:var(--ok)} .steps li.done span::before{content:"✓ ";color:var(--ok)} .steps li.current{color:var(--text)} .steps li.current::after{background:var(--accent)} /* Inline notice — tones ok|warn|danger|info. Replaces every hand-rolled box. */ .notice{display:flex;gap:10px;align-items:flex-start;font:600 13px/1.5 var(--font-ui);padding:12px 14px;border-radius:var(--r-1)} .notice.ok{color:var(--ok);background:var(--ok-bg)} .notice.warn{color:var(--warn);background:var(--warn-bg)} .notice.danger{color:var(--danger);background:var(--danger-bg)} .notice.info{color:var(--info);background:var(--info-bg)} /* Receipt — key-value facts (money/confirmation). Label left, value right. */ .receipt{border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);overflow:hidden} .receipt .r-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;font:400 13.5px/1.4 var(--font-ui);border-bottom:1px solid var(--border)} .receipt .r-row:last-child{border-bottom:0} .receipt .r-row b{font-weight:700;text-align:right} .receipt .r-total{background:var(--surface-2)} .receipt .r-total b{font-size:15px} /* Celebrate — THE success treatment (check-draw + staggered rise).
    {{ skp.celebrate_check() }}

    …

    …

    …
    */ .celebrate .c-check{width:56px;height:56px;margin-bottom:18px;display:block} .celebrate .c-check circle{stroke:var(--ok);stroke-width:2;fill:none;stroke-dasharray:158;stroke-dashoffset:158;animation:skp-draw .5s var(--ease) forwards} .celebrate .c-check path{stroke:var(--ok);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:skp-draw .35s var(--ease) .45s forwards} .celebrate>*{animation:skp-rise .4s var(--ease) both} .celebrate>*:nth-child(2){animation-delay:.08s} .celebrate>*:nth-child(3){animation-delay:.16s} .celebrate>*:nth-child(4){animation-delay:.24s} .celebrate>*:nth-child(n+5){animation-delay:.3s} @keyframes skp-draw{to{stroke-dashoffset:0}} @keyframes skp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.celebrate>*{animation:none}.celebrate .c-check circle,.celebrate .c-check path{animation:none;stroke-dashoffset:0}} .steps li a{color:inherit;text-decoration:none} .steps li a:hover{color:var(--text)} /* chip-toggle — selectable chip backed by a hidden checkbox (≠ .filterchip, which is a dismissal chip). */ /* position:relative so the hidden absolute input resolves against ITS chip — static labels let the inputs escape scroll rows and widen the page past a phone viewport (found by the W-VIDEO gate: 390 check, +355px) */ .chip-toggle{display:inline-flex;cursor:pointer;position:relative} /* lg — a roomy select-chip for pickers that ARE the interaction (role assignment, filters that carry weight). 44px min target, real air. */ .chip-toggle.lg span{padding:12px 20px;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center} /* a chip stays a chip inside .field — without this, `.field label` (0-1-1) outguns `.chip-toggle` (0-1-0): display:block + 13px line box, and the padded span paints OVER the field's own label (found by W-INTAKE gate) */ .field label.chip-toggle{display:inline-flex;margin-bottom:0} .chip-toggle input{position:absolute;opacity:0;pointer-events:none} .chip-toggle span{padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--r-1);font:600 13px/1 var(--font-ui);color:var(--text-2);transition:all .12s var(--ease);user-select:none} .chip-toggle:hover span{border-color:var(--text-3)} .chip-toggle input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .chip-toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} /* dropzone — dashed file-drop with browse fallback + thumbnail swap. */ /* position:relative anchors the hidden absolute file input — without it the input escapes to the page and forces h-overflow (found by W-INTAKE slice 2) */ .dropzone{position:relative;display:block;min-height:150px;border:1.5px dashed var(--border-strong);border-radius:var(--r-2);cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;transition:border-color .12s var(--ease),background .12s var(--ease)} .dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 3%,transparent)} .dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none} .dropzone .dz-idle b{display:block;font:600 13.5px var(--font-ui);margin-bottom:4px} .dropzone .dz-idle span{font:400 12.5px var(--font-ui);color:var(--text-3)} .dropzone .dz-preview{display:flex;align-items:center;gap:14px} .dropzone .dz-preview img{width:96px;height:96px;object-fit:contain;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface)} .dropzone .dz-preview .dz-name{font:600 12.5px var(--font-ui);color:var(--text-2)} /* checklist — derived-state getting-started rows (promoted from website_status.html).
    … */ .checklist{display:grid;gap:2px} .checklist .cl-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);font:400 13.5px var(--font-ui)} .checklist .cl-row:last-child{border-bottom:0} .checklist .cl-dot{flex:none;width:22px;height:22px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font:800 11px var(--font-ui)} .checklist .done .cl-dot{background:var(--ok-bg);color:var(--ok)} .checklist .open .cl-dot{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)} .checklist .done .cl-label{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--border-strong)} .checklist .cl-label{flex:1} .checklist .cl-action{font:700 12.5px var(--font-ui)} /* lede — the page-intro paragraph, one way everywhere */ .lede{font:400 14.5px/1.6 var(--font-ui);color:var(--text-2);max-width:56ch;margin-bottom:24px} /* ==== v0.9 additions (M-3) ================================================ */ /* screen-reader-only text — the accessible name for icon-only controls */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* the app-switcher button — one staff nav, every surface (v0.9) */ .appswitch-btn { display: flex; align-items: center; gap: 8px; min-height: 32px; font: 600 13px var(--font-ui); letter-spacing: .04em; border: 0; background: none; color: inherit; cursor: pointer; } .appswitch-caret { font-size: 8.5px; color: var(--text-3); } /* staff-panel topline (id app) — back link left, switcher right */ .staff-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* avatar user-menu + icon theme toggle (v0.9, Lance 07-27) */ .appswitch-avatar { width: 30px; height: 30px; border-radius: 999px; flex: none; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent, var(--text)) 14%, transparent); color: var(--accent-ink, var(--text)); font: 800 11px var(--font-ui); letter-spacing: .02em; } @media (max-width: 639px) { .appswitch-name { display: none; } } .theme-toggle { display: inline-grid; place-items: center; } .theme-ic-moon { display: none; } [data-theme="dark"] .theme-ic-moon { display: none; } [data-theme="dark"] .theme-ic-sun { display: block; } :root:not([data-theme="dark"]) .theme-ic-sun { display: none; } :root:not([data-theme="dark"]) .theme-ic-moon { display: block; } /* SKP ID account page (v0.9) */ .account-page { width: 100%; max-width: 480px; text-align: left; } .account-page h1 { font: 700 22px var(--font-ui); margin-bottom: 16px; } .account-back { display: inline-block; font-size: 13.5px; margin-bottom: 12px; } .account-form { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-2); padding: 18px; margin-bottom: 18px; background: var(--surface); } .account-two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .account-help { font-size: 12.5px; color: var(--text-3); margin-top: 4px; } .account-gap { margin-bottom: 4px; } /* account page uses the real breakpoints, not the login card (Lance 07-27) */ .account-page.is-wide { max-width: none; } .account-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 768px) { .account-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .account-two { grid-template-columns: 1fr; } } .account-grid .account-form { margin-bottom: 0; } .appswitch-avatar.is-img { object-fit: cover; background: var(--surface-2); } /* account profile hero (avatar + background photo) */ .account-hero { border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; margin-bottom: 18px; background: var(--surface); } .account-cover { position: relative; height: 140px; background: linear-gradient(120deg, var(--surface-2), var(--border)); } .account-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .account-cover-btn { position: absolute; right: 12px; bottom: 12px; } .account-idrow { display: flex; align-items: flex-end; gap: 14px; padding: 0 18px 16px; margin-top: -34px; } .account-avatar { position: relative; width: 84px; height: 84px; flex: none; border-radius: 999px; border: 3px solid var(--surface); background: var(--surface-2); display: grid; place-items: center; overflow: visible; } .account-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; } .account-avatar span { font: 800 26px var(--font-ui); color: var(--text-3); } .account-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 999px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 13px; cursor: pointer; border: 2px solid var(--surface); } .account-who { font: 700 17px var(--font-ui); } .visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* the view-as picker (mothership-resident, v0.9) */ .va-search { max-width: 560px; margin-bottom: 6px; } .va-list { max-width: 720px; } .va-row { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 6px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; } .va-row:hover { background: var(--surface-2); } .va-av { width: 38px; height: 38px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font: 700 13px var(--font-ui); } .va-body { flex: 1; min-width: 0; } .va-name { display: block; font: 600 14.5px var(--font-ui); } .va-contact { display: block; font: 400 13px var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .va-kind { font: 600 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .va-none { padding: 20px 6px; color: var(--text-3); font-size: 14px; } /* ==== target-vs-current KPI furniture (CEO-0 exec summary) =============== */ .xkpi-note{font-size:13px;color:var(--text-3);margin-top:6px} .xkpi-target{display:flex;align-items:center;gap:7px;margin-top:10px;font:600 12.5px var(--font-ui);color:var(--text-2)} .status-dot{display:inline-block;width:9px;height:9px;border-radius:var(--r-full);background:var(--border-strong);flex:none} .status-dot.ok{background:var(--ok)} .status-dot.warn{background:var(--warn)} .status-dot.bad{background:var(--danger)} .kpi .arrow{font-size:15px;vertical-align:middle;margin-left:2px} .arrow.is-good{color:var(--ok)} .arrow.is-bad{color:var(--danger)} /* the personal-dashboard table: inline target inputs */ .target-input{width:110px;border:1px solid var(--border-strong);border-radius:var(--r-1);padding:7px 9px;font:600 13.5px var(--font-ui);background:var(--surface);color:var(--text);text-align:right;font-variant-numeric:tabular-nums} .stub-chip{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--border-strong);border-radius:var(--r-full);padding:7px 14px;font:600 12.5px var(--font-ui);color:var(--text-3)} .stub-chips{display:flex;flex-wrap:wrap;gap:8px} /* ==== the utility tail (R-0: the classes every app kept re-inventing) ==== */ .muted{font-size:12.5px;color:var(--text-3)} .hint{font-size:13px;color:var(--text-3)} .num{font-variant-numeric:tabular-nums} .stack{display:flex;flex-direction:column;gap:var(--s-3)} .row-actions{display:flex;align-items:center;gap:14px;margin-top:var(--s-3);flex-wrap:wrap} /* horizontal bar rows (dashboard MoM / MRR history) — width is data */ .bar-row{display:grid;grid-template-columns:84px 1fr 130px;gap:10px;align-items:center;margin-bottom:7px} .bar-row .bar-label{font-size:12px;color:var(--text-2)} .bar-row .bar-val{font-size:11.5px;text-align:right} .bar-row.is-progress{opacity:.65} .bar-track{height:15px;background:color-mix(in srgb,var(--border) 40%,transparent);border-radius:3px;overflow:hidden} .bar-fill{height:100%;background:var(--ink,#0F0F14);border-radius:3px;min-width:1.5%} .bar-fill.is-progress{background:repeating-linear-gradient(-45deg,var(--ink,#0F0F14) 0 6px,transparent 6px 10px)} /* key/value list rows (top clients, past due, recent changes) */ .kvrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px} .kvrow .sub{display:block;font-size:11.5px;color:var(--text-3)} .kvrow .amt{font-weight:700} .kvrow .amt.warn{color:var(--warn)} /* layout-grid tracks are minmax(0,…), never bare 1fr: bare 1fr = minmax(auto,1fr), so one wide child (a toolbar, a table) forces the track — and the page — past a phone viewport. Floor at 0 and wide content scrolls inside its own .table-scroll/.seg instead (390 check) */ .two-col{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)} @media(min-width:1024px){.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* section rhythm: pages stack cards/sections with real air between them */ .stack-lg{display:grid;gap:24px;align-content:start;grid-template-columns:minmax(0,1fr)} .stack-lg > *{margin-bottom:0} /* collapsible board panel (dashboard targets table) */ .board-collapse > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font:700 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)} .board-collapse > summary::-webkit-details-marker{display:none} .board-collapse > summary::after{content:"▾";font-size:12px;color:var(--text-3);transition:transform .15s ease} .board-collapse:not([open]) > summary::after{transform:rotate(-90deg)} .board-collapse[open] > summary{margin-bottom:14px} /* ==== the touchboard (CEO-0 §2.1) — wall display, dark, data only ======== */ .tb{min-height:100vh;background:#07070B;color:#F4F4F6;font-family:var(--font-ui);padding:clamp(20px,3vw,48px);display:grid;gap:clamp(18px,2.2vw,34px);align-content:start} .tb a{color:inherit} .tb-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .tb-mark{font:800 15px var(--font-ui);letter-spacing:.22em} .tb-mark small{display:block;font:700 9px var(--font-ui);letter-spacing:.3em;color:#8B8B95;margin-top:2px} .tb-live{display:inline-flex;align-items:center;gap:7px;font:700 11px var(--font-ui);letter-spacing:.14em;color:#8B8B95} .tb-live::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--ok,#22C55E);animation:tb-pulse 2.4s ease infinite} @keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.35}} .tb-when{margin-left:auto;font:600 13px var(--font-ui);color:#8B8B95;font-variant-numeric:tabular-nums} .tb-hero{display:grid;gap:clamp(18px,2.2vw,34px);grid-template-columns:1fr;align-items:end} @media(min-width:1024px){.tb-hero{grid-template-columns:minmax(320px,.9fr) 1.6fr}} .tb-big .l{font:700 12px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:#8B8B95} .tb-big .v{font:800 clamp(64px,9vw,132px)/1 var(--font-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tb-big .s{font:600 14px var(--font-ui);color:#8B8B95;margin-top:8px} .tb-big .s b{color:#F4F4F6} .tb-grid{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:repeat(2,1fr)} @media(min-width:1024px){.tb-grid{grid-template-columns:repeat(4,1fr)}} .tb-cell{border:1px solid #1C1C24;border-radius:14px;padding:clamp(16px,1.8vw,26px);background:#0C0C12} .tb-cell .l{font:700 11px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#8B8B95} .tb-cell .v{font:800 clamp(30px,3.6vw,52px)/1.1 var(--font-ui);letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums} .tb-cell .s{font:600 12.5px var(--font-ui);color:#8B8B95;margin-top:6px} .tb-cell .v.warn{color:var(--warn,#F59E0B)} .tb-two{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:1fr} @media(min-width:1024px){.tb-two{grid-template-columns:1fr 1fr}} .tb-chart svg{width:100%;height:auto;display:block;margin-top:12px} .tb-chart .axis{display:flex;justify-content:space-between;font:600 11.5px var(--font-ui);color:#8B8B95;margin-top:6px;font-variant-numeric:tabular-nums} .tb-line{fill:none;stroke:var(--accent,#FF6B1A);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round} .tb-area{fill:url(#tb-grad);opacity:.9} .tb-dot{fill:var(--accent,#FF6B1A)} .tb-bar{fill:var(--accent,#FF6B1A);rx:4} .tb-bar.is-progress{opacity:.45} .tb-hbar-row{display:grid;grid-template-columns:150px 1fr 70px;gap:12px;align-items:center;margin-top:12px} .tb-hbar-row .l{font:600 13.5px var(--font-ui);color:#C9C9D2;text-transform:capitalize} .tb-hbar-row .n{font:800 16px var(--font-ui);text-align:right;font-variant-numeric:tabular-nums} .tb-hbar{height:20px;border-radius:6px;background:#1C1C24;overflow:hidden} .tb-hbar > div{height:100%;background:var(--accent,#FF6B1A);border-radius:6px;min-width:2%} .tb-empty{font:600 14px var(--font-ui);color:#8B8B95;padding:24px 0} .tb-foot{display:flex;gap:18px;flex-wrap:wrap;font:600 12px var(--font-ui);color:#5D5D68;letter-spacing:.06em} .lbl-block{display:block;margin-bottom:4px} /* ==== product-ops furniture (PO-0) ======================================= */ .po-grade{display:grid;gap:20px;grid-template-columns:1fr;align-items:start} @media(min-width:1024px){.po-grade{grid-template-columns:220px 1fr}} .po-letter{font:800 clamp(64px,7vw,96px)/1 var(--font-ui);letter-spacing:-.03em} .po-letter.good{color:var(--ok)} .po-letter.warning{color:var(--warn)} .po-letter.serious{color:#E8590C} .po-letter.critical{color:var(--danger)} .po-composite{font:600 13.5px var(--font-ui);color:var(--text-2);margin-top:6px} .po-drag{font:600 12.5px var(--font-ui);color:var(--text-3);margin-top:2px} .pillar{display:grid;grid-template-columns:190px 1fr 120px;gap:12px;align-items:center;padding:7px 0} /* under 480 the fixed name+value columns (334px) outgrow the viewport: name takes its own row, bar + value share the second */ @media(max-width:479px){ .pillar{grid-template-columns:minmax(0,1fr) 120px;row-gap:4px} .pillar .pn{grid-column:1 / -1} } .pillar .pn{font:600 13px var(--font-ui)} .pillar .pn small{color:var(--text-3);font-weight:600} .pillar .pb{height:10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--border) 50%,transparent);overflow:hidden} .pillar .pb i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent,var(--text))} .pillar .pv{font:600 12.5px var(--font-ui);color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums} .info-tip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:none;color:var(--text-3);font:700 10px var(--font-ui);cursor:help;vertical-align:middle;margin-left:5px} .po-chart svg{width:100%;height:auto;display:block;margin-top:10px} .po-chart .axis{display:flex;justify-content:space-between;font:600 11px var(--font-ui);color:var(--text-3);margin-top:5px;font-variant-numeric:tabular-nums} .po-seg-st{fill:var(--accent,#0F0F14)} .po-seg-tk{fill:color-mix(in srgb,var(--accent,#0F0F14) 55%,transparent)} .po-seg-bg{fill:color-mix(in srgb,var(--accent,#0F0F14) 25%,transparent)} .po-line-a{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-linejoin:round} .po-line-b{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linejoin:round} .po-legend{display:flex;gap:14px;flex-wrap:wrap;font:600 11.5px var(--font-ui);color:var(--text-2);margin-top:8px} .po-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:baseline} .po-attn{display:grid;gap:10px} .po-attn-row{display:flex;align-items:center;gap:10px;font:600 13.5px var(--font-ui)} .po-attn-row .stripe{width:4px;height:26px;border-radius:2px;flex:none} .po-attn-row .n{font:800 16px var(--font-ui);min-width:28px;text-align:right;font-variant-numeric:tabular-nums} .stripe.critical{background:var(--danger)} .stripe.serious{background:#E8590C} .stripe.warning{background:var(--warn)} .stripe.info{background:var(--border-strong)} .po-statebar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--border) 40%,transparent)} .po-statebar i{display:block;height:100%} .st-Closed{background:var(--ok)} .st-Resolved{background:color-mix(in srgb,var(--ok) 55%,transparent)} .st-QA{background:var(--info,#3B82F6)} .st-Active{background:var(--accent,#0F0F14)} .st-ReOpen{background:var(--danger)} .st-New{background:var(--border-strong)} .st-OnHold{background:var(--warn)} .rec{display:grid;grid-template-columns:4px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)} .rec .stripe{border-radius:2px} .rec h3{font:700 14.5px var(--font-ui);margin-bottom:4px} .rec p{font:400 13px/1.55 var(--font-ui);color:var(--text-2)} .rec .act{color:var(--text);font-weight:600;margin-top:4px} .rec .links{margin-top:6px;font:600 12.5px var(--font-ui)} .po-modal{border:0;border-radius:var(--r-2);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2,var(--shadow-1));padding:24px;max-width:720px;width:calc(100vw - 40px);max-height:85vh;overflow:auto} .po-modal::backdrop{background:rgba(10,10,14,.55)} .po-modal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .po-modal-head h2{font:700 18px var(--font-ui)} .po-legend .sw-st{background:var(--accent,#0F0F14)} .po-legend .sw-tk{background:color-mix(in srgb,var(--accent,#0F0F14) 55%,transparent)} .po-legend .sw-bg{background:color-mix(in srgb,var(--accent,#0F0F14) 25%,transparent)} .po-legend .sw-danger{background:var(--danger)} .po-legend .sw-ok{background:var(--ok)} .po-strengths{margin-top:14px} /* segmented view switcher (kit-level twin of HQ's tab seg) */ /* min-width:0 + overflow-x lets a wide seg scroll inside itself on phones instead of forcing the page past the viewport (390 check) */ .seg{display:grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:var(--r-2);background:var(--surface-2);max-width:520px;min-width:0;overflow-x:auto} .seg a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border-radius:calc(var(--r-2) - 4px);font:600 13.5px var(--font-ui);color:var(--text-2);text-decoration:none;padding:0 14px;white-space:nowrap} .seg a[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)} .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0 14px} .toolbar .input{width:auto;min-width:160px} .fl-up{fill:var(--ok)} .fl-dn{fill:var(--danger)} /* ==== R-0 sweep: the vocabulary five screens kept hand-rolling ============ Promoted 2026-07-27 out of the