/* Collector's desk: neutral surfaces, evergreen controls, gold brand detail.
   Screen-only presentation. Do not change header geometry, print sheets,
   ownership treatments, foil/variant artwork, or save/transaction behavior. */
@media screen {
  :root {
    --font-sans: Arial, Helvetica, sans-serif;
    --bg: #141716;
    --bg-2: #1c211e;
    --bg-3: #29312c;
    --bg-elevated: #303a33;
    --line: #4d5b51;
    --ink: #f4f5f2;
    --ink-2: #c4cdc6;
    --ink-3: #a6b2aa;
    --accent: #90ceb0;
    --accent-strong: #72b995;
    --on-accent: #13291e;
    --gold: #e9c56d;
    --ok: #90ceb0;
    --warn: #e9c56d;
    --bad: #f59b9e;
    --miss: #e56a70;
    --surface: var(--bg-2);
    --accent-2: var(--accent);
    --radius: 10px;
    --selected: #2b4335;
  }
  html[data-theme="light"] {
    --bg: #f2f4f1;
    --bg-2: #ffffff;
    --bg-3: #e8eee8;
    --bg-elevated: #ffffff;
    --line: #a9b6ac;
    --ink: #1b2921;
    --ink-2: #3f5045;
    --ink-3: #54665a;
    --accent: #176344;
    --accent-strong: #104d33;
    --on-accent: #ffffff;
    --gold: #785613;
    --ok: #176344;
    --warn: #785613;
    --bad: #af2837;
    --miss: #af2837;
    --selected: #dbece1;
  }
  body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
  h1, h2, h3, .admin-metrics strong, #panel-home :is(h2,h3) {
    font-family: var(--font-sans); font-weight: 700; letter-spacing: -.02em;
  }
  button, input, select, textarea { font-family: inherit; }
  input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
  input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
    outline-color: var(--accent);
  }

  /* Stable navigation keeps the same rows and touch targets in every state. */
  .topbar, .site-header { background: var(--bg-2); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
  .brand h1, .site-brand { color: var(--gold); font-weight: 700; text-shadow: none; }
  .logo { box-shadow: none; border-color: var(--line); }
  .topbar #tabs, .site-nav { background: var(--bg-2); border-color: transparent; border-radius: 8px; }
  .topbar #tabs .tab, .site-tab { font-family: var(--font-sans); font-weight: 600; color: var(--ink-2); border-radius: 6px; }
  .topbar #tabs .tab.is-active, .site-tab[aria-current="page"] {
    color: var(--ink); background: var(--selected); border-color: transparent;
    box-shadow: inset 0 -2px var(--accent);
  }
  .topbar #tabs .tab:hover, .site-tab:hover { background: var(--bg-3); color: var(--ink); }
  .site-tab[aria-current="page"] svg { color: var(--accent); }
  .site-header a:focus-visible, .viewer-context a:focus-visible { outline-color: var(--accent); }
  .bar-fill { background: var(--accent); box-shadow: none; }
  .header-save-trigger { background: var(--bg-2); }

  .card, .portfolio-kpis article, .portfolio-card, .community-post, .shop-collector-card,
  .community-shell .card { background: var(--bg-2); border-color: var(--line); border-radius: 10px; box-shadow: none; }
  .btn, .btn:hover, .btn.primary:hover { box-shadow: none; }
  .btn { background: var(--bg-3); border-radius: 7px; font-weight: 600; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: none; }
  .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn.danger { color: var(--bad); }
  .seg { border-radius: 8px; background: var(--bg); }
  .seg button.is-active { box-shadow: none; }
  .stage-check, .watch-compact-check, .pop-row button, .pocket-menu:hover,
  .vchip.normal.on, .vchip.reverse.on, .community-nav button span {
    color: var(--on-accent);
  }
  .pocket.missing-mark::after, .account-delete-confirm .btn.danger { color: var(--on-accent); }
  .pocket .rev, .ctile .cart .rev, #panel-home .home-layout-card.demo-owned::after { color: var(--on-accent); }
  .set-drop { background: var(--bg-2); backdrop-filter: none; }
  .admin-header, .watch-transaction-head, .watch-set-dialog-head,
  .watch-flow-card, .custom-rule-panel { background: var(--bg-2); }
  .community-post-card { background: var(--bg); }
  .spread { background: #202622; border-color: #4d5b51; border-radius: 12px; box-shadow: 0 8px 24px #0003; }
  .spread .binder-page { background: #1b211d; border-color: #4d5b51; box-shadow: none; }
  html[data-theme="light"] .spread { background: #d7dfd8; border-color: var(--line); }
  html[data-theme="light"] .spread .binder-page { background: #eef2ec; border-color: var(--line); }
  .pocket { background: #141a16; box-shadow: none; }
  html[data-theme="light"] .pocket { background: #e3eae2; }
  /* Text over card artwork keeps a dark scrim in either app theme. */
  .pocket .pname .pprice { color: #e9c56d; }
  .ctile .cnum, .slot .badge, .pocket-menu:not(:hover) { color: #f4f5f2; }
  .slot .badge { --ok: #90ceb0; --warn: #e9c56d; --bad: #f59b9e; }

  /* Editorial type and an unembellished art preview on the public front door. */
  #panel-home, html[data-theme="light"] #panel-home { --home-pop: var(--accent); --home-on-pop: var(--on-accent); }
  #panel-home .home-hero { background: none; }
  #panel-home .home-copy h2 { font-size: clamp(36px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.04em; font-weight: 700; }
  #panel-home .home-copy h2 span { color: var(--ink); }
  #panel-home .home-kicker { color: var(--ink-2); letter-spacing: .07em; font-weight: 600; }
  #panel-home .btn { border-radius: 7px; font-weight: 700; }
  #panel-home .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
  #panel-home .btn.primary:hover { background: var(--accent-strong); }
  #panel-home .home-layout-demo, #panel-home .home-market-preview { border-radius: 10px; box-shadow: none; }
  #panel-home .home-layout-demo-top > b { border-radius: 5px; }
  #panel-home .home-layout-book { box-shadow: none; }
  #panel-home .home-layout-page { background: var(--bg-2); }

  /* Same visual language for the account-free shared viewer. */
  #shared-watchlist .viewer-context, #shared-watchlist .sub, #shared-watchlist .filter-note,
  #shared-watchlist .price-scale, #shared-watchlist .group-choice small,
  #shared-watchlist .filter-details summary small, #shared-watchlist .sect h2 { color: var(--ink-2); }
  #shared-watchlist .viewer-context a { color: var(--accent); }
  #shared-watchlist #bar { background: var(--bg); border-color: var(--line); }
  #shared-watchlist #bar :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])), #refresh {
    background: var(--bg-2); border-color: var(--line); color: var(--ink); border-radius: 7px;
  }
  #shared-watchlist #bar input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }
  #shared-watchlist #bar :is(input, button, select, summary):focus-visible { outline-color: var(--accent); }
  #shared-watchlist .group-choice, #shared-watchlist .filter-details { border-color: var(--line); border-radius: 7px; }
  #shared-watchlist .group-choice:has(input:checked) { background: var(--selected); border-color: var(--accent); }
  #shared-watchlist #bar .chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  #shared-watchlist .sect h2 b { color: var(--ink); }
  #shared-watchlist .c { background: var(--bg-2); border-color: var(--line); border-radius: 6px; }
  #shared-watchlist .art { background: var(--bg-3); }
  #shared-watchlist .m { font-size: 14px; }
  #shared-watchlist .m .set { color: var(--ink-3); font-size: 12px; }
  #shared-watchlist .m .pr { color: var(--gold); font-variant-numeric: tabular-nums; }
  #shared-watchlist .err, body > footer, body > footer a { color: var(--ink-2); }
}