/* Authored environments on the existing product geometry. Card pixels, public
   cosmetics and semantic scan states are never recoloured by a theme filter. */
html[data-appearance] {
  --line: color-mix(in srgb, var(--ink) 15%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 35%, transparent);
  --shadow: 0 2px 4px rgb(0 0 0 / .12), 0 18px 40px rgb(0 0 0 / .16);
  --shadow-object: 0 4px 8px rgb(0 0 0 / .14), 0 20px 35px rgb(0 0 0 / .18);
  --ambient: none;
  --brand-rule: var(--line);
  background: var(--ground);
}
html[data-theme="holo-night"] {
  --line:#3D2A50;
  --ambient: radial-gradient(ellipse at 8% 0%, rgb(185 138 242 / .11), transparent 55%);
  --brand-rule: color-mix(in srgb, var(--action) 40%, var(--panel));
}
html[data-theme="clubhouse"] {
  --line:#355447;
  --ambient: radial-gradient(ellipse at 12% 0%, rgb(220 193 141 / .07), transparent 55%),
    repeating-linear-gradient(35deg, transparent 0 4px, rgb(169 186 174 / .018) 4px 5px);
  --brand-rule: #8E7955;
}
html[data-theme="gallery-day"] {
  --line:#C6B6C5;
  --line-strong:#8D7A92;
  --ambient: radial-gradient(ellipse at 5% 0%, #FFFCF7, transparent 65%);
  --brand-rule: #B28B52;
  --shadow: 0 1px 2px rgb(49 32 57 / .05), 0 12px 32px rgb(49 32 57 / .07);
  --shadow-object: 0 3px 5px rgb(49 32 57 / .09), 8px 20px 28px rgb(49 32 57 / .12);
}
html[data-theme="daybreak-index"] {
  --ambient: radial-gradient(ellipse at 90% 0%, rgb(96 123 101 / .09), transparent 60%);
  --brand-rule: #B83F2D;
  --shadow: 0 1px 1px rgb(21 58 61 / .05), 0 10px 20px rgb(21 58 61 / .06);
  --shadow-object: 0 2px 2px rgb(21 58 61 / .08), 0 14px 25px rgb(21 58 61 / .12);
}
html[data-appearance] body { background: var(--ambient) no-repeat, var(--ground); background-size: 100% 100%; }
/* The artwork and geometry stay identical. Only the supplied finish changes.
   Static identity also ends the old perpetual shine loop. */
html[data-appearance] .mark:has(.mark-finish) { background:none; }
html[data-appearance] .mark:has(.mark-finish)::before {
  content:''; position:absolute; inset:0; background:var(--brand-ink);
  -webkit-mask:url('/static/brand/symbol-nav.png') center/contain no-repeat;
  mask:url('/static/brand/symbol-nav.png') center/contain no-repeat;
}
html[data-appearance] .mark-finish {
  position:absolute; inset:0; background:var(--brand-symbol) center/contain no-repeat;
}
html[data-appearance] .mark::after,
html[data-appearance] .wordmark > rect { display: none; }
html[data-appearance] .brand .wordmark { color: var(--brand-ink); }
html[data-appearance] .nav {
  background: var(--panel); border-bottom-color: var(--brand-rule);
  box-shadow: 0 2px 16px rgb(0 0 0 / .06); backdrop-filter: none;
}
html[data-appearance] .nav-sheen { display: none; }
html[data-appearance] .navyou > :is(.navlink,.btn-sm) {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 14px; border-radius:var(--r-control);
  font:600 14px/1.4 var(--font); text-decoration:none;
}
html[data-appearance] .navyou > .btn-sm {
  background:var(--action); color:var(--on-action); border:1px solid var(--action);
  transition:background-color var(--m-hover) ease,transform var(--m-press) ease;
}
html[data-appearance] .navyou > .btn-sm:hover { background:var(--action-hover); }
html[data-appearance] .navyou > .btn-sm:active { transform:translateY(1px); }
html[data-appearance] .navyou > .navlink { color:var(--ink-2); }
html[data-appearance] .navyou > .navlink:hover { color:var(--ink); background:var(--raised); }
html[data-appearance] .mobile-primary { background: var(--panel); border-color: var(--line-strong); box-shadow: var(--shadow); }
html[data-appearance] .mobile-primary > a[aria-current="page"]::after { background: var(--action); }
html[data-appearance] .mobile-primary > a[aria-current="page"]::after { box-shadow:0 0 9px color-mix(in srgb,var(--action) 65%,transparent); }
html[data-appearance] .mobile-primary-scan-icon { background: var(--raised); border-color: var(--line-strong); }
html[data-appearance] .social-launch { background: var(--action); color: var(--on-action); border-color: var(--line-strong); box-shadow: var(--shadow); }
html[data-appearance] .mode-switch { background: var(--raised); border: 1px solid var(--line); }
html[data-appearance] .mode-switch a.on { color: var(--ink); background: var(--panel); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
html[data-appearance] :is(.panel,.you-panel,.browse-panel,.glass,.sect,.chart-card,.card-market,.market-summary) {
  background-color: var(--panel); color: var(--ink); border-color: var(--line);
}
html[data-appearance] :is(.glass,.sect,.chart-card) { box-shadow: var(--shadow); }
html[data-appearance] :is(.searchbar,.nav-search,.finput,.fselect,.search-input) {
  background: var(--raised); color: var(--ink); border-color: var(--line-strong);
}
html[data-appearance] :is(input,textarea,select)::placeholder { color: var(--ink-3); opacity: 1; }
html[data-appearance] :is(input[type="range"],input[type="checkbox"],input[type="radio"]) { accent-color:var(--action); }
html[data-appearance] :is(.searchbar input,.nav-search input) { color: var(--ink); }
html[data-appearance] .searchbar input:focus {
  border-color:var(--focus); background:var(--raised);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 13%,transparent),var(--shadow);
}
html[data-appearance] :is(.searchbar kbd,.nav-search kbd,kbd) { color: var(--ink-3); border-color: var(--line); }
html[data-appearance] :is(.navprimary > a,.navprimary summary,.catlist a,.you-panel a,.you-panel button):hover {
  background: var(--raised); color: var(--ink);
}
html[data-appearance] :is(.navprimary > a,.navprimary summary)[aria-current="page"] { background: var(--raised); color: var(--ink); }
html[data-appearance] :is(.navprimary > a,.navprimary summary)[aria-current="page"]::after { background: var(--action); }
html[data-appearance] .btn { background: var(--action); color: var(--on-action); border-color: var(--action); box-shadow: none; }
html[data-appearance] .btn:hover { background: var(--action-hover); color: var(--on-action); }
html[data-appearance] :is(.btn.secondary,.btn.ghost) { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
html[data-appearance] .btn-secondary { background:var(--raised); color:var(--ink); border-color:var(--line-strong); }
html[data-appearance] .btn-secondary:hover { background:var(--panel); color:var(--ink); border-color:var(--focus); }
html[data-appearance] .btn-secondary:focus-visible { outline-color:var(--focus); }
html[data-appearance] .holdings-search-controls input { background:var(--raised); color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; }
html[data-appearance] :is(.btn-danger,.note.bad) { background: color-mix(in srgb,var(--down) 8%,var(--panel)); color: var(--down); border-color: var(--down); }
html[data-appearance] .sect.danger h2 { color: var(--down); }
html[data-appearance] :is(.btn,.btn-danger):disabled { opacity: .65; cursor: wait; }
html[data-appearance] :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html[data-appearance] .skip { color: var(--on-action); background: var(--action); }
html[data-appearance] :is(.tabs,.tab) { border-color: var(--line); }
html[data-appearance] .tab { color: var(--ink-2); }
html[data-appearance] .tab.on { color: var(--ink); background: var(--raised); border-color: var(--focus); }
html[data-appearance] :is(.note,.evidence) { color: var(--ink-2); }
html[data-appearance] .note { background: var(--raised); border-color: var(--line-strong); }
html[data-appearance] .note.good { color: var(--up); border-color: color-mix(in srgb,var(--up) 40%,var(--panel)); }
/* Every recipe owns its display weight, including each gallery specimen.
   Preview access must never change Core typography or synthesize a missing bold. */
html[data-appearance] :is(h1,.appearance-heading h2,.holding-edit-head h2) {
  font-family:var(--font-display); font-weight:var(--font-display-weight);
}
html[data-appearance] :is(.card-hero,.card-tile .frame) { box-shadow: var(--shadow-object); }
html[data-appearance] .card-hero::before { display: none; }
html[data-scheme="light"] .card-page::before { opacity: .25; }
html[data-appearance] :is(.card-tile .noimg,.noimg) { color: var(--ink-3); background: var(--raised); }
html[data-appearance] :is(.price,.now,.market-price,.stat .n) { font-family: var(--font); font-variant-numeric: tabular-nums; }
html[data-appearance] :is(.price-chart,.history-graph) { --violet-ink:var(--chart-series); }
html[data-appearance][data-theme] :is(.tile-collecting .tile-star,.card-wishlist-star) { color:var(--chart-series); }
html[data-appearance] .tile-collecting .tile-star[aria-pressed="true"] { text-shadow:0 0 16px color-mix(in srgb,var(--chart-series) 33%,transparent); }
html[data-appearance] .tile-star:is(:hover,[aria-pressed="true"]) { background:var(--raised); color:var(--chart-series); }
html[data-appearance] .pill { border-color:var(--line-strong); }
html[data-appearance] :is(.access-mark,.chip.live) { background:var(--raised); color:var(--chart-series); border-color:var(--line-strong); }
html[data-appearance] :is(.access-kicker,.access-state) { color:var(--chart-series); }
html[data-appearance] .access-boundary { border-color:var(--line-strong); }
/* Shared Designer reading sizes: labels 14px, supporting copy at least 12px.
   Scope these roles so authored object lettering and display type stay intact. */
html[data-appearance] :is(.flabel,.newbinder>label,.sect .check strong,.vistable th,.vistable td>strong,.sesstable th,.collection-set-index label) { font-size:14px; }
html[data-appearance] :is(.sect .evidence,.sect .evidence .pill,.auth-form .evidence,.setcost .evidence,.access-owner,.access-kicker,.access-method small,.access-state,.sesstable .mono,.sesstable .chip.live,.printing-evidence,.price-proof) { font-size:12px; }
html[data-appearance] :is(.sect .finput,.auth-shell .finput,form[action="/forgot"] .finput,form[action^="/reset/"] .finput,.vistable select,.newbinder input[type="text"],.newbinder input[type="search"],.newbinder select) { font-size:16px; }
html[data-appearance] .sect .evidence { line-height:1.5; }
html[data-appearance] .browse-panel { background:var(--panel); }
html[data-appearance] .cmd-results {
  background:var(--panel); color:var(--ink); border-color:var(--line-strong);
  box-shadow:var(--shadow); backdrop-filter:none; -webkit-backdrop-filter:none;
}
html[data-appearance] .cmd-scrim { background:rgb(0 0 0 / .4); }
/* Dialog dimming is shared: Cards, Graded and other entry points must not
   depend on a room-only stylesheet to remove the old violet backdrop. */
html[data-appearance] dialog::backdrop { background:color-mix(in srgb,var(--ink) 32%,transparent); }
html[data-appearance][data-scheme="dark"] dialog::backdrop { background:rgb(0 0 0 / .68); }
html[data-appearance] :is(.cmd-group,.cmd-sub,.cmd-kind,.cmd-empty,.cmd-loading) { color:var(--ink-2); }
html[data-appearance] :is(.cmd-group,.cmd-kind) { font-size:11px; }
html[data-appearance] .cmd-thumb { background:var(--raised); border-color:var(--line); }
html[data-appearance] :is(.cmd-row:hover,.cmd-row.sel,.cmd-all:hover) { background:var(--raised); color:var(--ink); }
html[data-appearance] .cmd-row.sel { box-shadow:inset 2px 0 0 var(--focus); }
html[data-appearance] .cmd-all { color:var(--chart-series); border-color:var(--line); }
html[data-appearance] :is(.you-panel,.soonitem,.dropdate,.finish-route,.profile-setup) { --live:var(--chart-series); }
html[data-appearance] :is(.home-release-grid,.binder-shelf-section) { --live:var(--chart-series); }
html[data-appearance] .shelf-tags .tagline.link { background:var(--raised); color:var(--chart-series); }
html[data-appearance] .finish-route::after { border-color:var(--line); }
html[data-appearance] .finish-signal { background:var(--raised); }
html[data-appearance] .setup-form { background:var(--panel); border-color:var(--line-strong); border-top-color:var(--chart-series); }
html[data-appearance] .setup-privacy { background:var(--raised); }
html[data-appearance] .finish-route { background:var(--panel); border-color:var(--line); }
html[data-appearance] .finish-route::after { box-shadow:0 0 0 36px var(--line),0 0 0 72px color-mix(in srgb,var(--line) 35%,transparent); }
html[data-appearance] .finish-option { background:var(--raised); border-color:var(--line); }
html[data-appearance] .finish-option.primary { background:linear-gradient(135deg,color-mix(in srgb,var(--chart-series) 8%,var(--panel)),var(--panel) 62%); }
html[data-theme="clubhouse"] :is(.card-page-intro,.pf-head) { border-bottom: 1px solid var(--brand-rule); padding-bottom: 16px; }
html[data-theme="clubhouse"] :is(.chart-card,.appearance-studio) { border-top: 2px solid var(--brand-rule); }
html[data-theme="gallery-day"] :is(.card-page-intro,.pf-head) { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
html[data-theme="gallery-day"] :is(.card-page-intro h1,.pf-head h1) { font-weight: 600; letter-spacing: -.035em; }
html[data-theme="gallery-day"] :is(.chart-card,.appearance-studio) { border-top: 3px double var(--line-strong); }
html[data-theme="daybreak-index"] :is(.card-page-intro,.pf-head) { border-left: 3px solid var(--brand-rule); padding-left: 16px; }
html[data-theme="daybreak-index"] :is(.card-page-intro h1,.pf-head h1) { letter-spacing: -.045em; }
html[data-theme="daybreak-index"] :is(.chart-card,.appearance-studio) { border-top: 2px solid var(--ink); }
/* The private appearance picker is a specimen of real component roles. */
.appearance-studio { padding: clamp(20px,3vw,32px); }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.appearance-heading h2 { font: 600 clamp(24px,3vw,32px)/1.2 var(--font-display); margin: 6px 0 0; }
.appearance-eyebrow { font: 600 12px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.appearance-included { padding: 6px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-2); font-size: 12px; }
.appearance-intro { max-width: 65ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 16px 0 24px; }
.appearance-options { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.appearance-legend { font: 600 14px var(--font); margin-bottom: 12px; padding: 0; }
.appearance-option { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; background: var(--panel); color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--r-panel); cursor: pointer; }
.appearance-option { --line: color-mix(in srgb,var(--ink) 15%,transparent); --line-strong: color-mix(in srgb,var(--ink) 35%,transparent); }
.appearance-option input { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; margin: 0; accent-color: var(--action); z-index: 1; }
.appearance-option:has(input:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.appearance-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.appearance-option:has(input:disabled) { cursor: wait; }
.appearance-specimen { position: relative; display: block; height: 132px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); overflow: hidden; }
.appearance-option-copy { display: grid; gap: 5px; padding: 14px 4px 8px; }
.appearance-option-copy strong { font: 600 17px/1.4 var(--font); padding-right: 20px; }
.appearance-option-copy small { font-size: 12px; color: var(--ink-3); }
.appearance-option-copy > span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.appearance-chosen { position: absolute; right: 12px; top: 159px; color: var(--ink); display: none; }
.appearance-option:has(input:checked) .appearance-chosen { display: block; }
.appearance-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.appearance-actions button { min-height: 44px; }
.appearance-actions [hidden] { display: none; }
.appearance-actions p { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.appearance-footnote { padding-top: 16px; margin: 20px 0 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--ink-3); }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media(max-width:1000px) { .appearance-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .appearance-options { gap: 10px; } .appearance-option-copy strong { font-size: 15px; } .appearance-option-copy > span { font-size: 14px; } .appearance-studio { padding: 16px; } .appearance-mini-lines { right: 10px; } }
@media(forced-colors:active) { .appearance-option { border: 2px solid CanvasText; } .appearance-option:has(input:checked) { outline: 3px solid Highlight; } .appearance-specimen { forced-color-adjust: none; } }