/* ───────────────────────────────────────────────────────────────────────────
   Material 3 Expressive — shell design tokens (adapted from the M3E reference).
   No CSS @layer: the rest of this stylesheet (deck/card content) is unlayered,
   and unlayered rules beat layered ones, so everything here stays unlayered and
   relies on source order. The dynamic-colour engine (cb-theme.js) injects a
   <style id="m3dyn"> AFTER this file, overriding the --md-sys-color-* defaults
   below per seed/scheme. Per-deck meta.theme overrides target html[data-theme]
   and win over the bridge via higher specificity.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
/* shape scale */
--r-none:0px;--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-lgi:20px;
--r-xl:28px;--r-xli:32px;--r-xxl:48px;--r-full:9999px;
/* elevation */
--e1:0 1px 2px rgb(0 0 0/.30),0 1px 3px 1px rgb(0 0 0/.15);
--e2:0 1px 2px rgb(0 0 0/.30),0 2px 6px 2px rgb(0 0 0/.15);
--e3:0 4px 8px 3px rgb(0 0 0/.15),0 1px 3px rgb(0 0 0/.30);
/* expressive spring motion */
--m-spatial-fast:350ms cubic-bezier(.42,1.67,.21,.9);
--m-spatial:500ms cubic-bezier(.38,1.21,.22,1);
--m-effects:200ms cubic-bezier(.34,.8,.34,1);
/* shell sans font (card content keeps its own fonts), glass + state layers */
--font:system-ui,-apple-system,"Segoe UI","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;
--blur-amt:18px;--glass-blur:saturate(165%) blur(var(--blur-amt));
--state-hover:.08;--state-press:.10;
}
html[data-reduce="1"]{--m-spatial-fast:1ms linear;--m-spatial:1ms linear;--m-effects:1ms linear;}
/* Static fallback M3 colour roles (green seed) for first paint / no-JS; the
   engine overrides all of these at runtime via #m3dyn for light/dark/black. */
:root{
--md-sys-color-primary:#7A5900;--md-sys-color-on-primary:#ffffff;
--md-sys-color-primary-container:#FFDF9C;--md-sys-color-on-primary-container:#261A00;
--md-sys-color-secondary:#516350;--md-sys-color-on-secondary:#ffffff;
--md-sys-color-secondary-container:#D3E8D0;--md-sys-color-on-secondary-container:#0E1F10;
--md-sys-color-tertiary:#3A656E;--md-sys-color-on-tertiary:#ffffff;
--md-sys-color-tertiary-container:#BEEAF5;--md-sys-color-on-tertiary-container:#001F25;
--md-sys-color-error:#BA1A1A;--md-sys-color-on-error:#ffffff;
--md-sys-color-error-container:#FFDAD6;--md-sys-color-on-error-container:#410002;
--md-sys-color-background:#F7FBF2;--md-sys-color-on-background:#181D17;
--md-sys-color-surface:#F7FBF2;--md-sys-color-on-surface:#181D17;
--md-sys-color-surface-variant:#DDE5DA;--md-sys-color-on-surface-variant:#414941;
--md-sys-color-surface-container-lowest:#ffffff;--md-sys-color-surface-container-low:#F1F5EC;
--md-sys-color-surface-container:#EBEFE6;--md-sys-color-surface-container-high:#E5E9E1;
--md-sys-color-surface-container-highest:#E0E4DB;
--md-sys-color-outline:#717971;--md-sys-color-outline-variant:#C1C9BE;
}
/* Bridge: legacy structural tokens are derived from M3 roles so out-of-scope
   card content auto-harmonises with the live theme. */
:root{
--bg:var(--md-sys-color-surface);
--bg-outer:var(--md-sys-color-surface-container);
--text:var(--md-sys-color-on-surface);
--text-muted:var(--md-sys-color-on-surface-variant);
--border:var(--md-sys-color-outline-variant);
--surface:var(--md-sys-color-surface-container-low);
--surface-2:var(--md-sys-color-surface-container-high);
--dot-on:var(--md-sys-color-primary);
--dot-off:var(--md-sys-color-outline-variant);
--bar:var(--md-sys-color-primary);
--bar-bg:var(--md-sys-color-surface-container-highest);
--accent:var(--md-sys-color-primary);
--accent-bg:var(--md-sys-color-primary-container);
}
/* Semantic status colours stay fixed (not theme-seeded) so card content reads
   correctly; they still flip with data-theme (kept in sync with data-mode). */
:root{
--yes:#1E7A3C;--no:#B83030;
--shadow:rgba(0,0,0,0.14);
--ok:#063E18;--ok-bg:#F6FAF7;
--warn:#5C2E00;--warn-bg:#FEFAF1;
--danger:#5C0D0D;--danger-bg:#FDF4F3;
}
[data-theme="dark"]{
--yes:#4DC870;--no:#E06060;
--shadow:rgba(0,0,0,0.5);
--ok:#4DC870;--ok-bg:#071208;
--warn:#E8A44A;--warn-bg:#1A1000;
--danger:#E06060;--danger-bg:#1A0808;
}
/* M3 type scale (shell). Applied to chrome text; card content keeps its fonts. */
.t-display-l{font-size:3.5rem;line-height:1.14;font-weight:400;letter-spacing:-.016em;}
.t-display-m{font-size:2.8rem;line-height:1.16;font-weight:400;}
.t-headline-l{font-size:2rem;line-height:1.25;font-weight:400;}
.t-headline-m{font-size:1.75rem;line-height:1.29;font-weight:400;}
.t-title-l{font-size:1.375rem;line-height:1.27;font-weight:500;}
.t-title-m{font-size:1rem;line-height:1.5;font-weight:600;letter-spacing:.009em;}
.t-title-s{font-size:.875rem;line-height:1.43;font-weight:600;letter-spacing:.006em;}
.t-body-l{font-size:1rem;line-height:1.5;font-weight:400;}
.t-body-m{font-size:.875rem;line-height:1.43;font-weight:400;}
.t-label-l{font-size:.875rem;line-height:1.43;font-weight:600;letter-spacing:.006em;}
.t-label-m{font-size:.75rem;line-height:1.33;font-weight:600;letter-spacing:.04em;}
html,body,h2,h3,table,th,td,hr,p{margin:0;padding:0;}
div{padding:0;margin:0;}
*,*::before,*::after{box-sizing:border-box;}
body{
width:100vw;height:100dvh;overflow:hidden;
background:var(--bg-outer);color:var(--text);
font-family:'Noto Serif TC',serif;
}
.box{
position:fixed;top:0;left:0;width:100vw;height:100dvh;overflow:hidden;
background:var(--bg-outer);--top-h:40px;
}
.box-top{
position:absolute;top:0;left:0;right:0;z-index:200;
height:var(--top-h);
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;
padding:0 0.5em;
background:var(--bg);border-bottom:1px solid var(--border);
font-size:14px;color:var(--text);overflow:hidden;
}
.top-left{
font-family:'DM Mono',monospace;font-size:12px;color:var(--text-muted);
display:flex;align-items:center;gap:0.2em;
flex-shrink:0;white-space:nowrap;overflow:hidden;
}
.top-buttons{display:flex;align-items:center;gap:0.2em;flex-shrink:0;}
.box-top.double-bar{flex-direction:column;align-items:stretch;justify-content:flex-start;}
.box-top.double-bar .top-left{height:40px;border-bottom:1px solid var(--border);overflow:hidden;}
.box-top.double-bar .top-buttons{height:40px;justify-content:flex-end;}
.box-top button{
background:none;border:1px solid transparent;color:var(--text);cursor:pointer;
font-family:'DM Mono',monospace;font-size:12px;
padding:0.3em 0.55em;border-radius:3px;
}
.box-top button:hover{background:var(--surface);}
.box-top button:disabled{opacity:0.3;pointer-events:none;}
#pageNum{
font-family:'DM Mono',monospace;font-size:12px;color:var(--text-muted);
padding:0 0.3em;
}
#deckTitle{
font-family:'DM Mono',monospace;font-size:11px;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;
}
.viewer-shell{position:absolute;top:var(--top-h);left:0;right:0;bottom:0;overflow:hidden;}
.set-track{
display:flex;flex-direction:row;height:100%;
will-change:transform;
transition:transform 0.55s cubic-bezier(0.77,0,0.175,1);
}
.set{
flex:0 0 100vw;height:100%;overflow:hidden;
display:flex;align-items:flex-start;justify-content:center;
}
.card-track{
display:flex;flex-direction:column;
will-change:transform;
transition:transform 0.55s cubic-bezier(0.77,0,0.175,1);
}
.card{width:100vw;display:flex;align-items:center;justify-content:center;}
.card-face{
--aw:calc(100vw - 8vw - env(safe-area-inset-left) - env(safe-area-inset-right));
--ah:calc(100dvh - var(--top-h) - 8vw - env(safe-area-inset-top) - env(safe-area-inset-bottom));
width:min(var(--aw),calc(var(--ah)*9/16));
height:min(var(--ah),calc(var(--aw)*16/9));
font-size:var(--card-font,clamp(16px,7vw,28px));
background:var(--bg);color:var(--text);
display:flex;flex-direction:column;gap:0.4em;overflow:hidden;flex-shrink:0;
padding:1em;box-shadow:0 1px 2px var(--shadow);position:relative;
user-select:text;-webkit-user-select:text;
}
[data-orient="landscape"] .card-face{
width:min(var(--aw),calc(var(--ah)*16/9));
height:min(var(--ah),calc(var(--aw)*9/16));
font-size:var(--card-font,clamp(12px,3.5vw,22px));
}
.cover-card{cursor:text;}
.expand-hint{
position:absolute;bottom:0.5em;left:50%;
transform:translateX(-50%);
color:var(--text-muted);font-size:0.8em;pointer-events:none;
animation:expandBounce 1.8s ease-in-out infinite;
}
@keyframes expandBounce{
0%,100%{opacity:0.45;transform:translateX(-50%) translateY(0);}
50%{opacity:1;transform:translateX(-50%) translateY(4px);}
}
.nav-btn{
position:absolute;z-index:150;
background:var(--surface);border:1px solid var(--border);color:var(--text-muted);
cursor:pointer;display:flex;align-items:center;justify-content:center;
width:2em;height:2em;border-radius:50%;
font-size:13px;opacity:0.65;transition:opacity 0.2s;padding:0;
}
.nav-btn:hover{opacity:1;}
.nav-btn:disabled{opacity:0.15;pointer-events:none;}
.nav-left{left:0.4em;top:50%;transform:translateY(-50%);}
.nav-right{right:0.4em;top:50%;transform:translateY(-50%);}
.nav-up{top:calc(var(--top-h) + 0.4em);left:50%;transform:translateX(-50%);}
.nav-down{
bottom:calc(env(safe-area-inset-bottom) + 0.4em);
left:50%;transform:translateX(-50%);
}
.kbd-modal{
position:fixed;top:0;left:0;right:0;bottom:0;z-index:900;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.45);
}
.kbd-modal[hidden]{display:none;}
.kbd-modal-box{
background:var(--bg);border:1px solid var(--border);border-radius:4px;
padding:1.1em 1.4em;min-width:260px;
font-family:'DM Mono',monospace;font-size:0.78em;color:var(--text);
box-shadow:0 4px 24px var(--shadow);
}
.kbd-modal-title{
font-size:0.9em;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;
color:var(--text-muted);margin-bottom:0.75em;
display:flex;justify-content:space-between;align-items:center;
}
.kbd-modal-table{width:100%;border-collapse:collapse;}
.kbd-modal-table td{padding:0.32em 0.3em;vertical-align:middle;}
.kbd-modal-table tr+tr td{border-top:1px solid var(--border);}
.kbd-modal-table td:first-child{white-space:nowrap;padding-right:1em;}
.kbd-modal-table td:last-child{color:var(--text-muted);}
/* Notification dot (e.g. validator warning) on a top-bar button */
.box-top button.has-dot{position:relative;}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
background:var(--no);box-shadow:0 0 0 2px var(--bg);pointer-events:none;}
.notif-dot[hidden]{display:none;}
/* Format validation report */
.val-modal-box{min-width:320px;max-width:min(560px,92vw);max-height:80vh;overflow:auto;}
.val-x{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1em;padding:0.2em;}
.val-report{display:flex;flex-direction:column;gap:0.5em;font-family:'DM Mono',monospace;font-size:0.95em;line-height:1.5;}
.val-ok{display:flex;align-items:center;gap:0.5em;color:var(--yes);}
.val-item{display:flex;gap:0.55em;align-items:flex-start;padding:0.45em 0.55em;border-radius:3px;
border:1px solid var(--border);background:var(--surface);}
.val-item i,.val-item svg{margin-top:0.15em;flex-shrink:0;}
.val-item.val-error{color:var(--danger);border-color:var(--danger);background:var(--danger-bg);}
.val-item.val-warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg);}
.val-item.val-info{color:var(--text-muted);}
.val-item b{font-weight:600;}
.val-loc{color:var(--text-muted);font-size:0.85em;}
kbd{
display:inline-block;
background:var(--surface);border:1px solid var(--border);
border-radius:2px;padding:0.05em 0.35em;margin:0 0.1em;
font-family:'DM Mono',monospace;font-size:0.85em;
}
.slide-tag{
font-family:'DM Mono',monospace;font-size:0.62em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.12em;font-weight:500;
}
.var-tag{color:#7E3AC4;}
[data-theme="dark"] .var-tag{color:#C9A0F0;}
.slide-title{
font-family:'Playfair Display',serif;font-size:1.82em;font-weight:700;
line-height:1.12;letter-spacing:-0.01em;
}
.subline{
font-family:'DM Mono',monospace;font-size:0.7em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.08em;
}
.note-block{
border:1px solid var(--border);border-radius:2px;
padding:0.4em 0.6em;
font-family:'DM Mono',monospace;font-size:0.66em;
color:var(--text-muted);line-height:1.5;
margin-top:auto;
}
.cover-stat{display:flex;gap:0.5em;margin-top:auto;}
.cover-foot{
font-family:'DM Mono',monospace;font-size:0.62em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.1em;
padding-top:0.3em;border-top:1px solid var(--border);
}
.cover-desc{font-size:0.84em;line-height:1.55;color:var(--text-muted);}
.mat{width:100%;border-collapse:collapse;font-size:0.85em;}
.mat th,.mat td{
padding:0.5em 0.55em;border-bottom:1px solid var(--border);text-align:left;
}
.mat th{
font-family:'DM Mono',monospace;font-size:0.72em;letter-spacing:0.08em;
text-transform:uppercase;color:var(--text-muted);font-weight:500;
border-bottom:2px solid var(--border);
}
.mat td.has{color:var(--yes);font-weight:500;font-family:'DM Mono',monospace;}
.mat td.no{color:var(--border);font-family:'DM Mono',monospace;}
.mat td.num{font-family:'DM Mono',monospace;}
.mat td.dec{color:var(--no);font-weight:500;font-family:'DM Mono',monospace;}
.mat td.inc{color:var(--yes);font-weight:500;font-family:'DM Mono',monospace;}
.mat td.mixed{
color:var(--text);font-weight:500;font-family:'DM Mono',monospace;
}
.mat td.mixed .pos{color:var(--yes);}
.mat td.mixed .neg{color:var(--no);}
.mat td.neutral{color:var(--text);font-family:'Noto Serif TC',serif;font-size:0.95em;}
.mat td.muted{color:var(--text-muted);font-family:'DM Mono',monospace;}
.bar-row{margin-bottom:0.55em;}
.bar-row:last-child{margin-bottom:0;}
.bar-head{
display:flex;justify-content:space-between;margin-bottom:0.2em;
font-size:0.84em;font-family:'DM Mono',monospace;
}
.bar-track{
background:var(--bar-bg);border-radius:2px;
height:0.5em;width:100%;overflow:hidden;
}
.bar-fill{height:100%;background:var(--bar);border-radius:2px;}
.bar-group-lbl{
font-size:0.7em;font-family:'DM Mono',monospace;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.08em;margin:0.4em 0 0.25em;
}
.bar-group-lbl:first-child{margin-top:0;}
.seg-table{width:100%;border-collapse:collapse;font-size:0.85em;}
.seg-table th,.seg-table td{
padding:0.55em 0.55em;border-bottom:1px solid var(--border);text-align:left;
}
.seg-table th{
font-family:'DM Mono',monospace;font-size:0.72em;letter-spacing:0.08em;
text-transform:uppercase;color:var(--text-muted);font-weight:500;
border-bottom:2px solid var(--border);
}
.rate-bar{display:inline-flex;align-items:center;gap:2px;}
.rate-bar .seg{
width:0.7em;height:1.1em;background:var(--surface-2);
border-radius:1px;display:inline-block;
}
.rate-bar .seg.on{background:var(--cell,var(--bar));}
.rate-bar .seg.mid{background:var(--cell,var(--bar));opacity:0.45;}
.seg-stack-lbl{font-size:0.78em;font-family:'DM Mono',monospace;margin-bottom:0.15em;}
.seg-stack-row{display:flex;align-items:center;gap:0.4em;margin-bottom:0.15em;}
.seg-stack-row .stack-name{font-size:0.7em;color:var(--text-muted);width:4.6em;}
.yn-row{
display:grid;grid-template-columns:1fr 5em 5em;
align-items:center;
padding:0.42em 0;border-bottom:1px solid var(--border);font-size:0.88em;
}
.yn-row:last-child{border-bottom:none;}
.yn-row span{font-family:inherit;}
.yn-row .head{
font-family:'DM Mono',monospace;font-size:0.7em;
text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);
text-align:center;
}
.yes{color:var(--yes);font-weight:600;font-family:'DM Mono',monospace;text-align:center;}
.no{color:var(--border);font-family:'DM Mono',monospace;text-align:center;}
.yn-split{display:flex;gap:0.5em;}
.yn-split-col{flex:1;display:flex;flex-direction:column;}
.yn-split .yn-row{grid-template-columns:1fr 2em;}
.pick-list{display:flex;flex-direction:column;}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3em 0.8em;}
.pick-item{
display:flex;gap:0.5em;padding:0.45em 0;
border-bottom:1px solid var(--border);font-size:0.9em;align-items:baseline;
}
.pick-grid .pick-item{border-bottom:none;}
.pick-list .pick-item:last-child{border-bottom:none;}
.pick-arrow{color:var(--text-muted);font-family:'DM Mono',monospace;flex-shrink:0;}
.pick-arrow.num{font-weight:700;color:var(--text);}
.tier-row{
display:flex;align-items:center;gap:0.7em;
padding:0.5em 0;border-bottom:1px solid var(--border);
}
.tier-row:last-child{border-bottom:none;}
.tier-badge{
font-family:'DM Mono',monospace;font-size:0.65em;font-weight:500;
letter-spacing:0.06em;text-transform:uppercase;
padding:0.25em 0.6em;border-radius:2px;white-space:nowrap;
}
.tier-text{font-size:0.85em;}
.tier-req{
font-family:'DM Mono',monospace;font-size:0.7em;color:var(--text-muted);
margin-left:auto;white-space:nowrap;
}
.tier-strip{display:grid;gap:0.4em;}
.tier-cell{
display:flex;flex-direction:column;align-items:center;text-align:center;
border:1px solid var(--border);border-radius:2px;
padding:0.4em 0.3em;gap:0.25em;
}
.tier-cell-desc{font-size:0.7em;color:var(--text-muted);line-height:1.3;}
.stat-strip{display:flex;gap:0.5em;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5em;}
.stat-vert{display:flex;flex-direction:column;gap:0.4em;}
.stat-vert .stat-row{
display:flex;align-items:baseline;gap:0.7em;
border-bottom:1px solid var(--border);padding-bottom:0.35em;
}
.stat-vert .stat-row:last-child{border-bottom:none;}
.stat-vert .stat-val{min-width:2.5em;text-align:right;}
.stat-cell{
flex:1;background:var(--surface);padding:0.7em 0.55em;
display:flex;flex-direction:column;gap:0.25em;
border:1px solid var(--border);
}
.stat-val{
font-family:'DM Mono',monospace;font-size:1.55em;font-weight:500;line-height:1;
}
.stat-lbl{
font-family:'DM Mono',monospace;font-size:0.6em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.08em;
}
.kpi-strip{display:flex;gap:0.5em;}
.kpi-stack{display:flex;flex-direction:column;gap:0.5em;}
.kpi-card{
flex:1;background:var(--surface);padding:0.85em 0.95em;
display:flex;flex-direction:column;gap:0.3em;
border:1px solid var(--border);
}
.kpi-num{
font-family:'DM Mono',monospace;font-size:2.1em;font-weight:500;line-height:1;
}
.kpi-delta{font-family:'DM Mono',monospace;font-size:0.7em;}
.kpi-delta.up{color:var(--yes);}
.kpi-delta.dn{color:var(--no);}
.kpi-lbl{font-size:0.78em;color:var(--text-muted);}
.kpi-inline-list{display:flex;flex-direction:column;gap:0.6em;}
.kpi-inline-row{
display:flex;align-items:center;gap:0.7em;
border:1px solid var(--border);border-radius:2px;padding:0.5em 0.7em;
}
.kpi-inline-num{
font-size:1.8em;font-weight:700;line-height:1;
font-family:'DM Mono',monospace;
}
.kpi-inline-body{display:flex;flex-direction:column;flex:1;}
.quote-list{display:flex;flex-direction:column;gap:0.5em;}
.quote-list.tight{gap:0;}
.quote-box{
border-left:3px solid var(--qc,var(--border));
background:var(--qbg,var(--surface));
padding:0.6em 0.8em;font-size:0.82em;line-height:1.5;
}
.quote-box.ok{--qc:var(--ok);--qbg:var(--ok-bg);}
.quote-box.warn{--qc:var(--warn);--qbg:var(--warn-bg);}
.quote-box.danger{--qc:var(--danger);--qbg:var(--danger-bg);}
.quote-attr{
font-family:'DM Mono',monospace;font-size:0.72em;color:var(--text-muted);
margin-top:0.4em;
}
.quote-list.tight .quote-box{border-radius:0;border-bottom:none;}
.quote-list.tight .quote-box:first-child{border-radius:2px 2px 0 0;}
.quote-list.tight .quote-box:last-child{border-radius:0 0 2px 2px;border-bottom:initial;}
.radar-wrap{
display:flex;flex:1;min-height:0;min-width:0;gap:0.6em;
}
[data-orient="portrait"] .radar-wrap{flex-direction:column;}
[data-orient="landscape"] .radar-wrap{
flex-direction:row;align-items:stretch;justify-content:center;gap:1.5em;
}
.radar-svg-box{
flex:1;min-height:0;min-width:0;width:100%;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.radar-svg-box svg{max-width:100%;max-height:100%;}
[data-orient="landscape"] .radar-svg-box{
flex:0 0 auto;height:100%;width:auto;
aspect-ratio:620/530;max-width:58%;overflow:hidden;
}
[data-orient="landscape"] .radar-svg-box svg{
width:100%;height:100%;max-width:none;max-height:none;
}
.radar-legend-box{display:flex;align-items:center;}
.radar-legend{display:flex;flex-direction:column;gap:0.7em;}
.radar-legend-row{display:flex;align-items:center;gap:0.6em;font-size:0.82em;}
.radar-swatch{width:1.2em;height:0.18em;flex-shrink:0;}
.radar-pair{display:flex;gap:0.5em;flex:1;width:100%;}
.radar-pair-col{
flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;
}
.radar-pair-name{
font-size:0.78em;font-family:'DM Mono',monospace;font-weight:700;
margin-bottom:0.2em;
}
/* plot patterns (format v2) */
.plot-wrap{display:flex;flex:1;min-height:0;min-width:0;gap:0.6em;}
[data-orient="portrait"] .plot-wrap{flex-direction:column;}
[data-orient="landscape"] .plot-wrap{flex-direction:row;align-items:stretch;justify-content:center;gap:1.5em;}
.plot-svg-box{flex:1;min-height:0;min-width:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.plot-svg-box svg{max-width:100%;max-height:100%;}
[data-orient="landscape"] .plot-svg-box{flex:0 0 auto;height:100%;width:auto;aspect-ratio:620/530;max-width:58%;overflow:hidden;}
[data-orient="landscape"] .plot-svg-box svg{width:100%;height:100%;max-width:none;max-height:none;}
.plot-legend{display:flex;flex-direction:column;gap:0.4em;align-items:flex-start;}
.brand-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:0.55em;flex:1;min-height:0;
}
.brand-grid.cols-1{grid-template-columns:1fr;}
.brand-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.brand-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.brand-card{
border:1px solid var(--border);background:var(--surface);
padding:0.7em 0.65em;
display:flex;flex-direction:column;gap:0.4em;
position:relative;overflow:hidden;
}
.brand-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--card-accent,var(--accent));
}
.brand-card.row{
flex-direction:row;align-items:center;padding:0.5em 0.7em;gap:0.7em;
}
.brand-meta{
font-family:'DM Mono',monospace;font-size:0.55em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.1em;
}
.brand-name{font-weight:700;font-size:1.1em;line-height:1.1;}
.brand-sub{
font-size:0.7em;color:var(--text-muted);font-family:'DM Mono',monospace;
}
.brand-foot{
font-size:0.7em;line-height:1.45;margin-top:auto;
padding-top:0.4em;border-top:1px solid var(--border);
font-family:'DM Mono',monospace;color:var(--text-muted);
}
.brand-card.row .brand-body{display:flex;flex-direction:column;flex:1;}
.brand-card.row .brand-foot{
border:none;padding:0;margin:0;text-align:right;flex-shrink:0;
}
.notes-stack{display:flex;flex-direction:column;gap:0.45em;}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4em;}
.notes-stack .note-inline,.notes-grid .note-inline{
border:1px solid var(--border);border-radius:2px;
padding:0.4em 0.6em;
font-family:'DM Mono',monospace;font-size:0.66em;
color:var(--text-muted);line-height:1.5;
}
.note-num{
font-family:'DM Mono',monospace;font-weight:700;color:var(--text);
margin-right:0.4em;
}
.fallback-pre{
background:var(--surface);border:1px solid var(--border);
padding:0.6em;font-size:0.7em;font-family:'DM Mono',monospace;
white-space:pre-wrap;overflow:auto;flex:1;
color:var(--text-muted);
}
.load-screen{
position:absolute;top:var(--top-h);left:0;right:0;bottom:0;
overflow:auto;
display:flex;flex-direction:column;align-items:center;
padding:1.4em 1em 3em;
background:var(--bg-outer);
}
.load-shell{
width:100%;max-width:34em;
display:flex;flex-direction:column;gap:1.1em;
}
.load-hero{display:flex;flex-direction:column;gap:0.4em;text-align:center;margin-bottom:0.4em;}
.load-tag{
font-family:'DM Mono',monospace;font-size:0.78em;color:var(--text-muted);
text-transform:uppercase;letter-spacing:0.14em;
}
.load-title{
font-family:'Playfair Display',serif;font-size:2em;font-weight:700;
line-height:1.1;letter-spacing:-0.01em;
}
.load-sub{
font-family:'DM Mono',monospace;font-size:0.78em;color:var(--text-muted);
}
.drop-zone{
border:2px dashed var(--border);border-radius:4px;
padding:1.6em 1em;
display:flex;flex-direction:column;align-items:center;gap:0.5em;
cursor:pointer;
background:var(--bg);
transition:border-color 0.2s,background 0.2s;
}
.drop-zone:hover,.drop-zone.drag-on{border-color:var(--accent);background:var(--accent-bg);}
.drop-icon{font-size:1.6em;color:var(--text-muted);}
.drop-text{font-family:'DM Mono',monospace;font-size:0.86em;color:var(--text-muted);}
.drop-text strong{color:var(--text);font-weight:600;}
.divider{
display:flex;align-items:center;gap:0.6em;
color:var(--text-muted);
font-family:'DM Mono',monospace;font-size:0.7em;
text-transform:uppercase;letter-spacing:0.12em;
}
.divider::before,.divider::after{
content:'';flex:1;height:1px;background:var(--border);
}
.paste-area{
width:100%;min-height:8em;
background:var(--bg);border:1px solid var(--border);border-radius:3px;
padding:0.7em 0.8em;
font-family:'DM Mono',monospace;font-size:0.78em;
color:var(--text);resize:vertical;
}
.paste-area:focus{outline:1px solid var(--accent);outline-offset:-1px;}
.btn-row{display:flex;gap:0.5em;flex-wrap:wrap;}
.btn{
flex:1;
font-family:'DM Mono',monospace;font-size:0.85em;
padding:0.7em 1em;border-radius:3px;cursor:pointer;
text-transform:uppercase;letter-spacing:0.08em;
border:1px solid var(--border);
background:var(--bg);color:var(--text);
transition:background 0.15s,border-color 0.15s;
}
.btn:hover{background:var(--surface);}
.btn.primary{
background:var(--text);color:var(--bg);border-color:var(--text);
}
.btn.primary:hover{background:var(--text);opacity:0.85;}
.btn.ghost{
background:transparent;
}
.error-box{
border:1px solid var(--danger);background:var(--danger-bg);color:var(--danger);
border-radius:3px;padding:0.7em 0.9em;
font-family:'DM Mono',monospace;font-size:0.78em;line-height:1.5;
white-space:pre-wrap;
}
.help-block{
border:1px solid var(--border);border-radius:3px;
background:var(--bg);
padding:0;
}
.help-block summary{
list-style:none;cursor:pointer;
padding:0.7em 0.9em;
font-family:'DM Mono',monospace;font-size:0.78em;
color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;
display:flex;justify-content:space-between;align-items:center;
}
.help-block summary::-webkit-details-marker{display:none;}
.help-block[open] summary{border-bottom:1px solid var(--border);color:var(--text);}
.help-body{padding:0.9em;display:flex;flex-direction:column;gap:0.7em;}
.help-body p{font-size:0.84em;line-height:1.5;color:var(--text-muted);}
.help-body code{
font-family:'DM Mono',monospace;font-size:0.78em;
background:var(--surface);padding:0.05em 0.3em;border-radius:2px;color:var(--text);
}
.help-body pre{
font-family:'DM Mono',monospace;font-size:0.7em;line-height:1.5;
background:var(--surface);border:1px solid var(--border);border-radius:2px;
padding:0.7em 0.8em;overflow-x:auto;color:var(--text);
}
.help-table{
width:100%;border-collapse:collapse;font-size:0.78em;
font-family:'DM Mono',monospace;
}
.help-table th,.help-table td{
padding:0.4em 0.5em;border-bottom:1px solid var(--border);text-align:left;
}
.help-table th{
font-size:0.7em;text-transform:uppercase;color:var(--text-muted);
letter-spacing:0.08em;font-weight:500;
}
.privacy-note{
margin-top:1.4em;
font-family:'DM Mono',monospace;font-size:0.66em;
color:var(--text-muted);line-height:1.6;
text-align:center;
max-width:34em;
}
.privacy-note strong{color:var(--text);font-weight:600;}
.privacy-note a{color:var(--text-muted);text-decoration:underline;}
.app-version{
margin-top:0.6em;
font-family:'DM Mono',monospace;font-size:0.62em;
color:var(--dot-off);text-align:center;
}
.app-version a{color:var(--accent);text-decoration:underline;cursor:pointer;}
.app-version a:hover{text-decoration:none;}
.viewer-hidden{display:none!important;}
[hidden]{display:none!important;}
.update-banner{
position:fixed;bottom:0;left:0;right:0;z-index:9999;
background:var(--bg);border-top:1px solid var(--border);
display:flex;align-items:center;justify-content:center;gap:0.8em;
padding:0.6em 1em;
font-family:'DM Mono',monospace;font-size:12px;color:var(--text-muted);
}
.update-hidden{display:none;}
.update-banner button{
background:var(--text);color:var(--bg);
border:none;cursor:pointer;border-radius:3px;
font-family:'DM Mono',monospace;font-size:12px;
padding:0.3em 0.8em;
}
.toc-face{cursor:default;}
.toc-list{list-style:disc;padding-left:1.3em;margin:0;display:flex;flex-direction:column;gap:0.5em;overflow-y:auto;}
.toc-list.toc-2col{columns:2;display:block;column-gap:1.2em;}
.toc-list.toc-2col li{break-inside:avoid;margin-bottom:0.45em;}
.toc-link{cursor:pointer;font-family:'Playfair Display',serif;font-size:1.05em;color:var(--accent);text-decoration:underline;text-underline-offset:0.15em;}
.toc-link:hover,.toc-link:focus{color:var(--text);outline:none;}
.toc-link-tag{font-family:'DM Mono',monospace;font-size:0.65em;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-right:0.4em;vertical-align:middle;}
.toc-set-heading{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05em;padding-bottom:0.35em;margin-bottom:0.2em;border-bottom:1px solid var(--border);flex-shrink:0;}
.chk-list{display:flex;flex-direction:column;gap:0.3em;margin-top:0.45em;}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3em 0.8em;margin-top:0.45em;}
.chk-item{
display:flex;align-items:flex-start;gap:0.55em;
padding:0.4em 0.5em;border:1px solid var(--border);border-radius:2px;
cursor:pointer;
}
.chk-item:hover,.chk-item:focus{background:var(--surface);outline:none;}
.chk-icon{flex-shrink:0;font-size:1em;line-height:1;}
.chk-icon .fa-square,
.chk-icon .fa-square-check,
.chk-icon .fa-square-xmark{display:none;}
.chk-item[data-status="empty"]         .chk-icon .fa-square      {display:inline;}
.chk-item[data-status="check"]         .chk-icon .fa-square-check{display:inline;color:var(--accent);}
.chk-item[data-status="strikethrough"] .chk-icon .fa-square-xmark{display:inline;color:var(--text-muted);}
.chk-item[data-status="strikethrough"] .chk-text{text-decoration:line-through;color:var(--text-muted);}
.chk-text{font-size:0.87em;line-height:1.4;flex:1;}
.chk-num{font-family:'DM Mono',monospace;font-size:0.7em;color:var(--text-muted);margin-right:0.2em;}
/* comments */
.comment-bar{
display:flex;flex-direction:column;gap:0.25em;padding:0.2em;
align-items:center;align-self:center;
max-height:min(var(--ah),calc(var(--aw)*16/9));overflow-y:auto;
}
.comment-bar:empty{display:none;}
[data-orient="landscape"] .card{flex-direction:column;}
[data-orient="landscape"] .comment-bar{
flex-direction:row;max-height:none;
max-width:min(var(--aw),calc(var(--ah)*16/9));
overflow-x:auto;overflow-y:hidden;
}
.cmt-item{position:relative;flex-shrink:0;}
.cmt-btn{
width:2em;height:2em;border-radius:50%;
border:1px solid var(--border);background:var(--bg);
color:var(--text-muted);cursor:pointer;font-size:0.7em;
display:flex;align-items:center;justify-content:center;padding:0;
}
.cmt-btn:hover{color:var(--accent);border-color:var(--accent);}
.cmt-popover{
position:fixed;z-index:200;
background:var(--bg);border:1px solid var(--border);
border-radius:4px;padding:0.5em;
min-width:14em;max-width:22em;
box-shadow:0 2px 8px var(--shadow);
}
.cmt-view{
font-family:'DM Mono',monospace;font-size:0.75em;
line-height:1.5;white-space:pre-wrap;word-break:break-word;
margin-bottom:0.4em;color:var(--text);
}
.cmt-ta{
width:100%;font-family:'DM Mono',monospace;font-size:0.75em;
line-height:1.5;border:1px solid var(--border);
background:transparent;color:var(--text);
padding:0.3em;resize:vertical;min-height:3em;
box-sizing:border-box;border-radius:2px;outline:none;
margin-bottom:0.4em;
}
.cmt-actions{display:flex;gap:0.3em;justify-content:flex-end;}
.cmt-actions button{
border:none;background:none;color:var(--text-muted);
cursor:pointer;padding:0.2em;font-size:0.85em;
}
.cmt-actions button:hover{color:var(--accent);}
/* format v3 layouts */
.full-face{padding:0.6em;}
.full-face .card-face-body{flex:1;min-height:0;display:flex;flex-direction:column;}
.dual-layout{display:grid;grid-template-columns:1fr 1fr;gap:0.6em;flex:1;min-height:0;}
[data-orient="portrait"] .dual-layout{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
.dual-layout>div{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
/* v3 low-level: text */
.text-body{display:flex;flex-direction:column;gap:0.6em;margin-top:0.45em;}
.text-body p{font-size:0.88em;line-height:1.6;margin:0;color:var(--text);}
/* v3 low-level: image */
.image-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:0.45em;}
.image-body img{max-width:100%;max-height:100%;border-radius:2px;}
.image-body img.fit-cover{object-fit:cover;width:100%;height:100%;}
.image-body img.fit-contain{object-fit:contain;}
.image-caption{font-family:'DM Mono',monospace;font-size:0.66em;color:var(--text-muted);text-align:center;margin-top:0.4em;}
/* v3 low-level: embed */
.embed-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:0.45em;}
.embed-body iframe,.embed-body video,.embed-body audio,.embed-body canvas{max-width:100%;max-height:100%;border:none;border-radius:2px;}
/* v3 low-level: video */
.media-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:0.45em;}
.media-body video{max-width:100%;max-height:100%;border-radius:2px;}
/* v3 low-level: audio player */
.audio-player{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:0.4em;margin-top:0.45em;padding:0.3em 0.6em;overflow:hidden;}
.audio-cover{width:min(10em,50%);aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px var(--shadow);}
.audio-cover img{width:100%;height:100%;object-fit:cover;}
.audio-cover-ph{font-size:3em;opacity:0.35;color:var(--text-muted);}
.audio-info{text-align:center;width:100%;overflow:hidden;}
.audio-info-title{font-family:'Playfair Display',serif;font-size:0.85em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audio-info-artist{font-family:'DM Mono',monospace;font-size:0.55em;color:var(--text-muted);margin-top:0.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audio-ctrls{display:flex;align-items:center;gap:0.3em;}
.audio-ctrls button{width:2em;height:2em;border-radius:50%;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:0.7em;display:flex;align-items:center;justify-content:center;padding:0;}
.audio-ctrls button:hover{background:var(--surface);}
.audio-ctrls .audio-play{width:2.4em;height:2.4em;background:var(--text);color:var(--bg);font-size:0.8em;}
.audio-ctrls .audio-play:hover{opacity:0.85;}
.audio-time-row{display:flex;align-items:center;gap:0.4em;width:100%;font-size:0.5em;font-family:'DM Mono',monospace;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.audio-seek{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
.audio-seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text);cursor:pointer;}
.audio-seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:none;cursor:pointer;}
.audio-vol-row{display:flex;align-items:center;gap:0.3em;width:60%;max-width:10em;font-size:0.55em;color:var(--text-muted);}
.audio-vol{flex:1;height:2px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
.audio-vol::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--text);cursor:pointer;}
.audio-vol::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--text);border:none;cursor:pointer;}
/* audio lyric viewer */
.audio-media-area{position:relative;width:min(10em,50%);aspect-ratio:1;flex-shrink:0;}
.audio-player.has-lyric .audio-media-area{width:100%;aspect-ratio:auto;flex:1;min-height:0;}
.audio-player.has-lyric .audio-cover{width:100%;height:100%;border-radius:6px;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--shadow);}
.audio-lyric{width:100%;height:100%;overflow-y:auto;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(transparent,black 12%,black 88%,transparent);scrollbar-width:none;}
.audio-lyric::-webkit-scrollbar{display:none;}
.audio-lyric-lines{padding:1.5em 0;}
.lyric-line{text-align:center;padding:0.12em 0.3em;font-size:0.6em;line-height:1.7;color:var(--text-muted);transition:color 0.25s,font-weight 0.25s;font-family:'DM Mono',monospace;}
.lyric-line.lyric-active{color:var(--text);font-weight:600;}
.lyric-word{color:var(--text-muted);transition:color 0.15s;}
.lyric-word.lyric-word-active{color:var(--text);}
.audio-toggle{position:absolute;top:0.2em;right:0.2em;width:1.6em;height:1.6em;border-radius:50%;border:none;background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:0.55em;display:flex;align-items:center;justify-content:center;padding:0;opacity:0.7;z-index:1;}
.audio-toggle:hover{opacity:1;background:var(--border);}
/* Save dialog */
.save-dialog{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);}
.save-dialog-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:1.5em 2em;min-width:300px;max-width:90vw;box-shadow:0 4px 24px var(--shadow);}
.save-dialog-title{font-family:'Playfair Display',serif;font-size:1.1em;font-weight:700;margin-bottom:0.8em;}
.save-dialog-row{margin:0.5em 0;font-family:'DM Mono',monospace;font-size:0.85em;display:flex;gap:1em;align-items:center;}
.save-dialog-row label{display:flex;align-items:center;gap:0.3em;cursor:pointer;}
.save-dialog-row label.fs-disabled{opacity:0.45;cursor:not-allowed;}
.save-dialog-warn{margin:0.6em 0;padding:0.5em 0.7em;font-family:'DM Mono',monospace;font-size:0.75em;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger);border-radius:4px;}
.save-dialog-btns{margin-top:1.2em;display:flex;gap:0.6em;justify-content:flex-end;}
.save-dialog-progress{margin:0.8em 0;}
.save-progress-text{font-family:'DM Mono',monospace;font-size:0.75em;color:var(--text-muted);margin-bottom:0.4em;}
.save-progress-track{height:6px;background:var(--bar-bg);border-radius:3px;overflow:hidden;}
.save-progress-fill{height:100%;background:var(--accent);border-radius:3px;width:0;transition:width 0.3s;}
.extract-progress{
padding:0.8em 1.2em;background:var(--surface);border-bottom:1px solid var(--border);
}
.extract-progress.update-hidden{display:none;}
/* Edit mode */
.edit-active{background:var(--accent-bg)!important;border-color:var(--accent)!important;color:var(--accent)!important;}
.edit-selected{outline:2px solid var(--accent);outline-offset:-2px;}
.edit-overlay{
position:absolute;inset:0;z-index:60;
display:none;flex-direction:row;align-items:flex-start;justify-content:flex-end;
padding:0.4em;gap:0.3em;pointer-events:none;
}
.edit-mode .edit-overlay{display:flex;pointer-events:all;}
.edit-overlay button{
background:var(--bg);border:1px solid var(--border);
color:var(--text);border-radius:3px;padding:0.3em 0.55em;
cursor:pointer;font-size:12px;font-family:'DM Mono',monospace;
opacity:0.85;
}
.edit-overlay button:hover{background:var(--surface);opacity:1;}
.edit-overlay button.edit-del{color:var(--no);}
.edit-overlay .edit-add-card-btn{
position:absolute;bottom:0.4em;left:50%;transform:translateX(-50%);
font-size:11px;opacity:0.7;
}
.edit-overlay .edit-add-card-btn:hover{opacity:1;}
/* Edit panel (slide-in from right) */
.edit-panel{
position:fixed;top:var(--top-h);right:0;bottom:0;
width:min(360px,90vw);
background:var(--bg);border-left:1px solid var(--border);
z-index:500;display:flex;flex-direction:column;
transform:translateX(0);transition:transform 0.3s;
overflow:hidden;
}
.edit-panel-hidden{transform:translateX(100%);}
.edit-panel-header{
display:flex;align-items:center;justify-content:space-between;
padding:0.7em 0.9em;border-bottom:1px solid var(--border);
font-family:'DM Mono',monospace;font-size:0.78em;
}
.edit-panel-header button{
background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1em;padding:0.2em;
}
.edit-panel-body{flex:1;overflow-y:auto;padding:0.9em;}
.edit-panel-footer{
padding:0.7em 0.9em;border-top:1px solid var(--border);
display:flex;gap:0.5em;
}
.edit-panel-footer .btn{flex:none;padding:0.5em 1.2em;font-size:0.8em;}
/* Edit panel form fields */
.ep-group{margin-bottom:0.8em;}
.ep-label{
display:block;font-family:'DM Mono',monospace;font-size:0.7em;
color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;
margin-bottom:0.25em;
}
.ep-input,.ep-select,.ep-textarea{
width:100%;box-sizing:border-box;
background:var(--bg);border:1px solid var(--border);border-radius:3px;
padding:0.45em 0.55em;
font-family:'DM Mono',monospace;font-size:0.82em;color:var(--text);
}
.ep-textarea{resize:vertical;min-height:3em;}
.ep-select{cursor:pointer;}
.ep-input:focus,.ep-select:focus,.ep-textarea:focus{outline:1px solid var(--accent);outline-offset:-1px;}
.ep-static{font-family:'DM Mono',monospace;font-size:0.82em;color:var(--text-muted);padding:0.45em 0;}
.ep-section-title{
font-family:'DM Mono',monospace;font-size:0.7em;font-weight:500;
text-transform:uppercase;letter-spacing:0.08em;color:var(--text);
margin:0.8em 0 0.4em;padding-bottom:0.3em;border-bottom:1px solid var(--border);
}
.ep-list-item{
display:flex;gap:0.4em;align-items:center;margin-bottom:0.4em;
}
.ep-list-item .ep-input{flex:1;}
.ep-list-btn{
background:none;border:1px solid var(--border);color:var(--text-muted);
cursor:pointer;font-family:'DM Mono',monospace;font-size:0.75em;
padding:0.3em 0.6em;border-radius:3px;
}
.ep-list-btn:hover{background:var(--surface);color:var(--text);}
.ep-src-row{display:flex;gap:0.4em;align-items:center;}
.ep-src-row .ep-input{flex:1;min-width:0;}
.ep-pick-btn{background:none;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;padding:0.35em 0.5em;border-radius:3px;flex-shrink:0;}
.ep-pick-btn:hover{background:var(--surface);color:var(--text);}
.ep-list-btn.remove{color:var(--no);}
.ep-hint{font-size:0.72em;color:var(--text-muted);margin:0.3em 0;font-style:italic;}
.ep-section{margin-bottom:0.4em;}
/* Dataset table */
.ds-table{width:100%;border-collapse:collapse;font-size:0.78em;font-family:'DM Mono',monospace;margin-bottom:0.5em;}
.ds-table th,.ds-table td{padding:0.25em 0.3em;border:1px solid var(--border);vertical-align:middle;}
.ds-table th{background:var(--surface);font-size:0.72em;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;}
.ds-table .ep-input,.ds-table .ep-select{border:none;padding:0.2em;font-size:0.9em;width:100%;background:transparent;}
.ds-table .ds-del-row{padding:0.1em 0.4em;font-size:0.8em;}
.ds-table .ds-del-col{padding:0.1em 0.3em;font-size:0.7em;display:block;margin-top:0.15em;}
.ds-table .ds-rlabel{border:none;padding:0.2em;font-size:0.9em;width:calc(100% - 2em);background:transparent;}
/* Multi-series editor */
.ds-ms-wrap{margin-bottom:0.5em;}
.ds-ms-series{margin-bottom:0.7em;padding:0.5em;border:1px solid var(--border);border-radius:3px;}
.ds-ms-hdr{display:flex;gap:0.4em;align-items:center;margin-bottom:0.3em;}
.ds-ms-hdr .ep-input{flex:1;}
.ds-ms-vals{width:100%;box-sizing:border-box;font-family:'DM Mono',monospace;font-size:0.82em;resize:vertical;}
.ds-ms-labels{width:100%;box-sizing:border-box;font-family:'DM Mono',monospace;font-size:0.82em;resize:vertical;}
/* Preview */
.ep-preview-toggle{
font-family:'DM Mono',monospace;font-size:0.75em;
color:var(--text-muted);cursor:pointer;padding:0.4em 0;
}
.ep-preview-toggle:hover{color:var(--text);}
.ep-preview-frame{
border:1px solid var(--border);border-radius:4px;
overflow:hidden;max-height:50vh;
display:flex;align-items:flex-start;justify-content:center;
padding:0.5em;background:var(--surface);
}
.ep-preview-frame .card{
transform:scale(0.45);transform-origin:top center;
pointer-events:none;width:var(--card-w);height:var(--card-h);
}
.ep-preview-frame .card-inner{width:100%;height:100%;}
.ep-preview-frame .card-face{width:100%;height:100%;box-sizing:border-box;}
.ep-preview-frame.hidden{display:none;}
/* Dataset provider panel */
.dataset-provider{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(480px,92vw);max-height:80vh;
background:var(--bg);border:1px solid var(--border);border-radius:6px;
z-index:800;display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 8px 32px var(--shadow);
}
.dp-backdrop{
position:fixed;inset:0;z-index:799;
background:rgba(0,0,0,0.4);
}
.dp-header{
display:flex;align-items:center;justify-content:space-between;
padding:0.7em 0.9em;border-bottom:1px solid var(--border);
font-family:'DM Mono',monospace;font-size:0.78em;font-weight:bold;
}
.dp-header button{
background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1em;padding:0.2em;
}
.dp-body{flex:1;overflow-y:auto;padding:0.9em;}
.dp-footer{
padding:0.7em 0.9em;border-top:1px solid var(--border);display:flex;gap:0.5em;
}
.dp-footer .btn{flex:none;padding:0.5em 1.2em;font-size:0.8em;}
.dataset-provider.hidden,.dp-backdrop.hidden{display:none;}
/* Dataset provider tabs */
.dp-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:0.7em;}
.dp-tab{
flex:1;padding:0.45em 0;background:none;border:none;
font-family:'DM Mono',monospace;font-size:0.78em;cursor:pointer;
border-bottom:2px solid transparent;color:var(--text-muted);
}
.dp-tab.active{border-bottom-color:var(--accent);color:var(--text);}
.dp-hint{font-size:0.75em;color:var(--text-muted);margin-bottom:0.5em;}
.dp-error{font-size:0.75em;color:var(--danger);margin-top:0.4em;}
.dp-error.hidden{display:none;}
#dpPasteArea{width:100%;box-sizing:border-box;font-family:'DM Mono',monospace;font-size:0.78em;resize:vertical;}
.dp-section.hidden{display:none;}
/* Pattern selector grid */
.pat-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4em;}
.pat-selector button{
background:var(--surface);border:1px solid var(--border);
color:var(--text);border-radius:3px;padding:0.5em 0.4em;
cursor:pointer;font-family:'DM Mono',monospace;font-size:0.72em;
text-align:center;
}
.pat-selector button:hover{background:var(--accent-bg);border-color:var(--accent);}
.pat-selector-section{
font-family:'DM Mono',monospace;font-size:0.6em;
text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);
grid-column:1/-1;padding:0.4em 0 0.2em;border-bottom:1px solid var(--border);
}
/* Save dirty indicator */
#saveBtn{position:relative;}
#saveBtn.dirty::after{
content:'';
position:absolute;top:0.15em;right:0.15em;
width:6px;height:6px;border-radius:50%;
background:var(--accent);
}
/* Unsaved bar */
.unsaved-bar{
position:fixed;bottom:0;left:0;right:0;z-index:900;
background:var(--accent-bg);border-top:1px solid var(--accent);
padding:0.5em 1em;display:flex;align-items:center;justify-content:center;gap:0.7em;
font-family:'DM Mono',monospace;font-size:0.8em;color:var(--text);
}
.unsaved-bar.hidden{display:none;}
.unsaved-bar button{
background:var(--text);color:var(--bg);
border:none;cursor:pointer;border-radius:3px;
font-family:'DM Mono',monospace;font-size:12px;
padding:0.3em 0.8em;
}
/* Edit mode: add-set button (fixed, bottom-right) */
.edit-add-set-wrap{
display:none;position:fixed;bottom:calc(env(safe-area-inset-bottom) + 3em);right:1em;z-index:160;
}
.edit-mode .edit-add-set-wrap{display:block;}
.edit-add-set-wrap button{
background:var(--bg);border:2px dashed var(--border);
color:var(--text-muted);border-radius:6px;padding:0.6em 1.2em;
cursor:pointer;font-family:'DM Mono',monospace;font-size:0.78em;
box-shadow:0 2px 8px var(--shadow);
}
.edit-add-set-wrap button:hover{border-color:var(--accent);color:var(--accent);}
/* Podcast mode: card face */
.podcast-body{display:flex;flex-direction:column;align-items:center;gap:0.5em;flex:1;min-height:0;margin-top:0.45em;}
.podcast-body .cover-desc{text-align:center;max-width:32em;}
.podcast-body .cover-stat{margin-top:0.3em;justify-content:center;}
.pod-placeholder{
font-family:'DM Mono',monospace;font-size:0.6em;color:var(--text-muted);
border:1px dashed var(--border);border-radius:6px;padding:0.6em 1em;
display:flex;align-items:center;gap:0.5em;
}
/* Podcast mode: floating player bar */
.pod-bar{
position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(env(safe-area-inset-bottom) + 0.4em);z-index:850;
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:0.5em 0.85em;display:flex;flex-direction:column;gap:0.35em;
font-family:'DM Mono',monospace;font-size:calc(15px*var(--pod-scale,1));color:var(--text);
box-shadow:0 2px 8px var(--shadow);width:min(96vw,46em);
}
.pod-bar.pod-hidden,.pod-restore.pod-hidden{display:none;}
.pod-caption{
font-size:0.93em;color:var(--text-muted);text-align:center;min-height:1.4em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pod-bar:not(.pod-cc) .pod-caption{display:none;}
.pod-chips{display:flex;gap:0.35em;overflow-x:auto;padding-bottom:0.1em;scrollbar-width:thin;}
.pod-chips:empty{display:none;}
.pod-chip{
flex-shrink:0;border:1px solid var(--border);background:var(--bg);color:var(--text-muted);
border-radius:0.8em;padding:0.25em 0.75em;cursor:pointer;
font-family:'DM Mono',monospace;font-size:0.84em;max-width:14em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pod-chip:hover{border-color:var(--accent);color:var(--accent);}
.pod-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.pod-chip[data-podclass="ads"]{opacity:0.6;}
.pod-chip[data-podclass="transition"],.pod-chip[data-podclass="bts"]{font-style:italic;}
.pod-ctrl-row{display:flex;align-items:center;gap:0.45em;}
.pod-btn{
background:var(--surface);border:1px solid var(--border);color:var(--text-muted);
cursor:pointer;width:2.2em;height:2.2em;flex-shrink:0;border-radius:50%;font-size:1em;padding:0;
display:flex;align-items:center;justify-content:center;
}
.pod-btn:hover{color:var(--accent);border-color:var(--accent);}
.pod-btn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);}
.pod-btn:disabled{opacity:0.3;pointer-events:none;}
.pod-btn.pod-play{background:var(--text);color:var(--bg);border-color:var(--text);}
.pod-btn.pod-play:hover{opacity:0.85;}
.pod-btn.pod-play:disabled{opacity:0.3;}
.pod-seek{
flex:1;min-width:4em;height:0.34em;-webkit-appearance:none;appearance:none;
background:var(--border);border-radius:0.2em;outline:none;cursor:pointer;
}
.pod-seek::-webkit-slider-thumb{-webkit-appearance:none;width:0.95em;height:0.95em;border-radius:50%;background:var(--text);cursor:pointer;}
.pod-seek::-moz-range-thumb{width:0.95em;height:0.95em;border-radius:50%;background:var(--text);border:none;cursor:pointer;}
.pod-time{font-size:0.8em;color:var(--text-muted);flex-shrink:0;}
.pod-restore{
position:fixed;right:1em;bottom:calc(env(safe-area-inset-bottom) + 0.4em);z-index:850;
width:2.8em;height:2.8em;border-radius:50%;
background:var(--surface);border:1px solid var(--border);color:var(--accent);
cursor:pointer;box-shadow:0 2px 8px var(--shadow);font-size:calc(16px*var(--pod-scale,1));
display:flex;align-items:center;justify-content:center;
}
.pod-restore:hover{border-color:var(--accent);}
/* collision rules */
body.pod-active .nav-down{bottom:calc(env(safe-area-inset-bottom) + 8.5em*var(--pod-scale,1));}
#unsavedBar:not(.hidden)~.pod-bar,
#unsavedBar:not(.hidden)~.pod-restore{bottom:calc(env(safe-area-inset-bottom) + 3em);}
@media (max-width:480px){
.pod-bar{font-size:calc(13px*var(--pod-scale,1));padding:0.45em 0.6em;}
.pod-ctrl-row{flex-wrap:wrap;justify-content:center;}
.pod-time{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Material 3 Expressive — shell components (appended so these override the
   legacy unlayered rules above by source order). Card-face content is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* shell sans font on chrome (card content keeps its own fonts) */
.box-top,.load-screen,.edit-panel,.save-dialog,.dataset-provider,.kbd-modal,
.m3-dialog,.pod-bar,.update-banner,.unsaved-bar,.nav-btn,.btn,.m3-btn,.icon-btn,
.seg button{font-family:var(--font);}

/* focus ring: keyboard only */
:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:2px;}
.box-top button:focus,.btn:focus,.nav-btn:focus{outline:none;}

/* ── state layers (hover 8% / press 10%) + ripple, on all shell controls ─── */
.m3-btn,.icon-btn,.m3-fab,.nav-btn,.chip,.seg button,.pod-btn,
.box-top button,.btn,.swatch,.cmt-btn{
position:relative;overflow:hidden;isolation:isolate;}
.m3-btn::before,.icon-btn::before,.m3-fab::before,.nav-btn::before,.chip::before,
.seg button::before,.pod-btn::before,.box-top button::before,.btn::before,
.cmt-btn::before{
content:"";position:absolute;inset:0;background:currentColor;opacity:0;
border-radius:inherit;pointer-events:none;z-index:-1;
transition:opacity var(--m-effects);}
.m3-btn:hover::before,.icon-btn:hover::before,.m3-fab:hover::before,
.nav-btn:hover::before,.chip:hover::before,.seg button:hover::before,
.pod-btn:hover::before,.box-top button:hover::before,.btn:hover::before,
.swatch:hover::before,.cmt-btn:hover::before{opacity:var(--state-hover);}
.m3-btn:active::before,.icon-btn:active::before,.m3-fab:active::before,
.nav-btn:active::before,.chip:active::before,.seg button:active::before,
.pod-btn:active::before,.box-top button:active::before,.btn:active::before,
.cmt-btn:active::before{opacity:var(--state-press);}
.box-top button:hover{background:none;}
.m3-rip{position:absolute;border-radius:50%;background:currentColor;opacity:.16;
pointer-events:none;transform:scale(0);z-index:-1;
animation:m3rip var(--m-spatial) forwards;}
@keyframes m3rip{to{transform:scale(1);opacity:0;}}
html[data-reduce="1"] .m3-rip{display:none;}

/* ── top app bar ─────────────────────────────────────────────────────────── */
.box-top{background:var(--md-sys-color-surface-container);border-bottom:none;}
.box-top button{border-radius:var(--r-full);min-width:36px;height:34px;
color:var(--md-sys-color-on-surface-variant);border:1px solid transparent;}
.box-top button.edit-active,.box-top button[aria-pressed="true"]{
background:var(--md-sys-color-secondary-container);
color:var(--md-sys-color-on-secondary-container);}
#deckTitle,#pageNum{color:var(--md-sys-color-on-surface-variant);}

/* ── nav chevrons (tonal, expressive shape-morph) ────────────────────────── */
.nav-btn{background:var(--md-sys-color-secondary-container);
color:var(--md-sys-color-on-secondary-container);border:none;
border-radius:var(--r-lg);opacity:0.9;
transition:border-radius var(--m-spatial-fast),opacity .2s;}
.nav-btn:hover{opacity:1;}
.nav-btn:active{border-radius:var(--r-full);}

/* ── M3 buttons ──────────────────────────────────────────────────────────── */
.m3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:none;cursor:pointer;height:40px;padding:0 24px;border-radius:var(--r-full);
font-weight:600;font-size:.9rem;transition:border-radius var(--m-spatial),box-shadow var(--m-effects);}
.m3-btn:active{border-radius:var(--r-md);}
.m3-btn.filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);}
.m3-btn.tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);}
.m3-btn.outlined{background:transparent;color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-outline);}
.m3-btn.text{background:transparent;color:var(--md-sys-color-primary);padding:0 12px;}
.icon-btn{width:40px;height:40px;border-radius:var(--r-full);border:none;cursor:pointer;
background:transparent;color:var(--md-sys-color-on-surface-variant);font-size:1rem;
display:inline-flex;align-items:center;justify-content:center;}
.m3-fab{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;
cursor:pointer;background:var(--md-sys-color-primary-container);
color:var(--md-sys-color-on-primary-container);box-shadow:var(--e3);
height:56px;min-width:56px;border-radius:var(--r-lg);font-weight:600;font-size:.95rem;
transition:border-radius var(--m-spatial);}
.m3-fab.ext{padding:0 22px;}
.m3-fab:active{border-radius:var(--r-xl);}

/* ── load screen ─────────────────────────────────────────────────────────── */
.btn{border-radius:var(--r-full);border:1px solid var(--md-sys-color-outline);
background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);}
.btn.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:transparent;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--md-sys-color-primary);}
.drop-zone{border-radius:var(--r-xl);border:2px dashed var(--md-sys-color-outline-variant);
background:var(--md-sys-color-surface-container-low);}
.paste-area{border-radius:var(--r-md);border:1px solid var(--md-sys-color-outline);
background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);
font-family:var(--font);}
.load-title{font-family:var(--font);}

/* ── existing modals / panels → M3 surfaces ──────────────────────────────── */
.kbd-modal-box,.save-dialog-box,.dataset-provider,.edit-panel{
background:var(--md-sys-color-surface-container-high);border:none;
border-radius:var(--r-xl);box-shadow:var(--e3);color:var(--md-sys-color-on-surface);}
.edit-panel{border-radius:var(--r-xl) 0 0 var(--r-xl);}
.update-banner,.unsaved-bar{background:var(--md-sys-color-surface-container-high);
color:var(--md-sys-color-on-surface);border-radius:var(--r-lg);box-shadow:var(--e2);}
.save-progress-fill,.bar-track .bar-fill,.bar-prog>i{background:var(--md-sys-color-primary);}

/* ── native M3 dialog (Theme control) ────────────────────────────────────── */
.m3-dialog{border:none;padding:0;border-radius:var(--r-xl);
background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);
box-shadow:var(--e3);max-width:min(560px,92vw);width:100%;}
.m3-dialog::backdrop{background:rgba(0,0,0,.45);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.m3-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px;}
.m3-dialog-body{padding:8px 20px;max-height:68vh;overflow:auto;display:flex;flex-direction:column;gap:18px;}
.m3-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 20px 18px;}
.m3-dialog-actions form{display:contents;}
.tf-block{display:flex;flex-direction:column;gap:10px;}
.tf-block>label{font-weight:600;}
.seed-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.seed-pick{position:relative;width:56px;height:56px;border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--e1);cursor:pointer;border:none;padding:0;}
.seed-pick input{position:absolute;inset:-20%;width:140%;height:140%;border:none;cursor:pointer;background:none;}
.seed-hex{font-weight:600;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);font-variant-numeric:tabular-nums;}
.presets{display:flex;gap:10px;flex-wrap:wrap;}
.swatch{width:36px;height:36px;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;
box-shadow:var(--e1);transition:transform var(--m-spatial-fast),border-color var(--m-effects);}
.swatch:hover{transform:scale(1.08);}
.swatch[aria-pressed=true]{border-color:var(--md-sys-color-on-surface);}
.ribbon{display:flex;gap:6px;}
.ribbon span{height:40px;flex:1;border-radius:var(--r-sm);}
.ribbon span:first-child{border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-lg);}
.ribbon span:last-child{border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);}
.range{display:flex;align-items:center;gap:14px;}
.range input[type=range]{flex:1;accent-color:var(--md-sys-color-primary);}
.range output,.range .ax{font-weight:600;color:var(--md-sys-color-on-surface-variant);
font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right;}

/* ── segmented controls ──────────────────────────────────────────────────── */
.seg{display:inline-flex;flex-wrap:wrap;background:var(--md-sys-color-surface-container-highest);
border-radius:var(--r-full);padding:4px;gap:4px;}
.seg button{border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:var(--r-full);font-weight:600;font-size:.875rem;
color:var(--md-sys-color-on-surface-variant);transition:background var(--m-effects),color var(--m-effects);}
.seg button[aria-pressed=true]{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);}
@media (max-width:599.98px){.seg button:not([aria-pressed=true]) span{display:none;}}

/* theme dialog conditional rows: visibility is toggled in JS (cb-theme.js
   syncControls) based on appearance + background type. */

/* ── glass background field + M3 Liquid G / G+ ───────────────────────────── */
.glass-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
.field-bg{display:none;position:fixed;inset:0;z-index:-1;
background:var(--md-sys-color-background);transition:background var(--m-effects);}
html[data-glass="1"] .field-bg{display:block;}
html[data-glass="1"] body,html[data-glass="1"] .box,html[data-glass="1"] .viewer-shell,
html[data-glass="1"] .load-screen{background:transparent;}
html[data-glass="1"] .box-top,html[data-glass="1"] .pod-bar,html[data-glass="1"] .edit-panel,
html[data-glass="1"] .m3-dialog,html[data-glass="1"] .kbd-modal-box,
html[data-glass="1"] .save-dialog-box,html[data-glass="1"] .dataset-provider,
html[data-glass="1"] .update-banner,html[data-glass="1"] .unsaved-bar,
html[data-glass="1"] .drop-zone{
background:color-mix(in srgb,var(--md-sys-color-surface-container) 56%,transparent);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent);}
html[data-plus="1"] .box-top,html[data-plus="1"] .pod-bar,html[data-plus="1"] .edit-panel,
html[data-plus="1"] .m3-dialog,html[data-plus="1"] .kbd-modal-box,
html[data-plus="1"] .save-dialog-box,html[data-plus="1"] .dataset-provider{
-webkit-backdrop-filter:var(--glass-blur) url(#glass-blur);
backdrop-filter:var(--glass-blur) url(#glass-blur);
box-shadow:inset 2px 2px 3px rgb(255 255 255/.42),inset -2px -2px 3px rgb(255 255 255/.42),
0 18px 46px -18px rgb(0 0 0/.5);}

/* ═══════════════════════════════════════════════════════════════════════════
   M3 Expressive — shell sub-surfaces (Bucket 1): edit panel, dataset provider,
   podcast controls, comments, modal internals, load-screen chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── form fields (edit panel, save dialog, dataset) → M3 filled field ─────── */
.ep-input,.ep-select,.ep-textarea{font-family:var(--font);font-size:0.82em;
border:none;border-bottom:2px solid var(--md-sys-color-outline);
background:var(--md-sys-color-surface-container-highest);
border-radius:var(--r-xs) var(--r-xs) 0 0;color:var(--md-sys-color-on-surface);
padding:10px 12px;transition:border-color var(--m-effects),background var(--m-effects);}
.ep-input:focus,.ep-select:focus,.ep-textarea:focus{outline:none;
border-bottom:2px solid var(--md-sys-color-primary);}
.ep-label{font-family:var(--font);color:var(--md-sys-color-primary);font-weight:600;
text-transform:none;letter-spacing:0;font-size:0.78em;}
.ep-section-title{font-family:var(--font);color:var(--md-sys-color-on-surface);font-weight:600;}
.ep-static{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);}
.ep-hint{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);}
.edit-panel-header{font-family:var(--font);}
.edit-panel-header span{font-weight:600;}

/* small panel buttons → M3 tonal pills */
.ep-list-btn,.ep-pick-btn{font-family:var(--font);border-radius:var(--r-full);
border:none;background:var(--md-sys-color-secondary-container);
color:var(--md-sys-color-on-secondary-container);padding:0.4em 0.9em;cursor:pointer;}
.ep-list-btn:hover,.ep-pick-btn:hover{background:var(--md-sys-color-secondary-container);}
.ep-list-btn.remove{background:transparent;color:var(--md-sys-color-error);}
.ep-pick-btn{width:auto;height:auto;}

/* ── dataset provider: tabs, sections, pattern picker ────────────────────── */
.dp-header,.dp-footer{font-family:var(--font);}
.dp-tabs{border-bottom:1px solid var(--md-sys-color-outline-variant);}
.dp-tab{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);
font-weight:600;border-bottom:2px solid transparent;}
.dp-tab.active{border-bottom-color:var(--md-sys-color-primary);color:var(--md-sys-color-primary);}
.dp-hint{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);}
.dp-error{color:var(--md-sys-color-error);}
.pat-selector button{font-family:var(--font);border-radius:var(--r-lg);
border:1px solid var(--md-sys-color-outline-variant);
background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);padding:0.6em 0.4em;}
.pat-selector button:hover{background:var(--md-sys-color-secondary-container);
border-color:transparent;color:var(--md-sys-color-on-secondary-container);}
.pat-selector-section{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);}

/* dataset tables: M3 borders */
.ds-table th,.ds-table td{border:1px solid var(--md-sys-color-outline-variant);}
.ds-table th{background:var(--md-sys-color-surface-container-high);}
.ds-ms-series{border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--r-md);}

/* ── comments popover → M3 surface + fields ──────────────────────────────── */
.cmt-btn{border-radius:var(--r-full);border:none;
background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);}
.cmt-btn:hover{color:var(--md-sys-color-on-secondary-container);border:none;}
.cmt-popover{font-family:var(--font);border:none;border-radius:var(--r-lg);
background:var(--md-sys-color-surface-container-high);box-shadow:var(--e3);
color:var(--md-sys-color-on-surface);}
.cmt-view{color:var(--md-sys-color-on-surface);}
.cmt-ta{font-family:var(--font);border:1px solid var(--md-sys-color-outline);
border-radius:var(--r-sm);background:var(--md-sys-color-surface-container-highest);
color:var(--md-sys-color-on-surface);}
.cmt-actions button{border-radius:var(--r-full);color:var(--md-sys-color-on-surface-variant);}

/* ── save dialog internals ───────────────────────────────────────────────── */
.save-dialog-title{font-family:var(--font);font-weight:600;}
.save-dialog-row{font-family:var(--font);}
.save-dialog-warn{font-family:var(--font);border-radius:var(--r-sm);
color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container);
border:none;}

/* ── kbd + validation modals internals ───────────────────────────────────── */
.kbd-modal-box,.val-modal-box{font-family:var(--font);}
.kbd-modal-table,.val-report{font-family:var(--font);}
kbd{font-family:var(--font);border-radius:var(--r-xs);
background:var(--md-sys-color-surface-container-highest);border:1px solid var(--md-sys-color-outline-variant);}
.val-item{border-radius:var(--r-sm);border:1px solid var(--md-sys-color-outline-variant);
background:var(--md-sys-color-surface-container);}
.val-item.val-error{color:var(--md-sys-color-on-error-container);
background:var(--md-sys-color-error-container);border-color:transparent;}

/* ── podcast bar controls ────────────────────────────────────────────────── */
.pod-bar{border-radius:var(--r-xl);border:none;box-shadow:var(--e2);
background:var(--md-sys-color-surface-container-high);}
.pod-btn{border-radius:var(--r-full);border:none;color:var(--md-sys-color-on-surface-variant);}
.pod-btn.pod-play{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);}
.pod-btn.on{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);}
.pod-restore{border-radius:var(--r-full);border:none;
background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);box-shadow:var(--e3);}
.pod-chip{font-family:var(--font);border-radius:var(--r-full);
border:1px solid var(--md-sys-color-outline-variant);
background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);}
.pod-chip:hover{border-color:var(--md-sys-color-outline);color:var(--md-sys-color-on-surface);}
.pod-chip.active{border-color:transparent;background:var(--md-sys-color-secondary-container);
color:var(--md-sys-color-on-secondary-container);}
.pod-seek{accent-color:var(--md-sys-color-primary);}
.pod-caption{font-family:var(--font);}

/* ── load-screen chrome ──────────────────────────────────────────────────── */
.error-box{font-family:var(--font);border-radius:var(--r-md);
color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container);border:none;}
.help-block{border-radius:var(--r-lg);border:1px solid var(--md-sys-color-outline-variant);overflow:hidden;}
.help-block summary{font-family:var(--font);}
.help-body code,.help-body pre{border-radius:var(--r-xs);
background:var(--md-sys-color-surface-container-highest);}
.help-table th,.help-table td{border-color:var(--md-sys-color-outline-variant);}
.privacy-note{font-family:var(--font);}
.divider{font-family:var(--font);color:var(--md-sys-color-on-surface-variant);}
.unsaved-bar,.update-banner{font-family:var(--font);}
.pod-placeholder{font-family:var(--font);}

/* native <dialog> modals (kbd shortcuts / validation / save) */
.m3-modal{border:none;padding:0;background:transparent;max-width:100vw;max-height:100dvh;
overflow:visible;color:var(--md-sys-color-on-surface);}
.m3-modal::backdrop{background:rgba(0,0,0,.45);}

/* ── M3 form controls + misc (Bucket #12) ────────────────────────────────── */
input[type=checkbox],input[type=radio]{accent-color:var(--md-sys-color-primary);cursor:pointer;}
input[type=range]{accent-color:var(--md-sys-color-primary);}
/* connected button group (load-screen "New" actions) */
.m3-btn-group{display:inline-flex;gap:2px;}
.m3-btn-group .btn{border-radius:var(--r-sm);}
.m3-btn-group .btn:first-child{border-radius:var(--r-full) var(--r-sm) var(--r-sm) var(--r-full);}
.m3-btn-group .btn:last-child{border-radius:var(--r-sm) var(--r-full) var(--r-full) var(--r-sm);}
/* M3 switch (available for on/off toggles) */
.m3-switch{display:inline-flex;align-items:center;cursor:pointer;}
.m3-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.m3-switch .track{position:relative;width:52px;height:32px;border-radius:var(--r-full);
background:var(--md-sys-color-surface-container-highest);
box-shadow:inset 0 0 0 2px var(--md-sys-color-outline);
transition:background var(--m-effects),box-shadow var(--m-effects);}
.m3-switch .track::before{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;
border-radius:var(--r-full);background:var(--md-sys-color-outline);
transition:transform var(--m-spatial-fast),width var(--m-spatial-fast),height var(--m-spatial-fast),top var(--m-spatial-fast),left var(--m-spatial-fast),background var(--m-effects);}
.m3-switch input:checked+.track{background:var(--md-sys-color-primary);box-shadow:none;}
.m3-switch input:checked+.track::before{width:24px;height:24px;top:4px;left:4px;
transform:translateX(20px);background:var(--md-sys-color-on-primary);}
.m3-switch input:focus-visible+.track{outline:3px solid var(--md-sys-color-primary);outline-offset:3px;}

/* ── top-bar overflow (⋮) menu (Bucket #11) ──────────────────────────────── */
.ovf-menu{position:fixed;z-index:300;min-width:208px;max-width:84vw;padding:8px;
border-radius:var(--r-md);background:var(--md-sys-color-surface-container-high);
box-shadow:var(--e3);display:flex;flex-direction:column;gap:2px;}
.ovf-menu button{display:flex;align-items:center;gap:12px;width:100%;justify-content:flex-start;
border:none;background:none;cursor:pointer;color:var(--md-sys-color-on-surface);
font-family:var(--font);font-size:0.9rem;padding:10px 12px;border-radius:var(--r-sm);
position:relative;overflow:hidden;isolation:isolate;}
.ovf-menu button::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
pointer-events:none;z-index:-1;transition:opacity var(--m-effects);}
.ovf-menu button:hover::before{opacity:var(--state-hover);}
.ovf-menu button:active::before{opacity:var(--state-press);}
.ovf-menu button .ovf-label{font-family:var(--font);white-space:nowrap;}
.ovf-menu button .notif-dot{position:static;width:7px;height:7px;margin-left:auto;box-shadow:none;}

/* ═══════════════════════════════════════════════════════════════════════════
   M3 Expressive Floating Action Button (FAB) menu — compact/narrow only.
   On phones the top-bar action buttons (#boxTop .top-buttons) are moved into
   this menu by cb-patterns.js, which sets html[data-fab="1"]. A bottom-right
   toggle FAB opens a scrim-backed stack of pill items; the icon morphs ☰→✕ and
   items spring in with the expressive motion tokens. Hidden on wider screens.
   ═══════════════════════════════════════════════════════════════════════════ */
.fab-menu{position:fixed;z-index:860;display:none;flex-direction:column;align-items:flex-end;
  gap:12px;right:calc(0.9em + env(safe-area-inset-right));
  bottom:calc(0.9em + env(safe-area-inset-bottom));}
html[data-fab="1"] .fab-menu{display:flex;}
html[data-fab="1"] #boxTop .top-buttons{display:none;}
/* don't float over slide-in panels / providers (sibling combinator — the FAB is
   appended as the last child of #box, after these elements) */
#editPanel:not(.edit-panel-hidden) ~ .fab-menu,
#datasetProviderPanel:not(.hidden) ~ .fab-menu{display:none!important;}
/* lift above the bottom bars when they're present */
body.pod-active .fab-menu{bottom:calc(env(safe-area-inset-bottom) + 0.9em + 4.6em*var(--pod-scale,1));}
#unsavedBar:not(.hidden) ~ .fab-menu{bottom:calc(env(safe-area-inset-bottom) + 3.4em);}
.edit-mode .fab-menu{bottom:calc(env(safe-area-inset-bottom) + 6em);}
.fab-scrim{position:fixed;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--md-sys-color-scrim,#000) 32%,transparent);
  opacity:0;transition:opacity var(--m-effects);}
.fab-scrim[hidden]{display:none;}
.fab-menu[data-open="true"] .fab-scrim{opacity:1;}
.fab-toggle{align-self:flex-end;width:56px;height:56px;flex-shrink:0;border:none;cursor:pointer;
  border-radius:var(--r-lg);background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);box-shadow:var(--e3);
  display:grid;place-items:center;font-size:20px;user-select:none;-webkit-user-select:none;
  transition:border-radius var(--m-spatial-fast);}
.fab-menu[data-open="true"] .fab-toggle{border-radius:var(--r-full);}
.fab-ico{position:relative;display:grid;place-items:center;width:1em;height:1em;}
.fab-ico>*{grid-area:1/1;transition:opacity var(--m-effects),transform var(--m-spatial-fast);}
.fab-ico>*:last-child{opacity:0;transform:rotate(-90deg);}
.fab-menu[data-open="true"] .fab-ico>*:first-child{opacity:0;transform:rotate(90deg);}
.fab-menu[data-open="true"] .fab-ico>*:last-child{opacity:1;transform:rotate(0);}
.fab-items{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin:0;padding:2px;
  max-height:calc(100dvh - var(--top-h) - 8em);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:none;}
.fab-items::-webkit-scrollbar{display:none;}
.fab-items[hidden]{display:none;}
.fab-items>button{display:inline-flex;align-items:center;justify-content:flex-start;gap:11px;
  width:auto;max-width:min(80vw,22em);min-height:48px;padding:0 20px;flex:0 0 auto;
  border:none;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
  box-shadow:var(--e2);font-family:var(--font);font-size:0.92rem;font-weight:600;
  opacity:0;transform:translateY(10px) scale(.82);transform-origin:bottom right;}
.fab-menu[data-open="true"] .fab-items>button{opacity:1;transform:none;
  transition:transform var(--m-spatial),opacity var(--m-effects);}
.fab-items>button:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;}
.fab-menu[data-open="true"] .fab-items>button:disabled{opacity:.4;}
.fab-items>button i,.fab-items>button svg{width:1.1em;text-align:center;flex-shrink:0;}
/* label from the live title so it survives buttons whose icon HTML is rebuilt
   dynamically (e.g. orientation toggle) */
.fab-items>button::after{content:attr(title);font-family:var(--font);font-weight:600;}
.fab-items>button:not([title])::after{content:none;}
html[data-reduce="1"] .fab-items>button{transition-duration:1ms;}
/* nearest the FAB reveals first */
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(1){transition-delay:0ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(2){transition-delay:25ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(3){transition-delay:50ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(4){transition-delay:75ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(5){transition-delay:100ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(6){transition-delay:125ms;}
.fab-menu[data-open="true"] .fab-items>button:nth-last-child(n+7){transition-delay:150ms;}
/* state layer + ripple containment on the FAB controls */
.fab-menu button{position:relative;overflow:hidden;isolation:isolate;}
.fab-menu button::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  border-radius:inherit;pointer-events:none;z-index:-1;transition:opacity var(--m-effects);}
.fab-menu button:hover::before{opacity:var(--state-hover);}
.fab-menu button:active::before{opacity:var(--state-press);}

/* ── Compact load screen: the action buttons show icon-only (labels hidden) ── */
.btn-row .btn .btn-ico{display:none;}
@media (max-width:599.98px){
  .btn-row .btn .btn-ico{display:inline;}
  .btn-row .btn .btn-label{display:none;}
  .btn-row .btn{padding-left:0;padding-right:0;}
  .m3-btn-group{flex:1;}
  .m3-btn-group .btn{flex:1;}
}