/* ============================================================================
   MNW global stylesheet. Charter: docs/design-system.md.

   Build new features by COMPOSING these primitives, in this order of preference:

     1. Use a UTILITY class for one-off adjustments       (.mb-section, .text-sm, .nowrap)
     2. Use a LAYOUT PRIMITIVE to position content        (.container, .stack-row, .field-row, .list-row)
     3. Use a COMPONENT PRIMITIVE for a UI element        (.card, .callout, .badge, .progress-bar, .empty-state, .input--sm, .small)
     4. Extend a primitive with a modifier                (.card--bordered, .callout--warning, .stack-row--bordered)
     5. ONLY THEN consider a new class, and add it to the right section below

   A new class is a smell, not a goal. Before writing one:
     - grep this file for the visual shape you want; almost everything is here
     - if you can't find it, consider whether the shape belongs in the design system
       (then add it to the appropriate section here AND to docs/design-system.md)
     - page-scoped rules (`.foo-page .bar`) are a last resort, not a first move

   --------------------------------------------------------------------------
   FILE STRUCTURE (search by section name for anchor)

     FOUNDATIONS
       @font-face declarations                            (top of file)
       :root tokens                                         color, type, space, radius, shadow
       Element base                                         h1/h2/h3, p, a, button, input, table

     UTILITIES
       Spacing  (.m-0, .mt-*, .mb-*, .ml-*, .my-*)
       Sizing   (.col-*, .w-*, .maxw-*, .minw-*)
       Text     (.text-sm, .text-xs, .text-center, .text-right, .fw-bold,
                 .nowrap, .muted, .dimmed, .dimmer, .is-faded, .danger-text)
       State    (.hidden, .is-selected, .is-active, .unstyled-link)
       Shapes   (.square-cover, .scroll-x)

     LAYOUT PRIMITIVES                                    (page-scaffolding shapes)
       .container                                          width set by body class
       .stack-row + --bordered / --tight / --top           toolbar / header bar
       .field-row + .form-group.is-grow                    inline form row
       .list-row + .list-row-title                        vertical item list
       .form-row                                           2-col grid form
       .cover-row + .cover-thumb + .cover-empty            image picker

     COMPONENT PRIMITIVES                                 (reusable UI blocks)
       .content-section                                     light-bg page section box
       .card / .card-muted / .card--bordered / .card--selectable
       .form-group / .form-section / details.form-section
       .section-header / .section-lead / .section-group-label
       .badge + data-tone (success/warning/danger)
       .callout + --danger / --warning / --solid-warning
       .banner + --info / --warning                         full-bleed page-top notice
       .alert + -note / -tip / -warning / -caution          left-border inline notice
       .modal + .modal-overlay
       .empty-state + --compact / --chart / --lg
       .progress-bar-container + .progress-bar (--slim, --rounded, --highlight)
       .upload-status + -row + -msg.is-success / .is-error
       .field-status / .save-status + .success / .error / .saving
       .toast + .toast--success / --error / --warning
       .breadcrumb / .pagination
       .tabs + .tab.chosen                                 (chosen is makeover's)

     CONTROL MODIFIERS                                    (compose onto buttons/inputs)
       .small / .btn-compact / .btn-link / .btn-tiny        button sizes
       .btn-danger / .saved                                  button intents
       .input--xs / --sm / --mono / --upper / --numeric     input sizes/shapes

     FEATURE SUBAPPS                                      (their own CSS scope)
       .git-* (git source browser at /source/*)
       Pricing calculator on /pricing
       Markdown preview / docs-ui in /docs/*

     PAGE-SCOPED LAYOUTS                                  (when truly page-specific)
       .item-page / .project-page / .article-page / .purchase-page / .cart-* /
       .library-page / .feed-page / .discover-page / .landing / .creators-page /
       .health-page / .import-page / .delete-account-page / .export-page /
       .receipt-page / .fan-plus-page / .stripe-disclaimer-page / .buy-page /
       .user-page / .collection-page / .changelog-page / .policy-page /
       .tag-tree-page / .project-blog-page / .project-paywall-page /
       .confirm-delete-page / .admin-page / .dashboard-page

     DASHBOARD TABS                                       (one section per tab partial)
       Per-tab classes scoped under their canonical body class. Use modifier
       composition where possible; only add tab-specific rules when the shape
       genuinely diverges from a primitive.

     RESPONSIVE                                           (@media at end of file)
       768px tablet
       480px phone

   --------------------------------------------------------------------------
   When in doubt: read docs/design-system.md first. Update both files together
   when you add a primitive.
   ============================================================================ */

@font-face {
  font-family: "Young Serif";
  src: url("/static/fonts/ysrf.woff2") format("woff2"),
       url("/static/fonts/ysrf.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"),
       url("/static/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"),
       url("/static/fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-Regular.woff2") format("woff2"),
       url("/static/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-Bold.woff2") format("woff2"),
       url("/static/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

/* Everything below is in the `components` cascade layer.

   _head_assets.html declares the order once, `@layer makeover, base,
   components, responsive`, and until now three of those four names were
   empty: this file adopted none of them, so 11,788 unlayered lines outranked
   every named layer by construction and the generated sheets lost every
   contest they entered.

   Adopting `components` changes no rendering today. `components` already sits
   after `makeover` in the declared order, so this file wins the same contests
   it was winning before; what changes is that it wins them by a stated rule
   rather than by being unlayered. wizard.css and media-player.css adopt the
   same layer, and they still beat this file on a tie because a layer resolves
   internally by source order and they load later.

   Two things stay OUT of the layer, deliberately. The @font-face rules above
   are not style rules and take no part in the cascade. And the theme block
   theming.rs injects into <head> is unlayered, which is load-bearing: an
   unlayered rule outranks every layer, so a creator's chosen theme keeps
   overriding this file's :root without needing to know the order. */
@layer components {
:root {
  /* Typography (three-tier system) */
  --font-heading: "Young Serif", serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-body: "Lato", sans-serif;

  /* --------------------------------------------------------------------
     INTENT LAYER, the shared theme vocabulary (themeable)

     These are the intent tokens emitted by theme_common::intent_css_vars():
     colors declared by ROLE (surface/content/action/status/line/category),
     plus the derived interactive states (hover/active/selection/row-stripe/
     contrast) the crate computes once for every product. The values below
     are the platform default (shared/themes/makenotwork.toml resolved) so
     non-creator pages render without injection; creator profile/project/item
     pages inject a <style> that supersedes this block with the chosen theme.
     Generated. Keep in sync with `cargo run --example dump_intents makenotwork`.
     -------------------------------------------------------------------- */
  --surface-page: #ddd6c9;
  --surface-raised: #efe9e0;
  --surface-sunken: #cdc5b5;
  --surface-overlay: #efe9e0;
  /* The content surface cut into a raised one, so a list reads as content in a
     container rather than as bands on a panel. Derived by makeover from
     surface-raised, away from resolved content, so it goes lighter on a light
     theme and darker on a dark one. */
  --surface-well: #fffef5;
  /* The two edges of a bevel. makeover derives both from the theme's raised
     surface, so they arrive with the rest of the intent set through
     intent_css_vars() and every creator theme gains them automatically. */
  --bevel-light: #fffef5;
  --bevel-dark: #b5afa6;
  --content: #3d3530;
  --content-secondary: #5c554f;
  --content-muted: #8a8480;
  --content-on-action: #ffffff;
  --action: #6c5ce7;
  --action-hover: #7a6cf8;
  --danger: #c0392b;
  --success: #27ae60;
  --warning: #f59e0b;
  --info: #17a2b8;
  --border: #b3ab97;
  --border-strong: #a39c88;
  --focus-ring: #6c5ce7;
  --hover-surface: #cdc5b5;
  --category-one: #c0392b;
  --category-two: #27ae60;
  --category-three: #6c5ce7;
  --category-four: #f59e0b;
  --category-five: #a29bfe;
  --category-six: #17a2b8;
  --overlay: rgba(3, 1, 0, 0.5);
  /* What a surface floating over the page casts onto it. Same tone as the
     scrim above and pinned near-black on every theme, because a shadow is
     absence of light rather than a tint. layout.css composes the geometry
     into --elevation-overlay; a consumer that needs a different geometry
     builds its own from this token rather than from a literal. */
  --elevation: rgba(3, 1, 0, 0.18);

  /* --------------------------------------------------------------------
     APP-LOCAL CONSTANTS, not theme colors, not derivable from intents.

     Component CSS references the intent tokens above directly (no brand
     aliases). Status backgrounds derive from the intents inline via
     color-mix(); these few stay fixed:
       - pure black/white contrast anchors
       - Stripe's brand color (an external constant)
       - diff add/del, a hard readability convention that must not re-theme
     -------------------------------------------------------------------- */
  --primary-dark: #000000;
  --primary-light: #ffffff;
  --stripe: #635BFF;

  /* The faint accent tint every selection and highlight recipe fills with.
     Derived from --action, so it re-tints with the creator's theme. Named
     because the charter names it and because a dozen rules read it. */
  --highlight-faint: color-mix(in oklch, var(--action) 8%, transparent);

  /* Diff / code review, fixed green-add / red-del convention */
  --diff-add: #2d7d2d;
  --diff-add-bg: rgba(45, 125, 45, 0.08);
  --diff-del: #a83232;
  --diff-del-bg: rgba(168, 50, 50, 0.08);

  /* Radius lives in geometry.css now, generated from makeover-geometry:
     --radius-square / -fine / -control / -panel / -round. Containers are
     square and controls keep a corner, so the rounding survives only where a
     thing is meant to be pressed. */

  /* Syntax highlighting for the git source browser: base16 Tomorrow, used
     whole rather than assembled colour by colour. It stays fixed across all
     31 themes on purpose, the same argument as the diff add/del pair above:
     a reader recognises a highlighting palette, and re-tinting it per theme
     costs that recognition to gain nothing. Named so it is legible as one
     palette instead of seven hex literals scattered through the git rules. */
  --syntax-keyword:  #8959a8;
  --syntax-string:   #718c00;
  --syntax-comment:  #8e908c;
  --syntax-constant: #f5871f;
  --syntax-entity:   #4271ae;
  --syntax-variable: #c82829;
  --syntax-support:  #3e999f;

  /* Stacking order, named for what floats over what. Local rather than
     generated: this is a claim about MNW's own furniture, not an invariant
     like spacing. The numbers are spaced so a value can be slotted between
     two of them without renumbering, and nothing outside this block should
     write a z-index literal. Anything not listed here does not float. */
  --z-raised: 1;      /* lifted within the flow: a saved badge on a card */
  --z-nav: 10;        /* the nav panel that drops out of the mobile header */
  --z-header: 11;     /* the header's own toggle and search panel, both of
                         which have to stay above the panel they open */
  --z-dropdown: 20;   /* menus and suggestion lists opened from a control */
  --z-picker: 30;     /* pickers that open over a dropdown */
  --z-context: 40;    /* right-click / overflow context menus */
  --z-overlay: 50;    /* full-page scrims */
  --z-modal: 60;      /* dialogs, above their scrim */
  --z-toast: 70;      /* transient messages, above a dialog */
  --z-banner: 80;     /* page-level interruptions, above everything */
  --z-skip-link: 90;  /* the keyboard escape hatch outranks all of it */

  /* Depth, and there are only two kinds of it.

     A surface IN the page takes a bevel: an edge, not a distance. That is
     --shadow-raised/-card/-inset, aliasing the pair layout.css derives from
     each theme's own raised surface. --shadow-raised and --shadow-card
     collapse onto one value because an edge has no heavier and lighter
     version to pick between.

     A surface floating OVER the page takes --elevation-overlay, also from
     layout.css, derived from the theme's page colour. Menus, toasts,
     popovers, dropdowns and pickers float. A card, a plate and a framed
     image do not; they are .raised.

     There used to be a third kind, --shadow-1/-2/-3, a blurred scale of
     rgba-black literals picked against parchment and then applied to all 31
     themes a creator can select. It was the same defect the bevel trio was
     rewritten to undo, one scale later, and the elevation intent is what
     replaced it. No literal survives here now, so every consumer re-themes
     without being opened. Geometry stays consumer-side: a site that needs a
     different blur composes it from var(--elevation), never from a literal. */
  --shadow-raised: var(--bevel-raised);
  --shadow-card:   var(--bevel-raised);
  --shadow-inset:  var(--bevel-inset);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base styles */
body {
  margin: 0;
  background-color: var(--surface-page);
  color: var(--content);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* Padded page layout for most content pages */
.padded-page {
  padding: var(--gap-pane);
}

/* Centered page layout for landing, login, signup */
.centered-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: var(--gap-page);
}

.centered-page h1 {
  font-size: var(--text-hero);
}

.message-container {
  max-width: 500px;
  text-align: center;
}

.centered-wrapper {
  justify-content: center;
  text-align: center;
}

h1 {
  font-family: var(--font-heading);
  font-weight: normal;
  color: var(--content);
  text-align: center;
  font-size: var(--text-display);
}

h2,
h3 {
  font-family: var(--font-mono);
  font-weight: normal;
  color: var(--content);
}

/* Heading classes (charter: docs/design-system.md, every h1/h2 in a
   template must carry one of these so the role is explicit).

   .brand-h1          the "Makenot.work" wordmark on auth/wizard pages.
   .page-title        page-level h1 (Young Serif, centered).
   .subtitle-h2       page subtitle h2 used under .brand-h1 in auth/wizards.
   .subsection-title, h2 inside dashboards, tabs, and prose partials
                       (mono, no border, the default-h2 role made explicit).
   .section-header    h2 prose sub-section heading with bottom border
                       (existing rule, see SECTIONS block). */
.brand-h1,
.page-title {
  font-family: var(--font-heading);
  font-weight: normal;
  color: var(--content);
  text-align: center;
  font-size: var(--text-display);
}

.subtitle-h2 {
  font-family: var(--font-mono);
  font-weight: normal;
  color: var(--content);
  text-align: center;
  font-size: var(--text-head);
}

.subsection-title {
  font-family: var(--font-mono);
  font-weight: normal;
  color: var(--content);
}

p {
  font-family: var(--font-body);
  color: var(--content);
}

a {
  color: var(--content);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* The signature dot */
.dot {
  color: var(--action);
}

/* Container, default 1200px max-width. Modifier classes for narrower pages,
   or comma-grouped page-scoped overrides below for body-class-based control. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap-page);
}

/* Per-page container width overrides (selected via body class). One rule
   per width tier; new pages should add their body class here rather than
   defining a new .foo-page .container rule. */
.delete-account-page .container,
.receipt-page .container,
.user-page .container { max-width: 600px; margin: 0 auto; }

.import-page .container,
.export-page .container { max-width: 800px; margin: 0 auto; }

.fan-plus-page .container,
.feed-page .container,
.creators-page .container { max-width: 900px; margin: 0 auto; }

/* ===========================================
   BUTTONS
   =========================================== */

button {
  color: var(--content);
  background: var(--surface-overlay);
  padding: 6px 12px;
  border: 1px solid var(--content);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, background 0.2s ease;
}

button:hover {
  background: var(--hover-surface);
}

button:active {
  box-shadow: var(--shadow-inset);
}

.btn-primary {
  background: var(--primary-dark);
  color: var(--primary-light);
  border: none;
  padding: var(--gap-section) var(--gap-pane);
  font-family: inherit;
  font-size: var(--text-body);
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, background 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

/* A solid-fill button shifts its own fill rather than taking --hover-surface.
   The charter's hover rule is "one step lighter than the resting fill", and on
   a neutral control that step is --hover-surface; on this one it is not, since
   the label is --primary-light and a parchment fill under it is unreadable. */
.btn-primary:hover {
  background: color-mix(in oklch, var(--primary-dark) 85%, var(--primary-light));
  text-decoration: none;
}

.btn-primary:active {
  box-shadow: var(--shadow-inset);
}

.btn-secondary {
  background: var(--surface-sunken);
  color: var(--content);
  border: none;
  padding: var(--gap-section) var(--gap-pane);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, background 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--hover-surface);
  text-decoration: none;
}

.btn-secondary:active {
  box-shadow: var(--shadow-inset);
}

.btn-danger {
  background: var(--danger);
  color: var(--primary-light);
  border: none;
  padding: var(--gap-section) var(--gap-pane);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, background 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

/* Solid fill, so the same exception as .btn-primary applies. */
.btn-danger:hover {
  background: color-mix(in oklch, var(--danger) 85%, var(--primary-light));
  text-decoration: none;
}

.btn-danger:active {
  box-shadow: var(--shadow-inset);
}

/* Disabled state for all button variants (charter rule).
   Applies whether disabled via attribute or aria-disabled. */
button:disabled,
button[aria-disabled="true"],
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Button size + style modifiers (charter: docs/design-system.md).
   Use these on top of .btn-primary / -secondary / -danger.

   .btn--large      large CTA padding bump.
   .btn--icon       square icon-only / micro button (small padding,
                    tight line-height).
   .btn--link       visually a link, semantically a button (no bg/
                    border, opacity-fade hover, mono).

   Some surfaces have tuned button variants that are NOT compositions
   of these modifiers and keep their own classes:
     .big-button           Young Serif 200×60 anchor on splash pages.
     .order-btn            list reorder up/down (with active flash).
     .play-button          circular media-player play control.
     .speed-button         segment in media-player speed group.
     .shortcuts-help-btn, 1.5rem square help glyph in toolbars.
     .toast-retry-btn      inline bordered button inside a toast,
                           uses currentColor to inherit toast tone.
   These are documented variants, not deprecation targets. */
.btn--large {
  padding: var(--gap-section) var(--gap-page);
  font-size: var(--text-lead);
}

.btn--icon {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-note);
  line-height: 1;
  min-width: 1.75rem;
}

.btn--link {
  background: none;
  color: var(--content);
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  cursor: pointer;
  /* Link semantics, flat, no depth. Overrides the shadow that would
     otherwise cascade from `button` / `form button` when a .btn--link
     happens to be a <button> inside a <form> (e.g. logout). */
  box-shadow: none;
  transition: opacity 0.2s ease;
}

.btn--link:hover {
  opacity: 0.6;
  box-shadow: none;
}

.btn--link:active {
  box-shadow: var(--shadow-inset);
}

/* Menu / disclosure openers, buttons whose job is to reveal a menu,
   filter panel, expander, or popover. They sit flat rather than raised.
   Add new opener selectors here as they appear. */
.context-menu-btn,
.discover-filter-toggle,
.tip-toggle,
.bundle-toggle {
  box-shadow: none;
}

.context-menu-btn:hover,
.discover-filter-toggle:hover,
.tip-toggle:hover,
.bundle-toggle:hover {
  box-shadow: none;
}

.context-menu-btn:active,
.discover-filter-toggle:active,
.tip-toggle:active,
.bundle-toggle:active {
  box-shadow: var(--shadow-inset);
}

/* ===========================================
   FORMS
   =========================================== */

form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  width: 100%;
}

.form-container {
  max-width: 400px;
  background: var(--surface-overlay);
  padding: var(--gap-page);
}

label {
  font-family: var(--font-mono);
  color: var(--content);
  font-size: var(--text-note);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: var(--gap-section);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  color: var(--content);
  box-shadow: var(--shadow-inset);
}

input::placeholder,
textarea::placeholder {
  opacity: 0.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border: 1px solid var(--action);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

select {
  cursor: pointer;
}

input[type="submit"],
form button {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  color: var(--content);
  background: var(--surface-overlay);
  padding: 12px 24px;
  border: 1px solid var(--content);
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, background 0.2s ease;
}

input[type="submit"]:hover,
form button:hover {
  background: var(--hover-surface);
}

input[type="submit"]:active,
form button:active {
  box-shadow: var(--shadow-inset);
}

.form-group {
  margin-bottom: var(--gap-pane);
}

.form-group label {
  display: block;
  margin-bottom: var(--gap-peer);
  font-size: var(--text-note);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
}

.hint {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-top: var(--gap-peer);
}

/* Field-level validation error, paired with .form-group--error.
   Canonical: `partials/_ui.html` ui::form_field macro. */
.form-group--error label {
  color: var(--danger);
}

.form-group--error input,
.form-group--error textarea,
.form-group--error select {
  border-color: var(--danger);
}

.field-error {
  font-size: var(--text-note);
  color: var(--danger);
  margin-top: var(--gap-peer);
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  align-items: start;
  gap: var(--gap-section);
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: var(--gap-peer);
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin-top: var(--gap-bound);
  margin-bottom: var(--gap-bound);
  cursor: pointer;
}
/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-peer);
}
/* ===========================================
   TABS
   =========================================== */

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 0;
}

/* Geometry and type only. The surface is layout.css's: `.tab` is sunken,
   `:hover` steps to --hover-surface on a fine pointer, `:active` insets. This
   rule used to restate the sunken background verbatim and then carry a second,
   redundant selection signal on top of it — opacity 0.6 unselected, 1 selected
   — so a tab said "not chosen" twice and the generated surface step did
   nothing. The opacity idiom is gone and the surface contrast is the signal. */
.tab {
  color: var(--content);
  border: none;
  padding: var(--gap-section) var(--gap-page);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  cursor: pointer;
  /* Tabs navigate, they don't commit, stay flat. Overrides the base
     `button` shadow if a tab is a <button>. */
  box-shadow: none;
  transition: background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* A tab's selected state is `.tab.chosen` in layout.css and nowhere else now.
   This file used to carry a `.tab.is-selected` rule setting the same two
   declarations byte for byte, on the argument that `.is-selected` is the
   site's own idiom across git nav links, editor tabs, section tabs, issue tabs
   and filter buttons, so renaming the tabs alone would split it. That is true
   and it is still the wrong trade: a second name for a state the design system
   already names is invisible only while both say the same thing, and stops
   being invisible the moment makeover changes what a chosen tab looks like.
   The other components keep `.is-selected`, because makeover has no primitive
   for a git nav link; the tab has one.

   The chosen arm's box-shadow comes back through the layer rather than being
   restated. `.tab` below zeroes the base `button` shadow, and this file is
   unlayered, so it outranks @layer makeover whatever the specificity: without
   the revert, the generated bevel never applies and a chosen tab reads flat.
   `revert-layer` hands the property back instead of naming a value, which is
   the difference between deferring to the design system and copying it. */
.tab.chosen {
  /* respec-ok: a layer handoff, not a value. See the comment above. */
  box-shadow: revert-layer;
}

.tab-more-wrap {
  position: relative;
  flex-shrink: 0;
}

.tab-overflow-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--surface-page);
  border: 1px solid var(--border);
  min-width: 180px;
  box-shadow: var(--elevation-overlay);
}

/* The overflow menu restates the tab as a menu row: block, full width, left
   aligned, tighter. It carried the same opacity pair the strip did and it goes
   for the same reason; hover and selection are the generated surface steps. */
.tab-overflow-menu .tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--gap-group) var(--gap-section);
}


.tab-content {
  display: none;
  background: var(--surface-overlay);
  padding: var(--gap-page);
}

.tab-content.active {
  display: block;
}

/* ===========================================
   TABLES
   =========================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
  font-family: var(--font-body);
  margin-bottom: var(--gap-section);
}

.data-table thead {
  background: var(--surface-sunken);
}

.data-table th {
  text-align: left;
  padding: var(--gap-section);
  font-weight: normal;
}

/* `.data-table th.sortable` and its four rules were here and had no consumer:
   nothing in templates/ ever put `sortable` on a `th`. The one sortable table
   in the app is templates/partials/tabs/project_content.html, which used
   `.sortable-th` further down this file. Both are gone; the affordance and the
   caret are `.table-heading[data-sortable]` in the generated static/layout.css.
   See the block that replaced `.sortable-th` for what stayed behind. */

.data-table tbody tr {
  transition: background 0.1s ease;
}

/* No zebra. There were two rules here, :nth-child(odd) and (even), and both
   set --surface-overlay — the same value, so the stripe never existed and the
   effect was every row painted the panel's own colour. The table is a .well
   now and the rows sit on it unpainted, which is what the banding was
   reaching for. makeover derives no row-stripe intent, so if one is ever
   wanted it is a makeover-side question, not a literal here. */

.data-table tbody tr:hover {
  background: var(--surface-sunken);
}

.data-table td {
  padding: var(--gap-section);
  border-top: 1px solid var(--border);
}

/* Marks the row a table is about, used across the dashboard and library
   tables. Lived in the pricing block until the fee calculator replaced it. */
.data-table .highlight {
  background: var(--surface-overlay);
  border-left: 3px solid var(--action);
}

/* ===========================================
   COMPACT TABLES (dashboard/admin, lighter than .data-table)
   =========================================== */

.compact-table {
  width: 100%;
  border-collapse: collapse;
}

.compact-table thead tr {
  font-size: var(--text-note);
  opacity: 0.7;
}

.compact-table th {
  padding: var(--gap-peer) var(--gap-section);
  text-align: left;
}

.compact-table td {
  padding: var(--gap-section);
}

.compact-table tbody tr {
  border-bottom: 1px solid var(--border);
}

/* ===========================================
   UTILITIES
   =========================================== */

.text-sm { font-size: var(--text-note); }
.text-xs { font-size: var(--text-fine); }
.muted { opacity: 0.7; }
.dimmed { opacity: 0.6; }
.dimmer { opacity: 0.5; }
.meta { font-size: var(--text-note); opacity: 0.7; }
.nowrap { white-space: nowrap; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.fw-bold { font-weight: bold; }
.unstyled-link { text-decoration: none; color: inherit; }
.square-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Spacing utilities.
   mt = margin-top, mb = margin-bottom, my = vertical, py = vertical padding.
   Named for the relationship, same vocabulary as the --gap-* tokens they
   read. Use sparingly; prefer parent layout primitives. */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-peer    { margin-top: var(--gap-peer); }
.mt-section { margin-top: var(--gap-section); }
.mt-pane    { margin-top: var(--gap-pane); }
.mt-page    { margin-top: var(--gap-page); }
.mb-peer    { margin-bottom: var(--gap-peer); }
.mb-section { margin-bottom: var(--gap-section); }
.mb-pane    { margin-bottom: var(--gap-pane); }
.my-peer    { margin-block: var(--gap-peer); }
.my-section { margin-block: var(--gap-section); }
.py-section { padding-block: var(--gap-section); }

/* Min-width utilities for tables inside .scroll-x wrappers. */
.minw-300 { min-width: 300px; }
.minw-400 { min-width: 400px; }
.minw-500 { min-width: 500px; }
.minw-600 { min-width: 600px; }
.minw-700 { min-width: 700px; }
.minw-800 { min-width: 800px; }

/* Compact button sizes. Canonical: .small (broad use, 0.25rem 0.6rem 0.8rem).
   The tiny / row-btn / cart-row-btn aliases are visually equivalent, within
   sub-pixel of each other in the original templates, and folded into .small. */
.small { padding: var(--gap-bound) var(--gap-group); font-size: var(--text-fine); }

/* Canonical empty-state primitive. Use modifiers for tight/sized contexts.
   Markup: <div class="empty-state">…</div> (optionally with .empty-state--compact
   inside dropdowns or .empty-state--chart inside a fixed-height chart slot). */
.empty-state { text-align: center; padding: var(--gap-page); opacity: 0.6; }
.empty-state--compact { padding: var(--gap-section); font-size: var(--text-note); }
.empty-state--chart { height: 200px; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.5; }
.empty-state-hint { font-family: var(--font-mono); font-size: var(--text-fine); margin-top: var(--gap-peer); opacity: 0.6; }

.tab-docs {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gap-section);
}

.tab-docs a {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.tab-docs a:hover {
  opacity: 1;
}

/* ===========================================
   BADGES
   =========================================== */

/* Geometry and type only. The colour is layout.css's: a badge is coloured
   text on the page, and its status colour comes from `data-tone` — see
   src/types/badge.rs, which maps every status enum onto a tone name.

   This used to be a filled pill (near-black ground, --primary-light label)
   with a local `.badge--live/pending/failed` set painting the fill per
   status. All of it went in wave 2 tier B2: the fill was carrying exactly
   what the generated `color` carries, so it was the same thing said in a
   different channel, and keeping it meant the tone attribute could never do
   anything. */
.badge {
  display: inline-block;
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
  font-family: var(--font-mono);
}

/* AI disclosure tier badges. See site-docs/public/about/generative-ai.md.
   Colours track the brand palette: violet for the cleanest case, warm-tan for
   disclosed AI use, charcoal for primarily generated.

   respec-ok: this is a taxonomy makeover has no vocabulary for. Its four
   tones are info / success / warning / danger, which all read as alarm, and
   disclosure is not alarm — a handmade item is not a "success" and a
   generated one is not a "danger". So the three hues stay local. They set
   `color` rather than a background, because the badge form is the generated
   one now and only the hue is ours. */
.badge.ai-tier {
  letter-spacing: 0.02em;
}
.badge.ai-tier-handmade {
  color: var(--action);
}
.badge.ai-tier-assisted {
  color: var(--warning);
}
.badge.ai-tier-generated {
  color: var(--content);
}

.item-ai-tier {
  margin: var(--gap-bound) 0 var(--gap-section);
}

.ai-disclosure {
  margin: var(--gap-section) 0;
  padding: var(--gap-section);
  background: var(--surface-sunken);
  border-left: 3px solid var(--warning);
}
.ai-disclosure-label {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-muted);
  margin-bottom: var(--gap-bound);
}
.ai-disclosure-text {
  font-size: var(--text-note);
  color: var(--content);
}

/* Discover row: plain text mention per design decision 2026-06-03:
   no pill in the row, so fans skim the listing without disclosure noise
   and use the explicit filter when they care. */
.discover-row-ai-tier {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--content-muted);
}

/* ===========================================
   TAGS
   =========================================== */

.tag {
  display: inline-block;
  background: var(--primary-dark);
  color: var(--primary-light);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
  margin-right: var(--gap-bound);
}

.tag-input {
  background: var(--surface-sunken);
  padding: var(--gap-peer);
  margin-bottom: var(--gap-peer);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-peer);
  min-height: 40px;
}

.tag-input .tag {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-note);
}

.tag-input .tag button {
  background: none;
  border: none;
  color: var(--primary-light);
  cursor: pointer;
  padding: 0;
  font-size: var(--text-body);
}

/* ===========================================
   CARDS
   =========================================== */

/* Canonical card primitive (charter: docs/design-system.md).
   Variants:
     .card                         filled, hover-step (default content card).
     .card.card-muted              surface-muted fill, no hover (dashboard stat / analytics blocks).
     .card.card--bordered          bordered, padded, no fill (marketing cards: feature/tier/use-case).
     .card.card--selectable        radio-card pattern; pair with .is-selected.
     .card.card--grid              grid-cell card (discover grid).
   No aliases. A template names the modifier it wants and adds its own
   component class beside it; a recipe reached only through a per-page name is
   a recipe nobody can find from the charter. */
/* Fill and depth come from layout.css, generated by makeover-webview: the card
   is `--surface-raised` plus `--bevel-raised`, and `:hover` goes to
   `--hover-surface` on a fine pointer only. Declaring either here would take
   them back, since style.css is unlayered and unlayered beats the `makeover`
   layer whatever the specificity. The box-shadow this used to carry was
   `--shadow-card`, which already aliases `--bevel-raised`, so only the fill
   actually moved: `--surface-overlay` to `--surface-raised`. Those are equal on
   the platform default and a theme may set them apart. */
.card {
  padding: var(--gap-pane);
  margin-bottom: var(--gap-section);
  text-decoration: none;
  color: var(--content);
  display: block;
  border: 1px solid var(--border);
  transition: background 0.2s ease;
}

/* Muted card primitive. */
.card-muted {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
}
/* Bordered card. Templates put this modifier on the element alongside any
   component class of their own (.tier-card, .use-case-card, .fork-card), so
   the name the charter teaches is the name in the markup. */
.card--bordered {
  background: transparent;
  padding: var(--gap-section);
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.use-case-card { padding: var(--gap-section); }
.fork-card { padding: var(--gap-pane); display: flex; flex-direction: column; }

.card-title {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-heading);
}

.card-meta {
  font-size: var(--text-note);
  color: var(--content-muted);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-mono);
}

.card-description {
  font-size: var(--text-note);
  opacity: 0.8;
  font-family: var(--font-body);
}

/* ===========================================
   STATS
   =========================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-section);
  margin-bottom: var(--gap-pane);
}

.stats-row {
  display: flex;
  gap: var(--gap-pane);
  margin: var(--gap-pane) 0;
}

.stat-box {
  background: var(--surface-overlay);
  padding: var(--gap-section) var(--gap-pane);
  flex: 1;
  text-align: center;
}

.stat-box .number {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-head);
}

.stat-box .label {
  font-size: var(--text-fine);
  opacity: 0.7;
}

/* .stat-card base recipe defined above with .card-muted */

.stat-label {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-bound);
}

.stat-value {
  font-size: var(--text-head);
}

.stat-change {
  font-size: var(--text-note);
  opacity: 0.6;
}

.stat-change.positive {
  color: var(--success);
}

.stat-change.negative {
  color: var(--danger);
}

/* ===========================================
   FILTER BAR
   =========================================== */

.filter-bar {
  display: flex;
  gap: var(--gap-peer);
  margin: var(--gap-pane) 0;
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar > .label {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-right: var(--gap-peer);
}

.filter-bar button {
  padding: var(--gap-bound) var(--gap-section);
  font-size: var(--text-note);
}

/* ===========================================
   DISCUSSION SECTION
   =========================================== */

/* Sits inside the parent container; previously had max-width: 720px and
   margin: 2rem auto, which looked indented on wide pages (.library-page,
   .item-page) where every neighbouring card filled the container. Let the
   parent dictate width, article-page already constrains via
   .article-container; player pages have their own narrow layout. */
.discussion-section {
  margin: var(--gap-page) 0;
  padding: var(--gap-pane);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.discussion-section h3 {
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  margin: 0 0 var(--gap-peer);
}

.discussion-section p {
  margin: 0 0 var(--gap-section);
  color: var(--content-muted);
  font-size: var(--text-note);
}

.discussion-section a {
  color: var(--action);
  text-decoration: none;
  font-size: var(--text-note);
}

/* ===========================================
   INFO & WARNING BOXES
   =========================================== */

/* Notification surface roles (charter: docs/design-system.md).
   Five distinct components. Keep them distinct, don't merge:
     .toast                transient, JS-dismissible, bottom-right corner.
     .banner               full-bleed page-top notice (sandbox, restart,
                           founder pricing). One short sentence + optional link.
     .alert                inline directive callout with uppercase mono title
                           (NOTE / TIP / IMPORTANT / WARNING / CAUTION). Used in
                           docs and longer-form bodies.
     .info-box             informational headed block with h3 + bullet list
                           inside forms / wizards (distinct register from .alert).
     .warning-box          loud yellow-on-yellow attention-grabber for
                           page-level warnings (delete confirms, account
                           warnings). Louder than .alert-warning intentionally.
     .error-message        inline form-field error; hidden by default, shown
                           with .is-active. Distinct from page-level .alert. */
.info-box {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
  font-family: var(--font-body);
}

.info-box h3 {
  font-size: var(--text-body);
  font-weight: normal;
  margin-bottom: var(--gap-peer);
}

.info-box ul {
  list-style: none;
  margin-top: var(--gap-peer);
}

.info-box li {
  padding: var(--gap-bound) 0;
}

.info-box li::before {
  content: "- ";
  opacity: 0.5;
}

.warning-box {
  background: var(--warning);
  color: var(--primary-light);
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
  font-family: var(--font-body);
}

.error-message {
  font-family: var(--font-mono);
  color: var(--danger);
  background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
  padding: 12px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-fine);
  text-align: center;
  font-size: var(--text-note);
  display: none;
}

/* Full-page error layout (templates/pages/error.html). Distinct from
   the inline `.error-message` form-error class above; named to avoid
   collision. */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-page);
  background: var(--surface-page);
}

.error-container {
  text-align: center;
  max-width: 560px;
}

.error-status {
  font-size: var(--text-note);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-muted);
  margin-bottom: var(--gap-section);
}

.error-page-message {
  font-size: var(--text-head);
  line-height: 1.4;
  color: var(--content);
  margin-bottom: var(--gap-page);
}

.error-actions {
  display: flex;
  gap: var(--gap-section);
  justify-content: center;
}


/* Minimal direct-purchase page (templates/pages/buy.html). Standalone
   page used for link-in-bio sharing, no site chrome, just a card.
   Scoped under .buy-page so the rules don't bleed into the rest of
   the app. Tokenized; previously lived as a page-isolated <style>. */
.buy-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-page);
}

/* The one former --shadow-3 site that is not a float. The card is the whole
   page's content rather than something laid over it, so it takes .raised
   from layout.css for its surface and its edge, and keeps only the geometry
   the generated primitive does not carry. */
.buy-page .buy-card {
  border-radius: var(--radius-panel);
  padding: var(--gap-page);
  max-width: 420px;
  width: 100%;
}

.buy-page .cover,
.buy-page .no-cover {
  width: 100%;
  aspect-ratio: 1;
  max-height: 280px;
  border-radius: var(--radius-panel);
  margin-bottom: var(--gap-pane);
  background: var(--surface-raised);
}

.buy-page .cover {
  object-fit: cover;
}

.buy-page .no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-hero);
  opacity: 0.2;
}

.buy-page h1 {
  text-align: left;
  font-size: var(--text-head);
  margin-bottom: var(--gap-bound);
}

.buy-page .creator {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-pane);
}

.buy-page .creator a {
  color: inherit;
}

.buy-page .price {
  font-family: var(--font-mono);
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-pane);
}

.buy-page .description {
  font-size: var(--text-note);
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: var(--gap-pane);
  max-height: 4.5em;
  overflow: hidden;
}

.buy-page .buy-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--action);
  color: var(--primary-light);
  border: none;
  border-radius: var(--radius-panel);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.buy-page .buy-btn:hover {
  opacity: 0.85;
}

.buy-page .buy-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.buy-page .pwyw-input {
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
  margin-bottom: var(--gap-section);
}

.buy-page .pwyw-input input {
  width: 100px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: var(--text-body);
}

.buy-page .note {
  font-size: var(--text-fine);
  opacity: 0.5;
  text-align: center;
  margin-top: var(--gap-section);
}

.buy-page .note a {
  color: var(--action);
}

.buy-page .footer {
  text-align: center;
  margin-top: var(--gap-pane);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
  font-size: var(--text-fine);
  opacity: 0.5;
}

.buy-page .footer a {
  color: inherit;
}

/* Sectioned content (templates/pages/item.html, project.html,
   library_downloads.html). Tab+panel pattern shared by all three
   pages, kept global, NOT scoped under .item-page. */
.section-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap-pane);
}

.section-tab {
  background: none;
  border: none;
  padding: var(--gap-group) var(--gap-section);
  cursor: pointer;
  font-size: var(--text-body);
  opacity: 0.6;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  color: var(--content);
}

.section-tab.is-selected {
  opacity: 1;
  border-bottom-color: var(--content);
}

.section-tab:hover { opacity: 0.9; }

/* .section-panel.active is a visibility toggle (display: none / block),
   not a selection, kept as .active. */
.section-panel { display: none; }
.section-panel.active { display: block; }
.section-panel p { margin-bottom: var(--gap-section); }
.section-panel ul,
.section-panel ol {
  margin-left: var(--gap-pane);
  margin-bottom: var(--gap-section);
}
.section-panel li { margin-bottom: var(--gap-peer); }
.section-panel h1,
.section-panel h2,
.section-panel h3 {
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-peer);
}
.section-panel pre {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  overflow-x: auto;
  margin-bottom: var(--gap-section);
}
.section-panel code { font-size: var(--text-note); }

/* Item detail page (templates/pages/item.html). Scoped under .item-page
   body class so the .item-title / .item-meta / .item-price / .item-footer
   names don't collide with the store-front item-card on project.html. */
.item-page .item-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--gap-page);
  margin-bottom: var(--gap-page);
}

.item-page .item-layout.no-media { grid-template-columns: 1fr; }

.item-page .item-title {
  font-size: var(--text-title);
  margin-bottom: var(--gap-peer);
}

.item-page .item-creator {
  font-size: var(--text-body);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

.item-page .item-creator a { color: var(--content); }

.item-page .item-price {
  font-size: var(--text-display);
  margin-bottom: var(--gap-pane);
}

.item-page .item-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  margin-bottom: var(--gap-pane);
  padding-bottom: var(--gap-pane);
  border-bottom: 1px solid var(--border);
}

.item-page .meta-item { font-size: var(--text-note); }
.item-page .meta-label { opacity: 0.7; margin-bottom: var(--gap-bound); }
.item-page .meta-value { font-weight: bold; }

.item-page .item-tags { margin-bottom: var(--gap-pane); }

/* purchase-box uses .card-muted for the box; only its h3/ul/li specifics remain. */
.purchase-box h3 {
  font-size: var(--text-body);
  font-weight: normal;
  margin-bottom: var(--gap-section);
}
.purchase-box ul { list-style: none; margin-bottom: var(--gap-section); }
.purchase-box li { padding: var(--gap-bound) 0; }
.purchase-box li::before {
  content: "→ ";
  opacity: 0.5;
}

.item-page .btn-primary {
  width: 100%;
  padding: var(--gap-section) var(--gap-page);
  font-size: var(--text-lead);
}

.item-page .btn-secondary {
  width: 100%;
  margin-top: var(--gap-peer);
}

.item-page .payment-note {
  font-size: var(--text-note);
  opacity: 0.6;
  text-align: center;
  margin-top: var(--gap-section);
}

/* bundle-child uses .list-row co-class; only the gap-4 override remains. */
.bundle-child { gap: var(--gap-section); padding: var(--gap-section) 0; }

.item-page .bundle-child-type {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-group);
  background: var(--surface-sunken);
  white-space: nowrap;
}

.item-page .bundle-child-title { flex: 1; }
.item-page .bundle-child-title a { color: var(--content); }
.item-page .bundle-child-price { font-size: var(--text-note); opacity: 0.7; }

.item-page .bundle-notice {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
  text-align: center;
}

.item-page .bundle-notice a { color: var(--content); }

.item-page .item-description p { margin-bottom: var(--gap-section); text-align: left; }
.item-page .item-description ul { margin-left: var(--gap-pane); margin-bottom: var(--gap-section); }
.item-page .item-description li { margin-bottom: var(--gap-peer); }

.item-page .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-pane);
}
.item-page .version-number { font-size: var(--text-lead); }
.item-page .item-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-page);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: var(--text-note);
}

.item-page .item-footer a { color: var(--content); }

@media (max-width: 839px) {
  .item-page .item-layout { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .item-page .item-title { font-size: var(--text-head); }
  .item-page .item-price { font-size: var(--text-title); }
  .item-page .item-meta { grid-template-columns: 1fr; gap: var(--gap-peer); }
  .item-page .item-media,
  .item-page .item-details { padding: var(--gap-section); }
  .item-page .item-description { padding: var(--gap-section); }
  .item-page .item-description h2 { font-size: var(--text-subhead); }
  .item-page .purchase-box { padding: var(--gap-section); }
}

/* Project store-front page (templates/pages/project.html). Scoped under
   .project-page body class, `.item-card`, `.item-title`, `.item-meta`,
   `.item-price`, etc. here mean store-front item cards, distinct from
   the item-detail-page versions scoped under .item-page above. */
.project-page .store-header { margin-bottom: var(--gap-page); }
.project-page .store-title { font-size: var(--text-hero); margin-bottom: var(--gap-peer); }
.project-page .store-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}
.project-page .store-meta a { color: var(--content); }
.project-page .store-description {
  font-size: var(--text-lead);
  max-width: 800px;
  margin-bottom: var(--gap-page);
  text-align: left;
}
.project-page .store-actions {
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}

.project-page .items-section { margin-bottom: var(--gap-page); }

.project-page .items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap-page);
}

.project-page .item-card {
  background: var(--surface-overlay);
  transition: background 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-page .item-card:hover { background: var(--surface-sunken); }

.project-page a.item-thumbnail {
  width: 100%;
  height: 300px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-hero);
  text-decoration: none;
  overflow: hidden;
}

.project-page a.item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The dimming belongs to the placeholder, not to the slot. It was on the slot,
   so the day covers started rendering here they would have rendered at 30%. */
.project-page a.item-thumbnail-empty { opacity: 0.3; }
.project-page a.item-thumbnail-empty:hover { opacity: 0.5; }

.project-page .item-content {
  padding: var(--gap-pane);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-page .item-title {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-heading);
  font-weight: bold;
}

.project-page .item-title a:hover { text-decoration: underline; }

.project-page .item-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

.project-page .item-tags { margin-bottom: var(--gap-section); }

.project-page .item-description {
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
  opacity: 0.8;
  text-align: left;
  flex-grow: 1;
}

.project-page .item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.project-page .item-price { font-size: var(--text-subhead); }
.project-page .item-stats { font-size: var(--text-note); opacity: 0.6; }

.project-page .store-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-page);
  border-top: 1px solid var(--border);
  opacity: 0.6;
}

.project-page .store-footer a { color: var(--content); }

.project-page .item-content .btn-primary,
.project-page .item-content .btn-secondary {
  width: 100%;
  margin-top: var(--gap-section);
}

/* project.html allows .section-tabs to wrap (other pages don't). */
.project-page .section-tabs { flex-wrap: wrap; }

.project-page .tiers-section { margin-bottom: var(--gap-page); }

.project-page .tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-pane);
}

.project-page .tier-card {
  background: var(--surface-overlay);
  padding: var(--gap-page);
  display: flex;
  flex-direction: column;
}

.project-page .tier-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
}

.project-page .tier-price {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
}

.project-page .tier-description {
  font-size: var(--text-note);
  opacity: 0.8;
  margin-bottom: var(--gap-pane);
  flex-grow: 1;
  text-align: left;
}

.project-page .tier-card form { margin-top: auto; }
.project-page .tier-card button,
.project-page .tier-card .btn-primary { width: 100%; }

.project-page .tier-active-badge {
  font-size: var(--text-note);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-sunken);
  text-align: center;
  opacity: 0.7;
}

@media (max-width: 599px) {
  .project-page .store-title { font-size: var(--text-title); }
  .project-page a.item-thumbnail { height: 200px; }
  .project-page .store-description { font-size: var(--text-body); }
}

/* Library downloads page (templates/pages/library_downloads.html).
   Scoped under .library-page body class. Class names like .item-footer,
   .bundle-child, etc. overlap with .item-page; the scope keeps them
   distinct. */
.library-page .library-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--gap-pane);
  margin-bottom: var(--gap-page);
  align-items: center;
}

.library-page .library-header.no-cover { grid-template-columns: 1fr; }

.library-page .library-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.library-page .library-title {
  font-size: var(--text-title);
  margin-bottom: var(--gap-bound);
}

/* Byline sits under the centered H1 (global `h1 { text-align: center }`),
   so center it too, otherwise it floats flush-left while the title is
   centered above. Same for the back-link breadcrumb. When a cover is
   present the grid scope below restores left-alignment in the text column. */
.library-page .library-creator {
  font-size: var(--text-body);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
  text-align: center;
}

.library-page .library-creator a { color: var(--content); }

.library-page .library-back {
  font-size: var(--text-note);
  opacity: 0.7;
  text-align: center;
}
.library-page .library-back a { color: var(--content); }

/* When a cover is present, the title block sits in the right grid column;
   left-align in that context so the column reads as a coherent block next
   to the cover instead of a centered island. */
.library-page .library-header:not(.no-cover) .library-title,
.library-page .library-header:not(.no-cover) .library-creator {
  text-align: left;
}

.library-page .downloads-hero h2 {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}

.library-page .download-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-group) 0;
  border-bottom: 1px solid var(--border);
}

.library-page .download-row:last-child { border-bottom: none; }

.library-page .download-version {
  min-width: 4em;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.library-page .download-label { flex: 1; }

.library-page .download-size {
  font-size: var(--text-note);
  opacity: 0.6;
  min-width: 5em;
  text-align: right;
}

.library-page .download-notice {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
  font-size: var(--text-note);
  opacity: 0.8;
}

.library-page .download-notice strong { font-family: var(--font-mono); }

/* Inline download list on library_audio.html / library_video.html
   (below the media player). */

.library-page .library-downloads h3 {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
}

.library-page .library-section h2 {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}

.library-page .bundle-child {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-section) 0;
  border-bottom: 1px solid var(--border);
}

.library-page .bundle-child:last-child { border-bottom: none; }

.library-page .bundle-child-type {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-group);
  background: var(--surface-sunken);
  white-space: nowrap;
}

.library-page .bundle-child-title { flex: 1; }
.library-page .bundle-child-title a { color: var(--content); }

.library-page .item-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-page);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: var(--text-note);
}

.library-page .item-footer a { color: var(--content); }

@media (max-width: 599px) {
  .library-page .library-header { grid-template-columns: 1fr; }
  .library-page .library-cover img { max-width: 200px; }
}

/* Article reader pages (templates/pages/text_reader.html, blog_post.html,
   library_text.html). Long-form article layout, centered narrow column,
   author header, large heading, magazine-style body type. Scoped under
   .article-page body class. */
.article-page .article-container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--gap-page) var(--gap-pane) var(--gap-page);
}

.article-page .author-header {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  margin-bottom: var(--gap-page);
}

.article-page .author-avatar {
  width: 48px;
  height: 48px;
  background: var(--surface-sunken);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  color: var(--content);
}

.article-page .author-info { flex: 1; }

.article-page .author-name {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--content);
}


.article-page .author-name a:hover { text-decoration: underline; }

.article-page .article-meta {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  color: var(--content-muted);
}

.article-page .article-title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: var(--gap-pane);
  color: var(--content);
  text-align: left;
}

.article-page .article-deck {
  font-family: var(--font-mono);
  font-size: var(--text-subhead);
  color: var(--content-muted);
  margin-bottom: var(--gap-page);
  line-height: 1.6;
}

.article-page .article-body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: 1.9;
}

.article-page .article-body p { margin-bottom: var(--gap-pane); }

.article-page .article-body h1 {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
  text-align: left;
}

.article-page .article-body h2 {
  font-family: var(--font-mono);
  font-size: var(--text-head);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
}

.article-page .article-body h3 {
  font-family: var(--font-mono);
  font-size: var(--text-subhead);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
}

.article-page .article-body blockquote {
  border-left: 3px solid var(--action);
  padding-left: var(--gap-pane);
  margin: var(--gap-page) 0;
  font-style: italic;
  color: var(--content-muted);
}

.article-page .article-body ul,
.article-page .article-body ol {
  margin-bottom: var(--gap-pane);
  padding-left: var(--gap-pane);
}

.article-page .article-body li { margin-bottom: var(--gap-peer); }

.article-page .article-body a {
  color: var(--action);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--action) 40%, transparent);
  text-underline-offset: 2px;
}

.article-page .article-body a:hover {
  text-decoration-color: var(--action);
}

.article-page .article-body strong { font-weight: bold; }
.article-page .article-body em { font-style: italic; }

.article-page .article-body code {
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-body);
}

.article-page .article-body pre {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  overflow-x: auto;
  margin-bottom: var(--gap-pane);
}

.article-page .article-body pre code {
  background: none;
  padding: 0;
}

.article-page .article-body hr {
  border: none;
  text-align: center;
  margin: var(--gap-page) 0;
}

.article-page .article-body hr::before {
  content: "* * *";
  color: var(--content-muted);
  letter-spacing: 1rem;
}

.article-page .article-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-page);
  border-top: 1px solid var(--border);
}

.article-page .author-bio {
  display: flex;
  gap: var(--gap-section);
  padding: var(--gap-pane);
  background: var(--surface-overlay);
}

.article-page .author-bio .author-avatar {
  width: 64px;
  height: 64px;
  font-size: var(--text-head);
  flex-shrink: 0;
}

.article-page .author-bio-content { flex: 1; }

.article-page .author-bio-name {
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  margin-bottom: var(--gap-peer);
}


.article-page .author-bio-name a:hover { text-decoration: underline; }

.article-page .article-tags {
  margin-top: var(--gap-page);
  display: flex;
  gap: var(--gap-peer);
  flex-wrap: wrap;
}

.article-page .article-tag {
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  color: var(--content);
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-fine);
  text-decoration: none;
}

/* Share controls at the end of the article, inside .article-footer beside
   the tags or the blog crumb. Was a page-bottom footer below the comments
   until the site-footer consolidation; the control belongs with the piece
   it copies, not under the discussion. */
.article-page .reader-actions {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-top: var(--gap-section);
}

.article-page .reader-actions a { color: var(--content); text-decoration: none; }
.article-page .reader-actions a:hover { text-decoration: underline; }

/* Blog-specific: nav crumb above the article. */
.article-page .blog-nav {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-page);
}

.article-page .blog-nav a { color: var(--content); text-decoration: none; }
.article-page .blog-nav a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  .article-page .article-title { font-size: var(--text-title); }
  .article-page .article-deck { font-size: var(--text-lead); }
  .article-page .article-body { font-size: var(--text-body); }
}

/* Admin dashboards (templates/dashboards/admin-*.html). Every admin
   page had a duplicate `h1 { font-size: 2rem; margin-bottom: 0.5rem; }`
   inline, consolidated here. */

/* System health dashboard (templates/pages/health.html). */
.health-page {
  padding: var(--gap-page);
}

.health-page .health-container {
  max-width: 900px;
  margin: 0 auto;
}

.health-page .health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.health-page .health-card {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
}

.health-page .health-card h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  display: inline-block;
}

.health-page .status-ok { background: var(--success); }
.health-page .status-warn { background: var(--warning); }
.health-page .status-error { background: var(--danger); }
.health-page .status-unknown { background: var(--content-muted); }

.health-page .health-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

.health-page .health-card dt { opacity: 0.7; }
.health-page .health-card dd {
  font-family: var(--font-mono);
  text-align: right;
}

.health-page .section-title {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin: var(--gap-page) 0 var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}
.health-page .test-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.health-page .test-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-note);
}

.health-page .test-list li:last-child { border-bottom: none; }

.health-page .test-name { font-family: var(--font-mono); }

.health-page .test-pass { color: var(--success); }
.health-page .test-fail { color: var(--danger); }
.health-page .summary-bar {
  display: flex;
  gap: var(--gap-page);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  margin-bottom: var(--gap-page);
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.health-page .summary-item {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page .timestamp {
  font-size: var(--text-fine);
  opacity: 0.6;
  text-align: right;
  margin-top: var(--gap-page);
}

.health-page details.check-list {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.health-page details.check-list summary {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page details.check-list summary::-webkit-details-marker { display: none; }

.health-page details.check-list summary::before {
  content: "▶";
  font-size: var(--text-fine);
  transition: transform 0.15s;
}

.health-page details.check-list[open] summary::before {
  transform: rotate(90deg);
}

.health-page details.check-list .test-list {
  margin-top: var(--gap-section);
}
/* Import data wizard (templates/dashboards/dashboard-import.html).
   Page-specific upload + column-mapping + progress flow. Migration also
   fixed token bypasses: --border-color → --border, --accent → --highlight,
   --success-background → --success-bg, --error-background → --error-bg. */

.import-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.import-page .back-link:hover { opacity: 1; }

.import-page .form-group { margin-bottom: var(--gap-pane); }

.import-page .form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: bold;
  margin-bottom: var(--gap-peer);
}

.import-page .form-group select,
.import-page .form-group input[type="file"] {
  width: 100%;
  padding: var(--gap-peer);
  font-size: var(--text-note);
  border: 1px solid var(--border);
  background: var(--surface-page);
}

.import-page .csv-preview {
  margin-top: var(--gap-section);
  overflow-x: auto;
}

.import-page .csv-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}

.import-page .csv-preview th,
.import-page .csv-preview td {
  padding: var(--gap-peer) var(--gap-group);
  border: 1px solid var(--border);
  text-align: left;
}

.import-page .csv-preview th {
  background: var(--surface-sunken);
  font-family: var(--font-mono);
}

.import-page .column-mapping { margin-top: var(--gap-section); }

.import-page .mapping-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  margin-bottom: var(--gap-peer);
}

.import-page .mapping-row label {
  min-width: 100px;
  font-size: var(--text-note);
  font-family: var(--font-mono);
  margin-bottom: 0;
}

.import-page .mapping-row select {
  flex: 1;
  padding: var(--gap-bound);
  font-size: var(--text-note);
}

.import-page .progress-stats {
  display: flex;
  gap: var(--gap-page);
  font-size: var(--text-note);
  font-family: var(--font-mono);
}

.import-page .progress-stats .stat-value { font-weight: bold; }

.import-page .import-result {
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}

.import-page .import-result.success { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); }
.import-page .import-result.error { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); }

.import-page .error-log {
  margin-top: var(--gap-section);
  padding: var(--gap-peer);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.import-page .import-history { margin-top: var(--gap-page); }

.import-page .history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}

.import-page .history-table th,
.import-page .history-table td {
  padding: var(--gap-peer);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.import-page .history-table th {
  font-family: var(--font-mono);
  font-weight: bold;
}

.import-page .import-note {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-top: var(--gap-page);
  font-size: var(--text-note);
}

.import-page .import-note h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

/* Delete account page (templates/dashboards/dashboard-delete-account.html).
   Overrides .warning-box to use --danger (delete is danger, not warning)
   and the .form-status partial styling. Scoped to keep the global versions
   intact for other pages. */

.delete-account-page .warning-box {
  background: var(--danger);
  color: var(--primary-light);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.delete-account-page .warning-box h3 {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-peer);
}

.delete-account-page .warning-box ul {
  margin: var(--gap-peer) 0 0 var(--gap-pane);
  font-size: var(--text-note);
}

.delete-account-page .warning-box li { margin-bottom: var(--gap-bound); }

.delete-account-page .export-prompt {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.delete-account-page .export-prompt h3 {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-peer);
}

.delete-account-page .export-prompt p {
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
}

.delete-account-page .delete-form {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
}

.delete-account-page .delete-form .form-group { margin-bottom: var(--gap-pane); }

.delete-account-page .delete-form label {
  display: block;
  margin-bottom: var(--gap-peer);
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.delete-account-page .delete-form .hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-bound);
}

.delete-account-page .delete-form input[type="text"] {
  width: 100%;
  padding: var(--gap-section);
  font-size: var(--text-body);
  border: 2px solid var(--border);
  background: var(--surface-sunken);
}

.delete-account-page .delete-form input[type="text"]:focus {
  border-color: var(--danger);
  outline: none;
}

.delete-account-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.delete-account-page .back-link:hover { opacity: 1; }

.delete-account-page .form-actions {
  display: flex;
  gap: var(--gap-section);
  align-items: center;
}

.delete-account-page .form-status { font-size: var(--text-note); }
.delete-account-page .form-status.error { color: var(--danger); }
.delete-account-page .form-status.success { color: var(--success); }

/* Export data page (templates/dashboards/dashboard-export.html).
   `.export-card` and its inner classes (`-info`, `-title`, `-desc`, `-meta`)
   are intentionally page-scoped: this is a row-layout card (info on left,
   action button on right, flex justify-between) that doesn't fit `.card-muted`
   cleanly. Background uses `--light-background` rather than `--surface-muted`
   for visual distinction from the surrounding dashboard surface. */

.export-page .export-cards {
  display: grid;
  gap: var(--gap-section);
}

.export-page .export-card {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-section);
}

.export-page .export-card-info { flex: 1; }

.export-page .export-card-title {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: var(--text-lead);
  margin-bottom: var(--gap-peer);
}

.export-page .export-card-desc {
  font-size: var(--text-note);
  opacity: 0.8;
  margin-bottom: var(--gap-peer);
}

.export-page .export-card-meta {
  font-size: var(--text-fine);
  opacity: 0.6;
}

.export-page .export-card button { white-space: nowrap; }

.export-page .export-note {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-top: var(--gap-page);
  font-size: var(--text-note);
}

.export-page .export-note h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

.export-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.export-page .back-link:hover { opacity: 1; }

.export-page .export-status {
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}

.export-page .export-status.success { color: var(--success); }
.export-page .export-status.error { color: var(--danger); }

/* Receipt page (templates/pages/receipt.html). */

.receipt-page .receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap-page);
  padding-bottom: var(--gap-pane);
  border-bottom: 1px solid var(--border);
}

.receipt-page .receipt-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  font-size: var(--text-body);
}

.receipt-page .receipt-row.total {
  font-weight: bold;
  font-size: var(--text-lead);
  border-top: 1px solid var(--border);
  padding-top: var(--gap-section);
  margin-top: var(--gap-peer);
}

.receipt-page .receipt-label { opacity: 0.7; }

.receipt-page .receipt-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-pane);
  border-top: 1px solid var(--border);
  font-size: var(--text-note);
  opacity: 0.6;
}

.receipt-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.receipt-page .back-link:hover { opacity: 1; }

@media print {
  .receipt-page .back-link,
  .receipt-page .site-header,
  .receipt-page .print-btn { display: none !important; }
  .receipt-page .receipt-box { border: 1px solid var(--border); }
}

/* Fan+ subscription page (templates/pages/fan_plus.html). */
.fan-plus-page h1 { font-size: var(--text-display); margin-bottom: var(--gap-peer); }
.fan-plus-page h2 { font-size: var(--text-head); margin-top: var(--gap-page); margin-bottom: var(--gap-section); }

.fan-plus-page .fan-plus-section { margin-bottom: var(--gap-page); line-height: 1.7; }
.fan-plus-page .fan-plus-section ul { padding-left: var(--gap-pane); margin: var(--gap-section) 0; }
.fan-plus-page .fan-plus-section li { margin-bottom: var(--gap-peer); }

.fan-plus-page .price-callout {
  font-size: var(--text-subhead);
  font-family: var(--font-mono);
  margin: var(--gap-pane) 0;
}

.fan-plus-page .subscribe-form { margin: var(--gap-page) 0; }

.fan-plus-page .subscribe-btn {
  display: inline-block;
  padding: var(--gap-section) var(--gap-page);
  background: var(--action);
  color: var(--primary-light);
  border: none;
  font-size: var(--text-lead);
  cursor: pointer;
  font-family: var(--font-mono);
}

.fan-plus-page .subscribe-btn:hover { opacity: 0.9; }

.fan-plus-page .status-box {
  padding: var(--gap-pane);
  background: var(--surface-overlay);
  margin: var(--gap-pane) 0;
}

.fan-plus-page .status-box p { margin: var(--gap-peer) 0; }

.fan-plus-page .success-banner {
  padding: var(--gap-section) var(--gap-pane);
  background: color-mix(in oklch, var(--success) 12%, var(--surface-page));
  margin-bottom: var(--gap-pane);
  font-family: var(--font-mono);
}

.fan-plus-page .login-link { font-family: var(--font-mono); }

/* Purchase confirmation page (templates/pages/purchase.html). */
.purchase-page .container {
  max-width: 800px;
  margin: var(--gap-page) auto;
  padding: 0 var(--gap-page);
}

.purchase-page .tagline {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-page);
  text-align: center;
}

.purchase-page .checkout-box { margin-bottom: var(--gap-pane); }

.purchase-page h2 { font-size: var(--text-title); margin-bottom: var(--gap-peer); }

.purchase-page .step-indicator {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-pane);
}

.purchase-page .item-summary {
  background: var(--surface-page);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
  display: flex;
  gap: var(--gap-pane);
}

.purchase-page .item-thumbnail {
  width: 120px;
  height: 120px;
  background: var(--surface-sunken);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-hero);
  overflow: hidden;
}

.purchase-page .item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* See the storefront card: the dimming is the placeholder's, not the slot's. */
.purchase-page .item-thumbnail-empty { opacity: 0.3; }

.purchase-page .item-details { flex: 1; }

.purchase-page .item-title {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-heading);
  font-weight: bold;
}

.purchase-page .item-creator {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

.purchase-page .item-creator a { color: var(--content); }
.purchase-page .item-description { font-size: var(--text-note); opacity: 0.8; }

.purchase-page .price-breakdown {
  background: var(--surface-page);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.purchase-page .price-breakdown h2 { font-size: var(--text-lead); margin-bottom: var(--gap-section); }

.purchase-page .price-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
}

.purchase-page .price-row:last-child {
  border-bottom: none;
  margin-top: var(--gap-peer);
  font-size: var(--text-subhead);
  padding-top: var(--gap-section);
  border-top: 2px solid var(--border);
}

.purchase-page .price-row.total { font-weight: bold; }

.purchase-page .payment-section { margin-bottom: var(--gap-pane); }
.purchase-page .payment-section h2 { font-size: var(--text-lead); margin-bottom: var(--gap-section); }

.purchase-page .btn-primary { width: 100%; }
.purchase-page .btn-secondary { width: 100%; margin-top: var(--gap-section); }

.purchase-page .security-note {
  font-size: var(--text-note);
  opacity: 0.6;
  text-align: center;
  margin-top: var(--gap-section);
}

/* Replaces inline styles in pages/purchase.html. */
.purchase-page h1 { text-align: center; }

.purchase-page .price-breakdown-note {
  margin-top: var(--gap-peer);
  font-size: var(--text-fine);
  opacity: 0.6;
}

.purchase-page .creator-breakdown {
  background: var(--surface-page);
  padding: var(--gap-section) var(--gap-pane);
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
}
.purchase-page .creator-breakdown h2 {
  font-size: var(--text-body);
  margin-bottom: var(--gap-section);
  opacity: 0.7;
}
.purchase-page .creator-breakdown .price-row { opacity: 0.8; }
.purchase-page .creator-breakdown .price-row.is-total {
  opacity: 1;
  font-weight: bold;
  border-top: 1px solid var(--border);
  margin-top: var(--gap-peer);
  padding-top: var(--gap-peer);
  /* override .price-row:last-child upsize */
  font-size: inherit;
  border-bottom: none;
}
.purchase-page .creator-breakdown .platform-fee-amount { color: var(--content); }
.purchase-page .creator-breakdown-note {
  margin-top: var(--gap-section);
  font-size: var(--text-note);
  opacity: 0.6;
}

.purchase-page .payment-section-lead {
  margin-bottom: var(--gap-pane);
  opacity: 0.8;
}

.purchase-page .pending-checkout {
  margin-bottom: var(--gap-pane);
  background: var(--surface-sunken);
  padding: var(--gap-section);
}
.purchase-page .pending-checkout p { margin: 0 0 var(--gap-section); }
.purchase-page .pending-checkout p.is-sub {
  font-size: var(--text-note);
  opacity: 0.8;
}
.purchase-page .pending-checkout form { margin: 0; }

/* Checkout form field wrappers. */
.purchase-page .checkout-field { margin-bottom: var(--gap-section); }
.purchase-page .checkout-field-label {
  font-size: var(--text-note);
  display: block;
  margin-bottom: var(--gap-bound);
}
.purchase-page .pwyw-row {
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
}
.purchase-page .pwyw-symbol { font-size: var(--text-lead); }
.purchase-page .pwyw-input { width: 120px; }
.purchase-page .pwyw-min-note {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-bound);
}
.purchase-page .promo-input {
  width: 200px;
  text-transform: uppercase;
}
.purchase-page .share-contact-label {
  font-size: var(--text-note);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  cursor: pointer;
}
.purchase-page .share-contact-checkbox { width: auto; }

.purchase-page .cart-alt-link {
  text-align: center;
  margin-top: var(--gap-section);
  font-size: var(--text-note);
  opacity: 0.7;
}
.purchase-page .guest-hint {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-section);
  text-align: center;
}
.purchase-page .guest-login-prompt {
  font-size: var(--text-fine);
  margin-top: var(--gap-peer);
  text-align: center;
}

/* ===========================================
   PROJECT SETTINGS TAB
   (replaces inline styles in partials/tabs/project_settings.html and
    related innerHTML in static/project-sections.js)
   =========================================== */

.proj-image-hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: 0 0 var(--gap-peer);
}

/* Canonical inline form-status text following a Save / Change button.
   Two class names because templates evolved with both. They're aliases.
   States via .success / .error / .saving modifier. */
.field-status,
.save-status {
  margin-left: var(--gap-peer);
  font-size: var(--text-note);
}
.field-status.success, .save-status.success { color: var(--success); }
.field-status.error,   .save-status.error   { color: var(--danger); }
.field-status.saving,  .save-status.saving  { opacity: 0.6; }

/* Muted lead paragraph above a form button (monetization / features / delete). */
.section-lead {
  margin-bottom: var(--gap-section);
  opacity: 0.7;
  text-align: left;
}

/* Large intro paragraph under a page h1 (creators, policy, changelog, fan_plus). */
.page-intro {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-page);
  line-height: 1.6;
}

.subscription-note p {
  opacity: 0.7;
  font-size: var(--text-note);
}

.features-grid-status {
  margin-top: var(--gap-peer);
  display: inline-block;
}

/* "Pages" disclosure (project-level markdown sections). */
.pages-toggle { margin-top: var(--gap-page); }
.pages-toggle > summary { cursor: pointer; }
.pages-toggle > summary h2 { display: inline; }
.pages-intro {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: var(--gap-section) 0 var(--gap-section);
}

/* psection-* mirrors section-mgmt-* (used by item_details) but psection
   class hooks are also queried by static/project-sections.js. */
.psection-row-title { flex: 1; font-weight: bold; }
.psection-row-anchor { font-size: var(--text-fine); opacity: 0.6; }
.psection-row-length { font-size: var(--text-fine); opacity: 0.6; }

.psection-edit-btn,
.psection-del-btn {
  padding: var(--gap-bound) var(--gap-group);
  font-size: var(--text-fine);
}

.psection-add-details { margin-top: var(--gap-section); }
.psection-add-details > summary {
  cursor: pointer;
  font-size: var(--text-body);
}
.psection-add-fields { margin-top: var(--gap-section); }

.psection-edit-modal {
  margin-top: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
}
.psection-edit-actions {
  display: flex;
  gap: var(--gap-peer);
}

/* ===========================================
   CART PAGE (replaces inline styles in pages/cart.html)
   =========================================== */

.cart-empty {
  text-align: center;
  padding: var(--gap-page) var(--gap-section);
}
.cart-empty-hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

/* Multi-creator summary bar (only renders when seller_groups.len() > 1). */
.cart-multi-bar-note {
  opacity: 0.7;
  margin-left: var(--gap-peer);
}
.cart-multi-bar-form {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
}
.cart-share-label {
  font-size: var(--text-note);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

/* Per-seller group card. */
.cart-group { margin-bottom: var(--gap-page); }
.cart-group-title { margin-bottom: var(--gap-bound); }
.cart-group-count {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-section);
}

/* PWYW editable price cell. */
.cart-pwyw-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-bound);
}
.cart-pwyw-symbol { font-size: var(--text-note); }

/* Compact action button used in cart/wishlist tables. */

/* Bottom summary row of each seller group. */
.cart-group-summary {
  margin-top: var(--gap-section);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-section);
}
.cart-subtotal {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
}
.cart-fee-line {
  font-size: var(--text-note);
  opacity: 0.6;
}
.cart-savings {
  font-size: var(--text-note);
  color: var(--action);
  margin-top: var(--gap-bound);
}
.cart-stripe-not-ready {
  font-size: var(--text-note);
  opacity: 0.6;
}

/* Checkout form within a seller group. */
.cart-promo-row { margin-bottom: var(--gap-peer); }
.cart-checkout-share {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

/* Wishlist suggestions section below the cart. */
.cart-wishlist { margin-top: var(--gap-page); }

/* Generic "faded out" row state, used by Add-to-Cart click handler in cart.html
   to indicate the wishlist row has been moved into the cart. */
.is-faded { opacity: 0.4; }

/* ===========================================
   PROFILE TAB (replaces inline styles in partials/tabs/user_profile.html)
   =========================================== */

/* Inline form row: input(s) + button laid out horizontally, bottom-aligned.
   Distinct from .form-row (which is a 1fr 1fr grid). */
.field-row {
  display: flex;
  gap: var(--gap-section);
  align-items: flex-end;
}
.field-row > .form-group { margin-bottom: 0; }
.field-row > .form-group.is-grow  { flex: 1; }
.field-row > .form-group.is-grow-2 { flex: 2; }
.field-row > button { margin-bottom: 0; }

/* Custom domain section. */
.profile-domain-header { margin-bottom: var(--gap-section); }
.profile-domain-status {
  margin-left: var(--gap-peer);
}
.profile-domain-status.is-verified { color: var(--success); }
.profile-domain-status.is-pending  { color: var(--warning); }

.dns-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  margin-bottom: var(--gap-peer);
}
.dns-row:last-of-type { margin-bottom: 0; }
.dns-row-label {
  font-size: var(--text-fine);
  opacity: 0.7;
  min-width: 70px;
}
.dns-row-value {
  font-size: var(--text-note);
  flex: 1;
}
.dns-row-copy {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}
.profile-domain-actions {
  display: flex;
  gap: var(--gap-section);
}
.profile-domain-result { margin-top: var(--gap-section); }
.profile-domain-lead {
  font-size: var(--text-note);
  opacity: 0.8;
}
.profile-domain-add-result { margin-top: var(--gap-section); }

/* Personal feed row: URL input + Copy button. */
.profile-feed-row {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
.profile-feed-input {
  flex: 1;
  font-size: var(--text-note);
  font-family: var(--font-mono);
  opacity: 0.8;
}
.profile-feed-lead { margin-bottom: var(--gap-section); }

.purchase-page .checkout-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-pane);
  border-top: 1px solid var(--border);
  opacity: 0.6;
  text-align: center;
  font-size: var(--text-note);
}

.purchase-page .checkout-footer a { color: var(--content); }

@media (max-width: 599px) {
  .purchase-page .container { padding: 0 var(--gap-section); }
  .purchase-page .item-summary { flex-direction: column; }
  .purchase-page .item-thumbnail { width: 100%; height: 160px; }
  .purchase-page .checkout-box { padding: var(--gap-pane); }
  .purchase-page h2 { font-size: var(--text-head); }
}

/* Feed page (templates/pages/feed.html). Compact tabular layout of
   items from followed users / projects / tags. */
.feed-page .page-title { font-size: var(--text-head); margin-bottom: var(--gap-section); }
.feed-page .feed-meta { font-size: var(--text-fine); opacity: 0.6; margin-bottom: var(--gap-section); }

.feed-page .table-header {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-overlay);
  font-size: var(--text-fine);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feed-page .col-right { text-align: right; }

.feed-page .results-table {
  border: 1px solid var(--border);
  border-top: none;
}

.feed-page .table-row {
  /* respec-ok: a five-column grid template. The generated `.table-row` sets a
     display but has no vocabulary for column tracks, so the tracks and the
     display that carries them are stated together here. */
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section);
  align-items: center;
  text-decoration: none;
  color: var(--content);
  font-size: var(--text-note);
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}

.feed-page .table-row:last-child { border-bottom: none; }
.feed-page .table-row:hover { background: var(--surface-sunken); }

.feed-page .item-name-cell {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
  min-width: 0;
}

.feed-page .item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-page .item-creator { font-size: var(--text-fine); opacity: 0.5; }

/* The feed's badges shout a little: caps and tracking. The sunken fill that
   used to come with them went with the filled-badge form in B2. */
.feed-page .badge {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feed-page .empty-state {
  text-align: center;
  padding: var(--gap-page) var(--gap-pane);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
}

.feed-page .empty-state h2 { font-size: var(--text-subhead); margin-bottom: var(--gap-peer); }
.feed-page .empty-state p { opacity: 0.7; margin-bottom: var(--gap-pane); }

.feed-page .pagination {
  display: flex;
  gap: var(--gap-bound);
  justify-content: center;
  margin-top: var(--gap-section);
}

.feed-page .pagination a,
.feed-page .pagination span {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
  text-decoration: none;
  color: var(--content);
  border: 1px solid var(--border);
}

.feed-page .pagination span.current {
  background: var(--primary-dark);
  color: var(--primary-light);
  border-color: var(--primary-dark);
}

.feed-page .pagination a:hover { background: var(--surface-sunken); }

@media (max-width: 599px) {
  .feed-page .table-header,
  .feed-page .table-row { grid-template-columns: 1fr 70px; }
  .feed-page .table-header span:nth-child(1),
  .feed-page .table-row .badge:first-child,
  .feed-page .table-header span:nth-child(3),
  .feed-page .table-header span:nth-child(4),
  .feed-page .table-row span:nth-child(3),
  .feed-page .table-row span:nth-child(3),
}

/* (Stripe Connect disclaimer page rules defined in the canonical
   STRIPE DISCLAIMER PAGE section near end of file.) */

/* User profile page (templates/pages/user.html). */
.user-page .profile-header { text-align: center; margin-bottom: var(--gap-page); }

.user-page .profile-avatar {
  width: 120px;
  height: 120px;
  background: var(--surface-overlay);
  margin: 0 auto var(--gap-section);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-hero);
  opacity: 0.5;
}

.user-page .profile-name { font-size: var(--text-title); margin-bottom: var(--gap-peer); }

.user-page .profile-username {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

.user-page .profile-bio {
  font-size: var(--text-body);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.user-page .links-section { margin-bottom: var(--gap-page); }
.user-page .link-item { text-align: center; }

.user-page .link-title {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-bound);
  font-family: var(--font-heading);
  font-weight: bold;
}

.user-page .link-description { font-size: var(--text-note); opacity: 0.7; }

.user-page .project-title {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-heading);
  font-weight: bold;
}

.user-page .project-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
}

.user-page .project-description { font-size: var(--text-note); opacity: 0.8; }

/* Creators / become-a-creator page (templates/pages/creators.html). */
.creators-page h1 { font-size: var(--text-display); margin-bottom: var(--gap-peer); }
.creators-page h2 { font-size: var(--text-head); margin-top: var(--gap-page); margin-bottom: var(--gap-section); }

.creators-page .how-it-works { margin-bottom: var(--gap-page); }
.creators-page .how-it-works ol { padding-left: var(--gap-pane); line-height: 1.8; }

.creators-page .stats-row { gap: var(--gap-page); margin: var(--gap-page) 0; }
.creators-page .stat-box { padding: var(--gap-pane); }
.creators-page .stat-box .number { font-size: var(--text-title); }
.creators-page .stat-box .label { font-size: var(--text-note); margin-top: var(--gap-bound); }

.creators-page .wave-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gap-section) 0;
}

.creators-page .wave-table th,
.creators-page .wave-table td {
  padding: var(--gap-section);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.creators-page .wave-table th {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.7;
}

.creators-page .cta {
  margin-top: var(--gap-page);
  padding: var(--gap-pane);
  background: var(--surface-overlay);
  text-align: center;
}

.creators-page .cta a { margin: 0 var(--gap-peer); }

/* Tag tree browse page (templates/pages/tag_tree.html). */
.tag-tree-page .breadcrumbs {
  font-size: var(--text-note);
  margin-bottom: var(--gap-pane);
  opacity: 0.7;
}
.tag-tree-page .breadcrumbs a:hover { opacity: 0.6; }
.tag-tree-page .breadcrumbs .sep { margin: 0 var(--gap-bound); opacity: 0.4; }

.tag-tree-page .tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap-section);
}

.tag-tree-page .tag-card {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  text-decoration: none;
  color: var(--content);
  border: 1px solid var(--border);
  transition: background 0.1s ease;
}

.tag-tree-page .tag-card:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.tag-tree-page .tag-card-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-body);
}

.tag-tree-page .tag-card-meta {
  font-size: var(--text-fine);
  opacity: 0.5;
  margin-top: var(--gap-bound);
}

.tag-tree-page .empty-state {
  opacity: 0.5;
  font-size: var(--text-note);
  padding: var(--gap-page) 0;
}

/* Confirm delete prompt (templates/pages/confirm_delete.html). Overrides
   the global .warning-box to use --danger-bg (matches the delete-account
   semantic). Also tokenized previously-broken fallbacks. */
.confirm-delete-page .warning-box {
  background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
  border: 1px solid var(--danger);
  border-radius: var(--radius-panel);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.confirm-delete-page .warning-box p {
  margin: 0;
  color: var(--danger);
}

/* Project paywall page (templates/pages/project_paywall.html). */
.project-paywall-page .paywall-cover { margin-bottom: var(--gap-pane); }
.project-paywall-page .paywall-cover img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-panel);
  object-fit: cover;
}

.project-paywall-page .paywall-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  margin-bottom: var(--gap-peer);
}

.project-paywall-page .paywall-creator {
  font-size: var(--text-body);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

.project-paywall-page .paywall-creator a { color: var(--content); }

.project-paywall-page .paywall-description {
  font-size: var(--text-lead);
  max-width: 800px;
  margin: 0 auto var(--gap-page);
  text-align: left;
}

.project-paywall-page .paywall-item-count {
  font-size: var(--text-body);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
}

.project-paywall-page .paywall-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-pane);
  margin-top: var(--gap-pane);
  text-align: left;
}

.project-paywall-page .paywall-tiers .tier-card {
  background: var(--surface-overlay);
  padding: var(--gap-page);
  display: flex;
  flex-direction: column;
}

.project-paywall-page .paywall-tiers .tier-card h3 {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
}

.project-paywall-page .paywall-tiers .tier-price {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
}

.project-paywall-page .paywall-tiers .tier-card form,
.project-paywall-page .paywall-tiers .tier-card .button { margin-top: auto; }

.project-paywall-page .paywall-tiers .tier-card button,
.project-paywall-page .paywall-tiers .tier-card .button { width: 100%; }

/* Collection detail page (templates/pages/collection.html). */
.collection-page .container { max-width: 700px; }
.collection-page .collection-header { margin-bottom: var(--gap-page); }
.collection-page .collection-title { font-size: var(--text-title); margin-bottom: var(--gap-bound); }

.collection-page .collection-owner {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

.collection-page .collection-description {
  font-size: var(--text-body);
  opacity: 0.85;
  margin-bottom: var(--gap-section);
}

.collection-page .collection-meta { font-size: var(--text-note); opacity: 0.6; }

.collection-page .collection-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--gap-section);
  background: var(--surface-overlay);
  margin-bottom: var(--gap-peer);
}

.collection-page .collection-item-info { flex: 1; }

.collection-page .collection-item-title {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-body);
  margin-bottom: var(--gap-bound);
}

.collection-page .collection-item-title a { text-decoration: none; }

.collection-page .collection-item-meta { font-size: var(--text-note); opacity: 0.7; }

.collection-page .collection-item-price {
  font-size: var(--text-note);
  white-space: nowrap;
  margin-left: var(--gap-section);
}

.collection-page .empty-state {
  text-align: center;
  padding: var(--gap-page) var(--gap-section);
  opacity: 0.6;
}

/* Project blog index page (templates/pages/project_blog.html). */
.project-blog-page .blog-header { margin-bottom: var(--gap-page); }
.project-blog-page .blog-title { font-size: var(--text-display); margin-bottom: var(--gap-peer); }

.project-blog-page .blog-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

.project-blog-page .blog-meta a { color: var(--content); }

.project-blog-page .blog-actions {
  display: flex;
  gap: var(--gap-section);
}

.project-blog-page .posts-list { max-width: 800px; }

.project-blog-page .post-entry {
  padding: var(--gap-pane) 0;
  border-bottom: 1px solid var(--border);
}

.project-blog-page .post-entry:first-child { padding-top: 0; }
.project-blog-page .post-title { font-size: var(--text-head); margin-bottom: var(--gap-peer); }
.project-blog-page .post-title a:hover { text-decoration: underline; }

.project-blog-page .post-date {
  font-size: var(--text-note);
  opacity: 0.6;
  font-family: var(--font-mono);
}

.project-blog-page .empty-state { padding: var(--gap-page) 0; opacity: 0.6; }

/* Canonical "page-level h1", left-aligned, smaller than the global centered
   default. Used by dashboards, admin, health, import, delete-account, export,
   receipt. Aliased via comma-grouped selectors so each page picks it up via
   its body class without redefining. */
.dashboard-page h1,
.admin-page h1,
.health-page h1,
.import-page h1,
.delete-account-page h1,
.export-page h1,
.receipt-page h1 {
  font-size: var(--text-title);
  margin-bottom: var(--gap-peer);
  text-align: left;
}
.delete-account-page h1 { color: var(--danger); }

/* Canonical subtitle under a page h1, muted, with bottom space. */
.health-page .subtitle,
.import-page .subtitle,
.delete-account-page .subtitle,
.export-page .subtitle {
  opacity: 0.7;
  margin-bottom: var(--gap-page);
  text-align: left;
}
.health-page .subtitle { text-align: center; }

/* User Settings tab (templates/partials/tabs/user_settings.html).
   Left-rail nav layout for the Settings dashboard tab. Selection uses the
   canonical .is-selected modifier. */
.settings-layout { display: flex; gap: var(--gap-page); }
.settings-nav { flex-shrink: 0; min-width: 140px; }
.settings-nav a {
  display: block;
  padding: var(--gap-peer) var(--gap-section);
  text-decoration: none;
  color: var(--content);
  opacity: 0.6;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  transition: opacity 0.15s ease;
}
.settings-nav a:hover { opacity: 1; }
.settings-nav a.is-selected { opacity: 1; background: var(--surface-sunken); }
.settings-body { flex: 1; min-width: 0; }
@media (max-width: 839px) {
  .settings-layout { flex-direction: column; gap: var(--gap-section); }
  .settings-nav { display: flex; flex-wrap: wrap; gap: 0; min-width: 0; }
  .settings-nav a { padding: var(--gap-peer) var(--gap-group); font-size: var(--text-note); }
}.library-page .feed-table-header {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-overlay);
  font-size: var(--text-fine);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.library-page .feed-col-right { text-align: right; }
.library-page .feed-results-table { border: 1px solid var(--border); border-top: none; }
.library-page .feed-table-row {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section);
  align-items: center;
  text-decoration: none;
  color: var(--content);
  font-size: var(--text-note);
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}
.library-page .feed-table-row:last-child { border-bottom: none; }
.library-page .feed-table-row:hover { background: var(--surface-sunken); }
.library-page .feed-item-name-cell {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
  min-width: 0;
}
.library-page .feed-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-page .feed-item-creator { font-size: var(--text-fine); opacity: 0.5; }
.library-page .feed-pagination {
  display: flex;
  gap: var(--gap-bound);
  justify-content: center;
  margin-top: var(--gap-section);
}
.library-page .feed-pagination a,
.library-page .feed-pagination span {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
  text-decoration: none;
  color: var(--content);
  border: 1px solid var(--border);
}
.library-page .feed-pagination span.current {
  background: var(--primary-dark);
  color: var(--primary-light);
  border-color: var(--primary-dark);
}
.library-page .feed-pagination a:hover { background: var(--surface-sunken); }
@media (max-width: 599px) {
  .library-page .feed-table-header,
  .library-page .feed-table-row {
    grid-template-columns: 1fr 70px;
  }
  .library-page .feed-table-header span:nth-child(1),
  .library-page .feed-table-row .badge:first-child,
  .library-page .feed-table-header span:nth-child(3),
  .library-page .feed-table-header span:nth-child(4),
  .library-page .feed-table-row span:nth-child(3),
  .library-page .feed-table-row span:nth-child(4) {
    display: none;
  }
}

/* User-level dashboard (templates/dashboards/dashboard-user.html).
   Scoped under .dashboard-user-page to avoid colliding with .project-card
   / .project-title / .project-meta on the public profile (user.html) and
   the user_projects tab partial. */
.dashboard-user-page .stat-value { font-size: var(--text-title); margin-bottom: var(--gap-bound); }

.dashboard-user-page .project-card {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-section);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.dashboard-user-page .project-info { flex: 1; }

.dashboard-user-page .project-title {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-bound);
}

.dashboard-user-page .project-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
}

.dashboard-user-page .project-stats { font-size: var(--text-note); }
.dashboard-user-page .project-actions {
  display: flex;
  gap: var(--gap-peer);
}

.dashboard-user-page .project-actions button {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}
@media (max-width: 839px) {
  .dashboard-user-page .project-card { flex-direction: column; }
  .dashboard-user-page .project-actions { margin-top: var(--gap-section); }
}

/* Project dashboard (templates/dashboards/dashboard-project.html). */
.dashboard-project-page .project-meta { font-size: var(--text-note); opacity: 0.7; }
.dashboard-project-page .stat-value { font-size: var(--text-title); margin-bottom: var(--gap-bound); }

.dashboard-project-page .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-pane);
}

.dashboard-project-page .content-header h2 { font-size: var(--text-subhead); }

.dashboard-project-page .item-thumbnail {
  width: 40px;
  height: 40px;
  background: var(--border);
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--gap-peer);
}

.dashboard-project-page .item-actions {
  display: flex;
  gap: var(--gap-peer);
}

.dashboard-project-page .item-actions button {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

.dashboard-project-page .data-section { margin-bottom: var(--gap-page); }

.dashboard-project-page .data-section h2 {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}

/* Item dashboard (templates/dashboards/dashboard-item.html). */
.dashboard-item-page .item-meta {
  font-size: var(--text-note);
  opacity: 0.7;
  display: flex;
  gap: var(--gap-section);
  align-items: center;
}

.dashboard-item-page .stat-value { font-size: var(--text-head); }

.dashboard-item-page .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-pane);
  padding-bottom: var(--gap-section);
  border-bottom: 1px solid var(--border);
}

.dashboard-item-page .section-header h2 { font-size: var(--text-subhead); }

@media (max-width: 839px) {
  .dashboard-item-page .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-section);
  }
  .dashboard-item-page .section-header .action-buttons { width: 100%; }
}

/* Changelog page (templates/pages/changelog.html). */
.changelog-page .container { max-width: 900px; margin: 0 auto; }
.changelog-page h1 { font-size: var(--text-display); margin-bottom: var(--gap-peer); }
.changelog-page .changelog-entry {
  margin-bottom: var(--gap-page);
  padding-bottom: var(--gap-page);
  border-bottom: 1px solid var(--border);
}
.changelog-page .changelog-entry:last-child { border-bottom: none; }
.changelog-page .changelog-date {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-peer);
}
.changelog-page .changelog-entry h2 { font-size: var(--text-subhead); margin-bottom: var(--gap-section); }
.changelog-page .changelog-entry ul {
  padding-left: var(--gap-pane);
  margin: var(--gap-peer) 0;
  line-height: 1.7;
}
.changelog-page .changelog-entry li { margin-bottom: var(--gap-bound); }

/* Policy page (templates/pages/policy.html). */
.policy-page .container { max-width: 900px; margin: 0 auto; }
.policy-page h1 { font-size: var(--text-display); margin-bottom: var(--gap-peer); }
.policy-page h2 {
  font-size: var(--text-head);
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
}
.policy-page .policy-section { margin-bottom: var(--gap-page); line-height: 1.7; }
.policy-page .policy-section ul {
  padding-left: var(--gap-pane);
  margin: var(--gap-section) 0;
}
.policy-page .policy-section li { margin-bottom: var(--gap-bound); }
.policy-page .contact {
  margin-top: var(--gap-page);
  padding: var(--gap-pane);
  background: var(--surface-overlay);
}

/* Admin page extras (in addition to global .admin-page h1). */
.admin-page .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-section);
  margin-bottom: var(--gap-page);
}

.admin-page .metric-card {
  padding: var(--gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
}

.admin-page .metric-card .value {
  font-size: var(--text-title);
  font-family: var(--font-mono);
  font-weight: 600;
}

.admin-page .metric-card .label {
  font-size: var(--text-note);
  color: var(--content-muted);
  margin-top: var(--gap-bound);
}

.admin-page .metric-card.warn .value { color: var(--warning); }
.admin-page .metric-card.error .value { color: var(--danger); }

.admin-page .section-heading {
  font-size: var(--text-subhead);
  margin: var(--gap-pane) 0 var(--gap-section);
  font-family: var(--font-mono);
}

/* Scan pipeline dashboard. See docs/scan-pipeline-audit.md § 5. */

.admin-scan-section {
  margin-top: var(--gap-page);
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--gap-section);
  gap: var(--gap-section);
}

/* Typeface comes from .subsection-title on the heading itself; this sets only
   what the flex row needs. */
.admin-section-header h2 {
  font-size: var(--text-lead);
  margin: 0;
}

.layer-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-section);
}

.layer-health-card {
  padding: var(--gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  border-left-width: 4px;
  font-size: var(--text-note);
}

.layer-health-card .layer-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: var(--gap-peer);
}

.layer-health-card .layer-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.layer-health-card .layer-stat .dimmed {
  color: var(--content-muted);
}

.layer-health-card.layer-ok       { border-left-color: var(--success); }
.layer-health-card.layer-degraded { border-left-color: var(--warning); }
.layer-health-card.layer-down     { border-left-color: var(--danger); }

.layer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 360px;
}

.layer-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  padding: 1px 6px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: help;
  line-height: 1.4;
}

.layer-chip-pass  { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); border-color: var(--success); color: var(--success); }
.layer-chip-skip  { background: var(--surface-page); border-color: var(--border); color: var(--content-muted); }
.layer-chip-fail  { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.layer-chip-error { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); border-color: var(--warning); color: var(--warning); font-weight: 600; }

.scan-history-grid table { font-size: var(--text-note); }

.scan-history-grid summary {
  cursor: pointer;
  font-family: var(--font-mono);
  padding: var(--gap-peer) 0;
  user-select: none;
}

.scan-row-meta {
  font-size: var(--text-fine);
  color: var(--content-muted);
  margin-top: 2px;
}

.audit-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-section);
  padding: var(--gap-section) 0;
  margin-bottom: var(--gap-section);
  border-bottom: 1px solid var(--border);
}

.audit-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-filter-form input,
.audit-filter-form select {
  font-size: var(--text-note);
}

.layer-chips-cell { vertical-align: top; }

.layer-detail-disclosure {
  margin-top: var(--gap-peer);
}

.layer-detail-disclosure summary {
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

.layer-detail-list {
  margin: var(--gap-peer) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--gap-section);
  font-size: var(--text-fine);
}

.layer-detail-list dt {
  font-family: var(--font-mono);
}

.layer-detail-list dd {
  margin: 0;
  color: var(--content-muted);
  word-break: break-word;
}

.admin-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}

.admin-page th,
.admin-page td {
  text-align: left;
  padding: var(--gap-peer) var(--gap-group);
  border-bottom: 1px solid var(--border);
}

.admin-page th {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  text-transform: uppercase;
  color: var(--content-muted);
}

.admin-page td.mono { font-family: var(--font-mono); }

.admin-page .refresh-note {
  font-size: var(--text-fine);
  color: var(--content-muted);
  margin-bottom: var(--gap-section);
  font-family: var(--font-mono);
}

.admin-page .appeal-count {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

.admin-page .decide-form {
  display: flex;
  gap: var(--gap-peer);
  align-items: flex-end;
  flex-wrap: wrap;
}

.admin-page .decide-form textarea {
  min-width: 200px;
  font-size: var(--text-note);
}

.admin-page .suspend-form {
  display: flex;
  gap: var(--gap-peer);
  align-items: flex-end;
}

.admin-page .suspend-form input[type="text"] {
  min-width: 200px;
  font-size: var(--text-note);
}

.admin-page .lottery-form {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  margin: var(--gap-pane) 0;
  display: flex;
  gap: var(--gap-section);
  align-items: flex-end;
}

.admin-page .lottery-form .form-group { margin-bottom: 0; }

.admin-page .lottery-form label {
  font-size: var(--text-note);
  display: block;
  margin-bottom: var(--gap-bound);
}

.admin-page .lottery-form input[type="number"] { width: 80px; }

/* Page-top notice (charter primitive, replaces #restart-banner and
   the inline sandbox banner in dashboard-project). Full-bleed across
   the viewport, monospace, one short sentence + optional action.
   Hero callouts on the landing page use `.alert` instead (multi-paragraph). */
.banner {
  padding: var(--gap-section) var(--gap-pane);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  text-align: center;
  color: var(--content);
}

.banner--info {
  background: var(--highlight-faint);
  border-bottom: 2px solid var(--focus-ring);
}

.banner--warning {
  background: color-mix(in oklch, var(--warning) 14%, var(--surface-page));
  border-bottom: 2px solid var(--warning);
}

.banner a {
  color: inherit;
  text-decoration: underline;
}

/* ===========================================
   SECTIONS
   =========================================== */

.section-header {
  font-size: var(--text-head);
  font-weight: normal;
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

/* Canonical "page section box", light-background card with padding + bottom
   space. One of these in the codebase. Aliased to the per-page class names
   that were just relabels of this same shape. Templates can use the alias
   name OR add `.content-section` as a co-class. */
/* The canonical panel. Every one of these carries `.raised` in the markup
   now, so the fill and the bevel come from layout.css and this rule is the
   spacing only. The background it used to declare was --surface-overlay,
   which .raised spells --surface-raised; equal on the platform default and a
   theme may set them apart, the same move .card and .buy-card made. */
.content-section,
.import-page .import-form,
.import-page .import-progress,
.library-page .library-section,
.library-page .library-downloads,
.library-page .downloads-hero,
.receipt-page .receipt-box,
.stripe-disclaimer-page .disclaimer-box,
.project-page .project-sections {
  padding: var(--gap-page);
  margin-bottom: var(--gap-page);
}

/* Variants of the canonical shape that want top-spacing instead of bottom,
   or a tighter --gap-pane padding. */
.library-page .library-downloads,
.receipt-page .receipt-box { margin-bottom: 0; margin-top: var(--gap-pane); }
.import-page .import-progress { padding: var(--gap-pane); margin-bottom: var(--gap-section); }
.stripe-disclaimer-page .disclaimer-box { margin-bottom: var(--gap-pane); }

.form-section {
  margin-bottom: var(--gap-page);
}

.section-group-label {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-muted);
  margin: var(--gap-page) 0 var(--gap-section) 0;
  padding-top: var(--gap-pane);
  border-top: 2px solid var(--border);
}

.form-section h2 {
  font-size: var(--text-subhead);
  font-weight: normal;
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}

details.form-section > summary {
  cursor: pointer;
  list-style: disclosure-closed;
}

details.form-section[open] > summary {
  list-style: disclosure-open;
  margin-bottom: var(--gap-section);
}

details.form-section > summary > h2 {
  display: inline;
}

details.form-section > summary:hover > h2 {
  color: var(--content);
}

/* ===========================================
   NAVIGATION
   =========================================== */

nav {
  margin-bottom: var(--gap-page);
}

.nav-links {
  display: flex;
  gap: var(--gap-page);
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--content);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.6;
}

.shortcuts-help-btn {
  font-family: var(--font-mono);
  color: var(--content-muted);
  font-size: var(--text-note);
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 0;
  background: none;
}

.shortcuts-help-btn:hover {
  opacity: 0.6;
}

.breadcrumb {
  font-size: var(--text-note);
  color: var(--content-muted);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-mono);
}

.breadcrumb a {
  color: var(--content);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ===========================================
   HEADER & FOOTER
   =========================================== */

header {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin-bottom: var(--gap-page);
}

footer {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--content-muted);
}

.profile-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-pane);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: var(--text-note);
}

.profile-footer a {
  color: var(--content);
  text-decoration: none;
}

.profile-footer a:hover {
  text-decoration: underline;
}

/* Site-wide header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-section) var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.site-header nav {
  margin: 0;
}

.site-header .nav-links {
  gap: var(--gap-pane);
}

.site-logo {
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
  text-decoration: none;
  color: var(--content);
}

.site-logo:hover {
  opacity: 0.8;
}

.nav-form {
  display: contents;
}

/* Header search */
.header-search {
  flex: 0 1 220px;
  margin: 0 var(--gap-section);
}

.header-search input {
  width: 100%;
  padding: var(--gap-peer) var(--gap-group);
  font-size: var(--text-note);
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  background: var(--surface-page);
  color: var(--content);
  border-radius: var(--radius-control);
}

.header-search input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
}

/* Hamburger toggle, hidden by default, shown at 768px */
.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: var(--gap-peer);
  z-index: var(--z-header);
}

.nav-toggle-label span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--content);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ===========================================
   LAYOUT UTILITIES
   =========================================== */

.action-buttons {
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
/* ===========================================
   SPECIFIC COMPONENTS
   =========================================== */

/* Login container */
.login-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface-overlay);
  padding: var(--gap-page);
}
/* Logo */
.logo {
  font-family: var(--font-heading);
  color: var(--content);
  font-size: var(--text-head);
}

.tagline {
  font-family: var(--font-mono);
  color: var(--content-muted);
  text-align: center;
}

.centered-page .tagline {
  margin-bottom: var(--gap-bound);
}
/* Skip link */
.skip-link {
  text-align: center;
  margin-top: var(--gap-section);
}

.skip-link a {
  color: var(--primary-dark);
  text-decoration: none;
  font-size: var(--text-note);
  opacity: 0.7;
}

.skip-link a:hover {
  text-decoration: underline;
}

/* Footer link */
.foot-link {
  margin-top: 0.5em;
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--primary-dark);
  margin-right: var(--gap-peer);
}

.status-indicator.active {
  background: var(--success);
}

/* Amount styling */
.amount-in {
  color: var(--success);
}

.amount-out {
  opacity: 0.7;
}

/* File upload */
.file-upload-area {
  background: var(--surface-sunken);
  padding: var(--gap-page);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: var(--gap-section);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  background: var(--border);
}
/* Chart placeholder */
.chart-container {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-section);
}

.chart-header h2 {
  font-size: var(--text-subhead);
  font-weight: normal;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding: 0 var(--gap-peer);
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  cursor: default;
  position: relative;
}

.chart-bar-col[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: var(--primary-light);
  font-size: var(--text-fine);
  font-family: var(--font-mono);
  padding: var(--gap-bound) var(--gap-peer);
  white-space: nowrap;
  z-index: var(--z-dropdown);
  pointer-events: none;
  margin-bottom: var(--gap-bound);
}

.chart-bar {
  width: 100%;
  height: var(--fill, 0%);
  background: var(--primary-dark);
  min-height: 2px;
  transition: opacity 0.15s;
}

.chart-bar-col:hover .chart-bar {
  opacity: 0.8;
}

.chart-bar-label {
  font-size: var(--text-fine);
  opacity: 0.5;
  margin-top: var(--gap-bound);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Time selector */
.time-selector {
  display: flex;
  gap: var(--gap-peer);
}

/* The range buttons are makeover's `.segment`, which is what a segmented
   control is called there, and B3's question about whether this codebase has
   an analogue: it does, and this is it. Fill, bevel, hover, active and focus
   are the generated ones; this rule is geometry and type.

   Selection was a --primary-dark fill with a --primary-light label, which is
   a second thing meaning "chosen" beside the generated `.chosen` (the segment
   presses IN — well fill, inset bevel). Taking the generated one; only the
   name stays local, same as the tabs. */
.time-selector button {
  border: none;
  padding: var(--gap-peer) var(--gap-section);
  font-family: inherit;
  font-size: var(--text-note);
  cursor: pointer;
}

.time-selector button.is-selected {
  background: var(--surface-well, var(--surface-page));
  box-shadow: var(--bevel-inset);
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}
.analytics-list {
  list-style: none;
}

.analytics-list li {
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}

.analytics-list li:last-child {
  border-bottom: none;
}

/* Quick actions */
.quick-actions {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
}

.quick-actions h2 {
  font-size: var(--text-subhead);
  font-weight: normal;
  margin-bottom: var(--gap-section);
}

/* Filter controls */
.filter-controls {
  display: flex;
  gap: var(--gap-section);
  margin-bottom: var(--gap-section);
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
/* UUID styling */
.uuid {
  font-family: inherit;
  opacity: 0.5;
  font-size: var(--text-note);
}
/* ===========================================
   HTMX LOADING INDICATORS
   =========================================== */

.htmx-indicator {
  display: none;
  animation: htmx-spin 1s ease-in-out infinite;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

/* Loading spinner animation. Applied on .htmx-indicator above. */
@keyframes htmx-spin {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Disable buttons during request */
.htmx-request button[type="submit"] {
  opacity: 0.6;
  cursor: wait;
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--gap-peer);
}

.toast {
  background: var(--primary-dark);
  color: var(--primary-light);
  padding: var(--gap-section);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  box-shadow: var(--elevation-overlay);
  animation: toast-in 0.3s ease-out;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: var(--gap-section);
}

.toast-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--text-lead);
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.toast-dismiss:hover {
  opacity: 1;
}

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

.toast-warning {
  background: var(--warning);
}

.toast-info {
  background: var(--primary-dark);
}

.toast-retry-btn {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: 600;
  padding: var(--gap-bound) var(--gap-peer);
  margin-left: var(--gap-section);
  cursor: pointer;
}

.toast-retry-btn:hover {
  background: color-mix(in oklch, var(--primary-light) 15%, transparent);
}

.toast.fade-out {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===========================================
   "NEW" BADGE (data-new-until)
   ===========================================
   Applied by whats_new.js while today's date is <= the element's
   data-new-until. Renders a small violet dot to the right of the
   element's content. Pair with relative-positioned parents. */

.is-new {
  position: relative;
}

.is-new::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--action);
  box-shadow: 0 0 0 2px var(--surface-page);
}

/* ===========================================
   RESTART WARNING BANNER
   =========================================== */

/* Page-top behavior extensions on top of .banner.banner--warning.
   Color / typography come from the .banner primitive. */
#restart-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
  padding: var(--gap-group) var(--gap-section);
  animation: banner-slide-down 0.3s ease-out;
}

@keyframes banner-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ===========================================
   SAVE STATUS INDICATORS
   =========================================== */

/* Username availability status */
.username-status {
  display: block;
  margin-top: var(--gap-bound);
  font-size: var(--text-note);
}

.username-status.available {
  color: var(--success);
}

.username-status.taken {
  color: var(--danger);
}

/* ===========================================
   HTMX TRANSITIONS
   =========================================== */

/* Fade in for swapped content */
.htmx-added {
  animation: htmx-fade-in 0.2s ease-out;
}

@keyframes htmx-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Settling animation for swapped content */
.htmx-settling {
  opacity: 0.8;
}

/* Swap animation */
.htmx-swapping {
  opacity: 0.5;
  transition: opacity 0.2s ease-out;
}

/* ===========================================
   ACCESSIBILITY - FOCUS STYLES
   =========================================== */

/* Focus-visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Remove default focus outline since we use focus-visible */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure buttons and links are keyboard accessible */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Tab focus is layout.css's, same ring as everything else at outline-offset
   2px. The local rule inset it to -2px, which is only worth doing where a
   strip clips its overflow; `.tabs` is flex/nowrap with no overflow set, so
   there was nothing to clip and the tabs read differently from every other
   focusable thing on the page for no reason. */

/* Canonical "selected" recipe (charter: docs/design-system.md).
   Apply `.is-selected` to any interactive container to mark it as the
   currently-selected option. A badge never takes it: a badge reports a status
   and nobody selects "Enabled", so badges take a `data-tone` instead.
   Visibility toggles (`.tab-content.active`, `.section-panel.active`,
   `.editor-panel.active`) also keep `.active` since they're not selection
   state. */
.is-selected {
  background: var(--highlight-faint);
  border-color: var(--focus-ring);
}

/* Skip to main content link (for screen readers) */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary-dark);
  color: var(--primary-light);
  padding: 8px;
  z-index: var(--z-skip-link);
  transition: top 0.2s ease;
}

.skip-to-main:focus {
  top: 0;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status indicator with text for accessibility */
.status-indicator::after {
  content: attr(data-status);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================
   PAYWALL
   =========================================== */

.paywall-section {
  margin: var(--gap-page) 0;
  padding: var(--gap-page);
  background: var(--surface-sunken);
  text-align: center;
}

.paywall-box h2 {
  font-family: var(--font-heading);
  font-weight: normal;
  margin-bottom: var(--gap-peer);
}

.paywall-price {
  font-family: var(--font-mono);
  font-size: var(--text-head);
  margin-bottom: var(--gap-peer);
}

.paywall-desc {
  font-family: var(--font-body);
  color: var(--content-muted);
  margin-bottom: var(--gap-pane);
}

.paywall-note {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  color: var(--content-muted);
  margin-top: var(--gap-section);
}

.paywall-note a {
  color: var(--action);
}

/* ===========================================
   MODALS
   =========================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal {
  background: var(--surface-page);
  padding: var(--gap-page);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin-bottom: var(--gap-pane);
}

.modal .form-actions {
  display: flex;
  gap: var(--gap-section);
  justify-content: flex-end;
  margin-top: var(--gap-pane);
}

/* ===========================================
   LINK ROWS (Dashboard Links Section)
   =========================================== */

.link-row {
  display: flex;
  gap: var(--gap-section);
  align-items: center;
  margin-bottom: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  transition: opacity 0.2s ease, background 0.2s ease;
}

.link-row input[type="text"],
.link-row input[type="url"] {
  flex: 1;
  min-width: 0;
}

.link-row .btn-danger {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

/* Link order buttons */
.link-order-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-btn {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.order-btn:hover {
  opacity: 1;
  background: var(--border);
}

.order-btn:active {
  box-shadow: var(--shadow-inset);
}

/* ===========================================
   TEXT EDITOR
   =========================================== */

.text-editor {
  width: 100%;
}

.editor-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}

.editor-tab {
  background: var(--surface-sunken);
  border: none;
  padding: var(--gap-peer) var(--gap-pane);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.editor-tab.is-selected {
  background: var(--surface-sunken);
  opacity: 1;
}

.editor-tab:hover {
  opacity: 1;
}

.editor-panel {
  display: none;
}

.editor-panel.active {
  display: block;
}

.editor-panel textarea {
  width: 100%;
  min-height: 400px;
  padding: var(--gap-section);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  line-height: 1.6;
  resize: vertical;
  border: none;
  background: var(--surface-sunken);
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-sunken);
  font-size: var(--text-note);
  opacity: 0.7;
}

.markdown-preview {
  min-height: 400px;
  padding: var(--gap-pane);
  background: var(--surface-overlay);
  font-family: var(--font-body);
  line-height: 1.8;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
  margin-top: var(--gap-pane);
  margin-bottom: var(--gap-peer);
}

.markdown-preview h1 {
  font-size: var(--text-title);
}

.markdown-preview h2 {
  font-size: var(--text-head);
}

.markdown-preview h3 {
  font-size: var(--text-lead);
}

.markdown-preview p {
  margin-bottom: var(--gap-section);
}

.markdown-preview code {
  background: var(--surface-sunken);
  padding: var(--gap-bound);
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

/* ===========================================
   AUDIO UPLOAD
   =========================================== */

.audio-upload {
  width: 100%;
}

.current-audio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-section);
  background: var(--surface-sunken);
  margin-bottom: var(--gap-section);
}

.audio-info {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
}

.audio-icon {
  font-size: var(--text-head);
  opacity: 0.6;
}

.audio-details {
  display: flex;
  flex-direction: column;
}

.audio-filename {
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.audio-duration {
  font-size: var(--text-note);
  opacity: 0.6;
}

.upload-area .file-upload-area {
  padding: var(--gap-page);
}

.upload-icon {
  font-size: var(--text-title);
  opacity: 0.4;
  margin-bottom: var(--gap-peer);
}

.upload-text {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-peer);
}

.upload-hint {
  font-size: var(--text-note);
  opacity: 0.6;
}

.upload-progress {
  padding: var(--gap-pane);
  background: var(--surface-sunken);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}

/* Canonical progress bar primitive. One of these in the codebase.
   - .progress-bar-container is the track (8px default; --slim = 6px)
   - .progress-bar is the fill (success-green default; --highlight = purple)
   - Add .progress-bar-container--rounded for the 3px-radius pill variant
   Spacing (mb-4 / mt-2 etc.) is added by the caller, not baked in. */
.progress-bar-container {
  height: 8px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar-container--slim    { height: 6px; }
.progress-bar-container--rounded { border-radius: var(--radius-control); }

/* Fill proportion comes from the template as --fill, because it is
   per-render data. The property that reads it lives here. */
.progress-bar {
  width: var(--fill, 0%);
  height: 100%;
  background: var(--success);
  transition: width 0.2s ease;
}
.progress-bar--highlight { background: var(--action); }
.progress-bar--warn      { background: var(--warning); }
.progress-bar--danger    { background: var(--danger); }

/* Upload status block (filename + percent label + progress bar). One of these
   in the codebase. Used by wizard upload flows and standalone audio/video upload partials. */
.upload-status { margin-top: var(--gap-peer); }
.upload-status-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}
.upload-status-row span { font-size: var(--text-note); }
.upload-status-msg { margin-top: var(--gap-peer); }
.upload-status-msg.is-success { color: var(--success); }
.upload-status-msg.is-error   { color: var(--danger); }

/* Inline progress cell rendered inside a table-row status cell (batch uploads). */
.upload-progress-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}
.upload-progress-row .progress-bar-container { flex: 1; min-width: 60px; }
.upload-progress-pct {
  font-size: var(--text-fine);
  min-width: 2.5em;
  text-align: right;
}

.upload-success {
  padding: var(--gap-pane);
  background: var(--surface-sunken);
  text-align: center;
}
.upload-error {
  padding: var(--gap-pane);
  background: var(--surface-sunken);
  text-align: center;
}

.hidden {
  display: none !important;
}

/* ===========================================
   VIEW TOGGLE (Grid/List)
   =========================================== */

.view-controls {
  display: flex;
  gap: var(--gap-bound);
  margin-left: auto;
}

.view-btn {
  background: var(--surface-sunken);
  border: none;
  padding: var(--gap-peer) var(--gap-group);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.view-btn:hover {
  opacity: 0.8;
}

.view-btn.is-selected {
  opacity: 1;
  background: var(--primary-dark);
  color: var(--primary-light);
}
.results-container.results-list .results-table {
  display: block;
}

.results-container.results-list .results-grid {
  display: none;
}

.results-container.results-grid .results-table {
  display: none;
}

.results-container.results-grid .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-pane);
  border: 1px solid var(--border);
  border-top: none;
  padding: var(--gap-pane);
  background: var(--surface-overlay);
}

/* Grid cards */
.grid-card {
  background: var(--surface-overlay);
  text-decoration: none;
  color: var(--content);
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease;
}

.grid-card:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.grid-card-thumbnail {
  height: 120px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-fine);
  opacity: 0.5;
  text-transform: uppercase;
}

.grid-card-content {
  padding: var(--gap-section);
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
}

.grid-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
}

.grid-card-meta {
  font-size: var(--text-note);
  opacity: 0.6;
}

.grid-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}

.grid-card-category {
  opacity: 0.6;
}

.grid-card-price {
  font-weight: bold;
}

.grid-card-stat {
  opacity: 0.6;
}

/* ===========================================
   PROJECT PAGE VIEW TOGGLE
   =========================================== */

.items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-pane);
}

.items-header .section-header {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* Grid view is default on project page */
.items-container.items-grid-view .items-grid {
  display: grid;
}

.items-container.items-grid-view .items-list {
  display: none;
}

.items-container.items-list-view .items-grid {
  display: none;
}

.items-container.items-list-view .items-list {
  display: block;
}

/* List items styling */
.items-list {
  display: none;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-section);
  background: var(--surface-overlay);
  margin-bottom: var(--gap-peer);
  text-decoration: none;
  color: var(--content);
  transition: background 0.2s ease;
}

.list-item:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.list-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
}

.list-item-title {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
}

.list-item-meta {
  font-size: var(--text-note);
  opacity: 0.6;
}

.list-item-price {
  font-size: var(--text-lead);
  font-weight: bold;
}

/* ===========================================
   LANDING PAGE
   =========================================== */

.landing-hero {
  max-width: 720px;
  width: 100%;
  text-align: center;
}

.landing-headline {
  font-family: var(--font-heading);
  font-size: var(--text-head);
  margin-bottom: var(--gap-peer);
}

.landing-sub {
  font-size: var(--text-body);
  line-height: 1.6;
  opacity: 0.75;
  margin-bottom: 0;
}

.fork-revenue-line {
  font-size: var(--text-note);
  opacity: 0.8;
  margin: var(--gap-section) 0 var(--gap-peer);
  line-height: 1.5;
}

.fork-revenue-line a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.fork-revenue-line a:hover {
  border-bottom-color: currentColor;
}

.landing-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  margin-top: var(--gap-page);
  text-align: left;
}

.fork-heading {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--gap-section);
}

.fork-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.fork-list li {
  margin-bottom: var(--gap-group);
  font-size: var(--text-note);
  line-height: 1.5;
}

.fork-list strong {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
}

.fork-actions {
  margin-top: auto;
  padding-top: var(--gap-section);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-peer);
}

.fork-actions .big-button {
  width: 100%;
}

.fork-secondary-link {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.fork-secondary-link:hover {
  opacity: 1;
}

.fork-lede {
  font-size: var(--text-body);
  line-height: 1.55;
  margin: 0 0 var(--gap-section);
}

.landing-browse-cta {
  text-align: center;
  margin: var(--gap-section) 0 0;
}

.landing-mobile-note {
  text-align: center;
  margin: var(--gap-peer) 0 0;
  font-size: var(--text-fine);
  color: var(--content-muted);
}

.founder-tagline {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  margin: var(--gap-section) auto 0;
  max-width: 560px;
  color: var(--content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-peer);
}

.landing-velocity {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  text-align: center;
  margin: var(--gap-section) auto 0;
  color: var(--content-muted);
}

.landing-velocity a {
  color: var(--content);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.landing-velocity a:hover {
  border-bottom-color: var(--content);
}

.founder-tagline-detail {
  display: block;
}

.founder-tagline-mark {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action);
  padding: var(--gap-bound) var(--gap-peer);
  border: 1px solid var(--action);
  border-radius: var(--radius-control);
  white-space: nowrap;
}

.fork-card--founder {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--highlight-faint);
}

.founder-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-peer) var(--gap-section);
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-section);
  border-bottom: 1px dashed var(--border);
}

.founder-tier {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
}

.founder-tier-name {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.founder-tier-price {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  line-height: 1.1;
}

.founder-tier-price del {
  opacity: 0.4;
  margin-right: var(--gap-bound);
  font-weight: 400;
}

.founder-tier-price strong {
  color: var(--action);
  font-weight: 700;
}

.founder-tier-unit {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-left: var(--gap-bound);
}

.founder-slots {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  margin: 0 0 var(--gap-section);
  line-height: 1.3;
}

.founder-slots-number {
  font-family: var(--font-heading);
  font-size: var(--text-head);
  color: var(--action);
  font-weight: 700;
  margin-right: var(--gap-bound);
}

.founder-slots-cap {
  opacity: 0.55;
  margin-left: var(--gap-bound);
}

.founder-slots--cap {
  opacity: 0.7;
  font-size: var(--text-fine);
}

.landing-stats-line {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
  margin-top: var(--gap-page);
}

.landing-stats-line a {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.landing-stats-line a:hover {
  opacity: 1;
}

.landing-principles {
  margin-top: var(--gap-page);
  width: 100%;
}

.landing-use-cases {
  margin-top: var(--gap-page);
  width: 100%;
}

.use-case-line {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.landing-prose {
  font-size: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--gap-peer);
}

.notify-form {
  display: flex;
  gap: var(--gap-peer);
  max-width: 400px;
  margin: 0 auto;
}

.notify-input {
  flex: 1;
  padding: var(--gap-peer) var(--gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-note);
  background: var(--surface-page);
  color: var(--content);
}

.notify-status {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  text-align: center;
  margin-top: var(--gap-peer);
  min-height: 1.2em;
}

.notify-status.success {
  color: var(--content);
}

.notify-status.error {
  color: var(--danger);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--gap-section);
}

.tier-section {
  margin: var(--gap-page) 0;
  width: 100%;
}
/* Marketing pricing variant of .card--bordered. */
.tier-name {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 600;
  margin-bottom: var(--gap-bound);
}

.tier-price {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  margin-bottom: var(--gap-bound);
}

.tier-desc {
  font-size: var(--text-note);
  opacity: 0.7;
}

.tier-card.planned {
  opacity: 0.5;
  border-style: dashed;
  position: relative;
}
.landing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-page);
  width: fit-content;
  margin: var(--gap-pane) auto var(--gap-page);
}
.secondary-links {
  display: flex;
  gap: var(--gap-pane);
  justify-content: center;
  margin-top: var(--gap-section);
}

.secondary-links a {
  font-size: var(--text-note);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.secondary-links a:hover {
  opacity: 1;
}
.section-link {
  display: block;
  margin-top: var(--gap-section);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.section-link:hover {
  opacity: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  text-align: left;
}

.feature-name {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 600;
  margin-bottom: var(--gap-bound);
}

.feature-desc {
  font-size: var(--text-note);
  opacity: 0.7;
}

.how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.how-list li {
  margin-bottom: var(--gap-group);
  font-size: var(--text-body);
}

.how-list strong {
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.do-rail {
  list-style: none;
  margin: var(--gap-page) 0 var(--gap-pane);
  padding: 0;
  display: grid;
  /* A do-card stops being readable under about 200px, which is a fact about
     the card. Three across is what that yields at full width. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-section);
  width: 100%;
}

.do-card {
  background: transparent;
  border: 1px solid var(--border);
  padding: var(--gap-section);
  text-align: left;
  display: flex;
  flex-direction: column;
}

.do-card-title {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--gap-peer);
}

.do-card-lede {
  font-size: var(--text-note);
  line-height: 1.5;
  opacity: 0.78;
  margin: 0 0 var(--gap-section);
}

.do-card-links {
  list-style: none;
  margin: auto 0 0;
  padding: var(--gap-section) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-peer) var(--gap-section);
}

.do-card-links a {
  font-size: var(--text-note);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.do-card-links a:hover {
  border-bottom-color: currentColor;
}

.do-card--wide {
  margin-top: var(--gap-page);
  width: 100%;
}

.contrast-rail {
  list-style: none;
  margin: var(--gap-section) 0 0;
  padding: 0;
  display: grid;
  /* Title plus a short link list, so it holds up narrower than a do-card.
     Four across at full width. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-section);
  width: 100%;
}

.contrast-card {
  border-top: 1px solid var(--border);
  padding: var(--gap-section) var(--gap-bound) 0;
  text-align: left;
}

.contrast-card-title {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin: 0 0 var(--gap-peer);
  font-weight: 600;
}

.contrast-card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-peer) var(--gap-section);
}

.contrast-card-links a {
  font-size: var(--text-note);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.contrast-card-links a:hover {
  border-bottom-color: currentColor;
}

.explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-section) var(--gap-pane);
  justify-content: center;
}

.explore-links a {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.explore-links a:hover {
  opacity: 1;
}

/* ===========================================
   PRICING CALCULATOR
   =========================================== */

.pricing-page {
  max-width: 800px;
}

.pricing-input-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--gap-bound);
}

.pricing-currency {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  opacity: 0.5;
}

.pricing-input {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  width: 5ch;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  color: var(--content);
  padding: var(--gap-bound) 0;
  -moz-appearance: textfield;
}

.pricing-input::-webkit-inner-spin-button,
.pricing-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pricing-input:focus {
  outline: none;
  border-bottom-color: var(--action);
}

.pricing-period {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  opacity: 0.5;
}

/* <mnw-price-mode> is a custom element (default display:inline); it wraps the
   toggle and the tier grid, so it has to lay out as a block. */
mnw-price-mode {
  display: block;
}

/* List-vs-founder toggle above the tier cards, rendered only while the founder
   window is open. Segmented control rather than a checkbox: both options are
   real prices the visitor can be shown, and neither is an "off" state. Follows
   .tier-option's pattern of hiding the radio and styling the label off
   :has(:checked), so the selection needs no JS class. */
.price-mode {
  display: inline-flex;
  gap: 0;
  margin-bottom: var(--gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.price-mode-option {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  padding: var(--gap-bound) var(--gap-section);
  transition: background-color 0.15s ease;
}

.price-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.price-mode-option:has(input[type="radio"]:checked) {
  background: var(--action);
  color: var(--content-on-action);
}

.price-mode-option:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.tier-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  text-align: left;
}

.tier-option {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.tier-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tier-option:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Selected tier, driven purely by the checked radio (no JS toggling a
   class). The `.is-selected` alias is retained for any server-rendered use. */
.tier-option.is-selected,
.tier-option:has(input[type="radio"]:checked) {
  border-color: var(--action);
  border-width: 2px;
  padding: calc(var(--gap-section) - 1px);
}

/* Two dials side by side (price + volume, then the other platform's two).
   Stacks on narrow screens via the mobile block below. */
.calc-dials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  align-items: end;
}

.calc-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-bound);
}

.calc-dial-label {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.7;
}

/* Who comes out ahead at the current dials. The three states are the only
   place the calculator uses color to make a claim, so they carry the same
   weight in both directions: losing is stated as plainly as winning. */
.calc-verdict {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  text-align: center;
  padding: var(--gap-pane);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-left-width: 3px;
}

.verdict--ahead {
  border-left-color: var(--success);
}

.verdict--even {
  border-left-color: var(--border);
}

.verdict--behind {
  border-left-color: var(--warning);
}

.calc-table th[scope="row"] {
  text-align: left;
  font-weight: 400;
  opacity: 0.7;
}

.calc-table .calc-gross,
.calc-keep-row td {
  font-family: var(--font-mono);
}

.calc-keep-row td {
  font-size: var(--text-title);
}

/* The win-region bar. Two segments tile the full width; the server sends both
   widths as percentages, so nothing here is computed in the browser. */
.calc-scale {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
}

.calc-bar {
  position: relative;
  display: flex;
  height: 1.5rem;
  border: 1px solid var(--border);
  overflow: hidden;
}

.calc-bar-seg {
  height: 100%;
}

.calc-bar-seg--other {
  background: var(--warning);
  opacity: 0.35;
}

.calc-bar-seg--mnw {
  background: var(--success);
  opacity: 0.35;
}

/* "You are here" on the sales axis. */
.calc-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--content);
}

.calc-crossover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--content);
  opacity: 0.4;
}

.calc-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-bound);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.6;
}

.calc-axis-crossover {
  opacity: 0.9;
}

.calc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-section);
  font-size: var(--text-fine);
  opacity: 0.7;
}

.calc-legend-item::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--gap-bound);
  vertical-align: baseline;
}

.calc-legend-item--other::before {
  background: var(--warning);
  opacity: 0.35;
}

.calc-legend-item--mnw::before {
  background: var(--success);
  opacity: 0.35;
}

.calc-note {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  padding: var(--gap-section);
  background: var(--surface-overlay);
  border-left: 3px solid var(--border);
  line-height: 1.6;
}

/* ===========================================
   DOCUMENTATION PAGES
   =========================================== */

.doc-container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--gap-page) var(--gap-pane) var(--gap-page);
}

.doc-breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-page);
}

.doc-breadcrumb a { color: var(--content); text-decoration: none; }
.doc-breadcrumb a:hover { text-decoration: underline; }

.doc-title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: var(--gap-pane);
  color: var(--content);
  text-align: left;
}

.doc-body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: 1.9;
}

.doc-body p { margin-bottom: var(--gap-pane); }

.doc-body h1 {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
  text-align: left;
}

.doc-body h2 {
  font-family: var(--font-mono);
  font-size: var(--text-head);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
}

.doc-body h3 {
  font-family: var(--font-mono);
  font-size: var(--text-subhead);
  font-weight: normal;
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  color: var(--content);
}

.doc-body blockquote {
  border-left: 3px solid var(--action);
  padding-left: var(--gap-pane);
  margin: var(--gap-page) 0;
  font-style: italic;
  color: var(--content-muted);
}

.doc-body ul, .doc-body ol { margin-bottom: var(--gap-pane); padding-left: var(--gap-pane); }
.doc-body li { margin-bottom: var(--gap-peer); }

.doc-body a {
  color: var(--action);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--action) 40%, transparent);
  text-underline-offset: 2px;
}

.doc-body a:hover { text-decoration-color: var(--action); }
.doc-body strong { font-weight: bold; }
.doc-body em { font-style: italic; }

.doc-body code {
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-body);
}

.doc-body pre {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  overflow-x: auto;
  margin-bottom: var(--gap-pane);
}

.doc-body pre code { background: none; padding: 0; }

.doc-body hr { border: none; text-align: center; margin: var(--gap-page) 0; }
.doc-body hr::before { content: "* * *"; color: var(--content-muted); letter-spacing: 1rem; }

.doc-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--gap-pane); }
.doc-body th, .doc-body td { padding: var(--gap-section); text-align: left; border-bottom: 1px solid var(--border); }
.doc-body th { font-family: var(--font-mono); font-weight: 600; }

.doc-backlinks {
  margin-top: var(--gap-page);
  padding-top: var(--gap-pane);
  border-top: 1px solid var(--border);
}

.doc-backlinks-title {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-muted);
  margin-bottom: var(--gap-section);
}

.doc-backlinks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-backlinks-list li { margin-bottom: var(--gap-peer); }
.doc-backlinks-list a { color: var(--content); text-decoration: none; }
.doc-backlinks-list a:hover { text-decoration: underline; }

/* Docs index page */
.docs-index {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--gap-page) var(--gap-pane) var(--gap-page);
}

.docs-index-title {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: var(--gap-page);
  color: var(--content);
}

.docs-section {
  margin-bottom: var(--gap-page);
}

.docs-section h2 {
  font-family: var(--font-mono);
  font-size: var(--text-subhead);
  font-weight: normal;
  color: var(--content-muted);
  margin-bottom: var(--gap-section);
}

.docs-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-section li {
  margin-bottom: var(--gap-peer);
}

.docs-section a {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  color: var(--content);
  text-decoration: none;
}

.docs-section a:hover {
  color: var(--action);
  text-decoration: underline;
}

.docs-section details {
  margin-bottom: var(--gap-section);
}

.docs-section summary {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--content-muted);
  cursor: pointer;
  padding: var(--gap-bound) 0;
  list-style: disclosure-closed;
}

.docs-section details[open] > summary {
  list-style: disclosure-open;
  margin-bottom: var(--gap-bound);
}

.docs-section summary:hover {
  color: var(--content);
}

.docs-section details ul {
  padding-left: var(--gap-section);
}

/* Docs search */
.docs-search-container {
  position: relative;
  margin-bottom: var(--gap-page);
}
.docs-search-inline {
  display: inline-block;
  margin-bottom: 0;
  margin-left: auto;
  float: right;
}
.docs-search-input {
  width: 100%;
  max-width: 320px;
  padding: var(--gap-peer) var(--gap-section);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--content);
}
.docs-search-input:focus {
  outline: 2px solid var(--action);
  border-color: var(--action);
}
.docs-search-input::placeholder { opacity: 0.5; }
.docs-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 320px;
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--elevation-overlay);
}
.docs-search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--gap-peer) var(--gap-section);
  text-decoration: none;
  color: var(--content);
  font-size: var(--text-note);
  border-bottom: 1px solid var(--border);
}
.docs-search-result:last-child { border-bottom: none; }
.docs-search-result:hover { background: var(--surface-sunken); }
.docs-search-result-title { font-family: var(--font-body); }
.docs-search-result-section { font-family: var(--font-mono); font-size: var(--text-fine); opacity: 0.5; }.alert .alert-title {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--gap-bound);
}
.alert p:last-child { margin-bottom: 0; }
.alert-note { border-left-color: var(--focus-ring); }
.alert-note .alert-title { color: var(--focus-ring); }
.alert-tip { border-left-color: var(--success); }
.alert-tip .alert-title { color: var(--success); }
.alert-important { border-left-color: var(--action); }
.alert-important .alert-title { color: var(--action); }
.alert-warning { border-left-color: var(--warning); }
.alert-warning .alert-title { color: var(--warning); }
.alert-caution { border-left-color: var(--danger); }
.alert-caution .alert-title { color: var(--danger); }

/* ===========================================
   USE CASES PAGE
   =========================================== */

.use-cases-page {
  max-width: 900px;
  margin: 0 auto;
}

.use-cases-intro {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-page);
  line-height: 1.6;
}

.use-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-section);
  text-align: left;
}

.use-case-grid-2col {
  grid-template-columns: 1fr 1fr;
}

.use-case-title {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  margin-bottom: var(--gap-bound);
}

.use-case-who {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-bottom: var(--gap-peer);
}

.use-case-desc {
  font-size: var(--text-note);
  line-height: 1.5;
  margin-bottom: var(--gap-peer);
}

.use-case-features {
  list-style: none;
  margin: 0 0 var(--gap-section);
  padding: 0;
}

.use-case-features li {
  font-size: var(--text-note);
  padding-left: var(--gap-section);
  position: relative;
  margin-bottom: var(--gap-bound);
}

.use-case-features li::before {
  content: "-";
  position: absolute;
  left: 0;
  opacity: 0.5;
}

.use-case-tier {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
}

/* ===========================================
   RESPONSIVE, 768px (tablet)
   =========================================== */

/* ==========================================================================
   Git Source Browser
   ========================================================================== */

.git-repo-header { margin-bottom: var(--gap-pane); }
.git-repo-name { font-size: var(--text-head); margin: 0 0 var(--gap-bound); }
.git-repo-name a { color: var(--content); text-decoration: none; }
.git-repo-name a:hover { opacity: 0.6; }
.git-repo-name .sep { opacity: 0.3; margin: 0 var(--gap-bound); }
.git-repo-desc { opacity: 0.6; margin: 0 0 var(--gap-section); font-size: var(--text-note); }
.git-clone-url {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  padding: var(--gap-peer) var(--gap-group);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  display: inline-block;
  user-select: all;
  margin-bottom: var(--gap-section);
}
.git-linked-project { margin-top: var(--gap-peer); font-size: var(--text-note); }
.git-linked-project a { color: var(--content); }

/* Ref bar (branch/tag selector + nav links) */
.git-ref-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}
.git-ref-select {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.git-nav-links { display: flex; gap: var(--gap-section); }
.git-nav-links a { text-decoration: none; color: var(--content); opacity: 0.6; }
.git-nav-links a:hover,
.git-nav-links a.is-selected { opacity: 1; }

/* Breadcrumb navigation */
.git-breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
}
.git-breadcrumb a { color: var(--content); text-decoration: none; }
.git-breadcrumb a:hover { text-decoration: underline; }
.git-breadcrumb .sep { opacity: 0.3; margin: 0 var(--gap-bound); }

/* File tree table */
.git-tree { width: 100%; border-collapse: collapse; font-size: var(--text-note); }
.git-tree th {
  text-align: left;
  padding: var(--gap-peer) var(--gap-group);
  border-bottom: 2px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
  text-transform: uppercase;
}
.git-tree td { padding: var(--gap-peer) var(--gap-group); border-bottom: 1px solid var(--border); }
.git-tree tr:last-child td { border-bottom: none; }
.git-tree .icon { width: 1.5rem; text-align: center; opacity: 0.4; font-family: var(--font-mono); }
.tree-icon-dir { font-weight: 700; color: var(--content); }
.tree-icon-file { font-size: var(--text-note); }
.git-tree .name a { text-decoration: none; color: var(--content); }
.git-tree .name a:hover { text-decoration: underline; }
.git-tree .size {
  text-align: right;
  opacity: 0.5;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
}

/* README rendering */
.git-readme { margin-top: var(--gap-page); padding-top: var(--gap-pane); border-top: 1px solid var(--border); }
.git-readme h2 { font-size: var(--text-body); opacity: 0.5; margin-bottom: var(--gap-section); }
.git-readme-body { line-height: 1.6; }
.git-readme-body h1,
.git-readme-body h2,
.git-readme-body h3 { margin-top: var(--gap-pane); margin-bottom: var(--gap-peer); }
.git-readme-body pre {
  background: var(--surface-overlay);
  padding: var(--gap-section);
  border-radius: var(--radius-control);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
}
.git-readme-body code {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  background: var(--surface-overlay);
  padding: var(--gap-bound);
  border-radius: var(--radius-fine);
}
.git-readme-body pre code { background: none; padding: 0; }
.git-readme-body table { border-collapse: collapse; margin: var(--gap-section) 0; }
.git-readme-body th,
.git-readme-body td { border: 1px solid var(--border); padding: var(--gap-peer) var(--gap-group); }

/* File viewer */
.git-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-peer) var(--gap-group);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  font-size: var(--text-fine);
}
.git-file-meta {
  font-family: var(--font-mono);
  opacity: 0.6;
}
.git-file-actions a {
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--content);
  opacity: 0.6;
  font-size: var(--text-fine);
}
.git-file-actions a:hover { opacity: 1; }
.git-file-content {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  overflow-x: auto;
}
.git-file-content table { border-collapse: collapse; width: 100%; }
.git-file-content .line-number {
  width: 1px;
  white-space: nowrap;
  padding: 0 var(--gap-section);
  text-align: right;
  user-select: none;
  opacity: 0.3;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  border-right: 1px solid var(--border);
  vertical-align: top;
}
.git-file-content .line-code {
  padding: 0 var(--gap-section);
  white-space: pre;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: 1.5;
}
.git-file-content .line-code span {
  font-family: var(--font-mono);
}
.git-binary-notice {
  padding: var(--gap-page);
  text-align: center;
  opacity: 0.5;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
}

/* Syntax highlighting (syntect class-based) */
.git-file-content .source { color: var(--content); }
.git-file-content .keyword,
.git-file-content .storage { color: var(--syntax-keyword); }
.git-file-content .string { color: var(--syntax-string); }
.git-file-content .comment { color: var(--syntax-comment); font-style: italic; }
.git-file-content .constant,
.git-file-content .constant.numeric { color: var(--syntax-constant); }
.git-file-content .entity.name { color: var(--syntax-entity); }
.git-file-content .variable { color: var(--syntax-variable); }
.git-file-content .support { color: var(--syntax-support); }
.git-file-content .meta.preprocessor { color: var(--syntax-keyword); }

/* Commit list */
.git-commit-list { list-style: none; }
.git-commit { padding: var(--gap-section) 0; border-bottom: 1px solid var(--border); }
.git-commit:last-child { border-bottom: none; }
.git-commit-message { font-size: var(--text-note); margin: 0 0 var(--gap-bound); }
.git-commit-message .summary { font-weight: 600; }
.git-commit-meta {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
.git-commit-oid { font-family: var(--font-mono); font-size: var(--text-fine); }
.git-commit-oid a { color: var(--content); text-decoration: none; }
.git-commit-oid a:hover { text-decoration: underline; }
.git-pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap-section);
  margin-top: var(--gap-pane);
  padding-top: var(--gap-section);
  font-size: var(--text-note);
}
.git-pagination a { color: var(--content); text-decoration: none; }
.git-pagination a:hover { text-decoration: underline; }

/* Release items on repo page */
.git-release { margin-bottom: var(--gap-pane); padding: var(--gap-section); background: var(--surface-overlay); }
.git-release-title { margin: 0 0 var(--gap-bound); font-size: var(--text-lead); }
.git-release-title a { color: var(--content); text-decoration: none; }
.git-release-meta { font-size: var(--text-note); opacity: 0.6; margin-bottom: var(--gap-peer); }
.git-release-desc { font-size: var(--text-note); opacity: 0.8; margin-bottom: var(--gap-section); }
.git-release-versions { font-size: var(--text-fine); }
.git-release-version {
  display: flex;
  gap: var(--gap-section);
  align-items: center;
  padding: var(--gap-bound) 0;
  border-top: 1px solid var(--border);
}
.git-release-version .version-number { font-family: var(--font-mono); }
.git-release-version .version-badge {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  background: var(--content);
  color: var(--surface-page);
  border-radius: var(--radius-fine);
}
.git-release-version .version-meta { opacity: 0.5; }

/* Git commit detail + diff */
.git-commit-detail { margin-bottom: var(--gap-pane); }
.git-commit-full-message {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  white-space: pre-wrap;
  line-height: 1.5;
  padding: var(--gap-section);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  margin-bottom: var(--gap-section);
}
.git-commit-detail-meta { font-size: var(--text-note); opacity: 0.7; line-height: 1.8; }
.git-commit-detail-meta .git-commit-oid { font-family: var(--font-mono); font-size: var(--text-fine); word-break: break-all; }
.git-commit-parents a { font-family: var(--font-mono); color: var(--content); text-decoration: none; }
.git-commit-parents a:hover { text-decoration: underline; }
/* Commit trailers, lifted out of the message body and shown as what they are */
.git-commit-trailers {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--gap-bound) var(--gap-section);
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
}
.git-commit-trailers dt { opacity: 0.6; }
.git-commit-trailers dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-fine); }
/* Tags, with the annotation an annotated tag carries */
.git-tag-list { list-style: none; }
.git-tag { padding: var(--gap-section) 0; border-bottom: 1px solid var(--border); }
.git-tag:last-child { border-bottom: none; }
.git-tag-name { font-size: var(--text-note); font-weight: 600; margin: 0 0 var(--gap-bound); }
.git-tag-name a { color: var(--content); text-decoration: none; }
.git-tag-name a:hover { text-decoration: underline; }
.git-tag-lightweight { font-weight: 400; font-size: var(--text-fine); opacity: 0.5; }
.git-tag-message {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  white-space: pre-wrap;
  line-height: 1.5;
  padding: var(--gap-peer) var(--gap-section);
  border-left: 2px solid var(--border);
  margin-bottom: var(--gap-bound);
}
.git-tag-meta {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
.git-tag-meta a { color: var(--content); text-decoration: none; }
.git-tag-meta a:hover { text-decoration: underline; }
/* Signature state. Neutral by default: only a bad signature gets a colour. */
.git-signature { font-size: var(--text-fine); opacity: 0.7; }
.git-signature a { color: var(--content); }
.git-signature.is-verified { opacity: 1; }
.git-signature.is-bad { color: var(--danger); opacity: 1; }
/* refs/replace/*: object substitutions, listed but not applied while browsing */
.git-replace-intro { padding-bottom: var(--gap-section); font-size: var(--text-note); }
.git-replace-intro p { margin: 0; }
.git-replace-notice {
  font-size: var(--text-note);
  border-left: 2px solid var(--border);
  padding: var(--gap-peer) var(--gap-section);
  margin: 0 0 var(--gap-section);
}
.git-replace-table { width: 100%; border-collapse: collapse; font-size: var(--text-note); }
.git-replace-table th {
  text-align: left;
  font-weight: 400;
  opacity: 0.5;
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-section) var(--gap-bound) 0;
  border-bottom: 1px solid var(--border);
}
.git-replace-table td { padding: var(--gap-peer) var(--gap-section) var(--gap-peer) 0; border-bottom: 1px solid var(--border); }
.git-replace-table a { color: var(--content); text-decoration: none; }
.git-replace-table a:hover { text-decoration: underline; }
/* Git notes (refs/notes/*) shown against the object they annotate */
.git-notes { margin-bottom: var(--gap-pane); }
.git-note {
  border: 1px solid var(--border);
  border-left: 2px solid var(--content);
  margin-bottom: var(--gap-section);
}
.git-note-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-group);
  padding: var(--gap-peer) var(--gap-section);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-fine);
}
.git-note-namespace { font-family: var(--font-mono); }
/* Sits beside the namespace rather than being spread across the header: the
   auto margin absorbs the free space `space-between` would otherwise put
   between the two, leaving the attribution on the right where it was. */
.git-note-owned { margin-right: auto; opacity: 0.6; }
.git-note-attribution { opacity: 0.6; }
.git-note-namespaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  padding: var(--gap-section) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}
.git-note-namespaces a { color: var(--content); text-decoration: none; opacity: 0.6; }
.git-note-namespaces a:hover { opacity: 1; }
.git-note-namespaces a.is-selected { opacity: 1; text-decoration: underline; }
.git-note-target-kind { opacity: 0.6; }
.git-explore-intro { margin: 0 0 var(--gap-section); font-size: var(--text-note); opacity: 0.8; }
.git-notes-fetch { padding-bottom: var(--gap-section); font-size: var(--text-note); }
.git-notes-fetch p { margin: 0 0 var(--gap-peer); }
.git-note-feed-cap { font-size: var(--text-fine); opacity: 0.6; padding-top: var(--gap-section); }
.git-note-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-group);
  padding-bottom: var(--gap-section);
  font-size: var(--text-note);
}
.git-note-search input[type="search"] { flex: 1 1 16rem; }
.git-note-search label { display: flex; align-items: center; gap: var(--gap-bound); opacity: 0.8; }
.git-note-excerpt {
  margin: var(--gap-bound) 0 0;
  font-size: var(--text-note);
  opacity: 0.7;
}
.git-note-paging {
  display: flex;
  gap: var(--gap-group);
  align-items: center;
  padding-top: var(--gap-section);
  font-size: var(--text-note);
}
.git-note-paging span { font-size: var(--text-fine); opacity: 0.6; }
.git-note-feed-link { padding-top: var(--gap-peer); font-size: var(--text-fine); }
.git-note-badge {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  border: 1px solid var(--border);
  border-radius: var(--radius-fine);
  color: var(--content);
  text-decoration: none;
  opacity: 0.7;
}
.git-note-badge:hover { opacity: 1; }
.git-note-body { padding: var(--gap-section); font-size: var(--text-note); }
.git-note-body > :first-child { margin-top: 0; }
.git-note-body > :last-child { margin-bottom: 0; }
/* Writing a note. Only rendered for a reader who can push. */
.git-notes-edit {
  border-top: 1px solid var(--border);
  padding-top: var(--gap-section);
  margin-bottom: var(--gap-pane);
}
.git-notes-edit textarea { width: 100%; font-family: var(--font-mono); font-size: var(--text-note); }
.git-note-form { margin-bottom: var(--gap-section); }
.git-note-delete { margin-bottom: var(--gap-pane); }
.git-note-merged {
  border-left: 2px solid var(--content);
  padding: var(--gap-peer) var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}
.git-diff-stats {
  font-size: var(--text-note);
  padding: var(--gap-section) 0;
  margin-bottom: var(--gap-section);
  border-bottom: 1px solid var(--border);
}
.git-diff-stats .additions { color: var(--diff-add); }
.git-diff-stats .deletions { color: var(--diff-del); }
.git-diff-file { margin-bottom: var(--gap-pane); border: 1px solid var(--border); }
.git-diff-file-header {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-note);
  flex-wrap: wrap;
}
.git-diff-file-header a { color: var(--content); text-decoration: none; }
.git-diff-file-header a:hover { text-decoration: underline; }
.git-diff-file-stats { margin-left: auto; font-size: var(--text-fine); }
.git-diff-file-stats .additions { color: var(--diff-add); }
.git-diff-file-stats .deletions { color: var(--diff-del); margin-left: var(--gap-bound); }
.diff-status-added, .diff-status-deleted, .diff-status-modified, .diff-status-renamed {
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  font-size: var(--text-fine);
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: var(--radius-fine);
  line-height: 1.4;
}
.diff-status-added { background: color-mix(in oklch, var(--success) 14%, var(--surface-page)); color: var(--success); }
.diff-status-deleted { background: color-mix(in oklch, var(--danger) 14%, var(--surface-page)); color: var(--danger); }
.diff-status-modified { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
.diff-status-renamed { background: color-mix(in oklch, var(--info) 14%, var(--surface-page)); color: var(--info); }
.git-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  table-layout: fixed;
}
.git-diff-hunk-header td {
  padding: var(--gap-bound) var(--gap-peer);
  background: var(--highlight-faint);
  color: var(--content);
  opacity: 0.6;
  font-size: var(--text-fine);
}
.git-diff-lineno {
  width: 3.5rem;
  padding: 0 var(--gap-peer);
  text-align: right;
  color: var(--content);
  opacity: 0.35;
  user-select: none;
  vertical-align: top;
}
.git-diff-origin {
  width: 1rem;
  text-align: center;
  user-select: none;
  vertical-align: top;
}
.git-diff-content {
  padding: 0 var(--gap-peer);
  white-space: pre-wrap;
  word-break: break-all;
}
.git-diff-line-add { background: var(--diff-add-bg); }
.git-diff-line-add .git-diff-origin { color: var(--diff-add); }
.git-diff-line-del { background: var(--diff-del-bg); }
.git-diff-line-del .git-diff-origin { color: var(--diff-del); }
.git-diff-line-ctx { background: transparent; }
.git-diff-truncated { padding: var(--gap-peer) var(--gap-section); font-size: var(--text-fine); opacity: 0.5; font-style: italic; }

/* Git file view line linking */
.git-file-content .line-number a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.git-file-content .line-number a:hover { opacity: 0.7; }
.git-file-content tr:target td,
.git-file-content tr.highlighted td { background: var(--highlight-faint); }

/* Git blame view */
.git-blame-content { overflow-x: auto; border: 1px solid var(--border); }
.git-blame-content table { border-collapse: collapse; width: 100%; font-size: var(--text-fine); }
.git-blame-info {
  padding: 0 var(--gap-peer);
  font-family: var(--font-mono);
  white-space: nowrap;
  width: 4.5rem;
}
.git-blame-info a { color: var(--content); text-decoration: none; }
.git-blame-info a:hover { text-decoration: underline; }
.git-blame-author {
  padding: 0 var(--gap-bound);
  font-size: var(--text-fine);
  opacity: 0.5;
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.git-blame-date {
  padding: 0 var(--gap-bound);
  font-size: var(--text-fine);
  opacity: 0.35;
  white-space: nowrap;
  width: 5.5rem;
}
.git-blame-content .line-number {
  padding: 0 var(--gap-peer);
  text-align: right;
  opacity: 0.35;
  user-select: none;
  width: 3rem;
  font-family: var(--font-mono);
}
.git-blame-content .line-code {
  padding: 0 var(--gap-peer);
  white-space: pre;
  font-family: var(--font-mono);
}
.git-blame-boundary td { border-top: 1px solid var(--border); }

/* Git user repos listing */
.git-repos-list { list-style: none; }
.git-repos-item { padding: var(--gap-section) 0; border-bottom: 1px solid var(--border); }
.git-repos-item:last-child { border-bottom: none; }
.git-repos-item-header { display: flex; align-items: center; gap: var(--gap-peer); }
.git-repos-item-name {
  font-size: var(--text-lead);
  font-weight: 600;
  color: var(--content);
  text-decoration: none;
}
.git-repos-item-name:hover { text-decoration: underline; }
.git-repos-visibility {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  border: 1px solid var(--border);
  border-radius: var(--radius-fine);
  opacity: 0.5;
}
.git-repos-item-desc { font-size: var(--text-note); opacity: 0.6; margin: var(--gap-bound) 0 0; }.git-repos-instructions p { margin-bottom: var(--gap-peer); }
.git-repos-owner { opacity: 0.6; }
.git-repos-item-name .sep { opacity: 0.4; }
.git-file-log-label {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
  margin-right: var(--gap-bound);
}

/* Site-wide footer */
.site-footer {
  margin-top: var(--gap-page);
  padding: var(--gap-page) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.5;
}
.site-footer-links { margin-bottom: var(--gap-peer); }
.site-footer-links a { margin: 0 var(--gap-section); color: inherit; text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline; }

@media (max-width: 839px) {
  /* Git browser mobile */
  .git-ref-bar { flex-wrap: wrap; gap: var(--gap-peer); }
  .git-repo-name { font-size: var(--text-subhead); }
  .git-clone-url { font-size: var(--text-fine); word-break: break-all; }
  .git-tree .icon { display: none; }
  .git-tree td, .git-tree th { padding: var(--gap-bound) var(--gap-peer); }
  .git-file-header { flex-direction: column; align-items: flex-start; gap: var(--gap-bound); }
  .git-file-content .line-number { padding: 0 var(--gap-peer); }
  .git-file-content .line-code { padding: 0 var(--gap-peer); font-size: var(--text-fine); }
  .git-commit-meta { flex-direction: column; gap: var(--gap-bound); }
  .git-release-version { flex-wrap: wrap; gap: var(--gap-peer); }
  .git-diff-file-header { font-size: var(--text-fine); }
  .git-diff-table { font-size: var(--text-fine); }
  .git-diff-lineno { width: 2.5rem; font-size: var(--text-fine); }
  .git-blame-author { display: none; }
  .git-blame-date { display: none; }

  .container {
    padding: var(--gap-section);
  }

  .padded-page {
    padding: var(--gap-section);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .tab {
    padding: var(--gap-group) var(--gap-section);
    font-size: var(--text-note);
  }

  .tab-content {
    padding: var(--gap-section);
  }

  .data-table th,
  .data-table td {
    padding: var(--gap-peer) var(--gap-group);
    font-size: var(--text-note);
  }

  .modal {
    max-width: 95%;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .content-section {
    padding: var(--gap-section);
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons button {
    width: 100%;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  /* Hamburger menu */
  .nav-toggle-label {
    display: block;
  }

  .header-search {
    display: none;
    flex: none;
    margin: 0;
    width: 100%;
  }

  .nav-toggle-checkbox:checked ~ .header-search {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--gap-section) var(--gap-pane);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-header);
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
    padding: var(--gap-section) var(--gap-pane);
    z-index: var(--z-nav);
  }

  .site-header {
    position: relative;
  }

  .nav-toggle-checkbox:checked ~ nav {
    display: block;
  }

  .site-header .nav-links {
    flex-direction: column;
    gap: var(--gap-section);
  }

  /* Animate hamburger to X when open */
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* Doc pages, mobile */
@media (max-width: 599px) {
  .doc-title { font-size: var(--text-title); }
  .doc-body { font-size: var(--text-body); }
  .docs-index-title { font-size: var(--text-title); }
}

/* ===========================================
   RESPONSIVE, 480px (phone)
   =========================================== */

@media (max-width: 599px) {
  .container {
    padding: var(--gap-section);
  }

  .padded-page {
    padding: var(--gap-section);
  }

  h1 {
    font-size: var(--text-title);
  }

  .centered-page h1 {
    font-size: var(--text-hero);
  }

  .login-container,
  .form-container {
    max-width: 100%;
    padding: var(--gap-section);
  }

  .big-button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab {
    padding: var(--gap-peer) var(--gap-section);
    font-size: var(--text-note);
  }

  .tab-content {
    padding: var(--gap-section);
  }

  .content-section {
    padding: var(--gap-section);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-section);
  }

  /* Landing page (merged from 500px) */
  .landing-fork,
  .tier-selector,
  .feature-grid,
  .use-case-grid,
  .use-case-grid-2col {
    grid-template-columns: 1fr;
  }

  .explore-links {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-section);
  }

  .pricing-input {
    font-size: var(--text-title);
  }

  .pricing-currency {
    font-size: var(--text-title);
  }

  .calc-verdict {
    font-size: var(--text-body);
  }

  .calc-dials {
    grid-template-columns: 1fr;
  }

  .secondary-links {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-section);
  }

  .landing-cta {
    flex-direction: column;
    gap: var(--gap-section);
  }

  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .toast {
    max-width: 100%;
  }
}

/* ===========================================
   DISCOVER PAGE
   =========================================== */

.discover-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--gap-pane); }
.discover-layout.no-sidebar { grid-template-columns: 1fr; }
.discover-layout.no-sidebar .discover-sidebar { display: none; }
.discover-sidebar { font-size: var(--text-note); }
.filter-section { margin-bottom: var(--gap-section); }
.filter-title { font-family: var(--font-heading); font-weight: bold; font-size: var(--text-note); margin-bottom: var(--gap-peer); color: var(--content); }
.filter-list { list-style: none; }
/* The row carries selection (`.is-selected` recipe) and hover; the filter itself
   is a real <button> child so Enter/Space work without scripting. */
.filter-item { display: flex; align-items: center; gap: var(--gap-bound); transition: opacity 0.1s ease; }
.filter-item:hover { opacity: 0.6; }
.filter-item.is-selected { font-weight: bold; }
.filter-item .count { opacity: 0.4; font-size: var(--text-fine); }
.tag-follow-btn { background: none; border: 1px solid var(--border); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-fine); opacity: 0.55; padding: var(--gap-bound) var(--gap-peer); color: var(--content); }
.tag-follow-btn:hover { opacity: 1; }
.tag-follow-btn.is-selected { opacity: 0.85; border-color: var(--focus-ring); background: var(--highlight-faint); }
.filter-checkbox { display: flex; align-items: center; gap: var(--gap-peer); padding: var(--gap-bound) 0; cursor: pointer; }
.filter-checkbox input { width: auto; margin: 0; }
.price-inputs { display: flex; gap: var(--gap-bound); align-items: center; margin-bottom: var(--gap-peer); }
.price-inputs input { width: 60px; padding: var(--gap-bound); font-size: var(--text-fine); background: var(--surface-sunken); border: none; }
.price-inputs span { opacity: 0.4; }
.discover-main { min-width: 0; }

/* ---- Discover sidebar: tag spine ----------------------------------------
   Tags are the sidebar's structure, not one facet among several, so the spine
   reads as the primary surface and .filter-refine below it is subordinate.
   Everything here composes existing primitives: .filter-item carries the row
   and its .is-selected recipe, .search-suggestions carries the dropdown shell,
   .breadcrumb carries the crumb idiom. */
.tag-spine { padding-bottom: var(--gap-section); border-bottom: 1px solid var(--border); }

/* Selected tags. Also the active-filter summary, so they use the canonical
   selected tint rather than a new colour. */
.tag-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-bound); margin-bottom: var(--gap-section); }
.tag-chip { display: flex; align-items: center; gap: var(--gap-bound); padding: var(--gap-bound) var(--gap-peer); font-size: var(--text-fine); background: var(--highlight-faint); border: 1px solid var(--focus-ring); }
.tag-chip-label { overflow-wrap: anywhere; }
.tag-chip-remove { text-decoration: none; color: var(--content-secondary); font-size: var(--text-body); line-height: 1; padding: 0 var(--gap-bound); }
.tag-chip-remove:hover { color: var(--content); }
.tag-chip-clear { background: none; border: 1px dashed var(--border-strong); }
.tag-chip-clear a { text-decoration: none; color: var(--content-secondary); font-size: var(--text-fine); }
.tag-chip-clear a:hover { color: var(--content); }

/* Typeahead. Shares the .search-suggestions shell; it toggles with the
   `hidden` attribute rather than an inline display, so the shared rule's
   display:none has to be overridden when open. */
.tag-combobox { position: relative; margin-bottom: var(--gap-section); }
.tag-combobox-input { width: 100%; padding: var(--gap-bound); font-size: var(--text-fine); background: var(--surface-sunken); border: none; }
.tag-suggest-list { list-style: none; }
.tag-suggest-list:not([hidden]) { display: block; }
.tag-suggest-item { gap: var(--gap-peer); }

/* Drill-down. A rung either selects (assignable leaf) or navigates (category);
   rows with both put the chevron after the label. */
.tag-crumbs { list-style: none; display: flex; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-fine); color: var(--content-muted); margin-bottom: var(--gap-peer); }
.tag-crumbs li + li::before { content: "/"; opacity: 0.4; margin: 0 var(--gap-bound); }
.tag-crumbs a { color: var(--content); text-decoration: none; }
.tag-crumbs a:hover { text-decoration: underline; }
.tag-drill-select { flex: 1; display: flex; align-items: center; gap: var(--gap-peer); cursor: pointer; padding: var(--gap-bound) 0; }
.tag-drill-select input { width: auto; margin: 0; }
.tag-drill-select span:first-of-type { flex: 1; }
.tag-drill-into { display: flex; align-items: center; gap: var(--gap-peer); flex: 1; text-decoration: none; color: inherit; padding: var(--gap-bound) 0; }
.tag-drill-into span:first-child { flex: 1; }
.tag-drill-chevron { opacity: 0.4; }

/* ---- Discover sidebar: refine block -------------------------------------
   Subordinate to the spine: same controls, quieter. */
.filter-refine { margin-top: var(--gap-section); }
.filter-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.filter-check { flex: 1; display: flex; align-items: center; gap: var(--gap-peer); cursor: pointer; padding: var(--gap-bound) 0; }
.filter-check input { width: auto; margin: 0; }
.filter-check span:first-of-type { flex: 1; }

/* A zero-count facet stays visible but inert, so the shape of the catalog
   stays legible as filters narrow. No existing rule covers a disabled input
   inside a label, so this is the checkbox counterpart of the button rule.
   `.is-empty` covers the drill rungs, which are links and carry no input at
   all; they were rendering identically to rungs with items. */
.filter-item:has(input:disabled), .filter-item.is-empty { opacity: 0.5; }
.filter-item:has(input:disabled) .filter-check { cursor: not-allowed; }

/* Price buckets are links carrying a range, not form state. */
.price-buckets { margin-top: var(--gap-peer); }
.price-bucket { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-peer); text-decoration: none; color: inherit; padding: var(--gap-bound) 0; }

.mode-toggle { display: flex; gap: var(--gap-peer); margin-bottom: var(--gap-section); }
.toggle-btn { background: var(--surface-sunken); border: none; padding: var(--gap-peer) var(--gap-section); font-size: var(--text-note); font-family: inherit; cursor: pointer; transition: background 0.1s ease, opacity 0.1s ease; }
.toggle-btn:hover { opacity: 0.7; }
.toggle-btn.is-selected { background: var(--primary-dark); color: var(--primary-light); }
.table-controls { background: var(--surface-sunken); display: flex; align-items: center; gap: var(--gap-section); padding: var(--gap-peer) var(--gap-section); }
.search-field { flex: 1 1 0; background: var(--surface-page); border: none; padding: var(--gap-peer) var(--gap-section); font-family: inherit; font-size: var(--text-note); color: var(--content); min-width: 0; }
.search-field:focus { outline: 2px solid var(--action); }
.search-field::placeholder { opacity: 0.5; }
.table-meta { font-size: var(--text-fine); opacity: 0.6; white-space: nowrap; flex-shrink: 0; }
.sort-select { background: var(--surface-page); border: none; padding: var(--gap-bound) var(--gap-peer); font-size: var(--text-fine); font-family: inherit; cursor: pointer; width: auto; flex-shrink: 0; }
.table-header { display: grid; grid-template-columns: 50px 1fr 100px 70px 70px; gap: var(--gap-peer); padding: var(--gap-peer) var(--gap-section); background: var(--surface-overlay); font-size: var(--text-fine); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.03em; }
.table-header.projects-header { grid-template-columns: 1fr 100px 80px 70px; }
/* Column headers describe the list layout only; hidden when the grid view is active. */
.table-header.is-hidden { display: none; }
.col-right { text-align: right; }
.results-table { border: 1px solid var(--border); border-top: none; }
.table-row { /* respec-ok: a five-column grid template. The generated `.table-row` sets a display
     but has no vocabulary for column tracks, so the tracks and the display that carries
     them are stated together here. */ display: grid; grid-template-columns: 50px 1fr 100px 70px 70px; gap: var(--gap-peer); padding: var(--gap-peer) var(--gap-section); align-items: center; text-decoration: none; color: var(--content); font-size: var(--text-note); border-bottom: 1px solid var(--border); transition: background 0.1s ease; }
.table-row-item { grid-template-columns: 1fr 30px; padding: 0; gap: 0; }
.table-row-item .table-row-link { display: grid; grid-template-columns: 50px 1fr 100px 70px 70px; gap: var(--gap-peer); padding: var(--gap-peer) var(--gap-section); align-items: center; text-decoration: none; color: inherit; flex: 1; }
.table-row-item .row-save { display: flex; align-items: center; justify-content: center; }
.table-row.project-row { grid-template-columns: 1fr 100px 80px 70px; }
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: var(--surface-sunken); text-decoration: none; }
.row-type { font-size: var(--text-fine); background: var(--surface-sunken); padding: var(--gap-bound) var(--gap-peer); text-align: center; opacity: 0.7; }
.row-info { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-bound); }
.row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-creator { font-size: var(--text-fine); opacity: 0.5; }.row-category { font-size: var(--text-fine); opacity: 0.6; }
.row-price { text-align: right; }
.row-items { text-align: right; opacity: 0.6; font-size: var(--text-fine); }
.row-date { text-align: right; opacity: 0.5; font-size: var(--text-fine); }.pagination { display: flex; gap: var(--gap-bound); }
.pagination button { background: var(--surface-page); border: none; padding: var(--gap-bound) var(--gap-group); font-size: var(--text-fine); cursor: pointer; }
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination button.is-selected { background: var(--primary-dark); color: var(--primary-light); }

/* Issue tabs (open / closed) inside the git browser */
.issue-tabs { display: flex; gap: var(--gap-peer); margin-bottom: var(--gap-section); }
.issue-tab {
  padding: var(--gap-peer) var(--gap-section);
  border: 1px solid var(--border);
  background: var(--surface-overlay);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  color: var(--content);
  text-decoration: none;
  opacity: 0.7;
}
.issue-tab:hover { opacity: 1; }
.issue-tab.is-selected {
  opacity: 1;
  background: var(--highlight-faint);
  border-color: var(--focus-ring);
}
.page-info { opacity: 0.6; }
.padded-page .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-section); padding-bottom: var(--gap-section); border-bottom: 1px solid var(--border); }
.padded-page .page-header h1 { font-size: var(--text-head); text-align: center; position: absolute; left: 50%; transform: translateX(-50%); }
.padded-page .page-header nav { margin: 0; }
.padded-page .page-header .nav-links { gap: var(--gap-pane); }
.discover-filter-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: var(--gap-section);
}

.discover-filter-toggle.active { background: var(--surface-sunken); border-color: var(--border-strong); }

.discover-filter-toggle .filter-count {
  background: var(--action);
  color: var(--primary-light);
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  border-radius: var(--radius-control);
  margin-left: var(--gap-bound);
}

@media (max-width: 839px) {
    .discover-filter-toggle { display: inline-block; }
    .discover-layout { grid-template-columns: 1fr; }
    .discover-sidebar { display: none; }
    /* Open state lives on the layout, not the sidebar: the sidebar is replaced
       by an out-of-band swap on every filter change and would lose the class. */
    .discover-layout.filters-open .discover-sidebar { display: block; margin-bottom: var(--gap-section); }
    .table-header, .table-row { grid-template-columns: 40px 1fr 60px; }
    .table-row-item { grid-template-columns: 1fr 30px; }
    .table-row-item .table-row-link { grid-template-columns: 40px 1fr 60px; }
    .table-header.projects-header, .table-row.project-row { grid-template-columns: 1fr 70px; }
    .row-date, .row-items, .row-category { display: none; }
    .table-header span:nth-child(3), .table-header span:nth-child(4), .table-header span:nth-child(5) { display: none; }
    .table-header.projects-header span:nth-child(3), .table-header.projects-header span:nth-child(4) { display: none; }
}

@media (max-width: 599px) {
    .table-header, .table-row { grid-template-columns: 1fr 60px; }
    .table-row-item { grid-template-columns: 1fr 30px; }
    .table-row-item .table-row-link { grid-template-columns: 1fr 60px; }
    .row-type { display: none; }
    .table-header span:first-child { display: none; }
    .table-header.projects-header, .table-row.project-row { grid-template-columns: 1fr; }
    .table-header.projects-header span:nth-child(2) { display: none; }
    .row-price { font-size: var(--text-fine); }
    .search-field { min-width: 0; width: 100%; }
    .table-controls { flex-wrap: wrap; }
    .mode-toggle { flex-wrap: wrap; }
    .table-footer { flex-direction: column; gap: var(--gap-peer); align-items: flex-start; }
}

/* ── Feature Cards & Suggestion Input (shared by wizard + settings) ── */

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--gap-section);
    margin-bottom: var(--gap-section);
}

/* Canonical selectable-card primitive. One recipe; per-context size modifiers.
   Used by wizard type pickers, pricing-model pickers, content-choice pickers,
   monetization-mode pickers, anywhere a radio-like choice is rendered as a card. */
.card--selectable {
    cursor: pointer;
    display: block;
}
.card--selectable input[type="radio"],
.card--selectable input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.card--selectable-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gap-section);
    border: 2px solid var(--border);
    border-radius: var(--radius-square);
    background: var(--surface-page);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    min-height: 60px;
}
/* Variant: column-aligned content (text-heavy pricing cards). */
.card--selectable.is-text-heavy .card--selectable-inner {
    align-items: stretch;
    text-align: left;
    padding: var(--gap-section);
}

.card--selectable input:checked + .card--selectable-inner,
.card--selectable.is-selected .card--selectable-inner {
    border-color: var(--action);
    background: var(--highlight-faint);
}

.card--selectable:hover .card--selectable-inner {
    background: var(--surface-sunken);
}

/* Focus. The card is a <label> wrapping a visually hidden radio, so the focus
   lands on the input and the ring has to be drawn on the inner surface. The
   <a> form of the card takes focus itself. */
.card--selectable:focus-visible,
.card--selectable input:focus-visible + .card--selectable-inner {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.card--selectable-label {
    font-weight: bold;
    font-size: var(--text-note);
}

.card--selectable-desc {
    font-size: var(--text-fine);
    color: var(--content-muted);
    margin-top: var(--gap-bound);
}

/* Disabled selectable card, visually dimmed, ignores pointer events. */
.card--selectable.is-disabled {
    opacity: 0.7;
    pointer-events: none;
}

.suggestion-input {
    position: relative;
}

.suggestion-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-square) var(--radius-square);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    box-shadow: var(--elevation-overlay);
}

.suggestion-dropdown.open {
    display: block;
}

.suggestion-item,
.tag-suggest-item {
    padding: var(--gap-peer) var(--gap-section);
    cursor: pointer;
    font-size: var(--text-note);
}

.suggestion-item:hover {
    background: var(--surface-overlay);
}

.suggestion-create {
    font-style: italic;
    opacity: 0.8;
    border-top: 1px solid var(--border);
}

/* ── Tips ── */

.tip-section {
  margin-top: var(--gap-section);
  text-align: center;
}

.tip-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  padding: var(--gap-peer) var(--gap-pane);
  background: none;
  border: 1px solid var(--content);
  color: var(--content);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.tip-toggle:hover {
  background: var(--content);
  color: var(--surface-page);
}

.tip-form {
  margin-top: var(--gap-section);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.tip-form.hidden {
  display: none;
}

.tip-amount-row {
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
}

.tip-amount-row .pricing-currency {
  font-size: var(--text-subhead);
  opacity: 0.7;
}

.tip-amount-input {
  width: 80px;
  font-size: var(--text-subhead);
  padding: var(--gap-peer);
  border: 1px solid var(--border);
  background: var(--surface-overlay);
  font-family: var(--font-mono);
}

.tip-message-input {
  width: 100%;
  font-size: var(--text-note);
  padding: var(--gap-peer);
  border: 1px solid var(--border);
  background: var(--surface-overlay);
  font-family: var(--font-body);
  resize: vertical;
}

.tip-submit {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  padding: var(--gap-peer) var(--gap-section);
  background: var(--content);
  color: var(--surface-page);
  border: none;
  cursor: pointer;
}

.tip-submit:hover {
  opacity: 0.85;
}

/* ===========================================
   COLLECTION PICKER (shared dropdown)
   =========================================== */

.collection-picker-anchor { position: relative; }
.collection-picker {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
  background: var(--surface-page); border: 1px solid var(--border);
  box-shadow: var(--elevation-overlay); min-width: 220px;
}
.collection-picker-list { max-height: 200px; overflow-y: auto; padding: var(--gap-bound) 0; }
.collection-picker-item {
  display: flex; align-items: center; gap: var(--gap-peer);
  padding: var(--gap-peer) var(--gap-section); cursor: pointer; font-size: var(--text-note);
}
.collection-picker-item:hover { background: var(--surface-sunken); }
.collection-picker-loading,
.collection-picker-create { border-top: 1px solid var(--border); padding: var(--gap-peer) var(--gap-section); }
.collection-picker-create form { display: flex; gap: var(--gap-peer); }
.collection-picker-create input { flex: 1; padding: var(--gap-bound) var(--gap-peer); font-size: var(--text-note); min-width: 0; }
.collection-picker-create button { font-size: var(--text-note); white-space: nowrap; }

/* Save button on discover cards */
.row-save, .grid-card-save {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-note); padding: var(--gap-bound) var(--gap-peer); opacity: 0.4;
  color: var(--content); transition: opacity 0.15s;
}
.row-save:hover, .grid-card-save:hover { opacity: 1; }
.grid-card-save {
  position: absolute; top: 0.4rem; right: 0.4rem; z-index: var(--z-raised);
  background: var(--surface-page); border-radius: var(--radius-control); padding: var(--gap-bound) var(--gap-peer);
  box-shadow: var(--elevation-overlay); opacity: 0;
}
.grid-card:hover .grid-card-save { opacity: 0.7; }
.grid-card-save:hover { opacity: 1; }

/* Item page save button saved state */
button.saved { border-color: var(--action); color: var(--action); }

/* ===========================================
   SEARCH SUGGESTIONS
   =========================================== */

.search-wrapper { position: relative; flex: 1; min-width: 0; }
.search-suggestions,
.tag-suggest-list {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
  background: var(--surface-page); border: 1px solid var(--border); border-top: none;
  box-shadow: var(--elevation-overlay); max-height: 280px; overflow-y: auto;
}
.suggestion-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--gap-peer) var(--gap-section); text-decoration: none; color: var(--content);
  font-size: var(--text-note); cursor: pointer;
}
.suggestion-item:hover, .suggestion-item.highlighted,
.tag-suggest-item:hover, .tag-suggest-item.highlighted { background: var(--surface-sunken); }
.suggestion-category { font-size: var(--text-fine); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }

/* ===========================================
   DOC UI EXAMPLES (embedded live UI in docs)
   =========================================== */

.doc-ui {
  margin: var(--gap-pane) 0; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden;
}
.doc-ui-frame {
  padding: var(--gap-section); background: var(--surface-overlay); pointer-events: none; user-select: none;
}
.doc-ui figcaption {
  padding: var(--gap-peer) var(--gap-section); font-size: var(--text-fine); opacity: 0.6;
  border-top: 1px solid var(--border); background: var(--surface-overlay);
  font-family: var(--font-mono);
}
.doc-ui-missing {
  padding: var(--gap-section); opacity: 0.4; font-style: italic;
}

/* Library "New" badge for items with undownloaded versions. Not a status, so
   it takes no tone; it is the plain badge with the accent hue and a little
   more weight, since "New" is the one badge meant to catch the eye. */
.badge-new {
  color: var(--action); font-weight: bold;
  margin-left: var(--gap-peer); vertical-align: middle;
}

/* ===========================================
   BENEFIT LIST (bulleted feature lists, e.g. Stripe Connect prompt)
   =========================================== */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--gap-pane);
  max-width: 280px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--gap-peer);
}
.benefit-list li {
  position: relative;
  padding-left: var(--gap-section);
  font-size: var(--text-note);
}
.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--success);
}

/* ===========================================
   CHECKLIST (setup / onboarding step lists)
   =========================================== */
.checklist {
  margin-bottom: var(--gap-pane);
  padding: var(--gap-section) var(--gap-pane);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
}
.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-section);
}
.checklist-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: bold;
}
.checklist-mark {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-round);
  border: 2px solid var(--border);
  flex-shrink: 0;
  box-sizing: border-box;
}
.checklist-mark--done {
  border-color: var(--success);
  background: var(--success);
}
.checklist-label {
  flex: 1;
  font-size: var(--text-note);
}
.checklist-label--done {
  opacity: 0.5;
  text-decoration: line-through;
}

/* ===========================================
   PAYMENTS TAB (replaces inline styles in user_payments.html)
   =========================================== */
/* Canonical "stack row", title-on-left + actions-on-right header bar.
   One primitive; per-context modifiers handle gap, wrap, alignment, margins.
   Aliases below cover existing per-tab class names (kept as JS hooks). */
.stack-row,
.content-header,
.user-media-header,
.transactions-header,
.analytics-range-bar,
.cart-multi-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-section);
}
.stack-row--tight { gap: var(--gap-section); flex-wrap: nowrap; }
.stack-row--top { align-items: flex-start; }
.stack-row--bordered,
.transactions-header {
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-section);
  border-bottom: 1px solid var(--border);
}
.content-header,
.user-media-header,
.analytics-range-bar { margin-bottom: var(--gap-section); }
.cart-multi-bar {
  margin-bottom: var(--gap-pane);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

/* Canonical list row (flex, gap, padding, bottom border). Aliases below cover
   the per-tab variants. They exist as JS hooks but share the same look. */
.list-row,
.psection-row,
.section-mgmt-row,
.bundle-picker-row,
.checklist-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-group) 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child,
.psection-row:last-child,
.section-mgmt-row:last-child,
.bundle-picker-row:last-child,
.checklist-row:last-child { border-bottom: none; }
.warn-glyph {
  font-size: var(--text-subhead);
  color: var(--warning);
}

.card-h {
  margin: 0 0 var(--gap-section) 0;
  font-size: var(--text-body);
}

.amount-big {
  font-size: var(--text-subhead);
  font-weight: bold;
}

.account-details {
  margin-top: var(--gap-section);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}
.account-details summary { cursor: pointer; }
.account-details-id {
  font-size: var(--text-fine);
  opacity: 0.5;
  font-family: var(--font-mono);
  margin-top: var(--gap-bound);
}

.stripe-actions {
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
.stripe-actions-disconnect { margin-left: auto; }

.payout-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-section);
  margin-top: var(--gap-section);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}

.payouts-disabled-notice {
  margin-top: var(--gap-section);
  padding: var(--gap-section);
  background: var(--warning);
  color: var(--primary-light);
  font-size: var(--text-note);
}

.fee-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-peer);
  font-size: var(--text-note);
}
.fee-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-peer);
  cursor: pointer;
  font-size: var(--text-note);
}
.check-inline {
  width: auto;
  margin-top: var(--gap-bound);
}

.stripe-connect-prompt { text-align: center; padding: var(--gap-pane); }
.stripe-logo { opacity: 0.8; }
.stripe-connect-btn {
  background: var(--stripe);
  padding: var(--gap-section) var(--gap-page);
}

.export-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gap-section);
}

.splits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
  margin-bottom: var(--gap-section);
}

.tip-message {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transactions-title { font-size: var(--text-subhead); }

/* ===========================================
   CREATOR TAB (replaces inline styles in user_creator.html)
   =========================================== */
.creator-tab-section {
  padding: var(--gap-page);
}
.creator-tab-section--centered { text-align: center; }
.creator-tab-section--no-top { padding-top: 0; }

.creator-h2 { font-size: var(--text-subhead); margin-bottom: var(--gap-section); }
.creator-h2--sm { font-size: var(--text-subhead); }

.creator-section-label {
  margin-left: var(--gap-page);
  margin-right: var(--gap-page);
}
.creator-form-section { padding: 0 var(--gap-page); }

.creator-plan-box {
  background: var(--surface-overlay);
  padding: var(--gap-section) var(--gap-pane);
}
.creator-plan-head {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  margin-bottom: var(--gap-peer);
  flex-wrap: wrap;
}
.creator-plan-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-lead);
}

/* Founder pricing, two states, and neither is a status tone: locked-for-life
   is emphasis and pending-lock-in is an aside. They were a --content fill and
   a --surface-sunken fill back when every badge was filled; as coloured text
   the same distinction is full-strength ink against muted. */
.badge--founder-locked {
  color: var(--content);
  font-weight: bold;
}
.badge--founder-pending {
  color: var(--content-muted);
}

.founder-callout {
  background: var(--surface-overlay);
  border-left: 3px solid var(--content);
  padding: var(--gap-section);
}

.creator-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-section);
}
.creator-tier-card {
  background: var(--surface-overlay);
  padding: var(--gap-section);
  text-align: center;
}
.creator-tier-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-body);
  margin-bottom: var(--gap-bound);
}
.creator-tier-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.creator-tier-sub {
  font-size: var(--text-fine);
  opacity: 0.7;
}
.creator-tier-storage { font-size: var(--text-fine); }
.creator-tier-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--gap-peer);
}
.creator-tier-btn {
  font-size: var(--text-note);
  width: 100%;
}

.strike-dim {
  opacity: 0.5;
  text-decoration: line-through;
}

.storage-box {
  background: var(--surface-overlay);
  padding: var(--gap-section) var(--gap-pane);
}
.storage-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--gap-peer);
  font-size: var(--text-note);
}
.storage-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-bound) var(--gap-pane);
  margin-top: var(--gap-section);
  font-size: var(--text-note);
}

.broadcast-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.broadcast-desc { flex: 1; }
.broadcast-export { margin-left: var(--gap-section); }

.creator-divider {
  margin: 0 var(--gap-page);
  border-color: var(--border);
}

.creator-intro { line-height: 1.6; }
.creator-pitch-box {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

/* ===========================================
   PROJECT CONTENT TAB (replaces inline styles in project_content.html)
   =========================================== */

.empty-state--lg { padding: var(--gap-page) var(--gap-section); }

.content-filters {
  display: flex;
  gap: var(--gap-section);
  margin-bottom: var(--gap-section);
  align-items: center;
  flex-wrap: wrap;
}
.content-filter-search {
  flex: 1;
  min-width: 180px;
  padding: var(--gap-peer) var(--gap-group);
  font-size: var(--text-note);
}
.content-filter-select {
  padding: var(--gap-peer);
  font-size: var(--text-note);
}

.bulk-action-bar {
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  flex-wrap: wrap;
  opacity: 0.4;
}
.bulk-action-bar--active { opacity: 1; }
.bulk-count { font-weight: bold; min-width: 5rem; }
.bulk-deselect { margin-left: auto; }
.danger-text { color: var(--danger); }

.bulk-form {
  margin-bottom: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
}
.bulk-form-row {
  display: flex;
  gap: var(--gap-section);
  align-items: end;
}
.bulk-form-label {
  font-size: var(--text-note);
  display: block;
  margin-bottom: var(--gap-bound);
}

/* Sortable table column header

   The cursor and the caret are NOT here. `.table-heading[data-sortable]` and
   `.table-heading[aria-sort="..."]::after` are generated into static/layout.css
   by makeover-webview out of `Column::sortable` and `Column::sorted`. This file
   carried two hand-written copies of the same fact -- `.sortable-th` here and
   `.data-table th.sortable` up at the data-table block -- and a third channel in
   tab-project-content.js, which wrote the glyph as text and toggled
   `.sort-arrow--active`. Three vocabularies, one state, and the generated pair
   matched nothing because no heading carried `.table-heading`.

   The focus ring stays: it is this app's focus treatment, not a restatement of
   the caret, and makeover emits no focus rule for a heading. */
.table-heading[data-sortable] {
  user-select: none;
  transition: background 0.2s ease;
}

.table-heading[data-sortable]:hover {
  background: var(--border);
}

.table-heading[data-sortable]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Data-table column-width utilities (numeric width hints,
   kept as classes to avoid inline `style="width: NN%"`) */
.col-3  { width: 3%; }
.col-5  { width: 5%; }
.col-8  { width: 8%; }
.col-10 { width: 10%; }
.col-12 { width: 12%; }
.col-15 { width: 15%; }
.col-20 { width: 20%; }
.col-32 { width: 32%; }
.col-45 { width: 45%; }

/* Pixel-width utilities for inputs and narrow fixed-width controls.
   Use on form inputs that can't be sized by their parent column. */
.w-80   { width: 80px; }
.w-100  { width: 100px; }
.w-120  { width: 120px; }
.w-180  { width: 180px; }
.w-220  { width: 220px; }
.w-260  { width: 260px; }
.w-full { width: 100%; }
.maxw-320 { max-width: 320px; }

/* Canonical input shape modifiers. One base form-input look (defined globally
   at line ~365 input[type], textarea, select) plus these size + feature variants.
   Apply alongside the per-tab class which acts as a JS hook. */
.input--xs {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-note);
}
.input--sm {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-note);
}
.input--mono { font-family: var(--font-mono); }
.input--upper { text-transform: uppercase; }
.input--numeric { text-align: right; }

.order-arrow-btn {
  padding: var(--gap-bound);
  font-size: var(--text-fine);
  line-height: 1;
}

.bundle-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--gap-bound) 0 0;
  font-size: var(--text-fine);
  color: var(--content-muted);
}
.bundle-child-cell { padding-left: var(--gap-page); }
.bundle-child-title { opacity: 0.85; }
.bundle-child-arrow {
  color: var(--content-muted);
  margin-right: var(--gap-bound);
}

.item-actions {
  display: flex;
  gap: var(--gap-peer);
}

.badge--inline-tiny {
  font-size: var(--text-fine);
  margin-left: var(--gap-bound);
  opacity: 0.7;
}

.deleted-items-details { margin-top: var(--gap-page); }
.deleted-items-summary {
  cursor: pointer;
  font-size: var(--text-body);
  opacity: 0.7;
}

.section-divider {
  margin: var(--gap-page) 0;
  border: none;
  border-top: 1px solid var(--border);
}

.inline-rename-input {
  font-weight: bold;
  width: 100%;
  padding: var(--gap-bound) var(--gap-peer);
  font-size: inherit;
}

/* ===========================================
   ITEM DETAILS TAB (replaces inline styles in item_details.html)
   =========================================== */

/* Compact button utility (small icon-side actions) */
.btn-compact { padding: var(--gap-peer) var(--gap-section); }

.ml-2 { margin-left: var(--gap-peer); }
.cursor-pointer { cursor: pointer; }
.inline { display: inline; }

.tag-search-wrap { position: relative; }
.tag-suggestions {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.advanced-details { margin-top: var(--gap-pane); }
.advanced-summary {
  cursor: pointer;
  font-size: var(--text-body);
  opacity: 0.8;
}

/* Bundle table inside item-details */
.bundle-table {
  width: 100%;
  border-collapse: collapse;
}
.bundle-table-head {
  text-align: left;
  font-size: var(--text-fine);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bundle-row { border-bottom: 1px solid var(--border); }
.bundle-cell { padding: var(--gap-peer); }
.bundle-cell--first { padding-left: 0; }
.bundle-cell--actions { width: 60px; }
.bundle-cell--desc { font-size: var(--text-note); opacity: 0.8; }
.bundle-cell--file { font-size: var(--text-note); }

.bundle-remove-btn {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}

.bundle-add-row {
  margin-top: var(--gap-section);
  display: flex;
  gap: var(--gap-section);
  align-items: center;
}

.bundle-existing-details { margin-top: var(--gap-section); }
.bundle-existing-summary {
  cursor: pointer;
  font-size: var(--text-note);
  opacity: 0.7;
}
.bundle-existing-row {
  margin-top: var(--gap-peer);
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
.bundle-existing-select {
  flex: 1;
  padding: var(--gap-peer);
}

.sections-intro {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: var(--gap-section) 0 var(--gap-section);
}

.section-mgmt-title {
  flex: 1;
  font-weight: bold;
}
.section-edit-btn,
.section-del-btn {
  padding: var(--gap-bound) var(--gap-group);
  font-size: var(--text-fine);
}

.section-add-details { margin-top: var(--gap-section); }
.section-add-summary {
  cursor: pointer;
  font-size: var(--text-body);
}

.insert-image-btn {
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}

.section-edit-modal {
  margin-top: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
}
.section-edit-actions {
  display: flex;
  gap: var(--gap-peer);
}

.publish-note {
  margin: var(--gap-section) 0;
  opacity: 0.7;
  text-align: left;
}

/* ===========================================
   CONTENT WIZARD STEP (replaces inline styles in wizards/steps/item/content.html)
   =========================================== */

/* (Wizard upload-status + slim progress moved into canonical .upload-status*
   / .progress-bar-container--slim primitives near top of file.) */

/* Bundle items picker, server-rendered rows and JS-appended rows share these. */
.bundle-picker-row-title { flex: 1; }
.bundle-picker-row-type  { font-size: var(--text-fine); opacity: 0.6; }
.bundle-picker-row-unlisted {
  font-size: var(--text-fine);
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
}

/* Batch upload queue table. */
.batch-queue-table {
  width: 100%;
  border-collapse: collapse;
}
.batch-queue-table thead tr {
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.batch-queue-table th,
.batch-queue-table td {
  padding: var(--gap-peer);
  font-size: var(--text-note);
}
.batch-queue-table th:first-child,
.batch-queue-table td:first-child { padding-left: 0; }
.batch-queue-table th:last-child,
.batch-queue-table td:last-child  { padding-right: 0; text-align: right; }
.batch-queue-table tbody tr { border-bottom: 1px solid var(--border); }

.batch-queue-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================
   ACCOUNT TAB (replaces inline styles in partials/tabs/user_account.html)
   =========================================== */

/* Canonical solid-tint callout (one of these in the codebase).
   Distinct from .alert (left-border) and .banner (full-bleed page notice).
   Variants:
   - .callout--danger     (light bg, danger border, moderation, errors)
   - .callout--warning    (light bg, warning border, DNS, email-not-verified)
   - .callout--solid-warning (full saturation warning bg, dark text, partial checkout) */
.callout {
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
  border: 1px solid;
}
.callout--danger {
  background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
  border-color: var(--danger);
}
.callout--warning {
  background: color-mix(in oklch, var(--warning) 14%, var(--surface-page));
  border-color: var(--warning);
}
.callout--solid-warning {
  background: var(--warning);
  color: var(--primary-dark);
  border-color: transparent;
  padding: var(--gap-section);
}
.callout-title { text-transform: capitalize; }
.callout-meta {
  opacity: 0.6;
  margin-left: var(--gap-peer);
}
.callout-body { margin: var(--gap-peer) 0 0 0; }
.callout-hint {
  font-size: var(--text-note);
  margin-top: var(--gap-peer);
}

.account-mod-history { margin-top: var(--gap-section); }
.account-mod-history summary {
  cursor: pointer;
  font-size: var(--text-note);
  opacity: 0.7;
}
.account-mod-history-list { margin-top: var(--gap-peer); }
.account-mod-history-item {
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-note);
}
.account-mod-history-reason {
  margin: var(--gap-bound) 0 0 0;
  opacity: 0.8;
}

.account-tip-card-title {
  font-weight: bold;
  margin-bottom: var(--gap-peer);
}
.account-tip-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
  opacity: 0.8;
}

/* Resend-verification button needs left spacing from preceding strong. */
.account-resend-btn { margin-left: var(--gap-peer); }

/* Cluster of small inline forms (manage-billing / cancel / resume). */
.inline-form { display: inline; }

/* Notification preferences, bare fieldset + monospace legend. */
.pref-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--gap-section) 0;
}
.pref-fieldset--last { margin-bottom: var(--gap-peer); }
.pref-legend {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: bold;
  margin-bottom: var(--gap-peer);
}

/* The cannot-opt-out list, rendered from email::OperationalKind. Reads as
   reference material rather than as more settings: no controls, and the
   justification sits under its label rather than beside it. */
.operational-mail {
  margin: var(--gap-peer) 0 0 0;
}
.operational-mail dt {
  font-weight: bold;
  font-size: var(--text-note);
  margin-top: var(--gap-peer);
}
.operational-mail dd {
  margin: 0;
  opacity: 0.8;
  font-size: var(--text-note);
}

/* ===========================================
   PROJECT CODE TAB (replaces inline styles in partials/tabs/project_code.html)
   =========================================== */

.proj-code-docs-link { margin-left: var(--gap-section); }

.proj-code-linked-list { margin-bottom: var(--gap-pane); }
.proj-code-linked-list > label { margin-bottom: var(--gap-peer); display: block; }

.proj-code-repo {
  margin-bottom: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-overlay);
}
.proj-code-repo-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
}
.proj-code-repo-link { flex: 1; }
.proj-code-repo .danger { padding: var(--gap-bound) var(--gap-section); font-size: var(--text-note); }

.proj-code-collab-block {
  margin-top: var(--gap-peer);
  padding-top: var(--gap-peer);
  border-top: 1px solid var(--border);
}
.proj-code-collab-label { font-size: var(--text-note); margin-bottom: var(--gap-bound); display: block; }
.proj-code-collab-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  margin-bottom: var(--gap-bound);
  font-size: var(--text-note);
}
.proj-code-collab-name { flex: 1; }
.proj-code-collab-readonly { opacity: 0.5; }

.proj-code-add-collab-row {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
.proj-code-add-collab-row .collab-username-input {
  flex: 1;
  font-size: var(--text-note);
  padding: var(--gap-bound) var(--gap-peer);
}
.proj-code-add-collab-row .collab-add-btn { white-space: nowrap; }

.proj-code-link-row {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
}
.proj-code-link-row #link-repo-select { flex: 1; }
.proj-code-link-row #link-repo-btn { white-space: nowrap; }

.proj-code-create-section {
  margin-top: var(--gap-pane);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}
.proj-code-create-section #create-repo-name { flex: 1; }
.proj-code-create-section #create-repo-btn { white-space: nowrap; }
.proj-code-create-status { margin-top: var(--gap-bound); }
.proj-code-create-status.is-error { color: var(--danger); }

.proj-code-disabled {
  padding: var(--gap-page);
  text-align: center;
  opacity: 0.7;
}

/* ===========================================
   ADMIN REPORT ENTRIES (replaces inline styles in partials/admin_report_entries.html)
   =========================================== */

.admin-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}
.admin-report-table thead tr {
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.admin-report-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.admin-report-table th,
.admin-report-table td {
  padding: var(--gap-peer);
}
.admin-report-table td.admin-report-reason {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-report-table td.admin-report-date {
  white-space: nowrap;
}

.admin-report-target-type {
  opacity: 0.5;
  font-size: var(--text-fine);
}

.admin-report-status-open {
  color: var(--action);
  font-weight: 600;
}
.admin-report-status-closed { opacity: 0.6; }

.admin-report-resolve-form {
  display: inline-flex;
  gap: var(--gap-bound);
  align-items: center;
}
.admin-report-resolve-form input[type="text"] {
  width: 120px;
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}
.admin-report-dismiss-form { display: inline; }

.admin-report-admin-notes {
  font-size: var(--text-fine);
  opacity: 0.6;
}

/* ===========================================
   PROJECT PROMOTIONS TAB (replaces inline styles in partials/tabs/project_promotions.html)
   =========================================== */

.proj-promo-form {
  margin-bottom: var(--gap-page);
}

.proj-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section) var(--gap-pane);
  max-width: 500px;
}

.proj-promo-grid--bordered {
  margin-top: var(--gap-section);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}

.proj-promo-trial-fields {
  display: none;
  max-width: 500px;
  margin-top: var(--gap-section);
}

.proj-promo-trial-fields.is-visible {
  display: block;
}

.proj-promo-grid.is-hidden,
.proj-promo-trial-fields.is-hidden {
  display: none;
}

.proj-promo-form .form-group {
  margin-bottom: 0;
}

.proj-promo-form .form-group label {
  font-size: var(--text-note);
}

.proj-promo-trial-group {
  max-width: 240px;
}

.proj-promo-scope {
  grid-column: 1 / -1;
}

.proj-promo-actions {
  margin-top: var(--gap-section);
}

.proj-promo-hint {
  margin-top: var(--gap-peer);
}

/* ===========================================
   PROJECT OVERVIEW TAB (replaces inline styles in partials/tabs/project_overview.html)
   =========================================== */

.proj-overview-setup {
  margin-bottom: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
}
.proj-overview-setup-title {
  margin: 0 0 var(--gap-section) 0;
  font-family: var(--font-heading);
  font-weight: bold;
}
.proj-overview-setup-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
}
.proj-overview-setup-row:last-child { border-bottom: none; }
.proj-overview-setup-check {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.proj-overview-setup-bullet {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-round);
  flex-shrink: 0;
}
.proj-overview-setup-label {
  flex: 1;
  font-size: var(--text-note);
}
.proj-overview-setup-label--done {
  opacity: 0.5;
  text-decoration: line-through;
}
.proj-overview-setup-btn {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-group);
}

.proj-overview-tools { margin-top: var(--gap-page); }
.proj-overview-tools-summary {
  cursor: pointer;
  font-size: var(--text-body);
  font-family: var(--font-heading);
  font-weight: bold;
}
.proj-overview-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}
.proj-overview-tool {
  background: var(--surface-sunken);
  padding: var(--gap-section);
}
.proj-overview-tool-name {
  font-weight: bold;
  font-size: var(--text-body);
  margin-bottom: var(--gap-bound);
}
.proj-overview-tool-desc {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: 0;
}

/* ===========================================
   PROJECT SYNCKIT TAB (replaces inline styles in partials/tabs/project_synckit.html)
   =========================================== */

.proj-synckit-intro { margin-bottom: var(--gap-section); }
.proj-synckit-intro-secondary { margin-bottom: var(--gap-pane); }
.proj-synckit-create { margin-bottom: var(--gap-pane); }
.proj-synckit-create-body {
  padding: var(--gap-section); background: var(--surface-overlay); border: 1px solid var(--border);
}
.proj-synckit-create-form {
  display: flex; flex-direction: row; gap: var(--gap-section); align-items: flex-end;
}
.proj-synckit-label {
  display: block; font-size: var(--text-note); margin-bottom: var(--gap-bound);
}
.proj-synckit-code { font-size: var(--text-fine); }
.proj-synckit-code--wrap { font-size: var(--text-fine); word-break: break-all; }
.proj-synckit-code--selectable { font-size: var(--text-note); word-break: break-all; user-select: all; }
.proj-synckit-btn-tight {
  margin-left: var(--gap-peer); padding: var(--gap-bound) var(--gap-peer); font-size: var(--text-fine);
}
.proj-synckit-btn-row {
  padding: var(--gap-bound) var(--gap-peer); font-size: var(--text-fine);
}
.proj-synckit-btn-row + .proj-synckit-btn-row { margin-left: var(--gap-bound); }
.proj-synckit-hint-inline {
  font-size: var(--text-fine); margin-left: var(--gap-bound);
}
.proj-synckit-hint-warn {
  font-size: var(--text-fine); color: var(--danger);
}
.proj-synckit-status-active { color: var(--success); }
.proj-synckit-status-inactive { color: var(--danger); }
.proj-synckit-new-key {
  padding: var(--gap-section); background: var(--surface-overlay);
  border: 1px solid var(--border); margin-top: var(--gap-peer);
}
.proj-synckit-new-key-heading {
  margin: 0 0 var(--gap-peer) 0; font-weight: 500; color: var(--danger);
}
.proj-synckit-create-status--error { color: var(--danger); margin-top: var(--gap-peer); }
.proj-synckit-create-status--reset { margin-top: var(--gap-peer); }

/* ===========================================
   ITEM PAGE (replaces inline styles in pages/item.html)
   =========================================== */

.item-page .breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-page .breadcrumb-edit-link {
  font-size: var(--text-note);
  color: var(--content);
}

.item-page .video-player {
  width: 100%;
  max-height: 600px;
  background: var(--primary-dark);
}

.item-page .item-cover-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}


.item-page .bundle-notice-inline {
  background: var(--surface-sunken);
  padding: var(--gap-section);
}

.item-page .bundle-notice-title {
  font-weight: bold;
  margin-bottom: var(--gap-peer);
}

.item-page .bundle-notice-desc {
  opacity: 0.8;
  font-size: var(--text-note);
}

.item-page .bundle-notice-entry {
  margin-top: var(--gap-section);
}

.item-page .bundle-notice-entry a {
  font-weight: bold;
}

.item-page .bundle-notice-price {
  opacity: 0.7;
}

.item-page .bundle-notice-empty {
  margin-top: var(--gap-peer);
  opacity: 0.7;
  font-size: var(--text-note);
}

.item-page .promo-details {
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}

.item-page .promo-summary {
  cursor: pointer;
  opacity: 0.7;
}

.item-page .promo-form {
  display: flex;
  gap: var(--gap-peer);
  align-items: center;
  margin-top: var(--gap-peer);
}

.item-page .promo-input {
  flex: 1;
  padding: var(--gap-peer) var(--gap-group);
  font-size: var(--text-note);
}

.item-page .action-row {
  margin-top: var(--gap-section);
}

.item-page .action-row-tight {
  margin-top: var(--gap-peer);
}

.item-page .full-width-btn {
  width: 100%;
  font-size: var(--text-note);
}

.item-page .license-preset-name {
  margin-bottom: var(--gap-section);
}

.item-page .license-summary {
  cursor: pointer;
  opacity: 0.7;
  font-size: var(--text-note);
}

.item-page .license-text {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: var(--text-note);
  margin-top: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
}

.item-page .license-download {
  margin-top: var(--gap-section);
}

.item-page .license-download a {
  font-size: var(--text-note);
  color: var(--content);
}

.item-page .bundle-list-entry {
  margin-top: var(--gap-peer);
}

.item-page .footer-links {
  margin-top: var(--gap-peer);
}

/* ===========================================
   JOIN COMPLETE STEP (replaces inline styles in wizards/steps/join/complete.html)
   =========================================== */
.join-complete-intro { margin-bottom: var(--gap-pane); }
.join-complete-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-section); max-width: 500px;
}
.join-complete-choice { text-decoration: none; color: inherit; display: block; }
.join-complete-card {
  background: var(--surface-sunken); padding: var(--gap-section); text-align: center;
  border: 2px solid transparent; transition: border-color 0.15s;
}
.join-complete-choice:hover .join-complete-card,
.join-complete-card--active { border-color: var(--content); }
.join-complete-card-title {
  font-family: var(--font-heading); font-weight: bold;
  font-size: var(--text-lead); margin-bottom: var(--gap-peer);
}
.join-complete-card-desc {
  font-size: var(--text-note); opacity: 0.7; margin: 0;
}
.join-complete-footnote {
  font-size: var(--text-note); opacity: 0.5;
  margin-top: var(--gap-section); text-align: center;
}

/* ===========================================
   PROMO CODES LIST (replaces inline styles in partials/promo_codes_list.html)
   =========================================== */
.promo-codes-row--expired { opacity: 0.5; }
.promo-codes-row--pending { opacity: 0.7; }
.promo-codes-schedule { font-size: var(--text-note); }
.promo-codes-schedule-pending { color: var(--warning); }
.promo-codes-schedule-expired { color: var(--danger); }
.promo-codes-schedule-none { opacity: 0.5; }
.promo-codes-actions { white-space: nowrap; }
.promo-codes-edit-btn { font-size: var(--text-fine); }
.promo-codes-edit-row { background: var(--surface-sunken); }
.promo-codes-edit-cell { padding: var(--gap-section); }
.promo-codes-edit-form {
  display: flex; gap: var(--gap-section); align-items: end; flex-wrap: wrap;
}
.promo-codes-edit-label {
  font-size: var(--text-fine); display: block; margin-bottom: var(--gap-bound);
}
.promo-codes-edit-save { font-size: var(--text-note); }
.promo-codes-bulk-row { margin-top: var(--gap-section); }
.promo-codes-bulk-btn { font-size: var(--text-note); opacity: 0.7; }

/* ===========================================
   USER MEDIA TAB (replaces inline styles in partials/tabs/user_media.html)
   =========================================== */

.user-media-intro {
  margin-bottom: var(--gap-section);
}

.user-media-upload {
  border: 2px dashed var(--border);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
  text-align: center;
  background: var(--surface-overlay);
}

.user-media-upload--dragover {
  border-color: var(--action);
}

.user-media-upload-row {
  margin-bottom: var(--gap-section);
}

.user-media-upload-label {
  display: inline-block;
  font-size: var(--text-note);
  margin-right: var(--gap-section);
}

.user-media-upload-folder-input {
  padding: var(--gap-bound);
  font-size: var(--text-note);
  width: 140px;
  margin-left: var(--gap-bound);
}

.user-media-upload-progress {
  margin-top: var(--gap-section);
}

.user-media-upload-status {
  font-size: var(--text-note);
  margin-bottom: var(--gap-bound);
}

.user-media-upload-status--ok {
  color: var(--success);
}

.user-media-upload-status--err {
  color: var(--danger);
}

.user-media-folders {
  margin-bottom: var(--gap-section);
  display: flex;
  gap: var(--gap-peer);
  flex-wrap: wrap;
  align-items: center;
}

.user-media-folders-label {
  font-size: var(--text-note);
  opacity: 0.7;
}

.user-media-folders-btn {
  font-size: var(--text-fine);
}

.user-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap-section);
}

.user-media-card {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  padding: var(--gap-section);
  position: relative;
}

.user-media-card-thumb {
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-bottom: var(--gap-peer);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
}

.user-media-card-thumb--video {
  font-size: var(--text-title);
  opacity: 0.4;
}

.user-media-card-img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.user-media-card-name {
  font-size: var(--text-fine);
  word-break: break-all;
  margin-bottom: var(--gap-bound);
}

.user-media-card-meta {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-bottom: var(--gap-peer);
}

.user-media-card-actions {
  display: flex;
  gap: var(--gap-bound);
}

.user-media-card-btn {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
}

/* ===========================================
   ITEM VERSION UPLOAD (replaces inline styles in partials/item_version_upload.html)
   =========================================== */

.item-version-upload-cell-sm {
  font-size: var(--text-note);
}

.item-version-upload-no-file {
  opacity: 0.5;
}

.item-version-upload-btn {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

.item-version-upload-add-btn {
  padding: var(--gap-peer) var(--gap-section);
}

.item-version-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-section);
}

.item-version-upload-hint {
  margin-bottom: var(--gap-peer);
}

.item-version-upload-file-table {
  width: 100%;
  border-collapse: collapse;
}

.item-version-upload-file-table thead tr {
  text-align: left;
  font-size: var(--text-fine);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.item-version-upload-file-table th:first-child {
  padding: var(--gap-peer) var(--gap-peer) var(--gap-peer) 0;
}

.item-version-upload-file-table th + th {
  padding: var(--gap-peer);
}

.item-version-upload-file-table th:last-child {
  width: 40px;
}

.item-version-upload-add-row {
  margin-top: var(--gap-peer);
}

.item-version-upload-queue {
  margin-bottom: var(--gap-section);
}

.item-version-upload-speed {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-bound);
}

/* ===========================================
   PROJECT PAGE (replaces inline styles in pages/project.html)
   =========================================== */

.project-page .store-cover {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-panel);
  object-fit: cover;
  margin-bottom: var(--gap-pane);
}
.project-page .follow-btn.is-selected {
  opacity: 0.7;
}
.project-page .follower-count-muted {
  font-size: var(--text-note);
  opacity: 0.7;
  padding: var(--gap-peer) 0;
}
.project-page .promo-details {
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}
.project-page .promo-details summary {
  cursor: pointer;
  opacity: 0.7;
}
.project-page .promo-input {
  width: 100%;
  margin-top: var(--gap-peer);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-note);
  text-transform: uppercase;
}
.project-page .store-footer-links {
  margin-top: var(--gap-peer);
}

/* ===========================================
   INSERTION LIST (replaces inline styles in partials/insertion_list.html)
   =========================================== */

.insertion-list-heading {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-section);
}
.insertion-list-toolbar {
  margin-bottom: var(--gap-section);
}
.insertion-list-upload {
  font-family: var(--font-mono);
}
.insertion-list-table {
  width: 100%;
  font-family: var(--font-body);
}
.insertion-list-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}
.insertion-list-table th.insertion-list-th-actions {
  text-align: right;
}
.insertion-list-table .insertion-list-actions {
  text-align: right;
}
.insertion-list-table .insertion-list-action-btn {
  font-family: var(--font-mono);
}

/* ===========================================
   PROJECT MEMBERS TAB (replaces inline styles in partials/tabs/project_members.html)
   =========================================== */

.proj-members-summary {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
}

.proj-members-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.proj-members-stat {
  font-size: var(--text-head);
  font-weight: bold;
}

.proj-members-add {
  margin-bottom: var(--gap-page);
}

.proj-members-add-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--gap-section);
  align-items: end;
}

.proj-members-field-label {
  font-size: var(--text-note);
  display: block;
  margin-bottom: var(--gap-bound);
}

.proj-members-add-result {
  margin-top: var(--gap-peer);
}

.proj-members-name-link {
  color: inherit;
}

.proj-members-split-cell {
  font-weight: bold;
}

/* ===========================================
   PLACEMENT LIST (replaces inline styles in partials/placement_list.html)
   =========================================== */

.placement-list-heading {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-section);
}
.placement-list-table {
  width: 100%;
  font-family: var(--font-body);
  margin-bottom: var(--gap-section);
}
.placement-list-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}
.placement-list-table th.placement-list-th-actions {
  text-align: right;
}
.placement-list-table .placement-list-actions {
  text-align: right;
}
.placement-list-table .placement-list-remove {
  font-family: var(--font-mono);
}
.placement-list-form {
  display: flex;
  gap: var(--gap-peer);
  align-items: flex-end;
  flex-wrap: wrap;
}
.placement-list-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  margin-bottom: var(--gap-bound);
}
.placement-list-add {
  font-family: var(--font-mono);
}

/* ===========================================
   USER SYNCKIT TAB (replaces inline styles in partials/tabs/user_synckit.html)
   =========================================== */

.user-synckit-create { margin-bottom: var(--gap-pane); }
.user-synckit-create-body {
  padding: var(--gap-section);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
}
.user-synckit-create-form {
  display: flex;
  flex-direction: row;
  gap: var(--gap-section);
  align-items: flex-end;
}
.user-synckit-create-form label {
  display: block;
  font-size: var(--text-note);
  margin-bottom: var(--gap-bound);
}
.user-synckit-create-form input[type="text"],
.user-synckit-create-form select {
  padding: var(--gap-peer);
  font-size: var(--text-note);
}
.user-synckit-create-form input[type="text"] { width: 220px; }
.user-synckit-create-form select { width: 180px; }

.user-synckit-code { font-size: var(--text-fine); }
.user-synckit-hint {
  font-size: var(--text-fine);
  margin-left: var(--gap-bound);
}

.user-synckit-inline-btn {
  margin-left: var(--gap-peer);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}
.user-synckit-row-btn {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}
.user-synckit-row-btn + .user-synckit-row-btn {
  margin-left: var(--gap-bound);
}

.user-synckit-status-active { color: var(--success); }
.user-synckit-status-inactive { color: var(--danger); }

.user-synckit-edit-btn {
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
}

.user-synckit-create-error {
  color: var(--danger);
  margin-top: var(--gap-peer);
}

/* ===========================================
   TOTP (replaces inline styles in partials/totp_setup.html and totp_status.html)
   =========================================== */

/* Section wrapper between TOTP subsections (QR + backup codes + confirm,
   or regenerate + disable). */
.totp-section { margin-bottom: var(--gap-pane); }

/* Confirm-setup section is separated from the backup codes by a top border. */
.totp-confirm {
  border-top: 1px solid var(--border);
  padding-top: var(--gap-section);
}

/* QR code container, centered above the manual-entry details. */
.totp-qr {
  text-align: center;
  margin-bottom: var(--gap-section);
}
.totp-qr img {
  max-width: 200px;
  image-rendering: pixelated;
}

/* Collapsible "Manual entry key" group. */
.totp-manual { margin-bottom: var(--gap-section); }
.totp-manual summary {
  cursor: pointer;
  opacity: 0.7;
  font-size: var(--text-note);
}
.totp-manual-secret {
  display: block;
  margin-top: var(--gap-peer);
  word-break: break-all;
  font-size: var(--text-note);
  padding: var(--gap-peer);
  background: var(--surface-sunken);
}

/* Backup codes grid (rendered list of one-time codes). */
.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--gap-peer);
}
.backup-codes-grid code {
  padding: var(--gap-peer);
  background: var(--surface-sunken);
  text-align: center;
  font-size: var(--text-note);
}

/* Status row for the "Enabled" badge above the management forms. */
.totp-status-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  margin-bottom: var(--gap-section);
}

/* Container where regenerated backup codes are swapped in via HTMX. */
.totp-regen-output { margin-top: var(--gap-section); }

/* ===========================================
   DASHBOARD-USER SHELL (replaces inline styles in dashboards/dashboard-user.html)
   =========================================== */

.sandbox-banner {
  background: var(--action);
  color: var(--primary-light);
  padding: var(--gap-section) var(--gap-pane);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.sandbox-banner-link {
  color: var(--primary-light);
  text-decoration: underline;
  margin-left: var(--gap-peer);
}
.account-status-actions {
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
  margin-top: var(--gap-section);
}

.suspension-wrap {
  margin-bottom: var(--gap-section);
}

.password-warning-banner {
  margin-bottom: var(--gap-section);
  padding: var(--gap-section);
  background: color-mix(in oklch, var(--warning) 14%, var(--surface-page));
  border: 1px solid var(--warning);
  font-size: var(--text-body);
}

.dash-user-header-links {
  margin-bottom: var(--gap-peer);
  display: flex;
  gap: var(--gap-pane);
}

.dash-user-header-link {
  font-size: var(--text-note);
  opacity: 0.7;
}

.checklist-recovery {
  padding: var(--gap-section) 0;
  text-align: right;
}

.checklist-recovery-link {
  font-size: var(--text-note);
  opacity: 0.7;
}

.tab-spinner {
  margin-left: var(--gap-section);
}

/* ===========================================
   USER PROFILE PAGE (replaces inline styles in pages/user.html)
   =========================================== */

.user-page .creator-paused-notice {
  margin-bottom: var(--gap-pane);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  text-align: center;
  font-size: var(--text-body);
}

.user-page .profile-action-row {
  margin-top: var(--gap-section);
}

.user-page .profile-edit-btn {
  display: inline-block;
  padding: var(--gap-peer) var(--gap-section);
  text-decoration: none;
  font-size: var(--text-note);
}

.user-page .follow-btn.is-selected {
  opacity: 0.7;
}

.user-page .follower-count {
  margin-top: var(--gap-section);
  font-size: var(--text-note);
  opacity: 0.7;
}

.user-page .profile-share-row {
  margin-top: var(--gap-section);
  display: flex;
  gap: var(--gap-section);
  justify-content: center;
  font-size: var(--text-note);
}

.user-page .profile-share-link {
  opacity: 0.7;
}

.user-page .collections-section {
  margin-bottom: var(--gap-page);
}

/* ===========================================
   SUSPENSION BANNER (replaces inline styles in partials/suspension_banner.html)
   =========================================== */

.suspension-banner {
  background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
  border: 1px solid var(--danger);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.suspension-banner-title {
  margin: 0 0 var(--gap-peer) 0;
  color: var(--danger);
}

.suspension-banner-reason {
  font-size: var(--text-note);
  margin: 0 0 var(--gap-section) 0;
}

.suspension-banner-denial {
  background: var(--surface-overlay);
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}

.suspension-banner-denial-response {
  margin: var(--gap-bound) 0 0 0;
}

.suspension-banner-denial-hint {
  margin: var(--gap-peer) 0 0 0;
  opacity: 0.7;
}

.suspension-banner-pending {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: 0;
}

.suspension-banner-appeal {
  margin-top: var(--gap-peer);
}

.suspension-banner-appeal-summary {
  cursor: pointer;
  font-size: var(--text-note);
}

.suspension-banner-appeal-form {
  margin-top: var(--gap-section);
}

.suspension-banner-appeal-text {
  width: 100%;
  margin-bottom: var(--gap-peer);
  font-size: var(--text-note);
}

.suspension-banner-appeal-submit {
  font-size: var(--text-note);
}

.suspension-banner-export {
  margin-top: var(--gap-section);
}

.suspension-banner-export-link {
  font-size: var(--text-note);
}

/* ===========================================
   REPORT MODAL (replaces inline styles in partials/report_modal.html)
   =========================================== */

.report-modal-content {
  background: var(--surface-page);
  padding: var(--gap-page);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.report-modal-title {
  font-size: var(--text-subhead);
  margin: 0;
}

.report-modal-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--gap-section) 0;
}

.report-modal-legend {
  font-size: var(--text-note);
  font-weight: 600;
  margin-bottom: var(--gap-peer);
}

.report-modal-option {
  display: block;
  margin-bottom: var(--gap-peer);
  cursor: pointer;
}

.report-modal-details {
  margin-bottom: var(--gap-section);
}

.report-modal-details-label {
  display: block;
  font-size: var(--text-note);
  margin-bottom: var(--gap-bound);
}

.report-modal-textarea {
  width: 100%;
  font-size: var(--text-note);
}

.report-modal-actions {
  display: flex;
  gap: var(--gap-peer);
  justify-content: flex-end;
}

/* ===========================================
   LIBRARY COLLECTIONS TAB (partials/tabs/library_collections.html)
   =========================================== */

.badge.is-faded { opacity: 0.5; }
.lib-coll-new { margin-top: var(--gap-pane); }
.lib-coll-new-summary { cursor: pointer; font-weight: bold; }
.lib-coll-new-form { margin-top: var(--gap-section); }
.lib-coll-wishlist-heading {
  font-size: var(--text-lead);
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  opacity: 0.8;
}
.lib-coll-wishlist-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lib-coll-wishlist-table { min-width: 500px; }
.lib-coll-row-actions { white-space: nowrap; }
.lib-coll-row-actions .lib-coll-cart-btn { margin-right: var(--gap-bound); }

/* ===========================================
   USER ANALYTICS TAB (partials/tabs/user_analytics.html)
   =========================================== */

.analytics-export-link { margin-left: var(--gap-section); }
.analytics-range-heading {
  font-size: var(--text-lead);
  margin: 0;
}
.analytics-section--comparison { margin-bottom: var(--gap-page); }
.analytics-section--comparison h2 { margin-bottom: var(--gap-section); }
.analytics-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.analytics-table { min-width: 500px; }
.analytics-revenue-cell {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}
.analytics-revenue-bar {
  width: var(--fill, 0%);
  height: 10px;
  min-width: 2px;
  max-width: 80px;
  background: var(--action);
}

/* ===========================================
   ITEM EMBED TAB (templates/partials/tabs/item_embed.html)
   =========================================== */
.embed-intro {
  opacity: 0.7;
  font-size: var(--text-note);
  margin-bottom: var(--gap-pane);
}
.embed-option {
  margin-bottom: var(--gap-pane);
  padding: var(--gap-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}
.embed-option h4 {
  margin-bottom: var(--gap-bound);
  font-size: var(--text-body);
}
.embed-option-desc {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
}
.embed-preview {
  margin: var(--gap-section) 0;
  overflow: hidden;
}
.embed-iframe {
  border: none;
  border-radius: var(--radius-control);
}
.embed-layout-toggle {
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
  display: flex;
  gap: var(--gap-section);
}
.embed-layout-toggle label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
}
.embed-code-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}
.embed-snippet {
  flex: 1;
  padding: var(--gap-peer) var(--gap-section);
  background: var(--surface-overlay);
  border-radius: var(--radius-control);
  font-size: var(--text-fine);
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}
.copy-btn {
  padding: 6px 12px;
  font-size: var(--text-fine);
  background: var(--action);
  color: var(--primary-light);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
}
.copy-btn:hover {
  opacity: 0.9;
}

/* ===========================================
   ADMIN NAV (templates/partials/admin_nav.html)
   =========================================== */
.admin-nav {
  display: flex;
  gap: var(--gap-peer);
  margin-bottom: var(--gap-pane);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}
.admin-nav a {
  padding: var(--gap-bound) var(--gap-section);
  text-decoration: none;
}

/* Admin nav items and filter-bar toggles are .btn-primary / .btn-secondary,
   toggled by the templates to mark the current page or active filter. Colour
   and depth come from the button recipe; only the tighter admin metrics and
   the active weight are stated here. */
.admin-nav a.btn-primary,
.filter-bar button.btn-primary {
  font-weight: 700;
}
.admin-nav a.btn-secondary:hover,
.filter-bar button.btn-secondary:hover {
  color: var(--content);
}

/* ===========================================
   VIDEO PLAYER PAGE (templates/pages/video_player.html)
   =========================================== */
.video-cover-img {
  width: 100%;
  display: block;
  background: var(--primary-dark);
}
.video-cover-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--content-muted);
}
.video-store-cta {
  margin: var(--gap-page) 0;
  padding: var(--gap-pane);
  background: var(--surface-sunken);
  text-align: center;
}
.video-cta-lead {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
}
.video-cta-price {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
}
.video-cta-fineprint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-section);
}
.video-library-status {
  font-family: var(--font-mono);
  color: var(--content-muted);
}

/* ===========================================
   LIBRARY LOCKED PAGE (templates/pages/library_locked.html)
   =========================================== */
.library-locked-byline {
  opacity: 0.7;
}
.library-locked-cover {
  max-width: 320px;
  margin: var(--gap-section) 0;
  /* Reserve the space before the image loads (audit Run 17 Frontend). */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.library-locked-purchase {
  margin-top: var(--gap-page);
}
.library-locked-lead {
  opacity: 0.85;
}
.library-locked-actions {
  margin-top: var(--gap-pane);
  display: flex;
  gap: var(--gap-section);
  flex-wrap: wrap;
}
.library-locked-bundles {
  margin-top: var(--gap-pane);
}
.library-locked-bundles-title {
  font-weight: bold;
}
.library-locked-bundle {
  margin-top: var(--gap-peer);
}
.library-locked-bundle-price {
  opacity: 0.7;
}

/* ===========================================
   BLOG (replaces inline styles in project_blog.html
   and dashboard-blog-editor.html)
   =========================================== */

.blog-empty-state { padding: var(--gap-page) 0; }
.blog-empty-hint {
  opacity: 0.7;
  font-size: var(--text-note);
  margin-top: var(--gap-peer);
}
.blog-post-title-link { font-weight: bold; }
.blog-post-actions {
  display: flex;
  gap: var(--gap-peer);
}

/* Blog editor dashboard (templates/dashboards/dashboard-blog-editor.html). */
.blog-editor h1 {
  font-size: var(--text-title);
  margin-bottom: var(--gap-section);
  text-align: left;
}
.blog-editor .editor-form { max-width: 800px; }
.blog-editor .editor-form .form-group { margin-bottom: var(--gap-section); }
.blog-editor .editor-form textarea {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  min-height: 400px;
  resize: vertical;
}
.blog-editor-slug-spinner { font-size: var(--text-note); }
.blog-editor-media-btn {
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}
.blog-editor-actions {
  display: flex;
  gap: var(--gap-section);
  align-items: center;
}
.blog-editor-status { margin-top: var(--gap-peer); }

/* ===========================================
   AUDIO PLAYER (replaces inline styles in pages/audio_player.html)
   =========================================== */

.audio-store-cta {
  margin: var(--gap-page) 0;
  padding: var(--gap-pane);
  background: var(--surface-sunken);
  text-align: center;
}
.audio-store-cta .audio-access-msg {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
}
.audio-store-cta .audio-price {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
}
.audio-store-cta .audio-fee-note {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-section);
}
.audio-library-status {
  font-family: var(--font-mono);
  color: var(--content-muted);
}

/* ===========================================
   SECTIONS WIZARD STEP (templates/wizards/steps/item/sections.html)
   Parallels .psection-row used by item_details + project-sections.js,
   but isolated so wizard markup can evolve independently.
   =========================================== */

.section-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-group) 0;
  border-bottom: 1px solid var(--border);
}
.section-row-title { flex: 1; font-weight: bold; }
.section-row-length { font-size: var(--text-fine); opacity: 0.6; }
.section-row .section-delete-btn {
  padding: var(--gap-bound) var(--gap-group);
  font-size: var(--text-fine);
}

.section-add-body { margin-top: var(--gap-section); }

.wizard-actions { margin-top: var(--gap-pane); }

/* ===========================================
   PROJECT SUBSCRIPTIONS TAB (templates/partials/tabs/project_subscriptions.html)
   =========================================== */

.subs-connect-info {
  margin-bottom: var(--gap-pane);
  padding: var(--gap-section);
}
.subs-new-tier { margin-bottom: var(--gap-page); }

.tier-row-desc {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-bound);
}
.tier-action-btn {
  font-size: var(--text-note);
  padding: var(--gap-bound) var(--gap-group);
}

.subs-members-bar {
  margin-top: var(--gap-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===========================================
   LIBRARY CONSUMPTION PAGES
   ===========================================
   Shared styles for the library-side consumption surfaces:
   text_reader.html, library_text.html (.article-page),
   library_downloads.html (.library-page),
   library_audio.html / library_video.html (.media-container + helpers).
   The .article-page and .library-page sections higher up in this file
   are activated by body classes set in the templates. */

/* Faded excerpt text on the public store-page text reader. */
.article-page .article-body--excerpt { opacity: 0.85; }

/* Store-page call-to-action block (text_reader.html). */
.article-page .store-cta {
  margin: var(--gap-page) 0;
  padding: var(--gap-pane);
  background: var(--surface-sunken);
  text-align: center;
}
.article-page .store-cta-lead {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
}
.article-page .store-cta-price {
  font-size: var(--text-head);
  margin-bottom: var(--gap-section);
}
.article-page .store-cta-note {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-section);
}
.article-page .store-cta .library-status {
  font-family: var(--font-mono);
  color: var(--content-muted);
}

/* Library back-link breadcrumb shared by the media library pages. */
.media-container .library-back {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: var(--gap-section) 0;
}
.media-container .library-back a { color: var(--content); }

/* Source-files download list under audio/video library pages.
   The .library-page version exists higher up; this block scopes the
   same look under .media-container for audio/video. */
.media-container .library-downloads {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  margin-top: var(--gap-page);
}
.media-container .library-downloads h3 {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
}
.media-container .download-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
}
.media-container .download-row:last-child { border-bottom: none; }
.media-container .download-version {
  min-width: 4em;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}
.media-container .download-label { flex: 1; }
.media-container .download-label--empty { flex: 1; opacity: 0.5; }
.media-container .download-size {
  font-size: var(--text-note);
  opacity: 0.6;
  min-width: 5em;
  text-align: right;
}

/* Compact download button used in both library_downloads.html and
   media library pages. */
.btn-download-compact {
  padding: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

/* Faded "no label" placeholder on library_downloads.html download rows. */
.library-page .download-label--empty { opacity: 0.5; }

/* Library-downloads description <details> summary + body. */
.library-page .lib-summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-subhead);
}
.library-page .lib-summary-body { margin-top: var(--gap-section); }

/* License section on library_downloads.html. */
.library-page .lib-license-name { margin-bottom: var(--gap-section); }
.library-page .lib-license-download {
  font-size: var(--text-note);
  color: var(--content);
}

/* Footer below the item-footer (was inline on library_downloads.html). */
.library-page .item-footer-sub { margin-top: var(--gap-peer); }

/* library_text.html footer: a terse in-page footer for the library's own
   text view, unrelated to base.html's site-footer. */
.article-page .lib-text-footer {
  text-align: center;
  padding: var(--gap-page);
  font-size: var(--text-note);
  opacity: 0.6;
  border-top: 1px solid var(--border);
}
.article-page .lib-text-footer a { color: var(--content); }

/* Media player play/pause icon initial state. The JS in media-player.js
   toggles via element.style.display directly, so we must NOT use
   !important here, element.style would still beat a normal-priority
   declaration, but !important in the stylesheet would defeat that. */
.media-icon-hidden { display: none; }

/* Video element fills its .video-display parent. .video-display already
   provides a black background. */
.video-display video { width: 100%; }

/* Cover image inside .cover-art on library_audio.html, the parent
   .cover-art already sets aspect ratio and centering; the inline
   width/aspect-ratio/object-fit was redundant with .cover-art img. */

/* ===========================================
   USER DASHBOARD TABS (support / sessions / buyer contacts)
   =========================================== */

/* Support tab (templates/partials/tabs/user_support.html). */
.support-tab .support-intro-meta {
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.8;
}
.support-tab .support-form { max-width: 600px; }
.support-tab .response-times {
  margin-top: var(--gap-page);
  font-size: var(--text-note);
  opacity: 0.7;
}
.support-tab .response-times ul {
  margin: var(--gap-bound) 0 0 var(--gap-pane);
}

/* Sessions tab (templates/partials/tabs/user_sessions.html). */
.sessions-tab .sessions-table { width: 100%; }
.sessions-tab .device-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buyer contacts tab (templates/partials/tabs/buyer_contacts.html). */
.buyer-contacts .contacts-table { min-width: 500px; }

/* Creators page extras (templates/pages/creators.html). */
.creators-page .pricing-fineprint {
  font-size: var(--text-note);
  opacity: 0.8;
  margin-top: var(--gap-peer);
}
.creators-page .trial-callout {
  font-size: var(--text-note);
  margin-top: var(--gap-pane);
}

/* ===========================================
   LIBRARY TABS
   Shared classes for the library-dashboard tab partials:
   library_wishlists, library_contacts, library_purchases,
   library_subscriptions. Migrated from inline styles.
   =========================================== */

/* Tables in library tabs need a minimum width so columns stay readable
   while the outer container scrolls horizontally on narrow viewports. */

/* Empty-state hint paragraph (smaller, slightly faded). */
.library-tab-empty-hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

/* Compact row-action button (wishlist Add to Cart / Remove, etc.). */

.library-filter-wrap { margin-bottom: var(--gap-section); }

/* Purchases table "Open" action link + context menu trigger group. */
.library-row-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}
.library-row-open {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-section);
  text-decoration: none;
  white-space: nowrap;
}

/* Section sub-heading inside purchases tab (e.g. "Subscriptions"). */
.library-tab-subheading {
  font-size: var(--text-lead);
  margin-top: var(--gap-page);
  margin-bottom: var(--gap-section);
  opacity: 0.8;
}

/* Inline-block button styled as a link target on empty-state CTAs. */
.library-tab-cta {
  display: inline-block;
  text-decoration: none;
}

/* Context menu (dropdown) on each purchase row. */
.context-menu-wrapper { position: relative; }
.context-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--gap-peer);
  font-size: var(--text-subhead);
  line-height: 1;
  color: var(--content-muted);
  border-radius: var(--radius-control);
}
.context-menu-btn:hover {
  background: var(--surface-sunken);
  color: var(--content);
}
.context-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-overlay);
  min-width: 160px;
  z-index: var(--z-context);
}
.context-menu.open { display: block; }
.context-menu-item {
  display: block;
  width: 100%;
  padding: var(--gap-section);
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-note);
  color: var(--content);
  cursor: pointer;
  text-decoration: none;
}
.context-menu-item:hover { background: var(--surface-sunken); }
.context-menu-item.danger { color: var(--danger); }

/* Inline license-key code chip shown beneath a purchase date. */
.license-key-inline { margin-top: var(--gap-bound); }
.key-code-small {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
  cursor: pointer;
  user-select: all;
}
.key-code-small:hover { background: var(--border); }

/* Library row title link reads as plain text until hovered. */
.library-title-link:hover { text-decoration: underline; }
/* ===========================================
   ADMIN ENTRIES (replaces inline styles in partials/admin_user_entries.html,
                  partials/admin_waitlist_entries.html,
                  partials/admin_appeal_entries.html)
   =========================================== */

/* (`.badge-active` / `.badge-trusted` removed in wave 2 tier B2. They were a
   second, ad-hoc spelling of what data-tone="success" already says, and the
   admin entries take the tone now.) */

/* "Trust" toggle button sits next to a Trusted badge. */
.admin-entries-trust-btn {
  margin-left: var(--gap-bound);
}

/* Waitlist pitch cell, narrow body text. */
.admin-entries-pitch {
  font-size: var(--text-note);
  max-width: 300px;
}
.admin-entries-pitch-empty {
  opacity: 0.5;
  font-style: italic;
}
.admin-entries-pitch-inviter {
  margin-top: var(--gap-bound);
}

/* Appeal text columns. */
.admin-entries-reason {
  font-size: var(--text-note);
  max-width: 200px;
}
.admin-entries-appeal {
  font-size: var(--text-note);
  max-width: 300px;
}

/* Decide form textarea + stacked action buttons. */
.admin-entries-decide-textarea {
  width: 200px;
}
.admin-entries-decide-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bound);
}

/* Pagination row at the bottom of admin entry tables. */
.admin-entries-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-section) 0;
}

/* ===========================================
   ITEM TABS (item_settings, item_sales, item_overview partials)
   =========================================== */

/* Schedule form is hidden until "Schedule" button is clicked. JS toggles
   the `.hidden` utility class. */
.item-settings-schedule-form {
  margin-top: var(--gap-section);
}

.item-sales-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-section);
}
.item-sales-tab-header h2 { margin: 0; }
.item-overview-embed {
  margin-top: var(--gap-pane);
}
.item-overview-embed > summary {
  cursor: pointer;
  font-weight: bold;
  font-size: var(--text-lead);
}

/* ===========================================
   ITEM TEXT EDITOR (partials/item_text_editor.html)
   =========================================== */

.text-editor-insert-btn {
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}

.text-editor-placeholder {
  opacity: 0.6;
}

.text-editor-actions {
  margin-top: var(--gap-section);
}

/* ===========================================
   PROJECT ANALYTICS TAB (partials/tabs/project_analytics.html)
   =========================================== */

.tab-docs-extra {
  margin-left: var(--gap-section);
}

.analytics-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-section);
}
.analytics-tab-header h2 {
  font-size: var(--text-lead);
  margin: 0;
}

.analytics-empty-block {
  text-align: center;
  padding: var(--gap-page) var(--gap-section);
  opacity: 0.6;
}

/* ===========================================
   RECEIPT PAGE INLINE FRAGMENTS (pages/receipt.html)
   =========================================== */

.receipt-page .receipt-brand {
  opacity: 0.6;
  font-size: var(--text-note);
}
.receipt-page .receipt-meta {
  text-align: right;
}
.receipt-page .receipt-meta-line {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
}
.receipt-page .receipt-meta-sub {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  opacity: 0.4;
  margin-top: var(--gap-bound);
}
.receipt-page .print-btn {
  margin-top: var(--gap-section);
  font-size: var(--text-note);
}

/* ===========================================
   IMPORT PAGE INLINE FRAGMENTS (dashboards/dashboard-import.html)
   =========================================== */

.import-page .import-preview-label,
.import-page .import-mapping-label,
.import-page .import-progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}
.import-page .import-mapping-label {
  margin-bottom: var(--gap-section);
}
.import-page .import-progress-label {
  font-size: var(--text-note);
}
.import-page .import-start-btn {
  margin-top: var(--gap-section);
}
.import-page .import-history-heading {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-section);
}

/* ===========================================
   SLUG STATUS PARTIAL (partials/slug_status.html)
   =========================================== */

.slug-status {
  font-size: var(--text-note);
}
.slug-status.available { color: var(--success); }
.slug-status.taken { color: var(--danger); }

.slug-suggestions {
  font-size: var(--text-note);
  display: block;
  margin-top: var(--gap-bound);
}
.slug-suggestion-link {
  margin-right: var(--gap-peer);
}

/* ===========================================
   STRIPE DISCLAIMER PAGE (pages/stripe_disclaimer.html)
   =========================================== */

.stripe-disclaimer-page .container {
  max-width: 700px;
  margin: var(--gap-pane) auto;
  padding: 0 var(--gap-page);
}
.stripe-disclaimer-page .stripe-disclaimer-title {
  text-align: center;
}
.stripe-disclaimer-page .tagline {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-page);
  text-align: center;
}
.stripe-disclaimer-page h2 {
  font-size: var(--text-head);
  margin-bottom: var(--gap-pane);
}
.stripe-disclaimer-page .stripe-disclaimer-lead {
  margin-bottom: var(--gap-pane);
  opacity: 0.8;
}
.stripe-disclaimer-page .section { margin-bottom: var(--gap-page); }
.stripe-disclaimer-page .section h3 {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-section);
  font-family: var(--font-mono);
}
.stripe-disclaimer-page .section ul {
  margin: 0;
  padding-left: var(--gap-section);
}
.stripe-disclaimer-page .section li {
  margin-bottom: var(--gap-peer);
  line-height: 1.5;
}
.stripe-disclaimer-page .stripe-disclaimer-fee-lead {
  margin-bottom: var(--gap-section);
}
.stripe-disclaimer-page .fee-example {
  background: var(--surface-page);
  padding: var(--gap-section);
  margin: var(--gap-section) 0;
  font-family: var(--font-mono);
  font-size: var(--text-note);
}
.stripe-disclaimer-page .fee-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-bound) 0;
}
.stripe-disclaimer-page .fee-row.highlight {
  font-weight: bold;
  border-top: 1px solid var(--border);
  margin-top: var(--gap-peer);
  padding-top: var(--gap-peer);
}
.stripe-disclaimer-page .fee-row .zero { color: var(--content); }
.stripe-disclaimer-page .stripe-disclaimer-note {
  font-size: var(--text-note);
  opacity: 0.8;
}
.stripe-disclaimer-page .acceptance {
  background: var(--surface-page);
  padding: var(--gap-section);
  margin: var(--gap-pane) 0;
}
.stripe-disclaimer-page .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-section);
}
.stripe-disclaimer-page .checkbox-group input[type="checkbox"] {
  margin-top: var(--gap-bound);
  flex-shrink: 0;
}
.stripe-disclaimer-page .checkbox-group label {
  line-height: 1.5;
  cursor: pointer;
}
.stripe-disclaimer-page .button-row {
  display: flex;
  gap: var(--gap-section);
  margin-top: var(--gap-pane);
}
.stripe-disclaimer-page .button-row button { flex: 1; }
.stripe-disclaimer-page button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.stripe-disclaimer-page .note {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-top: var(--gap-section);
  text-align: center;
}

/* ===========================================
   LONG-TAIL CLEANUP, shared utilities promoted from the final inline-style sweep.
   Each rule replaces ≥2 inline-style instances across templates.
   =========================================== */

/* Tab-spinner loading indicator (used by 3+ dashboards). */
.tab-spinner-indicator { margin-left: var(--gap-section); }

/* Inline-block secondary action link styled as a button. */
.btn-link {
  display: inline-block;
  padding: var(--gap-peer) var(--gap-section);
  text-decoration: none;
}
.btn-link--sm { padding: var(--gap-peer) var(--gap-section); }

/* Username-availability spinner (wizards + standalone account form). */
.username-spinner { font-size: var(--text-note); }

/* Centered foot-link beneath wizard cards. */
.foot-link--centered { margin-top: var(--gap-section); text-align: center; }

/* Health-page status dots. */
.health-indicator-dot { width: 8px; height: 8px; margin-right: var(--gap-peer); }
.health-error-text { color: var(--danger); }

/* Inline error fragments (login_error, error_fragment) toggle this on. */
.error-message.is-active { display: block; }

/* Cart count badge in nav. */
.cart-badge-count { font-size: var(--text-fine); }

/* Empty-row inside a data table. */
.table-empty-row { text-align: center; opacity: 0.6; }

/* Discover grid: card wrapper + body anchor. */
.discover-grid-card { position: relative; }
.discover-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.discover-filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  cursor: pointer;
  font-size: var(--text-note);
}

/* Tag suggestion list. */
.tag-suggest-label {
  font-size: var(--text-fine);
  opacity: 0.7;
  margin-bottom: var(--gap-peer);
  overflow-wrap: anywhere;
}
.tag-suggest-pill {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: var(--gap-bound) var(--gap-peer);
  font-size: var(--text-fine);
  cursor: pointer;
  margin: var(--gap-bound);
}

/* Dashboard-export header layout + Export-all CTA. */
.dashboard-export-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.export-all-btn {
  white-space: nowrap;
  margin-top: var(--gap-peer);
}

/* Tiny inline action button (admin-metrics, dashboard-item share). */
.dashboard-item-share-btn {
  font-size: var(--text-fine);
  padding: var(--gap-bound) var(--gap-peer);
  opacity: 0.6;
}

/* Monospaced page sub-headers. */
.section-mono-meta {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-pane);
}
/* Email-result single-card page. */
.email-result-wrap {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}

/* Admin lottery form (admin-waitlist). */
.lottery-form {
  display: flex;
  gap: var(--gap-section);
  align-items: flex-end;
}

/* Login screen: "or" divider + passkey button + error slot. */
.login-divider {
  text-align: center;
  margin: var(--gap-pane) 0 var(--gap-section);
  opacity: 0.5;
  font-size: var(--text-note);
}
.login-passkey-btn { width: 100%; }
.login-passkey-error { margin-top: var(--gap-peer); }

/* Upload-progress sibling text (item_audio_upload). */
.upload-speed-text {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-bound);
}

/* Faded "Following" follow-button state. */
.follow-btn.is-selected { opacity: 0.7; }

/* Project blog footer. */
.project-blog-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-page);
  border-top: 1px solid var(--border);
  opacity: 0.6;
}
.project-blog-footer a { color: var(--content); }

/* Compact alert / paragraph margin variants used 2+ times. */

/* Paywall trust line. */
.paywall-trust {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-section);
  line-height: 1.4;
}

/* Confirm-delete: button background already covered by .danger class.
   The wizard step uses `.primary` and inlines the danger background; we just
   change the class instead. No CSS rule needed here. */

/* Paywall-style centered narrow form-group used inside project_paywall. */
.form-group--centered-narrow {
  max-width: 240px;
  margin: var(--gap-section) auto;
}

/* Inline-form margin-left for adjacent pills (collection.html private badge). */
.badge--inline-l { margin-left: var(--gap-peer); }

/* ===== Team page ===== */

.team-page { max-width: 56rem; margin: 0 auto; }
.team-intro {
  font-size: var(--text-body);
  line-height: 1.55;
  margin: 0 0 var(--gap-page);
  opacity: 0.85;
}
.team-section { margin-top: var(--gap-page); }
.team-section + .team-section { margin-top: var(--gap-page); }
.team-card-experience {
  margin: var(--gap-section) 0 var(--gap-peer);
  line-height: 1.5;
}
.team-card-links {
  margin: var(--gap-peer) 0;
  font-size: var(--text-body);
}
.team-card-link { font-weight: 500; }
.team-card-bio {
  margin-top: var(--gap-section);
  border-top: 1px solid var(--border);
  padding-top: var(--gap-section);
}
.team-card-bio > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: var(--text-body);
  list-style: none;
}
.team-card-bio > summary::-webkit-details-marker { display: none; }
.team-card-bio > summary::before {
  content: "+ ";
  display: inline-block;
  width: 1.2em;
  opacity: 0.6;
}
.team-card-bio[open] > summary::before { content: "− "; }
.team-card-bio > p {
  margin-top: var(--gap-section);
  line-height: 1.6;
}

/* ── SyncKit billing panel ──
   Per-app accordion shown inside the SyncKit dashboard tab (both user and
   project levels). The .synckit-billing root carries pricing constants as
   data-attrs that static/synckit-billing.js reads to mirror monthly_price_cents.
*/
.synckit-billing {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--gap-peer) var(--gap-section);
  min-width: 220px;
}
.synckit-billing-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  font-size: var(--text-note);
}
.synckit-billing-toggle { margin-left: auto; color: var(--content-muted); }
.synckit-billing-status {
  display: inline-block;
  padding: 2px var(--gap-peer);
  border-radius: var(--radius-fine);
  font-size: var(--text-fine);
  font-weight: 600;
}
.synckit-billing-status--draft { background: var(--surface-sunken); }
.synckit-billing-status--active { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); color: var(--success); }
.synckit-billing-status--past-due { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
.synckit-billing-status--canceled { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); color: var(--danger); }
.synckit-billing-price { font-weight: 600; }
.synckit-billing-body {
  padding-top: var(--gap-section);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.synckit-billing-section { display: flex; flex-direction: column; gap: var(--gap-peer); }
.synckit-billing-subheading { font-size: var(--text-note); margin: 0; font-weight: 600; }
.synckit-knob-row {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  flex-wrap: wrap;
}
.synckit-knob-row label { min-width: 110px; }
.synckit-knob-row input[type="range"] { flex: 1 1 160px; min-width: 120px; }
.synckit-radio { display: inline-flex; align-items: center; gap: var(--gap-bound); min-width: 0; }
.synckit-billing-summary-line {
  display: flex;
  align-items: baseline;
  gap: var(--gap-peer);
  padding-top: var(--gap-peer);
  border-top: 1px solid var(--border);
}
.synckit-price-preview { font-size: var(--text-lead); font-weight: 600; }
.synckit-billing-actions { display: flex; gap: var(--gap-peer); }
.synckit-billing-manage { flex-direction: row; gap: var(--gap-peer); }
.synckit-billing-status-msg { font-size: var(--text-note); min-height: 1.25em; }
.synckit-billing-status-msg--info { color: var(--content-muted); }
.synckit-billing-status-msg--error { color: var(--danger); }
.synckit-billing-period { margin: 0; }
.synckit-gauge { display: flex; flex-direction: column; gap: 2px; }
.synckit-gauge-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-fine);
}
.synckit-gauge-value { color: var(--content-muted); }

/* ============================================================================
   Carousel: the widget tier's first consumer.

   The markup is no longer written in a template. It comes from a description --
   `crate::quasi::widgets::carousel` says "an ordered set of pictures, called a
   carousel" -- and quasi-webview turns that into a region carrying
   `data-widget="carousel"` with one `.picture` or `.picture-img` per frame.

   So these rules key on the widget name rather than on a hand-written class.
   That is what "a renderer that recognises the name draws it its own way"
   means on this host: the name is the hook, and the stylesheet plus the island
   are the browser's idea of a carousel.

   THE FALLBACK RUNS THE OTHER WAY NOW. This used to render frame one and hide
   the rest, because the controls that reach them are the scripted part -- so
   with JS off, two of three screenshots were unreachable. Now the unenhanced
   page is the whole gallery, stacked in order.

   THE CHROME IS DESCRIBED TOO, as of makeover-layout 0.23.0. The description
   says `Showing::One` -- an ordered set of pictures with one showing -- and
   quasi-webview derives prev/position/next from that, once, for every widget
   there will ever be. Nothing here or in any renderer matches on the name
   "carousel" to get it. The island stopped injecting chrome and now only binds
   what is already on the page; the dot strip and the overlaid arrows are gone.

   The controls are still not shipped live to a reader with no script: makeover
   keeps `.showing` hidden until something sets [data-ready], so the markup no
   longer has to be absent to avoid lying.
   ========================================================================= */

/* Public gallery carousel sections (item + project pages). */
.item-gallery,
.project-gallery {
  margin: var(--gap-pane) 0;
}

/* <mnw-carousel> wraps the described region rather than being it: a custom
   element is what the browser upgrades automatically after an htmx swap, and
   the description emits a plain div because it does not know this host's tag
   prefix. Default display for an unknown element is inline, so say otherwise. */
mnw-carousel {
  display: block;
}

/* The default is ONE frame, which is what a visitor with JavaScript sees, so
   the page is settled from first paint and nothing rearranges on load. Showing
   all three and collapsing them was a 141px -> 58px jump on every load that
   everyone with JS paid; `no-js.css`, loaded from a <noscript>, is what opens
   the stack out for a visitor without scripting.

   This is the one half of the carousel that stays local, and it is host policy
   rather than a gap. makeover's generated sheet collapses the stack on
   [data-ready], which is the honest default for a renderer that cannot know
   whether this page has script: it ships every child and takes them away once
   something binds them. Trading a load-time jump for that is a decision about
   this site's landing page, and <noscript> is a mechanism a generated
   stylesheet has no way to reach.

   No padding-bottom and no position: relative any more. Both were for chrome
   that is gone -- the strip that had to be reserved and the arrows that were
   absolutely positioned over the frame. */
[data-widget="carousel"] > .showing-frame:not(.current) {
  /* respec-ok: the generated rule is the same claim gated on [data-ready], and
     what it cannot express is <noscript>. A renderer that cannot know whether a
     page has script has to ship every child and take them away once something
     binds them; this page collapses from first paint instead and lets no-js.css
     open it back, which is a trade about this landing page rather than about
     the vocabulary. */
  display: none;
}

[data-widget="carousel"] .picture {
  margin: 0;
}

/* Only the corner. `display`, `width`, `height` and the raised fill and bevel
   all come from makeover's own `.picture-img` rule, which layout.css puts on
   every page through crate::shell::head. Restating any of them here is an
   unlayered declaration quietly beating the design system, which is what the
   drift check in build.rs exists to catch -- and did, on the first attempt at
   this file. */
[data-widget="carousel"] .picture-img {
  border-radius: var(--radius-control);
}

/* No colour: makeover's `.picture-caption` already sets it to
   --content-muted, and this said the same thing one layer louder. What is
   local is the centring and the mono face, which are this widget's look and
   not a claim about what a caption is. */
[data-widget="carousel"] .picture-caption {
  margin-top: var(--gap-group);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  text-align: center;
}

/* Landing showcase only: close the top edge.

   The three landing frames are screenshots of this site, so the parchment they
   were shot on is the parchment they sit on, and a 1px border between two
   identical grounds is not an edge anyone sees.

   THE ELEVATION IS GONE, and that is the point of the port. This carried
   `box-shadow: 0 4px 10px var(--elevation), 0 14px 36px var(--elevation)`,
   which is the defect `c0b63ea9` names: in-flow depth is a bevel and elevation
   is for what sits *over* the page. It survived this long because it was
   invisible -- an unlayered declaration on the same class makeover sets, so it
   beat the design system's bevel silently. The drift check in build.rs found it
   the moment the frame became a described `.picture-img`.

   So the frame is raised by makeover's bevel now, from `Depth::Raised`, and
   what is left here is the one thing that was never about depth: a stronger
   border colour, because a shadow falling downward does nothing for the top
   edge and the top edge is where a parchment screenshot dissolves into a
   parchment page. */
.landing-showcase .picture-img {
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   Enhanced. Everything below needs the island, and the island sets
   [data-ready] once it has upgraded and bound the controls.
   --------------------------------------------------------------------------- */

[data-widget="carousel"][data-ready]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The control row is makeover's `.showing`, rendered by the description rather
   than injected here, and it needs no rules: it is two `.button`s and a muted
   readout, all three of which the generated sheet already styles. What used to
   sit here was `.carousel-nav`, `.carousel-prev`, `.carousel-next`,
   `.carousel-dots` and `.carousel-dot` -- 60 lines for chrome this host drew by
   hand because nothing could describe it.

   The arrows were absolutely positioned over the frame, which Max called
   cluttered and which a terminal cannot honestly do at all; the dots had no
   form past a handful of frames, and two of the three galleries here are
   creator uploads of arbitrary length. Both halves of that were the same half. */


/* ---------------------------------------------------------------------------
   Custom page editor (dashboard/custom_page_editor.html)
   Moved out of an inline <style> block per the extract-shared-CSS rule.
   --------------------------------------------------------------------------- */
.cp-editor { max-width: 1200px; margin: 0 auto; padding: var(--gap-section); }
.cp-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-section); flex-wrap: wrap; }
.cp-editor-actions { display: flex; gap: var(--gap-section); }
.cp-intro { color: var(--content-muted); margin: var(--gap-bound) 0 var(--gap-section); }
/* Form beside preview. A code textarea below about 380px is not editable, so
   that number is the pane's, not the viewport's, and the pair stacks itself. */
.cp-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gap-section); align-items: start; }
.cp-editor-form { display: flex; flex-direction: column; gap: var(--gap-peer); }
.cp-code { width: 100%; min-height: 220px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-note); line-height: 1.4; resize: vertical; }
.cp-editor-buttons { display: flex; align-items: center; gap: var(--gap-section); margin-top: var(--gap-peer); }
.cp-preview-pane { border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.cp-preview-bar { font-size: var(--text-fine); padding: var(--gap-bound) var(--gap-group); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.cp-preview { width: 100%; height: 520px; border: 0; background: var(--primary-light); display: block; }
.cp-blocked { margin-top: var(--gap-section); }
.cp-blocked-title { font-weight: 600; margin-bottom: var(--gap-peer); }
.cp-blocked-empty { color: var(--content-muted); }
.cp-blocked-list { list-style: none; padding: 0; margin: 0; }
.cp-blocked-list li { padding: var(--gap-peer) 0; border-bottom: 1px solid var(--border); font-size: var(--text-note); display: flex; gap: var(--gap-peer); flex-wrap: wrap; align-items: baseline; }
.cp-blocked-kind { font-weight: 600; }
.cp-blocked-loc { color: var(--content-muted); }
.cp-blocked-val { background: var(--surface-sunken); padding: 0 var(--gap-bound); }
.cp-status.cp-ok { color: var(--success); }
.cp-status.cp-err { color: var(--warning); }
.cp-reset { margin-top: var(--gap-pane); }
.cp-locked-banner { margin: var(--gap-peer) 0 var(--gap-section); padding: var(--gap-section); border: 1px solid var(--warning); border-radius: var(--radius-control); background: color-mix(in oklch, var(--warning) 12%, var(--surface-page)); }
/* Layout-shift fix (audit Run 17 Frontend): reserve space for a cover image
   whose class didn't already set an aspect-ratio / fixed size. */
.proj-image-preview img { width: 120px; height: 120px; object-fit: cover; }

/* ---- Discover search: how well a result matched -------------------------
   Two surfaces, doing two different jobs (db/discover.rs, migration 179).

   .results-tier-break is the single heading, and it sits exactly where the
   claim it makes turns true: above it every row holds at least one word the
   searcher typed, below it none of them do. .row-match-note is the per-row
   half, "Matched 3 of 5 words", because coverage varies row to row and one
   page can hold a 4-of-5 beside a 1-of-5.

   Both are deliberately quiet. They explain a result the reader is already
   looking at; competing with the title would make search feel like it is
   apologising. Muted colour and small type, no accent, no border of their own
   beyond the rule that separates the tiers. */
.results-tier-break {
  display: flex;
  align-items: baseline;
  gap: var(--gap-peer);
  flex-wrap: wrap;
  padding: var(--gap-section) var(--gap-section) var(--gap-peer);
  border-top: 1px solid var(--border);
  background: var(--surface-page);
}

/* .results-table sets border-top: none and lets .table-row draw the rules, so
   the break supplies its own top border. Mid-list that sits against the
   preceding row's border-bottom and reads as one heavier 2px rule, which is
   wanted here: it is a section change, not another row. At the top of an
   all-fuzzy page there is no preceding row, and the same border supplies the
   table's missing top edge. */
.results-tier-label {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--text-fine);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--content);
}

.results-tier-hint {
  font-size: var(--text-fine);
  color: var(--content-muted);
}

/* The grid is `repeat(auto-fill, minmax(280px, 1fr))`, so without this the
   heading takes one card's slot and the tiers interleave visually. */
.results-container.results-grid .results-tier-break {
  grid-column: 1 / -1;
  padding-left: 0;
  padding-right: 0;
  background: none;
}

/* In list view this rides inside .row-info, under the creator line, not as
   another child of .table-row-link: that is a fixed five-column grid and a
   sixth child would invent a column and shift every row that carried one. */
.row-match-note {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--content-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid cards have room to breathe; give the note its own line under the meta. */
.grid-card .row-match-note {
  display: block;
  margin-top: var(--gap-bound);
}

/* The narrow list layouts drop columns rather than wrap, and .row-info is the
   column that survives. Keeping the note there would crowd the title on a
   phone, where the tier heading above still carries the important half. */
@media (max-width: 599px) {
  .table-row .row-match-note { /* respec-ok: hiding a cell at a breakpoint. The
     generated sheet describes one `.table-row`; which of its children survive a
     narrow viewport is this page's call, not the design system's. */ display: none; }
}

}