/* ========================================================================== BRICKDOCKET — shared design system ========================================================================== Three themes x two modes. Page CSS NEVER references a theme or a raw hex; it only uses the token vocabulary below, so a new theme is a new value block. `data-mode` always holds a RESOLVED value. The user's preference ("auto"|"light"|"dark") lives in localStorage + data-mode-pref, and the inline boot script in each page resolves it before first paint (no flash). COLOR TOKENS — every semantic color is a triplet, because one value cannot serve as both a fill and as text (arcade's gold is 11.7:1 as a fill but 1.5:1 as text on white): --st-good fill, with --st-good-on text placed on top of it --st-good-on the only text color allowed on that fill --st-good-text the same status used as text/icon on a page surface --st-good-soft tinted background for rows/callouts (carries --text) Same shape for warn / danger / info, and for --accent. BORDERS split by job — three tokens, because one cannot do all three: --border card + panel edges (decorative, no contrast floor) --border-control form controls & interactive edges (WCAG 1.4.11 -> 3:1) --divider hairline rules between rows and table cells. Separate from --border because arcade sets --border to solid ink, which would turn every table rule into a heavy black bar. Every value below was verified with a WCAG contrast script across all six theme/mode combinations: body/secondary/muted text on all three surfaces, every status as text and as a fill, control borders and focus rings at 3:1. If you change a color, re-run that check. ========================================================================== */ /* ---------- mode-independent primitives ---------- */ :root{ /* spacing — 4px base */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px; /* motion — retune the whole product here */ --t-fast:110ms; --t-base:200ms; --t-slow:320ms; --t-slower:520ms; --ease:cubic-bezier(.25,1,.5,1); /* state changes — never overshoots */ --ease-pop:cubic-bezier(.34,1.4,.64,1); /* entrances & settles only */ --maxw:1180px; --maxw-narrow:760px; --z-sticky:100; --z-menu:200; --z-modal:300; --z-toast:400; /* font stacks — one Google Fonts link serves all three themes */ --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-arcade-display:"Bricolage Grotesque","Inter",sans-serif; --font-arcade-body:"Space Grotesk","Inter",sans-serif; --font-studio-display:"Fraunces",Georgia,serif; --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; } /* ========================================================================== THEME: CLEAN — the default. Modern, quiet, professional. ========================================================================== */ [data-theme="clean"]{ --font-display:var(--font-ui); --font-body:var(--font-ui); --display-weight:700; --display-tracking:-.021em; --display-scale:1; --badge-transform:none; --badge-tracking:.01em; --badge-weight:600; --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px; --r-pill:999px; --bw:1px; --bw-strong:1px; --shadow-1:0 1px 2px rgba(16,19,34,.06), 0 1px 1px rgba(16,19,34,.04); --shadow-2:0 4px 12px rgba(16,19,34,.08), 0 1px 3px rgba(16,19,34,.06); --shadow-3:0 16px 40px rgba(16,19,34,.14), 0 2px 8px rgba(16,19,34,.08); --shadow-press:none; --press-y:0px; /* clean buttons don't extrude */ --lift-y:-1px; --density:1; } [data-theme="clean"][data-mode="light"]{ --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF0F4; --surface-3:#F7F8FA; --border:#DFE3EA; --border-control:#828A9B; --divider:#E8EBF0; --focus:#2647C9; --text:#101322; --text-2:#4A5163; --text-3:#5C6373; --accent:#3B5BDB; --accent-on:#FFFFFF; --accent-text:#3450C6; --accent-soft:#EDF1FE; --st-good:#127A46; --st-good-on:#FFFFFF; --st-good-text:#0F6B3D; --st-good-soft:#E6F5ED; --st-warn:#9A5B00; --st-warn-on:#FFFFFF; --st-warn-text:#8A5100; --st-warn-soft:#FDF1E0; --st-danger:#C0272D; --st-danger-on:#FFFFFF; --st-danger-text:#B02228; --st-danger-soft:#FCEBEC; --st-info:#1F52C4; --st-info-on:#FFFFFF; --st-info-text:#1F52C4; --st-info-soft:#EAF0FD; --shade:rgba(16,19,34,.45); } [data-theme="clean"][data-mode="dark"]{ --bg:#0E1015; --surface:#171A21; --surface-2:#0A0C11; --surface-3:#1E222B; --border:#272C36; --border-control:#616A7C; --divider:#23272F; --focus:#8FA6FF; --text:#EEF1F6; --text-2:#AEB6C4; --text-3:#8A93A3; --accent:#7C97FF; --accent-on:#0B0D12; --accent-text:#93A9FF; --accent-soft:#1B2338; --st-good:#4ED08A; --st-good-on:#08210F; --st-good-text:#5FD897; --st-good-soft:#122B1E; --st-warn:#F0B43F; --st-warn-on:#241701; --st-warn-text:#F5C05A; --st-warn-soft:#2E2411; --st-danger:#FF7B7B; --st-danger-on:#2A0708; --st-danger-text:#FF8F8F; --st-danger-soft:#301A1C; --st-info:#7FA9FF; --st-info-on:#08132E; --st-info-text:#93B6FF; --st-info-soft:#182337; --shade:rgba(0,0,0,.62); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 14px rgba(0,0,0,.55); --shadow-3:0 18px 44px rgba(0,0,0,.65); } /* ========================================================================== THEME: ARCADE — cartoony. Chunky borders, hard offset shadows, no blur. ========================================================================== */ [data-theme="arcade"]{ --font-display:var(--font-arcade-display); --font-body:var(--font-arcade-body); --display-weight:800; --display-tracking:-.02em; --display-scale:1.04; --badge-transform:uppercase; --badge-tracking:.08em; --badge-weight:700; --r-1:10px; --r-2:14px; --r-3:18px; --r-4:26px; --r-pill:999px; --bw:2px; --bw-strong:2px; --shadow-1:0 3px 0 var(--border); --shadow-2:0 4px 0 var(--border); --shadow-3:0 6px 0 var(--border); --shadow-press:0 1px 0 var(--border); --press-y:3px; /* buttons physically press down */ --lift-y:-2px; --density:1; } [data-theme="arcade"][data-mode="light"]{ --bg:#FFF6E9; --surface:#FFFFFF; --surface-2:#FBF1E0; --surface-3:#FFFBF2; --border:#14142B; --border-control:#14142B; --divider:#E7DFCF; --focus:#2F4FE0; --text:#14142B; --text-2:#54546E; --text-3:#5D5D75; --accent:#3E63FF; --accent-on:#FFFFFF; --accent-text:#2A4BE0; --accent-soft:#EAEFFF; --st-good:#17804C; --st-good-on:#FFFFFF; --st-good-text:#157344; --st-good-soft:#E4F5EC; --st-warn:#FFC93C; --st-warn-on:#14142B; --st-warn-text:#87560A; --st-warn-soft:#FFF4D6; --st-danger:#D8352F; --st-danger-on:#FFFFFF; --st-danger-text:#C42C27; --st-danger-soft:#FDEAE9; --st-info:#3E63FF; --st-info-on:#FFFFFF; --st-info-text:#2A4BE0; --st-info-soft:#EAEFFF; --shade:rgba(20,20,43,.45); } [data-theme="arcade"][data-mode="dark"]{ --bg:#171334; --surface:#221D46; --surface-2:#120F28; --surface-3:#2A2456; --border:#4A3F8F; --border-control:#8B7CE8; --divider:#332B63; --focus:#FFD166; --text:#F6F2FF; --text-2:#BFB6E8; --text-3:#9C92CC; --accent:#8FA6FF; --accent-on:#12102A; --accent-text:#A3B6FF; --accent-soft:#2B2A5E; --st-good:#57DE9B; --st-good-on:#06240F; --st-good-text:#6DE4A9; --st-good-soft:#17352A; --st-warn:#FFD166; --st-warn-on:#241701; --st-warn-text:#FFD980; --st-warn-soft:#3A2E15; --st-danger:#FF8A85; --st-danger-on:#2A0708; --st-danger-text:#FF9D99; --st-danger-soft:#3A1F26; --st-info:#8FA6FF; --st-info-on:#12102A; --st-info-text:#A3B6FF; --st-info-soft:#2B2A5E; --shade:rgba(8,6,20,.66); } /* ========================================================================== THEME: STUDIO — editorial. Hairlines, oversized serif display, air. ========================================================================== */ [data-theme="studio"]{ --font-display:var(--font-studio-display); --font-body:var(--font-ui); --display-weight:700; --display-tracking:-.015em; --display-scale:1.1; --badge-transform:uppercase; --badge-tracking:.1em; --badge-weight:600; --r-1:2px; --r-2:4px; --r-3:8px; --r-4:12px; --r-pill:999px; --bw:1px; --bw-strong:1.5px; --shadow-1:none; --shadow-2:0 2px 10px rgba(20,18,15,.07); --shadow-3:0 20px 50px rgba(20,18,15,.16); --shadow-press:none; --press-y:1px; --lift-y:-1px; --density:1.12; /* studio breathes more */ } [data-theme="studio"][data-mode="light"]{ --bg:#F6F3EC; --surface:#FFFDF8; --surface-2:#EDE8DD; --surface-3:#FAF7F0; --border:#DCD5C6; --border-control:#8D8577; --divider:#E4DED1; --focus:#8A3B2A; --text:#14120F; --text-2:#5C564B; --text-3:#6A6357; --accent:#8A3B2A; --accent-on:#FFFDF8; --accent-text:#8A3B2A; --accent-soft:#F6E9E4; --st-good:#2F6B45; --st-good-on:#FFFDF8; --st-good-text:#2F6B45; --st-good-soft:#E8F0E9; --st-warn:#8A6415; --st-warn-on:#FFFDF8; --st-warn-text:#7D5A12; --st-warn-soft:#F7EEDC; --st-danger:#A6332A; --st-danger-on:#FFFDF8; --st-danger-text:#A6332A; --st-danger-soft:#F8E8E5; --st-info:#2F4C8A; --st-info-on:#FFFDF8; --st-info-text:#2F4C8A; --st-info-soft:#E8EDF6; --shade:rgba(20,18,15,.42); } [data-theme="studio"][data-mode="dark"]{ --bg:#14120F; --surface:#1E1B17; --surface-2:#0D0B09; --surface-3:#26221D; --border:#332E27; --border-control:#736A5C; --divider:#2A251F; --focus:#E08A6E; --text:#F4F0E8; --text-2:#B8B0A2; --text-3:#948C7E; --accent:#E08A6E; --accent-on:#14120F; --accent-text:#E89A80; --accent-soft:#33231D; --st-good:#77C495; --st-good-on:#08210F; --st-good-text:#8ACDA5; --st-good-soft:#1B2E22; --st-warn:#E0B85F; --st-warn-on:#241701; --st-warn-text:#E6C378; --st-warn-soft:#302716; --st-danger:#EE8B7F; --st-danger-on:#2A0708; --st-danger-text:#F29E93; --st-danger-soft:#331E1A; --st-info:#8FA9DE; --st-info-on:#0B1428; --st-info-text:#A2B8E5; --st-info-soft:#1E2632; --shade:rgba(0,0,0,.6); } /* ========================================================================== RESET + BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ /* background-color rather than the `background` shorthand: only the colour is animating, so transitioning the longhand keeps the shorthand's other parts out of the interpolation. */ background-color:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1.14} h1{font-size:calc(1.85rem * var(--display-scale))} h2{font-size:calc(1.35rem * var(--display-scale))} h3{font-size:calc(1.06rem * var(--display-scale))} h4{font-size:.96rem} p{max-width:66ch} a{color:var(--accent-text);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} img,svg,video{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit;font-family:var(--font-body)} button{background:none;border:none;cursor:pointer;color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-1)} ::selection{background:var(--accent);color:var(--accent-on)} hr{border:none;border-top:1px solid var(--divider)} [hidden]{display:none !important} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .num{font-variant-numeric:tabular-nums} .t2{color:var(--text-2)} .t3{color:var(--text-3)} .sm{font-size:.86rem} .xs{font-size:.78rem} .strong{font-weight:600} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)} .narrow{max-width:var(--maxw-narrow);margin:0 auto} .row{display:flex;align-items:center;gap:var(--s-3)} .row-t{display:flex;align-items:flex-start;gap:var(--s-3)} .col{display:flex;flex-direction:column;gap:var(--s-3)} .wrapf{flex-wrap:wrap} .grow{flex:1;min-width:0} .right{margin-left:auto} .center{text-align:center} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ========================================================================== BUTTONS — one component, theme-expressed elevation ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); font-weight:600;font-size:.92rem;line-height:1; padding:calc(10px * var(--density)) calc(16px * var(--density)); border-radius:var(--r-2); border:var(--bw) solid var(--border-control); background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); cursor:pointer; user-select:none; text-decoration:none; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); white-space:nowrap; } .btn:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2);text-decoration:none} .btn:active{transform:translateY(var(--press-y));box-shadow:var(--shadow-press)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-1)} .btn-primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)} .btn-primary:hover{background:var(--accent)} .btn-danger{background:var(--st-danger);color:var(--st-danger-on);border-color:var(--st-danger)} .btn-good{background:var(--st-good);color:var(--st-good-on);border-color:var(--st-good)} .btn-ghost{background:transparent;border-color:transparent;box-shadow:none} .btn-ghost:hover{background:var(--surface-2);border-color:var(--border);box-shadow:none;transform:none} .btn-sm{padding:calc(6px * var(--density)) calc(11px * var(--density));font-size:.83rem;border-radius:var(--r-1);gap:6px} .btn-lg{padding:calc(14px * var(--density)) calc(24px * var(--density));font-size:1rem;border-radius:var(--r-3)} .btn-icon{padding:calc(8px * var(--density));aspect-ratio:1;border-radius:var(--r-1)} .btn-block{width:100%} /* ========================================================================== SURFACES ========================================================================== */ .card{ background:var(--surface); border:var(--bw) solid var(--border); border-radius:var(--r-3); box-shadow:var(--shadow-1); } .card-pad{padding:calc(var(--s-5) * var(--density))} .card-hover{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .card-hover:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2);border-color:var(--border-control)} .panel{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);box-shadow:var(--shadow-1);overflow:hidden} .panel-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:var(--bw) solid var(--border);background:var(--surface-3)} .panel-head h2,.panel-head h3{margin-right:auto} .panel-body{padding:calc(var(--s-5) * var(--density))} .sunk{background:var(--surface-2);border-radius:var(--r-2)} /* ========================================================================== BADGES + CHIPS ========================================================================== */ .badge{ display:inline-flex;align-items:center;gap:5px;flex:none; font-size:.68rem;font-weight:var(--badge-weight);letter-spacing:var(--badge-tracking); text-transform:var(--badge-transform); line-height:1; padding:5px 8px;border-radius:var(--r-1); background:var(--surface-2);color:var(--text-2);border:var(--bw) solid transparent; white-space:nowrap; } [data-theme="arcade"] .badge{border-color:var(--border)} .badge-good{background:var(--st-good);color:var(--st-good-on)} .badge-warn{background:var(--st-warn);color:var(--st-warn-on)} .badge-danger{background:var(--st-danger);color:var(--st-danger-on)} .badge-info{background:var(--st-info);color:var(--st-info-on)} .badge-accent{background:var(--accent);color:var(--accent-on)} .badge-soft-good{background:var(--st-good-soft);color:var(--st-good-text)} .badge-soft-warn{background:var(--st-warn-soft);color:var(--st-warn-text)} .badge-soft-danger{background:var(--st-danger-soft);color:var(--st-danger-text)} .badge-soft-info{background:var(--st-info-soft);color:var(--st-info-text)} .badge-outline{background:transparent;border-color:var(--border-control);color:var(--text-2)} .chip{ display:inline-flex;align-items:center;gap:6px; border:var(--bw) solid var(--border);border-radius:var(--r-pill); background:var(--surface);color:var(--text); padding:5px 11px;font-size:.84rem;font-weight:500;white-space:nowrap; } .chip-btn{cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .chip-btn:hover{border-color:var(--border-control)} .chip-btn[aria-pressed="true"], .chip-btn[aria-current="page"]{background:var(--accent);color:var(--accent-on);border-color:var(--accent)} .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-3)} .dot-good{background:var(--st-good)} .dot-warn{background:var(--st-warn)} .dot-danger{background:var(--st-danger)} .dot-info{background:var(--st-info)} /* ========================================================================== FORMS ========================================================================== */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)} .field > label,.label{font-size:.83rem;font-weight:600;color:var(--text-2)} .hint{font-size:.78rem;color:var(--text-3)} .err{font-size:.78rem;color:var(--st-danger-text);font-weight:500} .input,input[type=text],input[type=email],input[type=password],input[type=url], input[type=number],input[type=date],input[type=search],select,textarea{ width:100%;padding:calc(9px * var(--density)) 12px; border:var(--bw) solid var(--border-control);border-radius:var(--r-2); background:var(--surface);color:var(--text); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); } .input:focus,input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } input[aria-invalid="true"],.input[aria-invalid="true"]{border-color:var(--st-danger)} textarea{min-height:88px;resize:vertical} input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1} .input-affix{display:flex;align-items:stretch;gap:0} .input-affix .pre{display:flex;align-items:center;padding:0 10px;border:var(--bw) solid var(--border-control);border-right:none; border-radius:var(--r-2) 0 0 var(--r-2);background:var(--surface-2);color:var(--text-3);font-size:.86rem;white-space:nowrap} .input-affix input{border-radius:0 var(--r-2) var(--r-2) 0} .check{display:flex;align-items:flex-start;gap:var(--s-2);cursor:pointer;font-size:.9rem} .check input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:none;cursor:pointer} .switch{position:relative;width:40px;height:23px;flex:none;cursor:pointer} .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .switch .track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--surface-2); border:var(--bw) solid var(--border-control);transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease)} .switch .knob{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--text-3); transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease)} .switch input:checked ~ .track{background:var(--accent);border-color:var(--accent)} .switch input:checked ~ .knob{transform:translateX(17px);background:var(--accent-on)} .switch input:focus-visible ~ .track{outline:2px solid var(--focus);outline-offset:2px} .segmented{display:inline-flex;background:var(--surface-2);border:var(--bw) solid var(--border);border-radius:var(--r-2);padding:2px;gap:2px} .segmented button{padding:6px 12px;border-radius:calc(var(--r-2) - 2px);font-size:.84rem;font-weight:600;color:var(--text-2); transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .segmented button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)} /* ========================================================================== LISTS, TABLES, PROGRESS ========================================================================== */ .list{display:flex;flex-direction:column} .list-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--divider)} .list-row:last-child{border-bottom:none} .list-row .tt{font-weight:600;font-size:.93rem;line-height:1.3} .list-row .dd{font-size:.81rem;color:var(--text-3)} .avatar{width:36px;height:36px;flex:none;border-radius:var(--r-2);display:grid;place-items:center; background:var(--surface-2);border:var(--bw) solid var(--border);font-size:17px;line-height:1} .avatar-lg{width:48px;height:48px;font-size:22px;border-radius:var(--r-3)} .avatar-sm{width:26px;height:26px;font-size:13px;border-radius:var(--r-1)} /* .panel clips its children, so any table wide enough to overflow needs its own scroll container or the last columns become unreachable on a phone */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .table-scroll table{min-width:max-content} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--divider);font-size:.9rem} th{font-size:.76rem;font-weight:600;color:var(--text-3);text-transform:var(--badge-transform);letter-spacing:var(--badge-tracking)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tbody tr:last-child td{border-bottom:none} .bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;border:var(--bw) solid var(--border)} .bar > i{display:block;height:100%;background:var(--accent);border-radius:inherit; transition:width var(--t-slow) var(--ease)} .bar-good > i{background:var(--st-good)} .meter{display:flex;gap:3px} .meter .seg{flex:1;height:7px;border-radius:var(--r-pill);background:var(--surface-2);border:var(--bw) solid var(--border)} .meter .seg.on{background:var(--accent);border-color:var(--accent)} /* ========================================================================== TABS / MENUS / MODALS / TOASTS ========================================================================== */ .tabs{display:flex;gap:2px;border-bottom:var(--bw) solid var(--border);overflow-x:auto;scrollbar-width:thin} .tab{padding:10px 14px;font-size:.9rem;font-weight:600;color:var(--text-3);white-space:nowrap; border-bottom:2px solid transparent;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .tab:hover{color:var(--text)} .tab[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--accent)} .menu{position:absolute;z-index:var(--z-menu);min-width:190px;padding:6px; background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-3)} .menu button,.menu a{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:8px 10px;border-radius:var(--r-1); font-size:.89rem;text-align:left;color:var(--text);text-decoration:none} .menu button:hover,.menu a:hover{background:var(--surface-2);text-decoration:none} .menu .sep{height:1px;background:var(--divider);margin:5px 2px} .menu .danger{color:var(--st-danger-text)} .overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--shade); display:none;align-items:flex-start;justify-content:center;padding:6vh var(--s-4);overflow-y:auto} .overlay.on{display:flex} .modal{width:100%;max-width:520px;background:var(--surface);border:var(--bw) solid var(--border); border-radius:var(--r-4);box-shadow:var(--shadow-3);animation:modalIn var(--t-base) var(--ease-pop) both} .modal-head{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) 0} .modal-head h2{margin-right:auto} .modal-body{padding:var(--s-4) var(--s-5)} .modal-foot{display:flex;gap:var(--s-2);justify-content:flex-end;padding:0 var(--s-5) var(--s-5);flex-wrap:wrap} @keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .toasts{position:fixed;left:50%;bottom:var(--s-6);transform:translateX(-50%);z-index:var(--z-toast); display:flex;flex-direction:column;gap:var(--s-2);align-items:center;pointer-events:none;width:max-content;max-width:92vw} .toast{display:flex;align-items:center;gap:var(--s-2);pointer-events:auto; background:var(--text);color:var(--bg);border-radius:var(--r-2);padding:10px 16px; font-size:.89rem;font-weight:500;box-shadow:var(--shadow-3); animation:toastIn var(--t-base) var(--ease-pop) both;max-width:92vw} .toast.leaving{animation:toastOut var(--t-base) var(--ease) both} .toast-undo{background:none;border:none;color:var(--bg);font-weight:700;text-decoration:underline;cursor:pointer;padding:0 0 0 6px} @keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(8px)}} /* callouts */ .note{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-2); background:var(--surface-2);border:var(--bw) solid var(--border);font-size:.88rem} .note-info{background:var(--st-info-soft);border-color:transparent;color:var(--text)} .note-warn{background:var(--st-warn-soft);border-color:transparent;color:var(--text)} .note-danger{background:var(--st-danger-soft);border-color:transparent;color:var(--text)} .note-good{background:var(--st-good-soft);border-color:transparent;color:var(--text)} /* empty + skeleton states */ .empty{text-align:center;padding:var(--s-8) var(--s-5);color:var(--text-3)} .empty .ico{font-size:2rem;margin-bottom:var(--s-2);opacity:.8} .empty h3{color:var(--text);margin-bottom:6px} .empty p{margin:0 auto var(--s-4);max-width:46ch;font-size:.9rem} .skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%;animation:skel 1.3s linear infinite;border-radius:var(--r-1)} @keyframes skel{to{background-position:-200% 0}} .kbd{display:inline-block;padding:2px 6px;border-radius:var(--r-1);border:var(--bw) solid var(--border-control); background:var(--surface-2);font-family:var(--font-mono);font-size:.74rem;line-height:1.4;color:var(--text-2)} .drag-handle{cursor:grab;color:var(--text-3);padding:2px;border-radius:var(--r-1);flex:none;line-height:1} .drag-handle:active{cursor:grabbing} .drag-handle:hover{color:var(--text);background:var(--surface-2)} .dragging{opacity:.45} .drop-before{box-shadow:0 -3px 0 var(--accent)} .drop-after{box-shadow:0 3px 0 var(--accent)} /* ========================================================================== MOTION GATE — one switch for the whole product ========================================================================== */ @media (prefers-reduced-motion:reduce){ :root{--t-fast:0ms;--t-base:0ms;--t-slow:0ms;--t-slower:0ms} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} }