/* ============================================================================
   Theme pack: base  (THE DEFAULT — dark; see DEFAULT_THEME in
   scripts/common/theme-registry.js)

   ── The design in one paragraph ───────────────────────────────────────────
   Clean, minimal, FLAT. Neutral near-black surfaces (a #101014 family, no
   purple tint anywhere in the greys — that was classic's "Deep Void" #0A0A14).
   The accent is a NEUTRAL GREY — no violet anywhere in this pack — and the
   NEON is retired with it: no glows,
   no accent-coloured shadows, no bloom, no frost. Elevation is a soft neutral
   drop and nothing else. Hovers are colour and border shifts, not scale
   transforms. Radii are a step larger, motion a step faster and shorter.

   ── How to read this file ─────────────────────────────────────────────────
   It is a SIBLING of classic/theme.css, not an overlay on it: exactly one pack
   sheet loads at a time, so everything this look needs is stated here. It
   walks the SAME ten surface groups, in the same order, as the classic packs,
   and every decorative decision classic makes has an answer here — either a
   FLAT EQUIVALENT or a DELIBERATE ABSENCE, and the absences are written down
   as comments in their group. An absence is not a gap: because this sheet is a
   sibling, saying nothing means the structural rule stands on its own, which
   for most of classic's glows is exactly the flat result base wants.

   ── Load order / cascade ──────────────────────────────────────────────────
   Linked LAST and UNLAYERED, so every declaration here beats every layered
   structural rule regardless of specificity. Same mechanism as classic — see
   the header of styles/index.css.

   ── Counterpart ───────────────────────────────────────────────────────────
   base-light. That pack is this design language on near-white neutrals; it
   inverts the overlay ladder (the approach classic-light proved) and re-values
   the same token set. Keep the two in step.
   ========================================================================== */

:root {
  /* ══ PALETTE ══════════════════════════════════════════════════════════════
     Every Tier-1 palette name tokens.css declares gets a considered value
     here, because tokens.css's :root is the CLASSIC palette (it is shared with
     the /play sidecar pages, which load no pack sheet) and anything this pack
     leaves unstated silently inherits classic's purple-tinted greys. */

  /* Grounds. Neutral, not violet: #101014 has a hair of blue so it does not
     read as a flat grey next to the accent, but none of classic's purple. */
  --color-primary: #101014;                 /* the page */
  --color-bg: #E9E9EE;                      /* ⚠ this is the FOREGROUND text
                                               colour (html { color: … }); the
                                               name is historical */
  --color-text: #17171A;                    /* text ON light chips/inputs */
  --color-white: #ffffff;

  /* Panels. Flatter and more opaque than classic's 0.6 glass, because nothing
     in this pack blurs what is behind them. */
  --color-surface: rgba(24, 24, 30, 0.92);
  --color-surface-hover: rgba(32, 32, 40, 0.96);

  /* Hairlines are NEUTRAL here. classic tints every border with its violet
     accent (rgba(123,97,255,0.3)); base's accent is itself a grey, and
     structure is drawn in plain white-on-black. */
  --color-border: rgba(255, 255, 255, 0.12);

  /* Accent. A NEUTRAL GREY, not classic's violet: base spends nothing on brand
     colour. It is a mid slate-grey, well clear of the surface and border greys
     above so a filled button still reads as a filled button, and light enough
     that white label text clears 4.5:1 on it. Hover lifts (dark ground). */
  --color-accent: #6E7480;
  --color-accent-hover: #838A96;
  --color-accent-light: #A6ACB8;

  /* Semantic / data colours — NOT skin. Status, ownership, holo tints and the
     Riftbound domain hues mean something, so they carry over unchanged. */
  --color-accent-warm: #ffd54a;
  --color-accent-green: #5ccf6a;
  --color-accent-green-dark: #3d8b52;
  --color-accent-blue: #4aa3ff;
  --color-accent-partial: #ffc107;
  --color-accent-unowned: #dc2626;
  --color-holo-pink: #ff8fcf;
  --color-danger: #b00020;
  --color-danger-hover: #c62828;
  --color-warning: #e69500;

  /* Links: a neutral blue, and the "glow" retired to a flat tint (it is used
     as a background-color fill in styles-library.css, not as a shadow). */
  --color-link: #6E9BFF;
  --color-link-glow: rgba(110, 155, 255, 0.18);

  --color-select-option-bg: #1B1B22;

  /* Overlays — semi-transparent WHITE over the dark grounds. Same ladder as
     classic: it is a well-tuned scale and the flat look has no quarrel with
     it. base-light inverts every step to black. */
  --color-overlay-4: rgba(255, 255, 255, 0.04);
  --color-overlay-5: rgba(255, 255, 255, 0.05);
  --color-overlay-8: rgba(255, 255, 255, 0.08);
  --color-overlay-10: rgba(255, 255, 255, 0.1);
  --color-overlay-12: rgba(255, 255, 255, 0.12);
  --color-overlay-15: rgba(255, 255, 255, 0.15);
  --color-overlay-20: rgba(255, 255, 255, 0.2);
  --color-overlay-30: rgba(255, 255, 255, 0.3);
  --color-overlay-35: rgba(255, 255, 255, 0.35);
  --color-overlay-40: rgba(255, 255, 255, 0.4);
  --color-overlay-45: rgba(255, 255, 255, 0.45);
  --color-overlay-50: rgba(255, 255, 255, 0.5);
  --color-overlay-60: rgba(255, 255, 255, 0.6);
  --color-overlay-65: rgba(255, 255, 255, 0.65);
  --color-overlay-70: rgba(255, 255, 255, 0.7);
  --color-overlay-80: rgba(255, 255, 255, 0.8);

  /* Text emphasis on dark surfaces. */
  --color-text-dim: rgba(255, 255, 255, 0.7);
  --color-text-subtle: rgba(255, 255, 255, 0.82);
  --color-text-faded: rgba(255, 255, 255, 0.9);
  --color-text-bright: rgba(255, 255, 255, 0.96);
  --color-text-dull: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --color-text-ghost: color-mix(in srgb, var(--color-bg) 60%, transparent);

  /* Inputs: quieter fills and hairlines than classic's. */
  --color-input-bg: rgba(255, 255, 255, 0.06);
  --color-input-border: rgba(255, 255, 255, 0.16);
  --color-input-placeholder: rgba(255, 255, 255, 0.38);

  /* ⚠ THESE FOUR ARE NOT GLOWS in the structural sheets — they are read as
     background FILLS and BORDER COLOURS (the active nav pill, the deck section
     tint, the profile chips). Retiring the neon means not painting SHADOWS
     with them; the tokens themselves keep working values. Nothing in this
     pack puts any of them in a box-shadow.
     ⚠ The soft/glow steps sit a few points HEAVIER than a violet pack's: a grey
     accent at 12% is nearly indistinguishable from the neutral overlay ladder,
     which would leave focus rings and active pills reading as nothing. */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --color-accent-shadow: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --color-accent-glow-strong: color-mix(in srgb, var(--color-accent) 45%, transparent);

  /* Modal scrim and top bar. The bar is nearly opaque because base does not
     blur what is behind it. */
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-topbar-bg: rgba(16, 16, 20, 0.94);

  /* ══ TYPOGRAPHY ═════════════════════════════════════════════════════════
     Sora and Fira Code stay. --font-drama drops Lora: base has no place for a
     serif flourish, so the "dramatic" role collapses onto the heading face.
     ⚠ index.html still links Lora for the classic packs, so this pack pays for
     a font it never paints. Known and accepted — do not "fix" it by dropping
     the link, which would break classic. */
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Sora', sans-serif;
  --font-data: 'Fira Code', monospace;
  --font-drama: var(--font-heading);

  /* ══ TIER 1: RADIUS ══════════════════════════════════════════════════════
     One step softer than classic across the board. --radius-pill and
     --radius-circle are geometric absolutes and do not move. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 36px;

  /* ══ TIER 1: ELEVATION ═══════════════════════════════════════════════════
     Soft, neutral, black-only. --shadow-accent is the one to look at: classic
     defines it as a 35% accent halo, and styles.css puts it on EVERY primary
     button's hover. Base aliases it to the neutral mid shadow, which retires
     the accent glow app-wide in one line rather than by chasing call sites. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.46);
  --shadow-accent: var(--shadow-md);

  /* ══ TIER 1: MOTION ══════════════════════════════════════════════════════
     A notch shorter than classic (0.15 / 0.2 / 0.3), and a crisper curve:
     quick out of the gate, settled at the end. */
  --dur-fast: 0.1s;
  --dur-med: 0.14s;
  --dur-slow: 0.2s;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* ══ CROSS-SURFACE TRIO ══════════════════════════════════════════════════
     Retired from styles.css's light block along with the data-theme attribute;
     each pack now states its own. --color-toolbar-icon is read by the library
     toolbar AND the topbar notification bell — neutral here, where classic
     tints it violet. The --card-face-info-btn-* pair sits on card ART, so it
     stays a dark chip in both base packs. */
  --color-toolbar-icon: rgba(255, 255, 255, 0.72);
  --card-face-info-btn-bg: rgba(0, 0, 0, 0.72);
  --card-face-info-btn-color: var(--color-bg);

  /* The standalone header's logo filter — read by #tcgbSiteHeader in
     public/site-header.js, which the standalone pages inject and which since
     stage 9 sits on top of a pack-themed page. classic blooms the logo with two
     violet drop-shadows; base retires the neon, and a `filter` is not a colour,
     so no palette token could switch it off — this token carries the whole
     filter. A plain brightness lift, matching the SPA's own flat logo.
     ⚠ site-header.js keeps the classic bloom as this var()'s FALLBACK, which is
     what the tokenless /play sidecar pages get. Do not move it into tokens.css. */
  --site-header-logo-filter: brightness(1.04);

  /* ══ TIER 2: COMPONENT TOKENS ════════════════════════════════════════════
     The same seven the classic packs mint. See classic/theme.css for WHY each
     one had to be a token rather than a rule in this sheet — the reasons are
     cascade mechanics and are identical here. */

  /* AUTH — opaque mask over Chrome's yellow autofill fill. Must be fully
     opaque, so it cannot be a translucent overlay token. */
  --auth-autofill-mask: #15151A;

  /* AUTH — the field focus ring. Flat and thin: a 2px accent-tinted ring, not
     classic's 3px glow. */
  --auth-input-focus-ring: 0 0 0 2px var(--color-accent-soft);

  /* BOOKSHELF — the page-coloured fill behind a book and behind the set
     listbox. */
  --book-ground: #141418;

  /* BOOKSHELF — the shelf plank's colour and the drop under it. Tokens rather
     than a `.bookshelf-wrap::after` rule in this sheet because the same pair
     also feeds the plain inter-row lines styles-bookshelf.css draws under
     every OTHER row. Neutral, like the rest of this pack. */
  --shelf-plank-color: var(--color-overlay-10);
  --shelf-plank-shadow: var(--shadow-md);

  /* LIBRARY — the cards table's sticky column-header fill. Opaque, a shade
     lighter than the panel under it. */
  --library-thead-bg: rgb(28, 28, 35);

  /* LIBRARY — the plate behind an instance panel's pills, price input, selects
     and notes box. */
  --library-instance-detail-pill-bg: rgba(20, 20, 25, 0.94);

  /* LIBRARY — the tint laid over a deck tile that carries card art. */
  --library-item-bg-tint: rgba(16, 16, 20, 0.92);

  /* BINDER — the data-tooltip plate. */
  --tooltip-bg: rgba(28, 28, 34, 0.96);

  /* ══ EXTRA FLATTENING ════════════════════════════════════════════════════
     Three page/feature tokens that live in styles.css's :root and hard-code a
     classic-flavoured LOOK. The classic packs never touched them (they had no
     light twin to force the issue); base flattens them so no gradient or
     dark-only fade survives into the new default. */
  /* Deck section panels + the library table's image-expand row: classic paints
     a violet-to-white gradient over a dark tint. Flat wash here. */
  --deck-section-surface-bg: var(--color-overlay-5);
  /* Deck card drop shadow: classic's custom teal-black. Neutral here. */
  --deck-card-shadow: var(--shadow-md);
  /* The fade behind the advanced-search result count. Classic hard-codes
     rgba(10,10,20,…) — the page colour, so a token-expressed fade instead. */
  --advanced-card-search-total-results-bg: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 82%, transparent) 35%);
}

/* ============================================================================
   TOPBAR  (.app-topbar / .app-primary-* — styles.css)
   ⚠ TWINNED with #tcgbSiteHeader in public/site-header.js. That header is not
   pack-aware and carries the CLASSIC look as literal var() FALLBACKS, which is
   what the tokenless /play sidecar pages render. Since stage 9 the standalone
   pages (/admin) link this sheet, so its :root above DOES reach
   the injected bar through those var() reads and restyles it for free — no rule
   in this section is involved. The single exception is the logo bloom, a
   `filter` rather than a colour: see --site-header-logo-filter in :root.
   ========================================================================== */

/* ABSENT — the frosted bar. classic blurs the page behind .app-topbar; base
   has no backdrop-filter anywhere. --color-topbar-bg is raised to 0.94 instead,
   so the bar is a flat plate rather than a thin one over a smear. */

/* ABSENT — the home logo's purple bloom (two drop-shadow filters, brighter
   while the tab is active). The logo is a PNG and reads perfectly flat. */

/* ABSENT — the nav-tab hover lift + accent shadow, and with it the
   .primary-home-tab-wrap cancellation that only existed to undo the lift for
   the bare hit area over the logo. The structural rule already shifts the tab's
   background and border on hover, which IS base's hover. */

/* Zoom stepper field: a flat 2px ring instead of classic's 8px accent bloom. */
.optionsColsInput:focus {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* Notification badge: a solid accent pill (classic uses a two-stop gradient). */
.notification-badge {
  background: var(--color-accent);
}

/* Topbar dropdowns: neutral elevation. --shadow-md is redefined above, so this
   is the same declaration as classic's and a completely different shadow. */
.notification-dropdown,
.options-dropdown {
  box-shadow: var(--shadow-md);
}

/* ============================================================================
   AUTH  (.auth-view — styles-auth.css)
   ========================================================================== */

/* ABSENT — the full-page accent bloom over a vertical fade. styles-auth.css
   already paints `background-color: var(--color-primary)`, so dropping the
   background-image leaves exactly the flat ground base wants. */

/* ABSENT — the hover lift on the provider buttons and the primary button. */

/* ABSENT — the primary button's accent glow. */

/* The "or" divider hairlines. Not decoration to drop: the ::before/::after
   boxes are pure geometry in the structure sheet and have no fill of their own,
   so without this they are invisible. */
.auth-view .auth-or::before,
.auth-view .auth-or::after {
  background: var(--color-overlay-15);
}

/* ============================================================================
   DIALOGS  (.new-binder-dialog / .deck-data-dialog / .advanced-card-search-*
             — styles-dialogs.css)
   ========================================================================== */

/* Modal shells. classic frosts them and rings them in a 30px accent bloom;
   base swaps both for one soft neutral drop. Their fills are already 95%
   opaque in the structure sheet, so nothing is lost by not blurring. */
.new-binder-dialog,
.deck-data-dialog {
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the ::backdrop blur behind them. The scrim colour is
   --color-backdrop, a token, and stays. */

/* Select chevrons. The gutter and placement are structural; only the artwork
   is skin, and without it the selects have no arrow at all. Same glyph as
   classic — these selects are dark-filled in this pack too. */
.new-binder-dialog select,
.advanced-card-search-category-select,
.advanced-card-search-filter-select,
.advanced-card-search-filter-content .search-filter-set-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.7)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Advanced search: the bar that marks the draggable resize edge. Flat accent,
   no 14px halo — but it still has to be painted, it is the bar itself. */
.advanced-card-search-dialog::before {
  background: var(--color-accent);
}

/* Advanced search: an active toolbar toggle keeps its inset accent ring. This
   is state, not decoration — a solid 1px line rather than classic's 50% haze. */
.advanced-card-search-view-toggle-wrap.is-active .advanced-card-search-filters-btn,
.advanced-card-search-bookmark-toggle-wrap.is-active .advanced-card-search-filters-btn {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ============================================================================
   FRIENDS  (.friend-* / .user-avatar-chip — styles-friends.css)
   ========================================================================== */

/* Friend card: a 1px lift (classic lifts 2px). Kept because the row is a card
   and the lift is its only affordance; halved because base is quiet. */
.friend-row-wrap:hover {
  transform: translateY(-1px);
}

/* Unfriend: the quiet danger pill. Entirely literal colour — no token names
   this red — so the whole treatment has to be stated. Flat: no hover lift, and
   the fill deepens by a few percent rather than glowing. */
.friend-drawer .btn-danger {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ff7d8a;
}
.friend-drawer .btn-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.55);
}

/* ============================================================================
   HOME  (.home-view / .home-dash — styles-home.css)
   ========================================================================== */

/* ABSENT — the ambient accent glow bloomed in from above the fold, on both
   .home-view and (below) .profile-view. It is the single most "neon" thing in
   classic and the first thing base drops. */

/* ABSENT — the landing shell's three-layer gradient, and the old hero's
   bleed-through binder art and scrim (.home-landing::before / ::after). Those
   two pseudo-elements are already switched off by `content: none` in the
   structure sheet, so classic only carries them to stay in step; base does not
   carry dead paint. */

/* ABSENT — the v2 hero's accent bloom. styles-home.css gives .home-hero-v2
   `background-color: var(--color-primary)`, so the hero is simply the page
   colour: one flat plane, edge to edge, which is the whole idea. */

/* Primary CTA: a solid accent pill that deepens on hover. classic uses a
   two-stop gradient that lifts and scales into an accent halo. */
.home-view .home-hero-cta {
  background: var(--color-accent);
}
.home-view .home-hero-cta:hover {
  background: var(--color-accent-hover);
}

/* Fanned hero cards: five flat card faces under one soft neutral drop. classic
   paints five radial gradients; the rotations and offsets are geometry and stay
   structural in both packs. Without a fill these boxes are invisible. */
.home-view .home-hero-card {
  box-shadow: var(--shadow-lg);
}
.home-view .home-hero-card.hc1 { background: #223047; }
.home-view .home-hero-card.hc2 { background: #3a2140; }
.home-view .home-hero-card.hc3 { background: #1d3a2e; }
.home-view .home-hero-card.hc4 { background: #46341d; }
.home-view .home-hero-card.hc5 { background: #431f28; }

/* Feature cards and the workflow/FAQ panels: a flat overlay wash where classic
   runs a 165° glass gradient. The hover brightens the wash; the border shift is
   structural, and classic's 3px lift and drop shadow are gone. */
.home-view .home-feature-card {
  background: var(--color-overlay-5);
}
.home-view .home-feature-card:hover {
  background: var(--color-overlay-8);
}
.home-view .home-workflows,
.home-view .home-faq {
  background: var(--color-overlay-4);
}

/* Screenshot mattes. ⚠ The WHOLE background stack is here, placement included —
   same reason as classic: the base rule uses the `background` shorthand, so
   leaving the modifiers' `background-size: cover` in layer(structure) would let
   this sheet's implied `background-size: auto` out-rank it. */
.home-view .home-screenshot-placeholder {
  background: var(--color-overlay-5);
}
.home-view .home-screenshot-placeholder.home-screenshot-master-set {
  background-image: url("/img/masterSet.webp"), linear-gradient(var(--color-overlay-8), var(--color-overlay-8));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}
.home-view .home-screenshot-placeholder.home-screenshot-collection {
  background-image: url("/img/collection.webp"), linear-gradient(var(--color-overlay-8), var(--color-overlay-8));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}

/* Dashboard. Avatars are solid accent discs (classic: gradients under an accent
   drop), the stat tiles a flat wash, and the primary button's glow and lift are
   gone — styles.css already handles its hover fill. */
.home-dash .dash-avatar {
  background: var(--color-accent);
}
.home-dash .dash-stat {
  background: var(--color-overlay-5);
}
.home-view .dash-disc-av,
.home-dash .dash-feed-av {
  background: var(--color-accent);
}

/* ABSENT — .dash-btn-primary's accent glow and hover lift, and .dash-disc's
   2px hover lift. Discover cards get their feedback from the structural border
   and background shift. */

/* ============================================================================
   PROFILE  (.profile-view / .profile-card / .profile-dialog
             — styles-profile.css)
   ========================================================================== */

/* ABSENT — the page's ambient accent glow (see HOME above). */

/* Hero, cards and dialogs: one flat wash and one neutral drop, where classic
   runs a glass gradient plus an accent bloom in the hero's corner. */
.profile-view .profile-hero {
  background: var(--color-overlay-5);
  box-shadow: var(--shadow-sm);
}
.profile-card {
  background: var(--color-overlay-5);
  box-shadow: var(--shadow-sm);
}
.profile-dialog {
  background-image: linear-gradient(var(--color-overlay-5), var(--color-overlay-5));
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the hero's dot texture and the diagonal mask that fades it in.
   Texture is the opposite of flat. */

/* ABSENT — the frosted .profile-tabbar and the blurred .profile-dialog-backdrop.
   The tabbar's overlay fill is structural and stands alone. */

/* Avatar ring: a solid accent ring instead of classic's conic sweep, and it
   brightens rather than swelling and blooming on hover. */
.profile-view .profile-hero-avatar-ring {
  background: var(--color-accent);
}
.profile-view .profile-hero-avatar-ring:hover {
  background: var(--color-accent-hover);
}

/* The "Edit" scrim that fades in over the avatar. Not decoration to drop: it is
   the scrim, and it sits over an arbitrary card image. */
.profile-view .profile-avatar-edit-scrim {
  background: rgba(0, 0, 0, 0.55);
}

/* Active tab: a solid accent pill, no glow. */
.profile-view .profile-tab.active {
  background: var(--color-accent);
}

/* Field focus: the same flat 2px ring as the topbar stepper and the auth
   fields, so every focus in the app is one shape. */
.profile-field input:focus,
.profile-view .friends-search-row input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* Primary buttons: solid accent, deepening on hover. No gradient, no glow. */
.profile-view .btn-primary,
.profile-view .friends-search-row button.btn-primary {
  background: var(--color-accent);
}
.profile-view .btn-primary:hover,
.profile-view .friends-search-row button.btn-primary:hover {
  background: var(--color-accent-hover);
}

/* Danger surfaces: literal reds that no token names, so they must be stated.
   Same quiet pill as the FRIENDS unfriend button above — the drawer's own
   button matches both selectors, and the two blocks state identical values so
   their order does not matter. */
.profile-danger-card { border-color: rgba(220, 38, 38, 0.25); }
.profile-dialog-danger { border-color: rgba(220, 38, 38, 0.35); }
.profile-view .btn-danger {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ff7d8a;
}
.profile-view .btn-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.55);
}

/* ============================================================================
   BOOKSHELF  (.bookshelf / .book-* — styles-bookshelf.css)
   The binder tiles on the home dashboard and the collection Binders tab.
   ========================================================================== */

/* The shelf plank (the fading hairline + its drop) is no longer a rule here:
   it is drawn by styles-bookshelf.css from the --shelf-plank-color /
   --shelf-plank-shadow pair this pack declares at the top of the file. */

/* A pulled-out book floats on a neutral drop. classic adds a 28px bloom in the
   binder's own colour; base keeps the elevation and drops the bloom.
   ⚠ Only the SHADOW is here. The lift (`transform: translateY(-12px)`) stays in
   styles-bookshelf.css because the prefers-reduced-motion block cancels it, and
   a layered cancellation cannot out-rank an unlayered pack rule. */
.book:hover .book-body, .book:focus-within .book-body, .book.is-open .book-body {
  box-shadow: var(--shadow-lg);
}
/* …except the ghost "new binder" book, which is a dashed outline and stays
   flat. Stated here because the shadow above is unlayered and would out-rank a
   structural cancellation. */
.book-new:hover .book-body, .book-new:focus-within .book-body, .book-new.is-creating .book-body {
  box-shadow: none;
}

/* The spine's completion fill: ONE stop of the binder's own colour where
   classic ramps two. --bc is DATA (JS sets it per binder), so only the shape of
   the fill is skin. */
.book-spine-fill {
  background: color-mix(in srgb, var(--bc) 50%, transparent);
}

/* ABSENT — the 100%-binder crown's warm bloom (a drop-shadow filter). The
   glyph keeps its colour, loses its halo. */

/* Privacy dot on the spine: the binder's colour lifted toward white so it reads
   against the dark ground. */
.book-spine-dot { border-color: color-mix(in srgb, var(--bc) 80%, white 10%); }
.book-spine-dot.is-public { background: color-mix(in srgb, var(--bc) 80%, white 10%); }

/* Cover art plate: ONE flat wash of the binder's colour over the neutral stock,
   where classic stacks two radial blooms on a slate fade. Written as a
   two-identical-stop gradient because the structural property is
   `background-image`, and using it is load-bearing:
   ⚠ `background-image`, NOT the `background` shorthand. `.book-cover-art.has-bg`
   sets background-size/position in the structure sheet for binders that have
   real cover art, and an unlayered shorthand here would reset both past it. */
.book-cover-art {
  background-image: linear-gradient(
    color-mix(in srgb, var(--bc) 26%, #17171C),
    color-mix(in srgb, var(--bc) 26%, #17171C));
}

/* The privacy badge and the settings gear sit ON the cover art, so they carry a
   near-black scrim in BOTH base packs — they have to read over arbitrary card
   images, not over the page. */
.book-cover-badge,
.book-cover-gear {
  background: rgba(0, 0, 0, 0.55);
}

/* KEPT, at half classic's angle: the gear turns as you reach for it. A rotation
   is mechanical feedback on a mechanical glyph, not a neon flourish — the rule
   base drops is the SCALE transform, not every transform. */
.book-cover-gear:hover { transform: rotate(30deg); }

/* Cover progress bar: flat, in the binder's colour. */
.book-cover-bar i {
  background: var(--bc);
}

/* Colour swatches. classic pops them 15% larger on hover; base has no scale
   hovers, so the swatch simply comes up to full opacity — the same signal the
   structure sheet already uses for the SELECTED swatch (`.book-swatch.on`).
   The custom swatch stays a rainbow wheel: seven literal hues that no token
   names, and it is the control's whole meaning. That conic gradient
   deliberately overrides `.book-swatch { background: var(--sw) }` in the
   structure sheet, and still does — unlayered beats layered at equal
   specificity. */
.book-swatch:hover { opacity: 1; }
.book-swatch-custom {
  background: conic-gradient(#ff5757, #ffd54a, #5ccf6a, #4aa3ff, #b06bff, #ff8fcf, #ff5757);
}

/* Primary face button (Save / Create): solid accent. */
.book-face-btn.primary {
  background: var(--color-accent);
}

/* Delete: the same quiet danger pill as FRIENDS and PROFILE above.
   ⚠ This rule's border-color (0,2,0, unlayered) deliberately out-ranks
   `.book-face-btn:hover` (0,2,0, layered), reproducing the source order the
   structure sheet expects: the pill keeps its red border while hovered, and
   only its own :hover below deepens it. */
.book-face-btn.danger {
  color: #ff7d8a;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.1);
}
.book-face-btn.danger:hover {
  border-color: rgba(220, 38, 38, 0.55);
  background: rgba(220, 38, 38, 0.18);
}

/* KEPT — the ghost book's plus sign turns a quarter turn as it opens. Same
   reasoning as the gear above. */
.book-new:hover .book-spine-plus, .book-new:focus-within .book-spine-plus {
  transform: rotate(90deg);
}

/* ============================================================================
   DECKSHELF  (.deck-shelf / .deckbox-* — styles-deckshelf.css)
   The deck boxes standing on the shelf planks on the library's Decks tab.

   No RULES, only materials — styles-deckshelf.css reads all seventeen tokens
   below with token-based fallbacks. Base's identity holds here exactly as it
   does on the bookshelf: the same geometry, a neutral grey ladder instead of
   classic's violet-tinted one, and no coloured bloom on the lift.
   ========================================================================== */

:root {
  /* The four printed materials — a flatter, cooler ladder than classic's; the
     hue is gone but the step between the four faces is not, because that step
     is what makes the box read as three-dimensional. */
  --deckbox-shell: #1c1c22;
  --deckbox-lid: #23232b;
  --deckbox-top: #2a2a33;
  --deckbox-side: #131317;

  /* Hairlines. The highlight is dimmer and the shade fractionally deeper than
     classic's — base leans on form, not sparkle. */
  --deckbox-seam: rgba(0, 0, 0, 0.6);
  --deckbox-hi: rgba(255, 255, 255, 0.07);
  --deckbox-lo: rgba(0, 0, 0, 0.32);

  /* The acetate sweep over the leader window, at roughly two thirds of
     classic's strength. */
  --deckbox-gloss: linear-gradient(112deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 22%, transparent 44%, transparent 76%, rgba(255, 255, 255, 0.05));

  /* Chip fill. (The settings gear is the binder cover's .book-cover-gear and
     takes its scrim from that rule above.) */
  --deckbox-chip-bg: rgba(0, 0, 0, 0.38);

  /* Elevation: the same pool on the plank, the same rest drop. */
  --deckbox-contact: rgba(0, 0, 0, 0.5);
  --deckbox-rest-shadow: var(--shadow-md);

  /* The four foregrounds. Base's --color-accent-light is a neutral #A6ACB8, so
     "complete" reads as a lighter chip rather than a coloured one — which is
     why styles-deckshelf.css also prefixes the complete count with a check
     glyph. Colour alone was never going to carry it in a hueless pack. */
  --deckbox-count-complete: var(--color-accent-light);
  --deckbox-privacy-public: var(--color-accent-light);
  --deckbox-privacy-private: var(--color-text-faded);
  --deckbox-new-plus: var(--color-accent-light);
}

/* The seventeenth token. classic mixes --box-color into its lift bloom, which
   forces the declaration onto .deckbox (a var() inside a custom property is
   substituted on the element it is declared on, and --box-color only exists
   there). Base has no bloom to mix — but the placement is kept identical
   across the four packs so the block reads the same everywhere. */
.deckbox {
  --deckbox-lift-shadow: var(--shadow-lg);
}

/* ============================================================================
   DECK  (.deck-view / .deck-* — styles-deck.css)
   ========================================================================== */

/* Section toolbar buttons and empty card slots lift a hair on hover. Kept at
   1px — these are the affordance on otherwise featureless boxes — and the card
   slot comes down from classic's 2px to match. */
.deck-section-add-btn:hover:not(:disabled),
.deck-section-move-btn-wrap:hover:has(.deck-section-move-btn:not(:disabled)),
.deck-section-delete-btn-wrap:hover:has(.deck-section-delete-btn:not(:disabled)),
.deck-card-slot:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Drop target: a 2px accent ring drawn outside the border, on cards, slots and
   whole sections. Functional, not decorative — it is how a drag says "here" —
   so it survives the flattening unchanged.
   ⚠ `.card-slot.card-drop-target` is the BINDER grid's slot; the group is
   declared together so both grids light up identically. */
.deck-card-stack.deck-card-drop-target,
.deck-card-slot.deck-card-drop-target,
.deck-card-slot.deck-card-slot-add-active,
.deck-section.deck-card-drop-target,
.card-slot.card-drop-target {
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ============================================================================
   BINDER PAGES + SLOTS  (section.page / .card-slot / .card-image / the
   data-tooltip system / the card-preview modal — styles-binder-misc.css)
   ========================================================================== */

/* The page itself: near-black card stock, one step off pure black.
   The four-layer dot screen prints over it — STRUCTURAL, in
   styles-binder-misc.css, identical under every pack. base does not (and
   cannot) opt out: the binder-paper texture is not a theme's to decide.
   The stock colour IS base's to decide, and this is the whole of it.
   ⚠ `background-color` only, and NEVER the `background` shorthand: this sheet
   is unlayered, so a shorthand here would reset the structural
   background-image/size/position and erase the dots (same discipline as the
   bookshelf cover art). */
section.page {
  background-color: #0B0B0E;
}

/* Every page-layout class re-states the same stock COLOUR. JS puts `page` and
   the layout class on the SAME element (binder-render-ui.js sets
   pageSection.className to "page <layout>"), so this duplicates the fill above
   — kept because the structure sheet expects it, and dropping it would be a
   silent change if the two classes ever came apart. Stock only: the dot screen
   is structural and rides on `section.page`. */
section.page-1by1,
section.page-2by2,
section.page-4by3,
section.page-4by4,
section.page-5by4,
section.page-3by3 {
  background-color: #0B0B0E;
}

/* The bifold spread itself (styles.css): the same stock, on a single neutral
   drop rather than classic's two-layer "paper on a table". Its dot screen is
   structural too (styles.css), so the spread and the pages inside it carry the
   same texture here as everywhere. The spread's BORDER stays structural — its
   colour is --bifold-border-color, the binder's own colour, which JS sets per
   binder; that is data, not palette. */
.bifoldContainer {
  background-color: #0B0B0E;
  box-shadow: var(--shadow-lg);
}

/* Drop-target ring while a search result is dragged onto a slot. Functional,
   like the deck rings above.
   ⚠ The slot's own `background-color` tint stayed in the structure sheet on
   purpose: `section.page.page-first-and-empty .card-slot` (0,3,1) out-ranks it
   today and blanks the slot, and an unlayered fill here would defeat that
   layered cancellation. */
div.card-slot.binder-card-slot-add-active {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* Holo foil — KEPT, and kept in full, sweep included. This is the one place
   base does not flatten: the foil is a rendering of the CARD, not of the app's
   chrome. A flat card game would be a different product.
   ⚠ WHICH cards get it is decided in JS — scripts/cards/holo-detection.js adds
   `.is-holo-card`. Only the ARTWORK is skin; the layer's `opacity` ramp stays
   structural, because that is the JS-driven reveal, not the look. */
.holo-overlay-layer {
  background-image:
    linear-gradient(115deg, transparent 30%, var(--color-input-border) 48%, transparent 66%),
    radial-gradient(circle at 14% 10%, var(--color-holo-pink-faded), transparent 46%),
    radial-gradient(circle at 82% 88%, var(--color-holo-blue), transparent 44%);
  mix-blend-mode: screen;
  background-size: 250% 250%, 160% 160%, 150% 150%;
  background-position: -140% 0%, 0% 0%, 100% 100%;
}
.is-holo-card:hover .holo-overlay-layer {
  animation: holoShineSweep 5s linear infinite;
}
@keyframes holoShineSweep {
  0%   { background-position: -140% 0%, 0% 0%, 100% 100%; }
  100% { background-position: 180% 0%, 100% 0%, 0% 100%; }
}

/* A hovered empty slot reveals a "Search" prompt over a scrim. The REVEAL
   (opacity 0 → 1) stays structural; the scrim has to be painted here. */
div.card-slot.card-slot-empty:hover .card-image::before {
  background-color: var(--color-backdrop);
}

/* ABSENT — the slot action buttons' hover lift and accent glow (Details /
   Replace / Owned / Remove / Move-all / Scale), and with them the
   `box-shadow: none` that classic needs for a DISABLED move-all button (a
   disabled button still matches :hover, so classic has to cancel its own glow;
   base has no glow to cancel). styles-binder-misc.css already switches their
   border to the accent on hover, which is the whole hover here.
   The :active press is kept: it is the button reporting the click. */
div.card-slot .remove-btn:active,
div.card-slot .search-btn:active,
div.card-slot .owned-btn:active,
div.card-slot .custom-scale-btn:active,
div.card-slot .move-all-left-btn:active,
div.card-slot .move-all-right-btn:active,
div.card-slot .details-btn:active {
  transform: translateY(1px);
}

/* Page controls (Add page / Move page / Delete page) — same decision, same
   reasons. `.page-add-option` rides along because the structure sheet always
   grouped it with them; that class is not rendered today. */
section.page .page-controls .page-remove-btn:active,
section.page .page-controls .page-move-btn:active,
section.page .page-controls .page-add-btn:active,
section.page .page-add-option:active {
  transform: translateY(1px);
}

/* ABSENT — frosted glass, everywhere it appears: the binder bottom bar, the
   search action dialog, the subtype dialog, the card-preview info panel and
   details pane, the preview close button, and the two ::backdrop blurs. It is
   classic's signature chrome treatment and base has no equivalent — it has the
   opposite. The two surfaces whose structural fill is only 85% opaque are made
   solid below, because 85% translucency over card art without a blur behind it
   reads as a smudge rather than as glass. */
.binder-bottom-bar,
.card-preview-details {
  background-color: var(--color-primary);
}

/* The subtype dialog: neutral elevation where classic puts a 30px accent halo. */
.search-subtype-dialog {
  box-shadow: var(--shadow-lg);
}

/* ABSENT — the preview close button's 1.1× hover swell. styles-binder-misc.css
   already shifts its fill and border on hover. */

/* ============================================================================
   LIBRARY  (.library-* — styles-library.css)
   The Collection surface: tab bar, cards table, instance panels, deck tiles.
   ========================================================================== */

/* ABSENT — the collection tabs' 1px hover lift and the active tab's accent text
   halo. A tab bar is a fixed row; nothing in it should move, and the active tab
   already has a structural underline. */

/* ABSENT — the card select button's lift and accent glow, on both its grid and
   its table flavour, and therefore also classic's
   `.library-cards-table__col-select .library-card-select-btn:hover` rule, which
   exists only to cancel that lift inside a table row. Same for the remove
   button and the instance-card face buttons: the structure sheet shifts their
   fill and border, which is base's hover.
   The :active presses are kept — same reasoning as the binder slot buttons, but
   as an opacity dip rather than classic's 0.95 scale.
   DEAD SELECTOR DROPPED from this group: `.library-item-settings-btn:active`,
   the old Decks-tab tile gear — see the note below. The remaining three are
   Cards-tab buttons that are still rendered. */
.library-card-select-btn:active,
.library-card-remove-btn:active,
.library-instance-card__top-btn:active {
  opacity: 0.7;
}

/* DEAD RULES DELETED: the Decks-tab tile hover (.library-item-card:hover /
   .library-deck:hover). The Decks tab draws deck BOXES now
   (styles-deckshelf.css + the DECKSHELF token block above); nothing renders
   those classes any more. */

/* Instance panel pills: an active pill keeps its 1px ring in its own accent.
   State, not decoration — solid rings here where classic uses 40–45% hazes. The
   fills and borders stay structural: they are colour-mixes of
   --library-tag-*-accent over --library-instance-detail-pill-bg, both tokens. */
.library-instance-details-panel__state-pill--active {
  box-shadow: 0 0 0 1px var(--color-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='pack'] {
  box-shadow: 0 0 0 1px var(--library-tag-pack-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='gift'] {
  box-shadow: 0 0 0 1px var(--library-tag-gift-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='trade'] {
  box-shadow: 0 0 0 1px var(--library-tag-trade-accent);
}
.library-instance-details-panel__tag-pill--active[data-tag='paid'] {
  box-shadow: 0 0 0 1px var(--library-tag-paid-accent);
}