/* Collector's desk: navy navigation, paper work areas and cobalt actions.
   Separate action fills from readable accents and semantic status colors.
   Screen-only presentation. Do not change header geometry, print sheets,
   ownership treatments, foil/variant artwork, or save/transaction behavior. */
@media screen {
  :root {
    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --bg: #101a2d;
    --bg-2: #16243b;
    --bg-3: #20314b;
    --bg-elevated: #273e5d;
    --line: #3a506d;
    --control-line: #7d94b3;
    --ink: #f4f7fc;
    --ink-2: #d4deeb;
    --ink-3: #b0c1d9;
    --accent: #a8c7ff;
    --accent-strong: #c1d7ff;
    --on-accent: #101827;
    --action: #326be6;
    --action-hover: #285bd7;
    --on-action: #ffffff;
    --focus: #c1d7ff;
    --header-bg: #0b1830;
    --gold: #e7c686;
    --ok: #76e0b3;
    --warn: #f4c76b;
    --bad: #ff9faa;
    --miss: #ff9faa;
    --surface: var(--bg-2);
    --accent-2: var(--accent);
    --radius: 10px;
    --selected: #253d5c;
    color-scheme: dark;
  }
  html[data-theme="light"] {
    --bg: #edf2f8;
    --bg-2: #ffffff;
    --bg-3: #eef2f7;
    --bg-elevated: #ffffff;
    --line: #d8e0eb;
    --control-line: #7c8aa0;
    --ink: #172235;
    --ink-2: #42526a;
    --ink-3: #586a80;
    --accent: #1d4ed8;
    --accent-strong: #1e40af;
    --on-accent: #ffffff;
    --action: #285bd7;
    --action-hover: #1d49b5;
    --focus: #1d4ed8;
    --gold: #6e520a;
    --ok: #096944;
    --warn: #805300;
    --bad: #b4233d;
    --miss: #b4233d;
    --selected: #e8efff;
    color-scheme: light;
  }
  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;
  }
  /* Headings and useful labels should not inherit a muted helper-text color. */
  #panel-guide .guide-workspace-title h2, #panel-sheet .watch-page-head-minimal h2,
  #guideBody .totals strong, #guideBody .guide-card-options > summary,
  #panel-guide .guide-tools > summary, #panel-guide .guide-library-heading {
    color: var(--ink);
  }
  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:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    background: var(--bg-2); color: var(--ink); border-color: var(--control-line);
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
    outline-color: var(--focus);
  }

  /* Stable navigation keeps the same rows and touch targets in every state. */
  .topbar, .site-header {
    /* Header-only tokens: account dialogs are body-level, not descendants.
       Bright status tokens keep pending/error/synced truthful in light mode. */
    --bg: #0b1830;
    --bg-2: #11213b;
    --bg-3: #1c3354;
    --bg-elevated: #243e61;
    --line: #314967;
    --control-line: #7d94b3;
    --ink: #f5f8ff;
    --ink-2: #dce6f5;
    --ink-3: #bccce2;
    --accent: #b2cfff;
    --accent-strong: #c1d7ff;
    --on-accent: #101827;
    --action: #326be6;
    --action-hover: #285bd7;
    --on-action: #ffffff;
    --focus: #c1d7ff;
    --gold: #e7c686;
    --ok: #76e0b3;
    --warn: #f4c76b;
    --bad: #ff9faa;
    --surface: var(--bg-2);
    background: var(--header-bg); color: var(--ink); border-color: var(--line); box-shadow: none; backdrop-filter: none;
    color-scheme: dark;
  }
  .brand h1, .site-brand { color: var(--ink); font-weight: 700; text-shadow: none; }
  .topbar .brand:hover h1 { color: var(--ink); }
  .logo { box-shadow: none; border-color: var(--line); }
  .topbar #tabs, .site-nav { background: transparent; 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(--on-action); background: var(--action); border-color: var(--action);
    box-shadow: none;
  }
  .topbar #tabs .tab:not(.is-active):not(:disabled):not([aria-disabled="true"]):not(.tab-coming-soon):hover,
  .site-tab:not([aria-current="page"]):not([aria-disabled="true"]):hover { background: var(--bg-3); color: var(--ink); }
  .topbar #tabs .tab.is-active .tab-icon,
  .site-tab[aria-current="page"] svg { color: var(--on-action); }
  .site-header a:focus-visible, .viewer-context a:focus-visible { outline-color: var(--focus); }
  .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-2); border-color: var(--line); border-radius: 7px; font-weight: 600; }
  .btn.ghost:not(:disabled):not(.danger):not(.primary) { background: transparent; }
  .btn:not(:disabled):not(.primary):not(.danger):hover { background: var(--bg-3); border-color: var(--control-line); }
  .btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); font-weight: 700; box-shadow: none; }
  .btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
  .btn.danger { color: var(--bad); }
  .seg { border-radius: 8px; background: var(--bg); }
  .seg button.is-active { background: var(--action); color: var(--on-action); box-shadow: none; }
  .community-nav button.is-active { background: var(--selected); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
  #guideBody > .guide-tally .guide-card-groups .check:has(input:checked) {
    background: var(--selected); border-color: var(--accent);
  }
  .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; }
  /* Selection is blue; real owned/saved/gain states keep semantic status colors. */
  .set-drop .set-choice-check input, .set-drop .set-choice-check input.smaster,
  .watch-transaction-collection input { accent-color: var(--accent); }
  .watch-card.is-staged, .watch-compact-row.is-staged, .watch-stage-bar,
  .watch-transaction-dialog, .pocket.in-cart, .cart-bar { --ok: var(--accent); }
  .guide-progress-actions, .guide-source-current,
  #panel-home .home-layout-demo-top > b { --ok: var(--accent); }
  .watch-flow-summary .watch-flow-target strong,
  .watch-flow-grid .watch-grid-prices > strong, .watch-compact-prices small { color: var(--ink); }
  /* The screen print-preview remains paper-white, with black offer amounts. */
  .watch-card-sheet-summary > div:last-child strong, .watch-grid-prices > strong,
  .watch-paper-summary .watch-paper-target-total strong, .watch-paper-target strong { color: #111111; }
  .watch-paper-row.is-staged { background: #e7e7e7; }
  .watch-paper-row.is-staged .watch-paper-check { border-color: #111111; background: #111111; color: #ffffff; }
  .custom-summary-progress i { background: var(--accent); box-shadow: none; }
  #panel-sheet .watch-group-row { background: var(--bg-2); border-color: var(--line); }
  #panel-sheet .watch-group-row:has(input:checked) { background: var(--selected); border-color: var(--accent); }
  #panel-sheet .watch-action-group h3 { color: var(--ink); }
  .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: #111111; border-color: var(--line); border-radius: 12px; box-shadow: 0 8px 24px #0005; }
  .spread .binder-page { background: var(--bg-2); border-color: var(--line); box-shadow: none; }
  html[data-theme="light"] .spread { background: #cccccc; border-color: var(--line); }
  html[data-theme="light"] .spread .binder-page { background: #fafafa; border-color: var(--line); }
  .pocket { background: #111111; box-shadow: none; }
  html[data-theme="light"] .pocket { background: #dedede; }
  /* 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), .efill-tag { 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(--action); border-color: var(--action); color: var(--on-action); box-shadow: none; }
  #panel-home .btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
  #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 { background: var(--bg-3); border-color: var(--line); 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(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { border-color: var(--control-line); }
  #shared-watchlist #bar input[type="range"] { background: transparent; border-color: transparent; }
  #shared-watchlist #bar :is(input, button, select, summary):focus-visible { outline-color: var(--focus); }
  #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(--action); color: var(--on-action); border-color: var(--action); }
  #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 .art .ph { color: var(--ink-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); }
}