/* Shared semantic colors are set before first paint by appearance.js.
   Accent text stays legible; pure color is reserved for marks, glows and swatches. */
:root{
  --font-body:'DM Sans',sans-serif;
  --font-display:'Manrope',sans-serif;
  --accent-text:var(--accent);
  --accent-key:#f500e8;
  --accent-secondary:#3656ff;
  --action-start:#be00d2;
  --action-end:#3652eb;
  --accent-fill:linear-gradient(115deg in srgb,var(--action-start),var(--action-end));
  --heading-fill:linear-gradient(115deg in srgb,var(--heading-start,var(--accent)),var(--heading-end,var(--accent-secondary)));
  --accent-glow:color-mix(in srgb,var(--accent-key) 18%,transparent);
  --title-ink:var(--ink);
  --heading-ink:var(--ink);
  --metadata:var(--muted);
  --focus-ring:var(--accent);
  --page-art:none;
  --page-art-size:auto;
}

/* Static, palette-aware artwork stays behind the app and never catches input. */
body{isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--bg);background-image:var(--page-art);background-size:var(--page-art-size);background-position:center;background-repeat:repeat}
:root[data-background=none] body::before{display:none}

/* Reading hierarchy and interface state use explicit, independent tokens. */
.card-title{color:var(--title-ink)}
h1,.results-heading h2,.detail-inner h3{color:var(--heading-ink)}
h1>span{background:var(--heading-fill);background-clip:text;-webkit-background-clip:text;color:transparent}
.category-chip.active,.primary-button{background:var(--accent-fill);color:var(--button-ink,var(--accent-ink))}
.category-chip.active:hover,.primary-button:hover{filter:none;box-shadow:0 5px 20px var(--accent-glow)}
.primary-button:hover{transform:translateY(-1px)}
.brand-mark{stroke:var(--accent-key)}
.brand-period,.section-marker,.status-dot{color:var(--accent-key)}
.section-marker,.status-dot{background:var(--accent-key)}
.card-topline time,.read-time,.detail-meta,.detail-label,.feed-end,.app-footer>p{color:var(--metadata)}
.bookmark[aria-pressed=true]{background:var(--tint-strong);color:var(--accent-text)}
.bookmark,.media-tag{color:#292635}
.info-dialog::backdrop{background:#10101866}
:is(button,a,input,select,video):focus-visible{outline-color:var(--focus-ring)}

/* Typography choices use local fonts and platform fallbacks only. */
:root[data-font=editorial] :is(.card-title,.card-quote,h1){font-weight:400;letter-spacing:-.6px}
:root[data-font=newsroom] :is(.card-title,.card-quote,h1){font-weight:400;letter-spacing:-.45px}
:root[data-font=newsroom] .card-title{font-size:27px;line-height:1.28}
:root[data-font=book] :is(.card-title,.card-quote,h1){font-weight:400;letter-spacing:-.55px}
:root[data-font=book] :is(.card-excerpt,.detail-inner){font-size:14px;line-height:1.9}
:root[data-font=swiss] .card-title{font-weight:700;letter-spacing:-.65px}
:root[data-font=humanist] .card-title{letter-spacing:-.6px;line-height:1.35}
:root[data-font=system] .card-title{letter-spacing:-.8px}
:root:is([data-font=technical],[data-font=terminal]) .card-title{font-size:21px;letter-spacing:-.8px;line-height:1.4}
:root:is([data-font=technical],[data-font=terminal]) .feature .card-title{font-size:23px}
:root:is([data-font=technical],[data-font=terminal]) h1{font-size:41px;letter-spacing:-2px}
:root[data-font=terminal] :is(.card-excerpt,.detail-inner){font-size:12px;line-height:1.9}

.header-actions{gap:12px}
.preview-badge{margin-right:5px}
.design-picker{position:relative}
.design-toggle{height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:20px;font-size:11px;transition:background .2s,box-shadow .2s,border-color .2s}
.design-toggle:hover,.design-toggle[aria-expanded=true]{border-color:var(--accent);background:var(--tint);box-shadow:0 3px 16px var(--accent-glow)}
.design-toggle>svg{width:11px;height:11px}
.design-toggle-swatch{display:block;width:17px;height:17px;border-radius:50%;background:linear-gradient(115deg,var(--accent-key),var(--accent-secondary));box-shadow:inset 0 0 0 1px #ffffff30}
.design-panel{position:absolute;top:calc(100% + 16px);right:0;width:414px;max-width:calc(100vw - 34px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 22px 70px #0003;animation:popover-in .2s var(--ease);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.design-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.design-eyebrow{font-size:9px;font-weight:600;letter-spacing:1.6px;color:var(--accent-text)}
.design-panel-heading h2{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.7px;margin:6px 0 0;line-height:1.4}
.design-panel-heading .icon-button{font-size:23px;color:var(--muted);flex-shrink:0}
.design-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:12px}
.design-section-label>span:first-child{font-weight:600}
.design-section-label>span:last-child{font-size:11px;color:var(--muted);text-align:right}

/* All color choices stay browsable without making the whole page into a palette list. */
.palette-toolbar{display:grid;gap:10px;margin-bottom:12px}
.palette-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.palette-groups button{min-height:33px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:6px;font-size:11px;color:var(--muted);padding:4px;transition:background .2s,color .2s,box-shadow .2s}
.palette-groups button>span{font-size:9px;opacity:.8}
.palette-groups button:hover{background:var(--surface-3);color:var(--ink)}
.palette-groups button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 5px #00000012;font-weight:600}
.palette-search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:var(--bg);color:var(--muted)}
.palette-search>svg{width:15px;height:15px;flex-shrink:0}
.palette-search input{display:block;width:100%;height:37px;min-width:0;border:0;background:none;color:var(--ink);font-size:12px;outline:0}
.palette-search input::placeholder{color:var(--metadata);opacity:1}
.palette-search:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.palette-search input:focus-visible{outline:none}
.palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:294px;overflow:auto;overscroll-behavior:contain;padding:3px;margin:-3px;scroll-padding:3px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.palette-option{text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0;padding:7px 7px 8px;border-radius:10px;border:1px solid var(--line);transition:border-color .2s,background .2s,transform .2s}
.palette-option:hover{background:var(--surface-2);transform:translateY(-1px)}
.palette-option[aria-pressed=true]{background:var(--tint);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.palette-preview{position:relative;display:block;flex-shrink:0;width:100%;height:39px;border-radius:5px;overflow:hidden;background:linear-gradient(115deg,var(--swatch-a),var(--swatch-b));margin-bottom:3px}
.palette-preview>span{position:absolute;right:-4px;top:-15px;width:45px;height:45px;border-radius:50%;background:#ffffff25}
.palette-preview>i{position:absolute;left:7px;bottom:8px;width:34px;height:4px;background:#ffffffb5;border-radius:4px}
.palette-preview>b{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:11px;opacity:0;box-shadow:0 1px 5px #0002}
.palette-option[aria-pressed=true] .palette-preview>b{opacity:1}
.palette-quiet .palette-preview{background:var(--swatch-bg);border:1px solid var(--line)}
.palette-quiet .palette-preview>span{top:9px;left:8px;right:auto;width:47px;height:4px;border-radius:3px;background:color-mix(in srgb,var(--ink) 75%,transparent)}
.palette-quiet .palette-preview>i{bottom:8px;background:var(--swatch-a);width:28px;height:5px}
.palette-quiet .palette-preview:after{content:'';position:absolute;left:8px;right:20px;top:18px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 15%,transparent)}
.palette-name{font-size:10px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.palette-description{font-size:9px;color:var(--muted);line-height:1.4}
.palette-results>p{font-size:12px;line-height:1.7;color:var(--muted);text-align:center;margin:12px 0;padding:15px;background:var(--surface-2);border-radius:9px}
.next-palette{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:34px;padding:12px 3px 0;font-size:11px;color:var(--accent-text)}
.next-palette:hover{color:var(--ink)}

.design-background-section{margin-top:20px;padding-top:19px;border-top:1px solid var(--line)}
.background-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.background-option{display:flex;flex-direction:column;gap:7px;min-width:0;padding:6px 6px 8px;border:1px solid var(--line);border-radius:10px;text-align:left;font-size:10px;line-height:1.4;font-weight:600;transition:border-color .2s,background .2s,transform .2s}
.background-option:hover{background:var(--surface-2);transform:translateY(-1px)}
.background-option[aria-pressed=true]{border-color:var(--accent-text);background:var(--tint);box-shadow:0 0 0 1px var(--accent-text)}
.background-option>span:last-child{padding:0 2px}
.background-preview{position:relative;display:block;width:100%;height:48px;border-radius:5px;overflow:hidden;background-color:var(--bg);background-image:var(--scene-art);background-size:var(--scene-size);background-position:center;border:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.background-preview>i{position:absolute;left:10%;right:33%;top:21%;bottom:21%;border:1px solid var(--line);border-radius:5px;background:color-mix(in srgb,var(--surface) 60%,transparent);box-shadow:0 3px 8px #0000000d}
.background-preview>i:after{content:'';position:absolute;left:5px;right:9px;top:7px;height:2px;background:var(--metadata);opacity:.6;box-shadow:0 5px 0 var(--metadata)}
.background-preview>b{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:10px;opacity:0}
.background-option[aria-pressed=true] .background-preview>b{opacity:1}
.background-option[data-background-option=none] .background-preview>i{background:var(--surface)}
.background-hint{font-size:10px;line-height:1.7;color:var(--metadata);margin:12px 0 0}

.font-section-label{margin-top:20px;padding-top:19px;border-top:1px solid var(--line)}
.font-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.font-option{position:relative;display:flex;align-items:center;text-align:left;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 10px;transition:background .2s,border .2s;min-width:0;min-height:61px}
.font-option:hover{background:var(--surface-2)}
.font-option[aria-pressed=true]{background:var(--tint);border-color:var(--accent)}
.font-sample{font-size:24px;line-height:1;font-family:var(--sample-font,'Manrope',sans-serif);letter-spacing:-1.5px;flex-shrink:0}
.font-option[data-font-option=editorial] .font-sample{font-style:italic}
.font-option[data-font-option=technical] .font-sample,.font-option[data-font-option=terminal] .font-sample{font-size:21px;letter-spacing:-1px}
.font-option strong{display:block;font-size:11px;font-weight:600}
.font-option small{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-top:3px}
.font-selected{position:absolute;top:4px;right:5px;font-size:10px;color:var(--accent-text);opacity:0}
.font-option[aria-pressed=true] .font-selected{opacity:1}
.design-hint{font-size:10px;line-height:1.75;color:var(--metadata);margin:18px 0 0}

@media(max-width:1000px){
  .header-actions{gap:9px}.design-toggle{padding:0 10px}.main-nav{gap:18px}
}
@media(max-width:760px){
  .design-toggle{height:35px;padding:0 9px;gap:6px}.design-toggle>svg{display:none}.design-toggle-label{font-size:10px}.header-actions{gap:7px}
  .design-panel{position:fixed;top:80px;left:auto;right:16px;width:min(414px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 96px);padding:22px}
  .design-panel-heading h2{font-size:20px}
  :root:is([data-font=technical],[data-font=terminal]) h1{font-size:31px}
}
@media(max-width:520px){
  .design-toggle-label{display:none}.design-toggle{width:35px;padding:0;border-radius:50%}.design-toggle-swatch{width:18px;height:18px}
  .main-nav{gap:11px;margin-right:0}.header-inner{gap:10px}.nav-button{font-size:11px}.nav-button .saved-count{display:none}
  .design-panel{padding:20px}.palette-options{max-height:270px}
}
@media(max-width:420px){
  .design-panel{padding:18px;right:12px;width:calc(100vw - 24px)}
  .palette-description{font-size:8px}.palette-name{font-size:9px}.palette-groups button{font-size:10px;gap:3px}.palette-groups button>span{font-size:8px}
  .palette-option{padding:6px}.palette-options{gap:7px}.font-option{gap:8px;padding:11px 8px}.font-option small{font-size:8px}
  :root:is([data-font=technical],[data-font=terminal]) h1{font-size:27px;letter-spacing:-1.7px}
}
@media(max-width:350px){
  .design-panel{padding:15px}.font-options{grid-template-columns:minmax(0,1fr)}.palette-preview{height:32px}.palette-description{display:none}.palette-name{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.next-palette,.palette-option,.font-option,.design-toggle,.background-option{scroll-behavior:auto;transition:none}}

/* OLED accent themes keep classifications neutral: meaning stays in names and glyphs.
   Named inline variables are scoped deliberately; palette swatches and other themes retain their colors. */
:root[data-palette-family=oled-accent] :is([style*="--category-color"],[style*="--kind-color"]){--category-color:var(--metadata)!important;--kind-color:var(--metadata)!important}
:root[data-palette-family=oled-accent] .mix-segments>span{border-right:1px solid var(--line)}
:root[data-palette-family=oled-accent] .mix-segments>span:last-child{border-right:0}