/* MemoGen: same token system as PackList, Chow Kitchen and Command Dashboard (dark-first, tonal surfaces, one restrained accent). System fonts only (offline). */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
--fs-xs:.75rem;--fs-sm:.8125rem;--fs-base:.9375rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:1.375rem;--fs-2xl:2rem;
--r:12px;--r-sm:8px;--r-pill:999px;--maxw:1200px;
/* one page container: header, tabs, body and footer all use these */
--gut-l:calc(var(--sp-4) + var(--sal));--gut-r:calc(var(--sp-4) + var(--sar));--col:calc(var(--maxw) - var(--gut-l) - var(--gut-r));
--motion-short1:50ms;--motion-short2:100ms;--motion-short3:150ms;--motion-short4:200ms;--motion-medium1:250ms;--motion-medium2:300ms;
--motion-standard:cubic-bezier(.2,0,0,1);
--motion-decel:cubic-bezier(.05,.7,.1,1);
--motion-accel:cubic-bezier(.3,0,.8,.15);
--state-hover:.07;--state-press:.12;--state-disabled:.38;
--hit:36px;--hit-lg:40px;--row-compact:32px;--row-default:44px;
--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
font-size:16px}
:root,:root[data-theme="dark"]{
--bg:#0f1216;--panel:#161b22;--panel2:#1c232c;--surface3:#232b36;--head:rgba(15,18,22,.88);--field:#11151a;
--line:#242c36;--line2:#313b47;--ctl:#6f7b89;--hover:rgba(255,255,255,.035);
--txt:#e6eaf0;--mut:#9ba6b3;--sand:#b4bfcc;
--acc:#7cabf5;--on-acc:#0b1220;--od:#7cabf5;--on-od:#0b1220;
--ok:#5fbf9f;--warn:#d9a441;--bad:#e5786d;--cold:#a99cf0;--focus:#a9c8fa;--sur:#6f7b89;
--shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -14px rgba(0,0,0,.6);
--shadow-pop:0 16px 40px -8px rgba(0,0,0,.7);
--scrim:rgba(5,7,10,.62);
color-scheme:dark}
:root[data-theme="light"]{
--bg:#f4f5f7;--panel:#ffffff;--panel2:#eef0f3;--surface3:#ffffff;--head:rgba(244,245,247,.9);--field:#ffffff;
--line:#e0e3e8;--line2:#cfd4db;--ctl:#6b7480;--hover:rgba(0,0,0,.035);
--txt:#16191d;--mut:#515a66;--sand:#363d46;
--acc:#1f5fbf;--on-acc:#ffffff;--od:#1f5fbf;--on-od:#ffffff;
--ok:#0f766e;--warn:#875600;--bad:#b3261e;--cold:#5b3fc4;--focus:#1a56db;--sur:#6b7480;
--shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px -8px rgba(16,24,40,.12);
--shadow-pop:0 16px 40px -8px rgba(16,24,40,.28);
--scrim:rgba(16,24,40,.4);
color-scheme:light}
/* shadcn/ui-style aliases onto the tokens above (same names as Command Dashboard) */
:root{--background:var(--bg);--foreground:var(--txt);--card:var(--panel);--card-foreground:var(--txt);--popover:var(--surface3);--popover-foreground:var(--txt);
--primary:var(--acc);--primary-foreground:var(--on-acc);--secondary:var(--panel2);--secondary-foreground:var(--txt);
--muted:var(--panel2);--muted-foreground:var(--mut);--accent:var(--panel2);--accent-foreground:var(--txt);
--destructive:var(--bad);--destructive-foreground:var(--on-acc);--border:var(--line);--input:var(--line2);--ring:var(--focus);--radius:var(--r)}
@media (pointer:coarse),(max-width:640px){:root{--hit:44px;--hit-lg:44px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--background);color:var(--foreground)}
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,li,td,th,label,span,b,div{overflow-wrap:anywhere}
a{color:var(--primary)}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
kbd{display:inline-block;font:600 var(--fs-xs)/1.4 var(--font);padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:var(--muted);color:var(--muted-foreground);white-space:nowrap}
.sr,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:color-mix(in srgb,var(--primary) 35%,transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.skip{position:absolute;left:8px;top:-60px;z-index:60;background:var(--primary);color:var(--primary-foreground);padding:12px 16px;min-height:44px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:calc(8px + var(--sat))}
/* component state layers (Material 3): hover/press fade an overlay's opacity; nothing else animates */
button.b,a.b,.chip,[role=tab],.syncbtn,.themebtn,a.navlink,.thbtn,.cmdbtn,.qty button,button.st,button.link,.mclose{position:relative;transition:transform var(--motion-short2) var(--motion-standard)}
button.b::after,a.b::after,.chip::after,[role=tab]::after,.syncbtn::after,.themebtn::after,a.navlink::after,.thbtn::after,.cmdbtn::after,.qty button::after,button.st::after,button.link::after,.mclose::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--layer,var(--foreground));opacity:0;pointer-events:none;transition:opacity var(--motion-short2) var(--motion-standard)}
@media (hover:hover){
button.b:hover::after,a.b:hover::after,.chip:hover::after,[role=tab]:hover::after,.syncbtn:hover::after,.themebtn:hover::after,a.navlink:hover::after,.thbtn:hover::after,.cmdbtn:hover::after,.qty button:hover::after,button.st:hover::after,button.link:hover::after,.mclose:hover::after{opacity:var(--state-hover)}
}
button.b:active::after,a.b:active::after,.chip:active::after,[role=tab]:active::after,.syncbtn:active::after,.themebtn:active::after,a.navlink:active::after,.thbtn:active::after,.cmdbtn:active::after,.qty button:active::after,button.st:active::after,button.link:active::after,.mclose:active::after{opacity:var(--state-press)}
button.b:active,a.b:active,.chip:active,[role=tab]:active,.syncbtn:active,.themebtn:active,a.navlink:active,.thbtn:active,.cmdbtn:active,.qty button:active,button.st:active,.mclose:active{transform:scale(.97)}
button:disabled,[aria-disabled=true]{opacity:var(--state-disabled);cursor:not-allowed;pointer-events:none}
/* header + tabs */
.topwrap,.tabbar{background:var(--head);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topwrap{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--border);padding:0 var(--gut-r) 0 var(--gut-l)}
header.top{padding-top:calc(var(--sp-3) + var(--sat))}
.brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);max-width:var(--col);margin:0 auto}
.brand h1{margin:0;font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:var(--sp-2)}
.brand h1::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--primary);box-shadow:0 0 12px color-mix(in srgb,var(--primary) 55%,transparent)}
.brand p{margin:2px 0 0;color:var(--muted-foreground);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.hbtns{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.tablist{position:relative;display:flex;gap:var(--sp-1);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;min-width:0;max-width:var(--col);margin:var(--sp-2) auto 0}
.tablist::-webkit-scrollbar{display:none}
.tabind{position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--primary);transition:left var(--motion-medium1) var(--motion-standard),width var(--motion-medium1) var(--motion-standard);pointer-events:none}
[role=tab]{flex:0 0 auto;min-height:44px;padding:var(--sp-2) var(--sp-3);background:none;border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;color:var(--muted-foreground);font-size:var(--fs-sm);font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap;overflow-wrap:normal;display:inline-flex;align-items:center;gap:var(--sp-2)}
[role=tab][aria-selected=true]{color:var(--foreground)}
[role=tab]:focus-visible{outline-offset:-3px}
.mtabs{margin:0}
.mtabs [role=tab][aria-selected=true]{box-shadow:inset 0 -2px 0 var(--primary)}
.count{display:inline-block;min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);font-size:var(--fs-xs);font-weight:600;line-height:1.35;text-align:center;font-variant-numeric:tabular-nums}
.count[hidden]{display:none}
main{max-width:var(--maxw);margin:0 auto;padding:var(--sp-5) var(--gut-r) var(--sp-6) var(--gut-l)}
[role=tabpanel][hidden]{display:none}
@keyframes panel-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
[role=tabpanel].enter{animation:panel-in var(--motion-short4) var(--motion-decel) both}
h2{display:flex;align-items:center;font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em;line-height:1.25;color:var(--foreground);margin:0 0 var(--sp-1)}
h3{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;color:var(--muted-foreground);margin:0 0 var(--sp-3);text-transform:uppercase}
.asof{font-size:var(--fs-sm);color:var(--muted-foreground);margin:0 0 var(--sp-4);font-variant-numeric:tabular-nums}
.asof b{color:var(--foreground);font-weight:500}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-5);margin-bottom:var(--sp-4);min-width:0}
.card.tight{padding:var(--sp-1) var(--sp-4)}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--sp-4)}
.grid>.card{margin-bottom:0}
@media (min-width:760px){.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.grid>*,.row>*{min-width:0}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.sp{flex:1 1 160px}
.mut{color:var(--muted-foreground)}.small{font-size:var(--fs-sm)}
p{margin:var(--sp-2) 0}
ol,ul{padding-left:20px;margin:var(--sp-2) 0}li{margin:var(--sp-1) 0}
li::marker{color:var(--ctl)}
/* controls + forms (GOV.UK: visible label above, hint, inline error) */
input,select,textarea{background:var(--field);color:var(--foreground);border:1px solid var(--input);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:var(--fs-base);min-height:var(--hit-lg);min-width:0;max-width:100%}
input:hover,select:hover{border-color:var(--ctl)}
input[type=search]{font-size:16px;width:100%}
select{padding-right:var(--sp-2)}
.fields{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:start}
.field{min-width:0}
.field label,.field .lbl{display:block;font-size:var(--fs-sm);font-weight:600;margin:0 0 var(--sp-1)}
.field .hint{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--muted-foreground);line-height:1.4}
.field input,.field select{width:100%}
.field .err{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--bad)}
.field .err[hidden]{display:none}
.field.bad input,.field.bad select,input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.form-actions{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.maxin{width:110px;font-size:16px}
.w-amt{width:120px}.w-bw{width:130px}.full{width:100%}
::placeholder{color:var(--muted-foreground);opacity:1}
button.b,a.b{background:var(--secondary);color:var(--secondary-foreground);border:1px solid var(--input);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);font-weight:500;min-height:var(--hit-lg);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-2)}
button.p{background:var(--primary)!important;border-color:var(--primary)!important;color:var(--primary-foreground)!important;font-weight:650;--layer:var(--on-acc)}
button.d{border-style:dashed}
button.link{background:none;border:0;border-radius:6px;padding:var(--sp-1) var(--sp-2);margin:0 calc(var(--sp-2) * -1);text-align:left;color:var(--foreground);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;min-height:var(--hit)}
button.link:hover{text-decoration-color:var(--primary)}
.syncbtn,.themebtn,a.navlink,.cmdbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--hit);padding:var(--sp-1) var(--sp-3);border:1px solid var(--input);border-radius:var(--r-pill);background:transparent;color:var(--foreground);font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;cursor:pointer;white-space:nowrap;overflow-wrap:normal;text-decoration:none}
.cmdbtn{gap:var(--sp-2);background:var(--secondary)}
.cmdbtn kbd{border-bottom-width:1px;padding:0 5px;background:transparent}
.syncbtn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ctl);flex:0 0 auto}
.syncbtn.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok)}
.syncbtn.ok::before{background:var(--ok)}
.syncbtn.bad{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn)}
.syncbtn.bad::before{background:var(--warn)}
.themebtn{background:var(--secondary)}
.themebtn .knob{display:inline-block;width:26px;height:14px;border:1px solid var(--ctl);border-radius:8px;position:relative;background:var(--field)}
.themebtn .knob::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--foreground);transition:transform var(--motion-short3) var(--motion-standard)}
.themebtn[aria-checked=true] .knob::after{transform:translateX(12px)}
.themebtn .state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
details.more{margin-top:var(--sp-1)}
details.more summary{display:flex;align-items:center;min-height:var(--hit-lg);cursor:pointer;color:var(--muted-foreground);font-size:var(--fs-sm)}
details.more summary:hover{color:var(--foreground)}
/* toolbar (Carbon table toolbar) */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.tb-search{flex:1 1 260px;min-width:0}
.tb-count{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.narrow-only{display:none}
.sortsel{min-width:0}
/* tables (Carbon: sticky header, sortable columns with aria-sort, row-height tokens) */
table{width:100%;border-collapse:separate;border-spacing:0;--row-h:var(--row-default)}
td,th{padding:var(--sp-2) var(--sp-2);text-align:left;vertical-align:middle;font-size:var(--fs-sm)}
td{height:var(--row-h);border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
thead th{position:sticky;top:var(--stick-top,0px);z-index:2;height:40px;padding-top:0;padding-bottom:0;background:var(--card);box-shadow:inset 0 -1px 0 var(--border);color:var(--muted-foreground);font-weight:600;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
thead th[aria-sort=ascending],thead th[aria-sort=descending]{color:var(--foreground)}
.thbtn{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 var(--sp-2);margin:0 calc(var(--sp-2) * -1);border:0;border-radius:6px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.sorticon{display:inline-block;width:10px;height:10px;margin-left:6px;background:currentColor;clip-path:polygon(50% 20%,100% 80%,0 80%);opacity:0;transition:transform var(--motion-short4) var(--motion-standard),opacity var(--motion-short3) var(--motion-standard)}
@media (hover:hover){.thbtn:hover .sorticon{opacity:.45}}
th[aria-sort=ascending] .sorticon,th[aria-sort=descending] .sorticon{opacity:1}
th[aria-sort=descending] .sorticon{transform:rotate(180deg)}
tbody tr:hover td{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
tr.cat td{height:32px;padding-top:0;padding-bottom:0;background:var(--panel2);color:var(--sand);letter-spacing:.1em;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase}
tr.cat:hover td{background:var(--panel2)}
td.empty{height:auto;color:var(--muted-foreground);padding:var(--sp-5) var(--sp-2);text-align:center}
td.empty .b{margin-left:var(--sp-3)}
/* ===== shared tokens (identical in Command Dashboard and Chow Kitchen): icons, depth, hatch ===== */
:root{
--ic-sm:16px;--ic-md:20px;--ic-stroke:2;
--m-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27%2F%3E%3C%2Fsvg%3E");--m-chev:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E");--m-arrowup:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%207-7%207%207%27%2F%3E%3Cpath%20d%3D%27M12%2019V5%27%2F%3E%3C%2Fsvg%3E");
--grid-size:24px;--grid-dot:rgb(255 255 255 / .08);
--glow-color:color-mix(in srgb,var(--acc) 15%,transparent);
--grain:url("data:image/svg+xml,");--grain-opacity:.05;
--hatch-line:rgb(255 255 255 / .07);--hatch-step:8px;
--hatch:repeating-linear-gradient(135deg,var(--hatch-line) 0 1px,transparent 1px var(--hatch-step))}
:root[data-theme="dark"]{--line:rgb(255 255 255 / .08);--line2:rgb(255 255 255 / .16)}
:root[data-theme="light"]{--line:rgb(15 18 22 / .10);--line2:rgb(15 18 22 / .20);--grid-dot:rgb(15 18 22 / .10);--glow-color:color-mix(in srgb,var(--acc) 8%,transparent);--grain-opacity:0;--hatch-line:rgb(15 18 22 / .08)}
/* Lucide icons: one set, currentColor, 2px stroke, 16px (inline/controls) or 20px (headings) */
.ic{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-4px}
[role=tab] .ic,.pill .ic,.st .ic,.nut .ic,.pri .ic,.syncbtn .ic,.themebtn .ic,.cmdbtn .ic,a.navlink .ic,.chip .ic,.b .ic,kbd .ic,.mclose .ic,.qty button .ic,small .ic,.small .ic,.ic.sm{width:var(--ic-sm);height:var(--ic-sm);vertical-align:-3px}
.pill .ic,.st .ic,.pri .ic{margin-right:4px}
a[data-goto] .ic{margin-left:4px}
kbd .ic{vertical-align:-3px}
/* depth: tinted base, fixed static layers behind everything (dot grid only in the side gutters, one accent glow, faint grain) */
html{background:var(--background)}
body{background:transparent}
html::before,html::after,body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html::before{background-image:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 1.6px);background-size:var(--grid-size) var(--grid-size);
-webkit-mask-image:linear-gradient(90deg,#000 calc(50% - var(--maxw)/2 - 40px),transparent calc(50% - var(--maxw)/2 - 8px),transparent calc(50% + var(--maxw)/2 + 8px),#000 calc(50% + var(--maxw)/2 + 40px));
mask-image:linear-gradient(90deg,#000 calc(50% - var(--maxw)/2 - 40px),transparent calc(50% - var(--maxw)/2 - 8px),transparent calc(50% + var(--maxw)/2 + 8px),#000 calc(50% + var(--maxw)/2 + 40px))}
html::after{background:radial-gradient(ellipse 62% 40% at 24% -8%,var(--glow-color),transparent 72%)}
body::before{background-image:var(--grain);background-size:160px 160px;opacity:var(--grain-opacity)}
/* hatch: semantic only (empty states, no-data zones); the message sits on a solid plate, never on the pattern */
td.empty{background-image:linear-gradient(var(--card),var(--card)),var(--hatch);background-origin:content-box,padding-box;background-clip:content-box,padding-box}
@media print{html::before,html::after,body::before{display:none}}
/* chow-specific: glyph replacements, hero figure + lightbox */
.syncbtn::before{display:none}
#syncInd{display:inline-flex;align-items:center;gap:6px}
.mclose{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.qty button{display:inline-grid;place-items:center}
.chk input::before,.addon input::before{width:16px;height:16px;clip-path:none;-webkit-mask:var(--m-check) center/100% no-repeat;mask:var(--m-check) center/100% no-repeat}
details.more summary::before{width:16px;height:16px;margin:0 var(--sp-2) 0 0;border:0;background:currentColor;-webkit-mask:var(--m-chev) center/100% no-repeat;mask:var(--m-chev) center/100% no-repeat;transform:none}
details.more[open] summary::before{transform:rotate(90deg)}
.sorticon{width:14px;height:14px;clip-path:none;-webkit-mask:var(--m-arrowup) center/100% no-repeat;mask:var(--m-arrowup) center/100% no-repeat}
p .ic,li .ic,td .ic,.flag .ic,.batch .ic{width:var(--ic-sm);height:var(--ic-sm);vertical-align:-3px}
.sheet-head+.sc .ic,.pal-foot .ic{vertical-align:-3px}
.pal-foot kbd,.sc-k kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
/* ===== carried over from PackList: chrome, menus, notices, dialogs, toast ===== */
[hidden]{display:none!important}
html:not(.booted) main{visibility:hidden}
/* state layers for this app's controls (hover/press fade an overlay; nothing else animates) */
.iconb,.loc-chip,.menu-body [role=menuitem],.pal-item,.result{position:relative}
.iconb::after,.loc-chip::after,.menu-body [role=menuitem]::after,.result::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--layer,var(--foreground));opacity:0;pointer-events:none;transition:opacity var(--motion-short2) var(--motion-standard)}
@media (hover:hover){.iconb:hover::after,.loc-chip:hover::after,.menu-body [role=menuitem]:hover::after,.result:hover::after{opacity:var(--state-hover)}}
.iconb:active::after,.loc-chip:active::after,.menu-body [role=menuitem]:active::after,.result:active::after{opacity:var(--state-press)}
.iconb:active{transform:scale(.97)}
.savepill{cursor:default;pointer-events:none}
.savepill::after{display:none}
.syncbtn.idle{color:var(--muted-foreground)}
/* icon-only buttons (always have an accessible name) */
.iconb{display:inline-grid;place-items:center;width:var(--hit-lg);height:var(--hit-lg);padding:0;border:1px solid var(--input);border-radius:var(--r-sm);background:var(--secondary);color:var(--foreground);cursor:pointer;flex:0 0 auto;transition:transform var(--motion-short2) var(--motion-standard)}
.iconb.bare{border-color:transparent;background:transparent;color:var(--muted-foreground)}
.iconb.bare:hover{color:var(--foreground)}
.iconb.danger:hover,.iconb.danger:focus-visible{color:var(--bad)}
button.b .ic{margin-right:0}
button.b kbd{margin-left:var(--sp-1);border-bottom-width:1px;background:transparent;color:inherit;opacity:.75}
button.p kbd{border-color:color-mix(in srgb,var(--on-acc) 45%,transparent)}
.cmdbtn .ic:last-child:not(:first-child){margin-left:-2px}
/* menus */
.hbtns{position:relative}
.menu{position:relative}
.menu-body{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:260px;max-width:min(92vw,360px);padding:var(--sp-1);background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);animation:panel-in var(--motion-short3) var(--motion-decel) both}
.menu-body [role=menuitem]{display:block;width:100%;min-height:var(--hit-lg);padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--popover-foreground);text-align:left;font-size:var(--fs-sm);cursor:pointer}
@media (max-width:640px){.menu{position:static}.menu-body{left:0;right:0;max-width:none;min-width:0}.hbtns{width:100%}}
@media (max-width:640px){.hbtns .cmdbtn span:not(.state){white-space:nowrap}}
.themebtn .lbl{white-space:nowrap}
/* page chrome */
.chead{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-3);margin:0 0 var(--sp-3)}
.chead h2{margin:0}.chead .asof{margin:0}
.view{display:none}
.view.active{display:block}
/* empty / state cards: hatch ring, message on a solid plate */
.empty-state{padding:var(--sp-3);margin-top:var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background-image:linear-gradient(var(--card),var(--card)),var(--hatch);background-origin:content-box,padding-box;background-clip:content-box,padding-box}
.empty-state .plate{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);text-align:center;color:var(--muted-foreground)}
.empty-state .plate p{margin:0;max-width:52ch}
.empty-state .plate b{color:var(--foreground)}
.empty-state .row{justify-content:center}
.big-ic{width:32px;height:32px;color:var(--ctl)}
.state{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);margin:0 0 var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font-size:var(--fs-sm);color:var(--muted-foreground)}
.state.err{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--foreground)}
.state.err .ic{color:var(--bad)}
.spin{width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--primary);border-radius:50%;flex:0 0 auto;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* notices */
.flag{border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3);font-size:var(--fs-sm);line-height:1.55}
.flag.red{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.flag b.tag{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;color:var(--warn);margin-right:var(--sp-2)}
.flag.red b.tag{color:var(--bad)}
.flag ul{margin:var(--sp-1) 0 0;padding-left:20px}
.flag a{color:var(--foreground)}
code{font-family:var(--mono);font-size:.85em;padding:1px 5px;border-radius:5px;background:var(--panel2);border:1px solid var(--border)}
.hint{color:var(--muted-foreground);font-size:var(--fs-sm);margin:var(--sp-1) 0}
.field .hint{font-size:var(--fs-xs);margin:0 0 var(--sp-2)}
/* dialogs (native