/* ============================================================ 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: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:1fr 1fr}} .grid-3{display:grid;gap:var(--s-6)} @media(min-width:768px){.grid-3{grid-template-columns:repeat(3,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))} 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)} table.collapsing td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:9px 0;min-width:0} table.collapsing td>a{min-width:0;max-width:100%;overflow:hidden} 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}