/* ============================================================================
   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-4, .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 + .container--narrow / --medium / --wide
       .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 + variants (-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.is-selected

     CONTROL MODIFIERS                                    (compose onto buttons/inputs)
       .small / .btn-compact / .btn-link / .btn-tiny      — button sizes
       .primary / .secondary / .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;
}

:root {
  /* Typography (three-tier system) */
  --font-heading: "Young Serif", serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-body: "Lato", sans-serif;

  /* Brand colors per style guide */
  --background: #ede8e1;
  --detail: #3d3530;
  --highlight: #6c5ce7;
  --light-background: #f4f0eb;

  /* Extended palette */
  --surface-muted: #ddd7c5;
  --surface-alt: #ebe7db;
  --surface-border: #d0cbb8;
  --surface-raised: #f5f0eb;
  --border: #d0cbb8;
  --text-muted: #8a8480;
  --input-background: #e2dad2;
  --overlay: rgba(0, 0, 0, 0.5);

  /* Semantic colors */
  --primary-dark: #000000;
  --primary-light: #ffffff;
  --success: #27ae60;
  --success-bg: #e8fde8;
  --warning: #8b7355;
  --warning-bg: #fff3cd;
  --warning-border: #ffc107;
  --danger: #c0392b;
  --danger-bg: #fde8e8;
  --error: #d62828;
  --error-bg: #fef2f2;
  --stripe: #635BFF;

  /* Health status indicators */
  --health-ok: #22c55e;
  --health-warn: #f59e0b;
  --health-error: #ef4444;
  --health-unknown: #9ca3af;

  /* Focus ring color for accessibility */
  --focus-ring: #6c5ce7;
  --highlight-faint: rgba(108, 92, 231, 0.08);

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

  /* Aliases used by git browser */
  --secondary-bg: #f4f0eb;
  --text: #3d3530;

  /* Legacy aliases — defined to end silent var() fallback failures
     in inline-styled templates. Consolidate during phase 2.12. */
  --accent: var(--highlight);
  --accent-color: var(--highlight);
  --border-color: var(--border);
  --background-color: var(--background);

  /* Spacing scale (charter: docs/design-system.md) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius scale */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-round: 50%;

  /* Shadow scale.
     --shadow-1/-2/-3 are blurred elevation (true floating: popovers,
     dropdowns, modals). --shadow-raised/-card/-inset are hard-offset
     "sticker on paper" depth for everyday affordance — buttons feel
     pressable, cards feel layered, inputs feel recessed. Pick by role:
     blurred = floats over page, hard-offset = is part of page. */
  --shadow-edge:      #bbb;  /* heavier — pressable (button, tab) */
  --shadow-edge-soft: #ddd;  /* lighter — surface (card, input) */
  --shadow-raised: 2px 2px var(--shadow-edge);
  --shadow-card:   2px 2px var(--shadow-edge-soft);
  --shadow-inset:  inset 2px 2px var(--shadow-edge-soft);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

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

/* Padded page layout for most content pages */
.padded-page {
  padding: 1.5rem;
}

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

.centered-page h1 {
  font-size: 4.5rem;
}

.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(--detail);
  text-align: center;
  font-size: 2.5rem;
}

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

/* 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(--detail);
  text-align: center;
  font-size: 2.5rem;
}

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

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

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

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

a:hover {
  text-decoration: underline;
}

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

/* 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: 2rem;
}
.container--narrow { max-width: 600px; }
.container--medium { max-width: 800px; }
.container--wide   { max-width: 900px; }

/* 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(--detail);
  background: var(--light-background);
  padding: 6px 12px;
  border: 1px solid var(--detail);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, transform 0.05s ease;
}

button:hover {
  box-shadow: 3px 3px var(--shadow-edge);
}

button:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-primary {
  background: var(--primary-dark);
  color: var(--primary-light);
  border: none;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, transform 0.05s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-primary:hover {
  box-shadow: 3px 3px var(--shadow-edge);
  text-decoration: none;
}

.btn-primary:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-secondary {
  background: var(--surface-muted);
  color: var(--detail);
  border: none;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, transform 0.05s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-secondary:hover {
  box-shadow: 3px 3px var(--shadow-edge);
  text-decoration: none;
}

.btn-secondary:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-danger {
  background: var(--danger);
  color: var(--primary-light);
  border: none;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.1s ease, transform 0.05s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-danger:hover {
  box-shadow: 3px 3px var(--shadow-edge);
  text-decoration: none;
}

.btn-danger:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* 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: 1rem 2.25rem;
  font-size: 1.125rem;
}

.btn--icon {
  padding: var(--space-1) var(--space-2);
  font-size: 0.85rem;
  line-height: 1;
  min-width: 1.75rem;
}

.btn--link {
  background: none;
  color: var(--detail);
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  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: none;
  transform: none;
}

/* Menu / disclosure openers — buttons whose job is to reveal a menu,
   filter panel, expander, or popover. They navigate UI, they don't
   commit anything, so they override the base `button` depth-lift back
   to flat. 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: none;
  transform: none;
}

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

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.form-container {
  max-width: 400px;
  background: var(--light-background);
  padding: 2rem;
}

label {
  font-family: var(--font-mono);
  color: var(--detail);
  font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--input-background);
  border: 1px solid var(--border);
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--detail);
  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(--highlight);
}

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

select {
  cursor: pointer;
}

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

input[type="submit"]:hover,
form button:hover {
  background: var(--background);
  box-shadow: 3px 3px var(--shadow-edge);
}

input[type="submit"]:active,
form button:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hint {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 0.5rem;
}

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

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

.field-error {
  font-size: 0.85rem;
  color: var(--error);
  margin-top: var(--space-2);
}

/* Loading skeleton placeholder.
   Canonical: `partials/_ui.html` ui::loading_skeleton macro. */
.loading-skeleton {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.loading-skeleton--row {
  height: 1.25rem;
  margin: var(--space-2) 0;
}

.loading-skeleton--card {
  height: 8rem;
  margin: var(--space-3) 0;
}

.loading-skeleton--list .loading-skeleton--row + .loading-skeleton--row {
  margin-top: var(--space-2);
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}
/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
/* ===========================================
   TABS
   =========================================== */

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

.tab {
  background: var(--surface-muted);
  color: var(--detail);
  border: none;
  padding: 0.75rem 2rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  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,
    opacity 0.2s ease;
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab.is-selected {
  background: var(--light-background);
  opacity: 1;
}

.tab:hover {
  opacity: 1;
}

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

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

.tab-overflow-menu .tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  opacity: 0.7;
}

.tab-overflow-menu .tab:hover {
  opacity: 1;
}

.tab-overflow-menu .tab.is-selected {
  opacity: 1;
}

.tab-content {
  display: none;
  background: var(--light-background);
  padding: 2rem;
}

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

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

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-family: var(--font-body);
  margin-bottom: 1rem;
}

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

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: normal;
}

.data-table th.sortable {
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.data-table th.sortable:hover {
  background: var(--border);
}

.data-table th.sortable::after {
  content: " ^";
  opacity: 0.3;
  font-size: 0.8rem;
}

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

.data-table tbody tr:nth-child(odd) {
  background: var(--surface-alt);
}

.data-table tbody tr:nth-child(even) {
  background: var(--light-background);
}

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

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

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

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

.compact-table thead tr {
  font-size: 0.85rem;
  opacity: 0.7;
}

.compact-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.compact-table td {
  padding: 0.75rem;
}

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

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

.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.8rem; }
.muted { opacity: 0.7; }
.dimmed { opacity: 0.6; }
.dimmer { opacity: 0.5; }
.meta { font-size: 0.85rem; 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 (mapped to --space-* scale).
   mt = margin-top, mb = margin-bottom, my = vertical, mx = horizontal,
   m0 = margin reset. Use sparingly; prefer parent layout primitives. */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

/* 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: 0.25rem 0.6rem; font-size: 0.8rem; }

/* 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: 2rem; opacity: 0.6; }
.empty-state--compact { padding: 0.75rem; font-size: 0.9rem; }
.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: 0.8rem; margin-top: 0.5rem; opacity: 0.6; }

.tab-docs {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

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

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

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

.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--primary-dark);
  color: var(--primary-light);
}

.badge-success,
.badge.active,
.badge.complete {
  background: var(--success);
}

.badge-warning,
.badge.pending,
.badge.draft {
  background: var(--warning);
}

.badge-danger,
.badge.failed {
  background: var(--danger);
}

.badge.current {
  background: var(--success);
}

.badge.suppressed {
  background: var(--warning);
}

.badge.suspended {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge.free {
  background: var(--highlight);
  color: var(--primary-light);
}

/* AI disclosure tier badges. See site-docs/public/about/generative-ai.md.
   Colors track the brand palette — violet for the cleanest case,
   warm-tan for disclosed-AI-use, charcoal for primarily-generated.
   Deliberately not red/yellow/green; this is disclosure, not alarm. */
.badge.ai-tier {
  letter-spacing: 0.02em;
}
.badge.ai-tier-handmade {
  background: var(--highlight);
  color: var(--primary-light);
}
.badge.ai-tier-assisted {
  background: var(--warning);
  color: var(--primary-light);
}
.badge.ai-tier-generated {
  background: var(--detail);
  color: var(--primary-light);
}

.item-ai-tier {
  margin: 0.25rem 0 0.75rem;
}

.ai-disclosure {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface-muted);
  border-left: 3px solid var(--warning);
}
.ai-disclosure-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.ai-disclosure-text {
  font-size: 0.9rem;
  color: var(--detail);
}

/* 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: 0.75rem;
  color: var(--text-muted);
}

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

.tag {
  display: inline-block;
  background: var(--primary-dark);
  color: var(--primary-light);
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  margin-right: 0.25rem;
}

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

.tag-input .tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

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

/* ===========================================
   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).
   Legacy class names (.stat-card, .analytics-card, .feature-card, .tier-card,
   .use-case-card) are aliased to these recipes below — templates migrate at
   their own pace. */
.card {
  background: var(--light-background);
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: var(--detail);
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: background 0.2s ease;
}

.card:hover {
  background: var(--surface-muted);
}

/* Muted card primitive. */
.card-muted {
  background: var(--surface-muted);
  padding: 1.5rem;
}
/* Bordered card (.card--bordered alias for .feature-card, .tier-card, .use-case-card, .fork-card). */
.card--bordered,
.feature-card,
.tier-card,
.use-case-card,
.fork-card {
  background: transparent;
  padding: 1rem;
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.use-case-card { padding: 1.25rem; }
.fork-card { padding: 1.5rem; display: flex; flex-direction: column; }

.card-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
}

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

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

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

.stats-row {
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.stat-box {
  background: var(--light-background);
  padding: 1rem 1.5rem;
  flex: 1;
  text-align: center;
}

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

.stat-box .label {
  font-size: 0.8rem;
  opacity: 0.7;
}

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

.stat-label {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.5rem;
}

.stat-change {
  font-size: 0.85rem;
  opacity: 0.6;
}

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

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

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

.filter-bar {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar > .label {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-right: 0.5rem;
}

.filter-bar button {
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}

/* ===========================================
   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: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.discussion-section h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.discussion-section p {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.discussion-section a {
  color: var(--highlight);
  text-decoration: none;
  font-size: 0.875rem;
}

/* ===========================================
   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-muted);
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.info-box h3 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
}

.info-box ul {
  list-style: none;
  margin-top: 0.5rem;
}

.info-box li {
  padding: 0.25rem 0;
}

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

.warning-box {
  background: var(--warning);
  color: var(--primary-light);
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.error-message {
  font-family: var(--font-mono);
  color: var(--error);
  background: var(--error-bg);
  padding: 12px;
  border: 1px solid var(--error);
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  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(--space-6);
  background: var(--background);
}

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

.error-status {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.error-page-message {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--detail);
  margin-bottom: var(--space-6);
}

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

.error-actions a.primary,
.error-actions a.secondary {
  text-decoration: none;
}

/* 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(--space-6);
}

.buy-page .buy-card {
  background: var(--light-background);
  border-radius: 12px;
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-3);
}

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

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

.buy-page .no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.2;
}

.buy-page h1 {
  text-align: left;
  font-size: 1.4rem;
  margin-bottom: var(--space-1);
}

.buy-page .creator {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: var(--space-5);
}

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

.buy-page .price {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  margin-bottom: var(--space-5);
}

.buy-page .description {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: var(--space-5);
  max-height: 4.5em;
  overflow: hidden;
}

.buy-page .buy-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--highlight);
  color: var(--primary-light);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  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(--space-1);
  margin-bottom: var(--space-4);
}

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

.buy-page .note {
  font-size: 0.8rem;
  opacity: 0.5;
  text-align: center;
  margin-top: var(--space-4);
}

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

.buy-page .footer {
  text-align: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  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(--space-5);
}

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

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

.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(--space-4); }
.section-panel ul,
.section-panel ol {
  margin-left: var(--space-5);
  margin-bottom: var(--space-4);
}
.section-panel li { margin-bottom: var(--space-2); }
.section-panel h1,
.section-panel h2,
.section-panel h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.section-panel pre {
  background: var(--surface-muted);
  padding: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.section-panel code { font-size: 0.9rem; }

/* 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(--space-6);
  margin-bottom: var(--space-6);
}

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

.item-page .item-title {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.item-page .item-creator {
  font-size: 1rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

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

.item-page .item-price {
  font-size: 2.5rem;
  margin-bottom: var(--space-5);
}

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

.item-page .meta-item { font-size: 0.9rem; }
.item-page .meta-label { opacity: 0.7; margin-bottom: var(--space-1); }
.item-page .meta-value { font-weight: bold; }

.item-page .item-tags { margin-bottom: var(--space-5); }

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

.item-page .btn-primary {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: 1.1rem;
}

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

.item-page .payment-note {
  font-size: 0.85rem;
  opacity: 0.6;
  text-align: center;
  margin-top: var(--space-4);
}

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

.item-page .bundle-child-type {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  background: var(--surface-muted);
  white-space: nowrap;
}

.item-page .bundle-child-title { flex: 1; }
.item-page .bundle-child-title a { color: var(--detail); }
.item-page .bundle-child-price { font-size: 0.9rem; opacity: 0.7; }

.item-page .bundle-notice {
  background: var(--surface-muted);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  text-align: center;
}

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

.item-page .item-description p { margin-bottom: var(--space-4); text-align: left; }
.item-page .item-description ul { margin-left: var(--space-5); margin-bottom: var(--space-4); }
.item-page .item-description li { margin-bottom: var(--space-2); }

.item-page .features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.item-page .version-number { font-size: 1.1rem; }
.item-page .item-footer {
  margin-top: 3rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: 0.85rem;
}

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

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

@media (max-width: 480px) {
  .item-page .item-title { font-size: 1.5rem; }
  .item-page .item-price { font-size: 1.8rem; }
  .item-page .item-meta { grid-template-columns: 1fr; gap: var(--space-2); }
  .item-page .item-media,
  .item-page .item-details { padding: var(--space-4); }
  .item-page .item-description { padding: var(--space-4); }
  .item-page .item-description h2 { font-size: 1.2rem; }
  .item-page .purchase-box { padding: var(--space-4); }
}

/* 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: 3rem; }
.project-page .store-title { font-size: 3rem; margin-bottom: var(--space-2); }
.project-page .store-meta {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}
.project-page .store-meta a { color: var(--detail); }
.project-page .store-description {
  font-size: 1.1rem;
  max-width: 800px;
  margin-bottom: var(--space-6);
  text-align: left;
}
.project-page .store-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.project-page .items-section { margin-bottom: 3rem; }

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

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

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

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

.project-page a.item-thumbnail:hover { opacity: 0.5; }

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

.project-page .item-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-weight: bold;
}

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

.project-page .item-meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-4);
}

.project-page .item-tags { margin-bottom: var(--space-4); }

.project-page .item-description {
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  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: 1.3rem; }
.project-page .item-stats { font-size: 0.85rem; opacity: 0.6; }

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

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

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

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

.project-page .tiers-section { margin-bottom: 3rem; }

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

.project-page .tier-card {
  background: var(--light-background);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.project-page .tier-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}

.project-page .tier-price {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.project-page .tier-description {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: var(--space-5);
  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: 0.85rem;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-muted);
  text-align: center;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .project-page .store-title { font-size: 2rem; }
  .project-page .items-grid { grid-template-columns: 1fr; }
  .project-page a.item-thumbnail { height: 200px; }
  .project-page .store-description { font-size: 1rem; }
  .project-page .tiers-grid { grid-template-columns: 1fr; }
}

/* 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(--space-5);
  margin-bottom: var(--space-6);
  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: 2rem;
  margin-bottom: var(--space-1);
}

/* 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: 0.95rem;
  opacity: 0.7;
  margin-bottom: var(--space-4);
  text-align: center;
}

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

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

/* 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: 1.5rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.library-page .download-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.6rem 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: 0.9rem;
}

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

.library-page .download-size {
  font-size: 0.85rem;
  opacity: 0.6;
  min-width: 5em;
  text-align: right;
}

.library-page .download-notice {
  background: var(--surface-muted);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  font-size: 0.85rem;
  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: 1.1rem;
  margin-bottom: var(--space-4);
}

.library-page .library-section h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

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

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

.library-page .bundle-child-type {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  background: var(--surface-muted);
  white-space: nowrap;
}

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

.library-page .item-footer {
  margin-top: 3rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: 0.85rem;
}

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

@media (max-width: 600px) {
  .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: 3rem 1.5rem 5rem;
}

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

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

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

.article-page .author-name {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--detail);
}

.article-page .author-name a {
  color: inherit;
  text-decoration: none;
}

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

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

.article-page .article-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: var(--space-5);
  color: var(--detail);
  text-align: left;
}

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

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

.article-page .article-body p { margin-bottom: var(--space-5); }

.article-page .article-body h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: normal;
  margin-top: 3rem;
  margin-bottom: var(--space-4);
  color: var(--detail);
  text-align: left;
}

.article-page .article-body h2 {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: normal;
  margin-top: 3rem;
  margin-bottom: var(--space-4);
  color: var(--detail);
}

.article-page .article-body h3 {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: normal;
  margin-top: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--detail);
}

.article-page .article-body blockquote {
  border-left: 3px solid var(--highlight);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--text-muted);
}

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

.article-page .article-body li { margin-bottom: var(--space-2); }

.article-page .article-body a {
  color: var(--highlight);
  text-decoration: underline;
  text-decoration-color: rgba(108, 92, 231, 0.4);
  text-underline-offset: 2px;
}

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

.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-muted);
  padding: 0.125rem 0.375rem;
  font-size: 0.9em;
}

.article-page .article-body pre {
  background: var(--surface-muted);
  padding: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

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

.article-page .article-body hr {
  border: none;
  text-align: center;
  margin: 3rem 0;
}

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

.article-page .article-footer {
  margin-top: 4rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.article-page .author-bio {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--light-background);
}

.article-page .author-bio .author-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  flex-shrink: 0;
}

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

.article-page .author-bio-name {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}

.article-page .author-bio-name a {
  color: inherit;
  text-decoration: none;
}

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

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

.article-page .article-tag {
  font-family: var(--font-mono);
  background: var(--surface-muted);
  color: var(--detail);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  text-decoration: none;
}

.article-page .text-reader-footer {
  font-family: var(--font-mono);
  text-align: center;
  padding: var(--space-6);
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.article-page .text-reader-footer a {
  color: var(--detail);
  text-decoration: none;
}

.article-page .text-reader-footer a:hover { text-decoration: underline; }

/* Blog-specific: nav crumb above the article. */
.article-page .blog-nav {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin-bottom: var(--space-6);
}

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

@media (max-width: 600px) {
  .article-page .article-title { font-size: 2rem; }
  .article-page .article-deck { font-size: 1.125rem; }
  .article-page .article-body { font-size: 1rem; }
}

/* 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(--space-6);
}

.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(--space-5);
  margin-bottom: var(--space-6);
}

.health-page .health-card {
  background: var(--surface-muted);
  padding: var(--space-5);
}

.health-page .health-card h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

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

.health-page .status-ok { background: var(--health-ok); }
.health-page .status-warn { background: var(--health-warn); }
.health-page .status-error { background: var(--health-error); }
.health-page .status-unknown { background: var(--health-unknown); }

.health-page .health-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: 0.85rem;
}

.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: 1rem;
  margin: var(--space-6) 0 var(--space-4);
  padding-bottom: var(--space-2);
  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(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.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(--health-ok); }
.health-page .test-fail { color: var(--health-error); }
.health-page .summary-bar {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-muted);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

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

.health-page .timestamp {
  font-size: 0.8rem;
  opacity: 0.6;
  text-align: right;
  margin-top: var(--space-6);
}

.health-page details.check-list {
  background: var(--light-background);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

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

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

.health-page details.check-list summary::before {
  content: "▶";
  font-size: 0.6rem;
  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(--space-4);
}
/* 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(--space-5);
  font-size: 0.9rem;
  opacity: 0.7;
}

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

.import-page .form-group { margin-bottom: var(--space-5); }

.import-page .form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: var(--space-2);
}

.import-page .form-group select,
.import-page .form-group input[type="file"] {
  width: 100%;
  padding: var(--space-2);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  background: var(--background);
}

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

.import-page .csv-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

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

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

.import-page .column-mapping { margin-top: var(--space-4); }

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

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

.import-page .mapping-row select {
  flex: 1;
  padding: 0.3rem;
  font-size: 0.85rem;
}

.import-page .progress-stats {
  display: flex;
  gap: var(--space-6);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

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

.import-page .import-result {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}

.import-page .import-result.success { background: var(--success-bg); }
.import-page .import-result.error { background: var(--error-bg); }

.import-page .error-log {
  margin-top: var(--space-4);
  padding: var(--space-2);
  background: var(--surface-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

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

.import-page .history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

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

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

.import-page .status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

.import-page .status-badge.completed { color: var(--success); }
.import-page .status-badge.processing { color: var(--highlight); }
.import-page .status-badge.failed { color: var(--danger); }
.import-page .status-badge.pending { opacity: 0.6; }

.import-page .import-note {
  background: var(--surface-muted);
  padding: var(--space-4);
  margin-top: var(--space-6);
  font-size: 0.9rem;
}

.import-page .import-note h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

/* 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(--space-5);
  margin-bottom: var(--space-6);
}

.delete-account-page .warning-box h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.delete-account-page .warning-box ul {
  margin: var(--space-2) 0 0 var(--space-5);
  font-size: 0.9rem;
}

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

.delete-account-page .export-prompt {
  background: var(--surface-muted);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.delete-account-page .export-prompt h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.delete-account-page .export-prompt p {
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}

.delete-account-page .delete-form {
  background: var(--light-background);
  padding: var(--space-5);
}

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

.delete-account-page .delete-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.delete-account-page .delete-form .hint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: var(--space-1);
}

.delete-account-page .delete-form input[type="text"] {
  width: 100%;
  padding: var(--space-3);
  font-size: 1rem;
  border: 2px solid var(--border);
  background: var(--input-background);
}

.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(--space-5);
  font-size: 0.9rem;
  opacity: 0.7;
}

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

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

.delete-account-page .form-status { font-size: 0.9rem; }
.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(--space-4);
}

.export-page .export-card {
  background: var(--light-background);
  padding: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

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

.export-page .export-card-title {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.export-page .export-card-desc {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: var(--space-2);
}

.export-page .export-card-meta {
  font-size: 0.8rem;
  opacity: 0.6;
}

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

.export-page .export-note {
  background: var(--surface-muted);
  padding: var(--space-4);
  margin-top: var(--space-6);
  font-size: 0.9rem;
}

.export-page .export-note h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

.export-page .back-link {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
  opacity: 0.7;
}

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

.export-page .export-status {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

.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(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.receipt-page .receipt-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: 0.95rem;
}

.receipt-page .receipt-row.total {
  font-weight: bold;
  font-size: 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

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

.receipt-page .receipt-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  opacity: 0.6;
}

.receipt-page .back-link {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
  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: 2.5rem; margin-bottom: var(--space-2); }
.fan-plus-page h2 { font-size: 1.5rem; margin-top: var(--space-6); margin-bottom: var(--space-4); }

.fan-plus-page .fan-plus-section { margin-bottom: var(--space-6); line-height: 1.7; }
.fan-plus-page .fan-plus-section ul { padding-left: var(--space-5); margin: var(--space-3) 0; }
.fan-plus-page .fan-plus-section li { margin-bottom: var(--space-2); }

.fan-plus-page .price-callout {
  font-size: 1.3rem;
  font-family: var(--font-mono);
  margin: var(--space-5) 0;
}

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

.fan-plus-page .subscribe-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--highlight);
  color: var(--primary-light);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  font-family: var(--font-mono);
}

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

.fan-plus-page .status-box {
  padding: var(--space-5);
  background: var(--light-background);
  margin: var(--space-5) 0;
}

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

.fan-plus-page .success-banner {
  padding: var(--space-4) var(--space-5);
  background: var(--success-bg);
  margin-bottom: var(--space-5);
  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(--space-6) auto;
  padding: 0 var(--space-6);
}

.purchase-page .tagline {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-6);
  text-align: center;
}

.purchase-page .checkout-box { margin-bottom: var(--space-5); }

.purchase-page h2 { font-size: 1.8rem; margin-bottom: var(--space-2); }

.purchase-page .step-indicator {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: var(--space-5);
}

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

.purchase-page .item-thumbnail {
  width: 120px;
  height: 120px;
  background: var(--surface-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.3;
}

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

.purchase-page .item-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-weight: bold;
}

.purchase-page .item-creator {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-4);
}

.purchase-page .item-creator a { color: var(--detail); }
.purchase-page .item-description { font-size: 0.9rem; opacity: 0.8; }

.purchase-page .price-breakdown {
  background: var(--background);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.purchase-page .price-breakdown h2 { font-size: 1.1rem; margin-bottom: var(--space-4); }

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

.purchase-page .price-row:last-child {
  border-bottom: none;
  margin-top: var(--space-2);
  font-size: 1.2rem;
  padding-top: var(--space-4);
  border-top: 2px solid var(--border);
}

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

.purchase-page .payment-section { margin-bottom: var(--space-5); }
.purchase-page .payment-section h2 { font-size: 1.1rem; margin-bottom: var(--space-4); }

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

.purchase-page .security-note {
  font-size: 0.85rem;
  opacity: 0.6;
  text-align: center;
  margin-top: var(--space-4);
}

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

.purchase-page .price-breakdown-note {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  opacity: 0.6;
}

.purchase-page .creator-breakdown {
  background: var(--background);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
}
.purchase-page .creator-breakdown h2 {
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
  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(--space-2);
  padding-top: var(--space-2);
  /* override .price-row:last-child upsize */
  font-size: inherit;
  border-bottom: none;
}
.purchase-page .creator-breakdown .platform-fee-amount { color: var(--detail); }
.purchase-page .creator-breakdown-note {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  opacity: 0.6;
}

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

.purchase-page .pending-checkout {
  margin-bottom: var(--space-5);
  background: var(--surface-muted);
  padding: 1rem 1.25rem;
}
.purchase-page .pending-checkout p { margin: 0 0 var(--space-3); }
.purchase-page .pending-checkout p.is-sub {
  font-size: 0.9rem;
  opacity: 0.8;
}
.purchase-page .pending-checkout form { margin: 0; }

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

.purchase-page .cart-alt-link {
  text-align: center;
  margin-top: var(--space-3);
  font-size: 0.85rem;
  opacity: 0.7;
}
.purchase-page .guest-hint {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: var(--space-3);
  text-align: center;
}
.purchase-page .guest-login-prompt {
  font-size: 0.8rem;
  margin-top: var(--space-2);
  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: 0.85rem;
  opacity: 0.7;
  margin: 0 0 var(--space-2);
}

/* 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(--space-2);
  font-size: 0.85rem;
}
.field-status.success, .save-status.success { color: var(--success); }
.field-status.error,   .save-status.error   { color: var(--error); }
.field-status.saving,  .save-status.saving  { opacity: 0.6; }

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

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

.subscription-note p {
  opacity: 0.7;
  font-size: 0.9rem;
}

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

/* "Pages" disclosure (project-level markdown sections). */
.pages-toggle { margin-top: var(--space-6); }
.pages-toggle > summary { cursor: pointer; }
.pages-toggle > summary h2 { display: inline; }
.pages-intro {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0.75rem 0 var(--space-4);
}

/* 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: 0.75rem; opacity: 0.6; }
.psection-row-length { font-size: 0.8rem; opacity: 0.6; }

.psection-edit-btn,
.psection-del-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.psection-add-details { margin-top: var(--space-4); }
.psection-add-details > summary {
  cursor: pointer;
  font-size: 0.95rem;
}
.psection-add-fields { margin-top: var(--space-3); }

.psection-edit-modal {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-muted);
}
.psection-edit-actions {
  display: flex;
  gap: var(--space-2);
}

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

.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.cart-empty-hint {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

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

/* Per-seller group card. */
.cart-group { margin-bottom: var(--space-6); }
.cart-group-title { margin-bottom: 0.25rem; }
.cart-group-count {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: var(--space-4);
}

/* PWYW editable price cell. */
.cart-pwyw-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
.cart-pwyw-symbol { font-size: 0.9rem; }

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

/* Bottom summary row of each seller group. */
.cart-group-summary {
  margin-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cart-subtotal {
  font-family: var(--font-heading);
  font-size: 1.1rem;
}
.cart-fee-line {
  font-size: 0.85rem;
  opacity: 0.6;
}
.cart-savings {
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 0.25rem;
}
.cart-stripe-not-ready {
  font-size: 0.9rem;
  opacity: 0.6;
}

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

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

/* 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(--space-3);
  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(--space-4); }
.profile-domain-status {
  margin-left: var(--space-2);
}
.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(--space-2);
  margin-bottom: var(--space-2);
}
.dns-row:last-of-type { margin-bottom: 0; }
.dns-row-label {
  font-size: 0.8rem;
  opacity: 0.7;
  min-width: 70px;
}
.dns-row-value {
  font-size: 0.85rem;
  flex: 1;
}
.dns-row-copy {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
}
.profile-domain-actions {
  display: flex;
  gap: var(--space-3);
}
.profile-domain-result { margin-top: var(--space-3); }
.profile-domain-lead {
  font-size: 0.9rem;
  opacity: 0.8;
}
.profile-domain-add-result { margin-top: var(--space-3); }

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

.purchase-page .checkout-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  opacity: 0.6;
  text-align: center;
  font-size: 0.85rem;
}

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

@media (max-width: 480px) {
  .purchase-page .container { padding: 0 var(--space-3); }
  .purchase-page .item-summary { flex-direction: column; }
  .purchase-page .item-thumbnail { width: 100%; height: 160px; }
  .purchase-page .checkout-box { padding: var(--space-5); }
  .purchase-page h2 { font-size: 1.4rem; }
}

/* Feed page (templates/pages/feed.html). Compact tabular layout of
   items from followed users / projects / tags. */
.feed-page .page-title { font-size: 1.5rem; margin-bottom: var(--space-4); }
.feed-page .feed-meta { font-size: 0.8rem; opacity: 0.6; margin-bottom: var(--space-3); }

.feed-page .table-header {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  font-size: 0.75rem;
  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 {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--space-2);
  padding: 0.4rem var(--space-3);
  align-items: center;
  text-decoration: none;
  color: var(--detail);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}

.feed-page .table-row:last-child { border-bottom: none; }
.feed-page .table-row:nth-child(odd) { background: var(--light-background); }
.feed-page .table-row:nth-child(even) { background: var(--surface-alt); }
.feed-page .table-row:hover { background: var(--surface-muted); }

.feed-page .item-name-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

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

.feed-page .item-creator { font-size: 0.75rem; opacity: 0.5; }

.feed-page .badge {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface-muted);
}

.feed-page .empty-state {
  text-align: center;
  padding: 3rem var(--space-5);
  background: var(--light-background);
  border: 1px solid var(--border);
}

.feed-page .empty-state h2 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.feed-page .empty-state p { opacity: 0.7; margin-bottom: var(--space-5); }

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

.feed-page .pagination a,
.feed-page .pagination span {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--detail);
  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-muted); }

@media (max-width: 600px) {
  .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(4) { display: none; }
}

/* (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: 3rem; }

.user-page .profile-avatar {
  width: 120px;
  height: 120px;
  background: var(--light-background);
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.5;
}

.user-page .profile-name { font-size: 2rem; margin-bottom: var(--space-2); }

.user-page .profile-username {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-4);
}

.user-page .profile-bio {
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

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

.user-page .link-title {
  font-size: 1.1rem;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-weight: bold;
}

.user-page .link-description { font-size: 0.85rem; opacity: 0.7; }

.user-page .project-title {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-weight: bold;
}

.user-page .project-meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.user-page .project-description { font-size: 0.9rem; opacity: 0.8; }

/* Creators / become-a-creator page (templates/pages/creators.html). */
.creators-page h1 { font-size: 2.5rem; margin-bottom: var(--space-2); }
.creators-page h2 { font-size: 1.5rem; margin-top: var(--space-6); margin-bottom: var(--space-4); }

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

.creators-page .stats-row { gap: var(--space-6); margin: var(--space-6) 0; }
.creators-page .stat-box { padding: var(--space-5); }
.creators-page .stat-box .number { font-size: 2rem; }
.creators-page .stat-box .label { font-size: 0.85rem; margin-top: var(--space-1); }

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

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

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

.creators-page .cta {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--light-background);
  text-align: center;
}

.creators-page .cta a { margin: 0 var(--space-2); }

/* Tag tree browse page (templates/pages/tag_tree.html). */
.tag-tree-page .breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: var(--space-5);
  opacity: 0.7;
}
.tag-tree-page .breadcrumbs a { text-decoration: none; color: inherit; }
.tag-tree-page .breadcrumbs a:hover { opacity: 0.6; }
.tag-tree-page .breadcrumbs .sep { margin: 0 0.3rem; opacity: 0.4; }

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

.tag-tree-page .tag-card {
  background: var(--surface-muted);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--detail);
  border: 1px solid var(--border);
  transition: background 0.1s ease;
}

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

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

.tag-tree-page .tag-card-meta {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: var(--space-1);
}

.tag-tree-page .empty-state {
  opacity: 0.5;
  font-size: 0.9rem;
  padding: var(--space-6) 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: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.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(--space-5); }
.project-paywall-page .paywall-cover img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.project-paywall-page .paywall-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  margin-bottom: var(--space-2);
}

.project-paywall-page .paywall-creator {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

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

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

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

.project-paywall-page .paywall-tiers .tier-card {
  background: var(--light-background);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.project-paywall-page .paywall-tiers .tier-card h3 {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}

.project-paywall-page .paywall-tiers .tier-price {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.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(--space-6); }
.collection-page .collection-title { font-size: 2rem; margin-bottom: var(--space-1); }

.collection-page .collection-owner {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-3);
}

.collection-page .collection-description {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

.collection-page .collection-meta { font-size: 0.85rem; opacity: 0.6; }

.collection-page .collection-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--light-background);
  margin-bottom: var(--space-2);
}

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

.collection-page .collection-item-title {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

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

.collection-page .collection-item-meta { font-size: 0.85rem; opacity: 0.7; }

.collection-page .collection-item-price {
  font-size: 0.9rem;
  white-space: nowrap;
  margin-left: var(--space-4);
}

.collection-page .empty-state {
  text-align: center;
  padding: 3rem var(--space-4);
  opacity: 0.6;
}

/* Project blog index page (templates/pages/project_blog.html). */
.project-blog-page .blog-header { margin-bottom: 3rem; }
.project-blog-page .blog-title { font-size: 2.5rem; margin-bottom: var(--space-2); }

.project-blog-page .blog-meta {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

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

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

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

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

.project-blog-page .post-entry:first-child { padding-top: 0; }
.project-blog-page .post-title { font-size: 1.5rem; margin-bottom: var(--space-2); }
.project-blog-page .post-title a { color: inherit; text-decoration: none; }
.project-blog-page .post-title a:hover { text-decoration: underline; }

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

.project-blog-page .empty-state { padding: 3rem 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: 2rem;
  margin-bottom: var(--space-2);
  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(--space-6);
  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(--space-6); }
.settings-nav { flex-shrink: 0; min-width: 140px; }
.settings-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--detail);
  opacity: 0.6;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: opacity 0.15s ease;
}
.settings-nav a:hover { opacity: 1; }
.settings-nav a.is-selected { opacity: 1; background: var(--surface-muted); }
.settings-body { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  .settings-layout { flex-direction: column; gap: var(--space-4); }
  .settings-nav { display: flex; flex-wrap: wrap; gap: 0; min-width: 0; }
  .settings-nav a { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
}.library-page .feed-table-header {
  display: grid;
  grid-template-columns: 50px 1fr 100px 70px 70px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  font-size: 0.75rem;
  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(--space-2);
  padding: 0.4rem var(--space-3);
  align-items: center;
  text-decoration: none;
  color: var(--detail);
  font-size: 0.85rem;
  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:nth-child(odd) { background: var(--light-background); }
.library-page .feed-table-row:nth-child(even) { background: var(--surface-alt); }
.library-page .feed-table-row:hover { background: var(--surface-muted); }
.library-page .feed-item-name-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.library-page .feed-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-page .feed-item-creator { font-size: 0.75rem; opacity: 0.5; }
.library-page .feed-pagination {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  margin-top: var(--space-4);
}
.library-page .feed-pagination a,
.library-page .feed-pagination span {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--detail);
  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-muted); }
@media (max-width: 600px) {
  .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: 2rem; margin-bottom: var(--space-1); }

.dashboard-user-page .project-card {
  background: var(--light-background);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  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: 1.2rem;
  margin-bottom: var(--space-1);
}

.dashboard-user-page .project-meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.dashboard-user-page .project-stats { font-size: 0.9rem; }
.dashboard-user-page .project-actions {
  display: flex;
  gap: var(--space-2);
}

.dashboard-user-page .project-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .dashboard-user-page .project-card { flex-direction: column; }
  .dashboard-user-page .project-actions { margin-top: var(--space-3); }
}

/* Project dashboard (templates/dashboards/dashboard-project.html). */
.dashboard-project-page .project-meta { font-size: 0.9rem; opacity: 0.7; }
.dashboard-project-page .stat-value { font-size: 2rem; margin-bottom: var(--space-1); }

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

.dashboard-project-page .content-header h2 { font-size: 1.3rem; }

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

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

.dashboard-project-page .item-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

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

.dashboard-project-page .data-section h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

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

.dashboard-item-page .stat-value { font-size: 1.5rem; }

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

.dashboard-item-page .section-header h2 { font-size: 1.3rem; }

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

/* Blog editor dashboard (templates/dashboards/dashboard-blog-editor.html). */
.blog-editor .editor-form { max-width: 800px; }
.blog-editor .editor-form .form-group { margin-bottom: var(--space-5); }
.blog-editor .editor-form textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-height: 400px;
  resize: vertical;
}

/* Changelog page (templates/pages/changelog.html). */
.changelog-page .container { max-width: 900px; margin: 0 auto; }
.changelog-page h1 { font-size: 2.5rem; margin-bottom: var(--space-2); }
.changelog-page .changelog-entry {
  margin-bottom: 2.5rem;
  padding-bottom: var(--space-6);
  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: 0.9rem;
  opacity: 0.6;
  margin-bottom: var(--space-2);
}
.changelog-page .changelog-entry h2 { font-size: 1.3rem; margin-bottom: var(--space-3); }
.changelog-page .changelog-entry ul {
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
  line-height: 1.7;
}
.changelog-page .changelog-entry li { margin-bottom: var(--space-1); }

/* Policy page (templates/pages/policy.html). */
.policy-page .container { max-width: 900px; margin: 0 auto; }
.policy-page h1 { font-size: 2.5rem; margin-bottom: var(--space-2); }
.policy-page h2 {
  font-size: 1.5rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}
.policy-page .policy-section { margin-bottom: var(--space-6); line-height: 1.7; }
.policy-page .policy-section ul {
  padding-left: var(--space-5);
  margin: var(--space-3) 0;
}
.policy-page .policy-section li { margin-bottom: var(--space-1); }
.policy-page .contact {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--light-background);
}

/* 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(--space-4);
  margin-bottom: var(--space-6);
}

.admin-page .metric-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

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

.admin-page .metric-card .label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

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

.admin-page .section-heading {
  font-size: 1.2rem;
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-mono);
}

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

.admin-scan-section {
  margin-top: var(--space-6);
}

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

.admin-section-header h2 {
  font-size: 1.1rem;
  font-family: var(--font-mono);
  margin: 0;
}

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

.layer-health-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-left-width: 4px;
  font-size: 0.85rem;
}

.layer-health-card .layer-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

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

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

.layer-health-card.layer-ok       { border-left-color: var(--success, #527a3e); }
.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: 0.7rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: help;
  line-height: 1.4;
}

.layer-chip-pass  { background: #e6f0dc; border-color: #c4d8a8; color: #3a5a2a; }
.layer-chip-skip  { background: var(--bg-page); border-color: var(--border); color: var(--text-muted); }
.layer-chip-fail  { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.layer-chip-error { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); font-weight: 600; }

.scan-history-grid table { font-size: 0.85rem; }

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

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

.audit-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  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: 0.9rem;
}

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

.layer-detail-disclosure {
  margin-top: var(--space-2);
}

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

.layer-detail-list {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-3);
  font-size: 0.8rem;
}

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

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

.admin-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-page th,
.admin-page td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

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

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

.admin-page .refresh-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
}

.admin-page .grafana-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-top: var(--space-5);
}

.admin-page .appeal-count {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

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

.admin-page .decide-form textarea {
  min-width: 200px;
  font-size: 0.85rem;
}

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

.admin-page .suspend-form input[type="text"] {
  min-width: 200px;
  font-size: 0.85rem;
}

.admin-page .lottery-form {
  background: var(--light-background);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
}

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

.admin-page .lottery-form label {
  font-size: 0.85rem;
  display: block;
  margin-bottom: var(--space-1);
}

.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(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: center;
  color: var(--detail);
}

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

.banner--warning {
  background: var(--warning-bg);
  border-bottom: 2px solid var(--warning-border);
}

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

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

.section-header {
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  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. */
.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 {
  background: var(--light-background);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

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

.form-section {
  margin-bottom: 2rem;
}

.section-group-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 2.5rem 0 1rem 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border);
}

.form-section h2 {
  font-size: 1.3rem;
  font-weight: normal;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  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: 1rem;
}

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

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

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

nav {
  margin-bottom: 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--detail);
  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(--text-muted);
  font-size: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  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: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
}

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

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

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

header {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin-bottom: 2rem;
}

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

.profile-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  opacity: 0.6;
  font-size: 0.85rem;
}

.profile-footer a {
  color: var(--detail);
  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: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.site-header nav {
  margin: 0;
}

.site-header .nav-links {
  gap: 1.5rem;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--detail);
}

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

.nav-form {
  display: contents;
}

/* Header search */
.header-search {
  flex: 0 1 220px;
  margin: 0 1rem;
}

.header-search input {
  width: 100%;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--detail);
  border-radius: 3px;
}

.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: 0.5rem;
  z-index: 11;
}

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

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

.action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* ===========================================
   SPECIFIC COMPONENTS
   =========================================== */

/* Login container */
.login-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  background: var(--light-background);
  padding: 2rem;
}
/* Logo */
.logo {
  font-family: var(--font-heading);
  color: var(--detail);
  font-size: 24px;
}

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

.centered-page .tagline {
  margin-bottom: 0.25rem;
}
/* Skip link */
.skip-link {
  text-align: center;
  margin-top: 1rem;
}

.skip-link a {
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 0.9rem;
  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: 0.5rem;
}

.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-muted);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: 1rem;
}

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

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-header h2 {
  font-size: 1.2rem;
  font-weight: normal;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding: 0 0.5rem;
}

.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: 0.75rem;
  font-family: var(--font-mono);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  margin-bottom: 0.25rem;
}

.chart-bar {
  width: 100%;
  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: 0.7rem;
  opacity: 0.5;
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Time selector */
.time-selector {
  display: flex;
  gap: 0.5rem;
}

.time-selector button {
  background: var(--light-background);
  border: none;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.6;
}

.time-selector button.is-selected {
  opacity: 1;
  background: var(--primary-dark);
  color: var(--primary-light);
}

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

.analytics-list li {
  padding: 0.5rem 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-muted);
  padding: 1.5rem;
}

.quick-actions h2 {
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

/* Filter controls */
.filter-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
/* UUID styling */
.uuid {
  font-family: inherit;
  opacity: 0.5;
  font-size: 0.85rem;
}
/* ===========================================
   HTMX LOADING INDICATORS
   =========================================== */

.htmx-indicator {
  display: none;
}

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

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

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

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

/* 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: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--primary-dark);
  color: var(--primary-light);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toast-in 0.3s ease-out;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  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(--error);
}

.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: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  margin-left: 0.75rem;
  cursor: pointer;
}

.toast-retry-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.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: 50%;
  background: var(--violet, #6c5ce7);
  box-shadow: 0 0 0 2px var(--background, #fff);
}

/* ===========================================
   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: 10000;
  padding: 0.6rem 1rem;
  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: 0.25rem;
  font-size: 0.85rem;
}

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

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

/* ===========================================
   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 styles */
.tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* Canonical "selected" recipe (charter: docs/design-system.md).
   Apply `.is-selected` to any interactive container to mark it as the
   currently-selected option. `.badge.active` is intentionally distinct —
   it expresses completion status, not selection. 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: 100;
  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: 2rem 0;
  padding: 2rem;
  background: var(--surface-muted);
  text-align: center;
}

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

.paywall-price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.paywall-desc {
  font-family: var(--font-body);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.paywall-note {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

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

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

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

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

.modal h2 {
  margin-bottom: 1.5rem;
}

.modal .form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

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

.link-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-muted);
  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: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

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

.order-btn {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  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 {
  background: var(--primary-dark);
  color: var(--primary-light);
}

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

.text-editor {
  width: 100%;
}

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

.editor-tab {
  background: var(--surface-muted);
  border: none;
  padding: 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.editor-tab.is-selected {
  background: var(--input-background);
  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: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  border: none;
  background: var(--input-background);
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--surface-muted);
  font-size: 0.85rem;
  opacity: 0.7;
}

.markdown-preview {
  min-height: 400px;
  padding: 1.5rem;
  background: var(--light-background);
  font-family: var(--font-body);
  line-height: 1.8;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.markdown-preview h1 {
  font-size: 1.8rem;
}

.markdown-preview h2 {
  font-size: 1.4rem;
}

.markdown-preview h3 {
  font-size: 1.1rem;
}

.markdown-preview p {
  margin-bottom: 1rem;
}

.markdown-preview code {
  background: var(--surface-muted);
  padding: 0.1rem 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

.audio-upload {
  width: 100%;
}

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

.audio-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.audio-icon {
  font-size: 1.5rem;
  opacity: 0.6;
}

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

.audio-filename {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.audio-duration {
  font-size: 0.85rem;
  opacity: 0.6;
}

.upload-area .file-upload-area {
  padding: 3rem 2rem;
}

.upload-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: 0.5rem;
}

.upload-text {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.upload-hint {
  font-size: 0.85rem;
  opacity: 0.6;
}

.upload-progress {
  padding: 1.5rem;
  background: var(--surface-muted);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* 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: 3px; }

.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--success);
  transition: width 0.2s ease;
}
.progress-bar--highlight { background: var(--highlight); }

/* 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(--space-2); }
.upload-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.upload-status-row span { font-size: 0.85rem; }
.upload-status-msg { margin-top: var(--space-2); }
.upload-status-msg.is-success { color: var(--success); }
.upload-status-msg.is-error   { color: var(--error); }

/* Inline progress cell rendered inside a table-row status cell (batch uploads). */
.upload-progress-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.upload-progress-row .progress-bar-container { flex: 1; min-width: 60px; }
.upload-progress-pct {
  font-size: 0.75rem;
  min-width: 2.5em;
  text-align: right;
}

.upload-success {
  padding: 1.5rem;
  background: var(--surface-muted);
  text-align: center;
}
.upload-error {
  padding: 1.5rem;
  background: var(--surface-muted);
  text-align: center;
}

.hidden {
  display: none !important;
}

/* ===========================================
   VIEW TOGGLE (Grid/List)
   =========================================== */

.view-controls {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.view-btn {
  background: var(--surface-muted);
  border: none;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  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-grid .results-table {
  display: none;
}

.results-container.results-grid .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  border: 1px solid var(--border);
  border-top: none;
  padding: 1.5rem;
  background: var(--light-background);
}

/* Grid cards */
.grid-card {
  background: var(--surface-alt);
  text-decoration: none;
  color: var(--detail);
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease;
}

.grid-card:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.grid-card-thumbnail {
  height: 120px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0.5;
  text-transform: uppercase;
}

.grid-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grid-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.grid-card-meta {
  font-size: 0.85rem;
  opacity: 0.6;
}

.grid-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.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: 1.5rem;
}

.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: 1rem 1.25rem;
  background: var(--light-background);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--detail);
  transition: background 0.2s ease;
}

.list-item:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.list-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.list-item-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.list-item-meta {
  font-size: 0.85rem;
  opacity: 0.6;
}

.list-item-price {
  font-size: 1.1rem;
  font-weight: bold;
}

/* ===========================================
   LANDING PAGE
   =========================================== */

.landing-hero {
  max-width: 720px;
  width: 100%;
  text-align: center;
}

.landing-headline {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.landing-sub {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  margin-bottom: 0;
}

.fork-revenue-line {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0.75rem 0 0.5rem;
  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: 1rem;
  margin-top: 2rem;
  text-align: left;
}

.fork-heading {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.fork-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.fork-list li {
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.fork-list strong {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.fork-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fork-actions .big-button {
  width: 100%;
}

.fork-secondary-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.fork-secondary-link:hover {
  opacity: 1;
}

.fork-lede {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.landing-browse-cta {
  text-align: center;
  margin: 1.25rem 0 0;
}

.founder-tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 1.25rem auto 0;
  max-width: 560px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.founder-tagline-detail {
  display: block;
}

.founder-tagline-mark {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--highlight);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--highlight);
  border-radius: 3px;
  white-space: nowrap;
}

.fork-card--founder {
  border-color: var(--highlight);
  box-shadow: 0 0 0 1px var(--highlight-faint);
}

.founder-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--border);
}

.founder-tier {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.founder-tier-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.founder-tier-price {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.1;
}

.founder-tier-price del {
  opacity: 0.4;
  margin-right: 0.25rem;
  font-weight: 400;
}

.founder-tier-price strong {
  color: var(--highlight);
  font-weight: 700;
}

.founder-tier-unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.6;
  margin-left: 0.1rem;
}

.founder-slots {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.founder-slots-number {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--highlight);
  font-weight: 700;
  margin-right: 0.25rem;
}

.founder-slots-cap {
  opacity: 0.55;
  margin-left: 0.25rem;
}

.founder-slots--cap {
  opacity: 0.7;
  font-size: 0.75rem;
}

.landing-stats-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 2rem;
}

.landing-stats-line a {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.landing-stats-line a:hover {
  opacity: 1;
}

.landing-principles {
  margin-top: 2rem;
  width: 100%;
}

.landing-use-cases {
  margin-top: 2rem;
  width: 100%;
}

.use-case-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.landing-prose {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.notify-form {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
  margin: 0 auto;
}

.notify-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text);
}

.notify-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.notify-status.success {
  color: var(--text);
}

.notify-status.error {
  color: var(--danger);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 1.25rem;
}

.tier-section {
  margin: 2rem 0;
  width: 100%;
}
/* Marketing pricing variant of .card--bordered. */
.tier-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.tier-price {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.tier-desc {
  font-size: 0.85rem;
  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: 2rem;
  width: fit-content;
  margin: 1.5rem auto 2rem;
}
.secondary-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.secondary-links a {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.secondary-links a:hover {
  opacity: 1;
}
.section-link {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.section-link:hover {
  opacity: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  text-align: left;
}

.feature-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.feature-desc {
  font-size: 0.85rem;
  opacity: 0.7;
}

.how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.how-list li {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.how-list strong {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.do-rail {
  list-style: none;
  margin: 2rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.do-card {
  background: transparent;
  border: 1px solid var(--border);
  padding: 1.25rem;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.do-card-title {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

.do-card-lede {
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.78;
  margin: 0 0 0.85rem;
}

.do-card-links {
  list-style: none;
  margin: auto 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.do-card-links a {
  font-size: 0.88rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.do-card-links a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 640px) {
  .do-rail {
    grid-template-columns: 1fr;
  }
}

.do-card--wide {
  margin-top: 2rem;
  width: 100%;
}

.contrast-rail {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

.contrast-card {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.25rem 0;
  text-align: left;
}

.contrast-card-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.contrast-card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.contrast-card-links a {
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.contrast-card-links a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 640px) {
  .contrast-rail {
    grid-template-columns: 1fr;
  }
}

.explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: center;
}

.explore-links a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  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: 0.25rem;
}

.pricing-currency {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  opacity: 0.5;
}

.pricing-input {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  width: 5ch;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  color: var(--detail);
  padding: 0.25rem 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(--highlight);
}

.pricing-period {
  font-family: var(--font-mono);
  font-size: 1rem;
  opacity: 0.5;
}

.tier-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  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;
}

.tier-option.is-selected {
  border-color: var(--highlight);
  border-width: 2px;
  padding: calc(1rem - 1px);
}

.mnw-summary {
  text-align: center;
  padding: 1.5rem;
  background: var(--light-background);
  border: 1px solid var(--border);
}

.mnw-keep {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.mnw-detail {
  font-size: 0.9rem;
  opacity: 0.7;
}

.data-table .highlight {
  background: var(--light-background);
  border-left: 3px solid var(--highlight);
}

.savings-positive {
  color: var(--success);
  font-weight: 600;
}

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

.pricing-disclaimer {
  font-size: 0.8rem;
  opacity: 0.55;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.breakeven-note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 1rem;
  background: var(--light-background);
  border-left: 3px solid var(--warning);
  line-height: 1.6;
}

/* ===========================================
   DOCUMENTATION PAGES
   =========================================== */

.doc-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.doc-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.doc-breadcrumb a { color: var(--detail); text-decoration: none; }
.doc-breadcrumb a:hover { text-decoration: underline; }

.doc-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--detail);
  text-align: left;
}

.doc-body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.9;
}

.doc-body p { margin-bottom: 1.5rem; }

.doc-body h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: normal;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--detail);
  text-align: left;
}

.doc-body h2 {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: normal;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--detail);
}

.doc-body h3 {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: normal;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--detail);
}

.doc-body blockquote {
  border-left: 3px solid var(--highlight);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-muted);
}

.doc-body ul, .doc-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.doc-body li { margin-bottom: 0.5rem; }

.doc-body a {
  color: var(--highlight);
  text-decoration: underline;
  text-decoration-color: rgba(108, 92, 231, 0.4);
  text-underline-offset: 2px;
}

.doc-body a:hover { text-decoration-color: var(--highlight); }
.doc-body strong { font-weight: bold; }
.doc-body em { font-style: italic; }

.doc-body code {
  font-family: var(--font-mono);
  background: var(--surface-muted);
  padding: 0.125rem 0.375rem;
  font-size: 0.9em;
}

.doc-body pre {
  background: var(--surface-muted);
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

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

.doc-body hr { border: none; text-align: center; margin: 3rem 0; }
.doc-body hr::before { content: "* * *"; color: var(--text-muted); letter-spacing: 1rem; }

.doc-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.doc-body th, .doc-body td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.doc-body th { font-family: var(--font-mono); font-weight: 600; }

.text-reader-footer {
  font-family: var(--font-mono);
  text-align: center;
  padding: 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.text-reader-footer a { color: var(--detail); text-decoration: none; }
.text-reader-footer a:hover { text-decoration: underline; }

/* Docs index page */
.docs-index {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.docs-index-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 2.5rem;
  color: var(--detail);
}

.docs-section {
  margin-bottom: 2.5rem;
}

.docs-section h2 {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.docs-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-section li {
  margin-bottom: 0.5rem;
}

.docs-section a {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--detail);
  text-decoration: none;
}

.docs-section a:hover {
  color: var(--highlight);
  text-decoration: underline;
}

.docs-section details {
  margin-bottom: 1rem;
}

.docs-section summary {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0;
  list-style: disclosure-closed;
}

.docs-section details[open] > summary {
  list-style: disclosure-open;
  margin-bottom: 0.25rem;
}

.docs-section summary:hover {
  color: var(--detail);
}

.docs-section details ul {
  padding-left: 1.25rem;
}

/* Docs search */
.docs-search-container {
  position: relative;
  margin-bottom: 2rem;
}
.docs-search-inline {
  display: inline-block;
  margin-bottom: 0;
  margin-left: auto;
  float: right;
}
.docs-search-input {
  width: 100%;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--detail);
}
.docs-search-input:focus {
  outline: 2px solid var(--highlight);
  border-color: var(--highlight);
}
.docs-search-input::placeholder { opacity: 0.5; }
.docs-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 320px;
  background: var(--background);
  border: 1px solid var(--border);
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.docs-search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--detail);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.docs-search-result:last-child { border-bottom: none; }
.docs-search-result:hover { background: var(--surface-muted); }
.docs-search-result-title { font-family: var(--font-body); }
.docs-search-result-section { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.5; }.alert .alert-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.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(--highlight); }
.alert-important .alert-title { color: var(--highlight); }
.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: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.use-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  text-align: left;
}

.use-case-grid-2col {
  grid-template-columns: 1fr 1fr;
}

.use-case-card.coming-soon {
  border-style: dashed;
  opacity: 0.6;
}

.use-case-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

.use-case-who {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.use-case-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.use-case-features {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.use-case-features li {
  font-size: 0.85rem;
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.use-case-features li::before {
  content: "-";
  position: absolute;
  left: 0;
  opacity: 0.5;
}

.use-case-tier {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ===========================================
   RESPONSIVE — 768px (tablet)
   =========================================== */

/* ==========================================================================
   Git Source Browser
   ========================================================================== */

.git-repo-header { margin-bottom: 1.5rem; }
.git-repo-name { font-size: 1.5rem; margin: 0 0 0.25rem; }
.git-repo-name a { color: var(--detail); text-decoration: none; }
.git-repo-name a:hover { opacity: 0.6; }
.git-repo-name .sep { opacity: 0.3; margin: 0 0.15rem; }
.git-repo-desc { opacity: 0.6; margin: 0 0 1rem; font-size: 0.9rem; }
.git-clone-url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: inline-block;
  user-select: all;
  margin-bottom: 1rem;
}
.git-linked-project { margin-top: 0.5rem; font-size: 0.9rem; }
.git-linked-project a { color: var(--detail); }

/* Ref bar (branch/tag selector + nav links) */
.git-ref-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.git-ref-select {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.git-nav-links { display: flex; gap: 1rem; }
.git-nav-links a { text-decoration: none; color: var(--detail); 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: 0.85rem;
  margin-bottom: 1rem;
}
.git-breadcrumb a { color: var(--detail); text-decoration: none; }
.git-breadcrumb a:hover { text-decoration: underline; }
.git-breadcrumb .sep { opacity: 0.3; margin: 0 0.15rem; }

/* File tree table */
.git-tree { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.git-tree th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.5;
  text-transform: uppercase;
}
.git-tree td { padding: 0.4rem 0.6rem; 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(--detail); }
.tree-icon-file { font-size: 1.2em; }
.git-tree .name a { text-decoration: none; color: var(--text); }
.git-tree .name a:hover { text-decoration: underline; }
.git-tree .size {
  text-align: right;
  opacity: 0.5;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* README rendering */
.git-readme { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.git-readme h2 { font-size: 1rem; opacity: 0.5; margin-bottom: 1rem; }
.git-readme-body { line-height: 1.6; }
.git-readme-body h1,
.git-readme-body h2,
.git-readme-body h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.git-readme-body pre {
  background: var(--secondary-bg);
  padding: 0.8rem;
  border-radius: 3px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.git-readme-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--secondary-bg);
  padding: 0.15rem 0.3rem;
  border-radius: 2px;
}
.git-readme-body pre code { background: none; padding: 0; }
.git-readme-body table { border-collapse: collapse; margin: 1rem 0; }
.git-readme-body th,
.git-readme-body td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; }

/* File viewer */
.git-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.6rem;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  font-size: 0.8rem;
}
.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(--detail);
  opacity: 0.6;
  font-size: 0.8rem;
}
.git-file-actions a:hover { opacity: 1; }
.git-file-content {
  border: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
  overflow-x: auto;
}
.git-file-content table { border-collapse: collapse; width: 100%; }
.git-file-content .line-number {
  width: 1px;
  white-space: nowrap;
  padding: 0 0.8rem;
  text-align: right;
  user-select: none;
  opacity: 0.3;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border-right: 1px solid var(--border);
  vertical-align: top;
}
.git-file-content .line-code {
  padding: 0 0.8rem;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}
.git-file-content .line-code span {
  font-family: var(--font-mono);
}
.git-binary-notice {
  padding: 2rem;
  text-align: center;
  opacity: 0.5;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
}

/* Syntax highlighting (syntect class-based) */
.git-file-content .source { color: var(--text); }
.git-file-content .keyword,
.git-file-content .storage { color: #8959a8; }
.git-file-content .string { color: #718c00; }
.git-file-content .comment { color: #8e908c; font-style: italic; }
.git-file-content .constant,
.git-file-content .constant.numeric { color: #f5871f; }
.git-file-content .entity.name { color: #4271ae; }
.git-file-content .variable { color: #c82829; }
.git-file-content .support { color: #3e999f; }
.git-file-content .meta.preprocessor { color: #8959a8; }

/* Commit list */
.git-commit-list { list-style: none; }
.git-commit { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.git-commit:last-child { border-bottom: none; }
.git-commit-message { font-size: 0.9rem; margin: 0 0 0.3rem; }
.git-commit-message .summary { font-weight: 600; }
.git-commit-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.5;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.git-commit-oid { font-family: var(--font-mono); font-size: 0.75rem; }
.git-commit-oid a { color: var(--detail); text-decoration: none; }
.git-commit-oid a:hover { text-decoration: underline; }
.git-pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: 0.85rem;
}
.git-pagination a { color: var(--detail); text-decoration: none; }
.git-pagination a:hover { text-decoration: underline; }

/* Release items on repo page */
.git-release { margin-bottom: 1.5rem; padding: 1rem; background: var(--light-background); }
.git-release-title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.git-release-title a { color: var(--text); text-decoration: none; }
.git-release-meta { font-size: 0.85rem; opacity: 0.6; margin-bottom: 0.5rem; }
.git-release-desc { font-size: 0.9rem; opacity: 0.8; margin-bottom: 0.75rem; }
.git-release-versions { font-size: 0.8rem; }
.git-release-version {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.git-release-version .version-number { font-family: var(--font-mono); }
.git-release-version .version-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  background: var(--detail);
  color: var(--background);
  border-radius: 2px;
}
.git-release-version .version-meta { opacity: 0.5; }

/* Git commit detail + diff */
.git-commit-detail { margin-bottom: 1.5rem; }
.git-commit-full-message {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 1rem;
  background: var(--light-background);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.git-commit-detail-meta { font-size: 0.85rem; opacity: 0.7; line-height: 1.8; }
.git-commit-detail-meta .git-commit-oid { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; }
.git-commit-parents a { font-family: var(--font-mono); color: var(--detail); text-decoration: none; }
.git-commit-parents a:hover { text-decoration: underline; }
.git-diff-stats {
  font-size: 0.85rem;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  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: 1.5rem; border: 1px solid var(--border); }
.git-diff-file-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--light-background);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.git-diff-file-header a { color: var(--text); text-decoration: none; }
.git-diff-file-header a:hover { text-decoration: underline; }
.git-diff-file-stats { margin-left: auto; font-size: 0.8rem; }
.git-diff-file-stats .additions { color: var(--diff-add); }
.git-diff-file-stats .deletions { color: var(--diff-del); margin-left: 0.25rem; }
.diff-status-A, .diff-status-D, .diff-status-M, .diff-status-R {
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 2px;
  line-height: 1.4;
}
.diff-status-A { background: #d4edda; color: #155724; }
.diff-status-D { background: #f8d7da; color: #721c24; }
.diff-status-M { background: var(--warning-bg); color: var(--warning); }
.diff-status-R { background: #d1ecf1; color: #0c5460; }
.git-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  table-layout: fixed;
}
.git-diff-hunk-header td {
  padding: 0.3rem 0.5rem;
  background: var(--highlight-faint);
  color: var(--text);
  opacity: 0.6;
  font-size: 0.75rem;
}
.git-diff-lineno {
  width: 3.5rem;
  padding: 0 0.4rem;
  text-align: right;
  color: var(--text);
  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 0.5rem;
  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: 0.5rem 0.75rem; font-size: 0.8rem; 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: 0.8rem; }
.git-blame-info {
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  width: 4.5rem;
}
.git-blame-info a { color: var(--detail); text-decoration: none; }
.git-blame-info a:hover { text-decoration: underline; }
.git-blame-author {
  padding: 0 0.3rem;
  font-size: 0.75rem;
  opacity: 0.5;
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.git-blame-date {
  padding: 0 0.3rem;
  font-size: 0.75rem;
  opacity: 0.35;
  white-space: nowrap;
  width: 5.5rem;
}
.git-blame-content .line-number {
  padding: 0 0.5rem;
  text-align: right;
  opacity: 0.35;
  user-select: none;
  width: 3rem;
  font-family: var(--font-mono);
}
.git-blame-content .line-code {
  padding: 0 0.5rem;
  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: 0.75rem 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: 0.5rem; }
.git-repos-item-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--detail);
  text-decoration: none;
}
.git-repos-item-name:hover { text-decoration: underline; }
.git-repos-visibility {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  opacity: 0.5;
}
.git-repos-item-desc { font-size: 0.85rem; opacity: 0.6; margin: 0.25rem 0 0; }.git-repos-instructions p { margin-bottom: 0.5rem; }
.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: 0.8rem;
  opacity: 0.5;
  margin-right: 0.25rem;
}

/* Site-wide footer */
.site-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.5;
}
.site-footer-links { margin-bottom: 0.5rem; }
.site-footer-links a { margin: 0 0.75rem; color: inherit; text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  /* Git browser mobile */
  .git-ref-bar { flex-wrap: wrap; gap: 0.5rem; }
  .git-repo-name { font-size: 1.2rem; }
  .git-clone-url { font-size: 0.75rem; word-break: break-all; }
  .git-tree .icon { display: none; }
  .git-tree td, .git-tree th { padding: 0.3rem 0.4rem; }
  .git-file-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .git-file-content .line-number { padding: 0 0.4rem; }
  .git-file-content .line-code { padding: 0 0.4rem; font-size: 0.75rem; }
  .git-commit-meta { flex-direction: column; gap: 0.25rem; }
  .git-release-version { flex-wrap: wrap; gap: 0.5rem; }
  .git-diff-file-header { font-size: 0.8rem; }
  .git-diff-table { font-size: 0.7rem; }
  .git-diff-lineno { width: 2.5rem; font-size: 0.65rem; }
  .git-blame-author { display: none; }
  .git-blame-date { display: none; }

  .container {
    padding: 1.25rem;
  }

  .padded-page {
    padding: 1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
  }

  .tab-content {
    padding: 1.25rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }

  .modal {
    max-width: 95%;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .content-section {
    padding: 1.25rem;
  }

  .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: 0.75rem 1.5rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    z-index: 11;
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    z-index: 10;
  }

  .site-header {
    position: relative;
  }

  .nav-toggle-checkbox:checked ~ nav {
    display: block;
  }

  .site-header .nav-links {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* 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: 600px) {
  .doc-title { font-size: 2rem; }
  .doc-body { font-size: 1rem; }
  .docs-index-title { font-size: 2rem; }
}

/* ===========================================
   RESPONSIVE — 480px (phone)
   =========================================== */

@media (max-width: 480px) {
  .container {
    padding: 0.75rem;
  }

  .padded-page {
    padding: 0.75rem;
  }

  h1 {
    font-size: 1.8rem;
  }

  .centered-page h1 {
    font-size: 3rem;
  }

  .login-container,
  .form-container {
    max-width: 100%;
    padding: 1.25rem;
  }

  .big-button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .tab-content {
    padding: 1rem;
  }

  .content-section {
    padding: 1rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* 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: 0.75rem;
  }

  .pricing-input {
    font-size: 2rem;
  }

  .pricing-currency {
    font-size: 2rem;
  }

  .mnw-keep {
    font-size: 2rem;
  }

  .secondary-links {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .landing-cta {
    flex-direction: column;
    gap: 1rem;
  }

  .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: 1.5rem; }
.discover-layout.no-sidebar { grid-template-columns: 1fr; }
.discover-layout.no-sidebar .discover-sidebar { display: none; }
.discover-sidebar { font-size: 0.85rem; }
.filter-section { margin-bottom: 1.25rem; }
.filter-title { font-family: var(--font-heading); font-weight: bold; font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--detail); }
.filter-browse-link { font-size: 0.75rem; opacity: 0.5; font-weight: normal; }
.filter-list { list-style: none; }
.filter-item { padding: 0.25rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; 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: 0.8rem; }
.filter-item-right { display: flex; align-items: center; gap: 0.3rem; }
.tag-follow-btn { background: none; border: 1px solid var(--border); cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.55; padding: 0.1rem 0.45rem; color: var(--detail); }
.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: 0.4rem; padding: 0.2rem 0; cursor: pointer; }
.filter-checkbox input { width: auto; margin: 0; }
.price-inputs { display: flex; gap: 0.25rem; align-items: center; margin-bottom: 0.5rem; }
.price-inputs input { width: 60px; padding: 0.3rem; font-size: 0.8rem; background: var(--surface-muted); border: none; }
.price-inputs span { opacity: 0.4; }
.price-distribution { margin-top: 0.5rem; }
.price-distribution-item { font-size: 0.8rem; opacity: 0.6; padding: 0.1rem 0; }
.discover-main { min-width: 0; }
.mode-toggle { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.toggle-btn { background: var(--surface-muted); border: none; padding: 0.4rem 0.8rem; font-size: 0.85rem; 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-muted); display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.search-field { flex: 1 1 0; background: var(--background); border: none; padding: 0.5rem 0.75rem; font-family: inherit; font-size: 0.9rem; color: var(--detail); min-width: 0; }
.search-field:focus { outline: 2px solid var(--highlight); }
.search-field::placeholder { opacity: 0.5; }
.table-meta { font-size: 0.75rem; opacity: 0.6; white-space: nowrap; flex-shrink: 0; }
.sort-select { background: var(--background); border: none; padding: 0.3rem 0.4rem; font-size: 0.75rem; font-family: inherit; cursor: pointer; width: auto; flex-shrink: 0; }
.table-header { display: grid; grid-template-columns: 50px 1fr 100px 70px 70px; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--surface-alt); font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.03em; }
.table-header.projects-header { grid-template-columns: 1fr 100px 80px 70px; }
.table-header span { cursor: pointer; }
.table-header span:hover { opacity: 0.6; }
.col-right { text-align: right; }
.results-table { border: 1px solid var(--border); border-top: none; }
.table-row { display: grid; grid-template-columns: 50px 1fr 100px 70px 70px; gap: 0.5rem; padding: 0.4rem 0.75rem; align-items: center; text-decoration: none; color: var(--detail); font-size: 0.85rem; 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: 0.5rem; padding: 0.4rem 0.75rem; 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:nth-child(odd) { background: var(--light-background); }
.table-row:nth-child(even) { background: var(--surface-alt); }
.table-row:hover { background: var(--surface-muted); text-decoration: none; }
.row-type { font-size: 0.7rem; background: var(--surface-muted); padding: 0.2rem 0.4rem; text-align: center; opacity: 0.7; }
.row-info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-creator { font-size: 0.75rem; opacity: 0.5; }.row-category { font-size: 0.8rem; opacity: 0.6; }
.row-price { text-align: right; }
.row-items { text-align: right; opacity: 0.6; font-size: 0.8rem; }
.row-date { text-align: right; opacity: 0.5; font-size: 0.75rem; }.pagination { display: flex; gap: 0.25rem; }
.pagination button { background: var(--background); border: none; padding: 0.3rem 0.6rem; font-size: 0.8rem; 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(--space-2); margin-bottom: var(--space-4); }
.issue-tab {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--detail);
  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: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.padded-page .page-header h1 { font-size: 1.5rem; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); }
.padded-page .page-header nav { margin: 0; }
.padded-page .page-header .nav-links { gap: 1.5rem; }
.discover-filter-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  background: var(--light-background);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: 1rem;
}

.discover-filter-toggle .filter-count {
  background: var(--highlight);
  color: var(--primary-light);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.25rem;
}

@media (max-width: 900px) {
    .discover-filter-toggle { display: inline-block; }
    .discover-layout { grid-template-columns: 1fr; }
    .discover-sidebar { display: none; }
    .discover-sidebar.show { display: block; margin-bottom: 1rem; }
    .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: 480px) {
    .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: 0.8rem; }
    .search-field { min-width: 0; width: 100%; }
    .table-controls { flex-wrap: wrap; }
    .mode-toggle { flex-wrap: wrap; }
    .table-footer { flex-direction: column; gap: 0.5rem; 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: 0.75rem;
    margin-bottom: 1rem;
}

/* 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,
.type-card,
.pricing-card,
.content-choice-card {
    cursor: pointer;
    display: block;
}
.card--selectable input[type="radio"],
.card--selectable input[type="checkbox"],
.type-card input[type="radio"],
.type-card input[type="checkbox"],
.pricing-card input[type="radio"],
.content-choice-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.card--selectable-inner,
.type-card-inner,
.pricing-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    min-height: 60px;
}
/* Variant: column-aligned content (text-heavy pricing cards). */
.pricing-card-inner,
.card--selectable.is-text-heavy .card--selectable-inner {
    align-items: stretch;
    text-align: left;
    padding: 1.25rem;
}

.card--selectable input:checked + .card--selectable-inner,
.card--selectable.is-selected .card--selectable-inner,
.type-card input:checked + .type-card-inner,
.type-card.is-selected .type-card-inner,
.pricing-card input:checked + .pricing-card-inner,
.pricing-card.is-selected .pricing-card-inner,
.content-choice-card.is-selected {
    border-color: var(--highlight);
    background: var(--highlight-faint);
}

.card--selectable:hover .card--selectable-inner,
.type-card:hover .type-card-inner,
.pricing-card:hover .pricing-card-inner,
.content-choice-card:hover {
    background: var(--surface-muted);
}

.card--selectable-label,
.type-card-label,
.pricing-card-label {
    font-weight: bold;
    font-size: 0.9rem;
}

.card--selectable-desc,
.type-card-desc,
.pricing-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Anchor-styled selectable card (used when the card itself is an `<a>` link
   rather than a radio-wrapping label). */
.content-choice-card {
    text-decoration: none;
    color: inherit;
}

/* Disabled selectable card — visually dimmed, ignores pointer events. */
.card--selectable.is-disabled,
.content-choice-card.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(--background);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: var(--shadow-2);
}

.suggestion-dropdown.open {
    display: block;
}

.suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.suggestion-item:hover {
    background: var(--light-background);
}

.suggestion-create {
    font-style: italic;
    opacity: 0.8;
    border-top: 1px solid var(--border);
}

/* ── Tips ── */

.tip-section {
  margin-top: 1rem;
  text-align: center;
}

.tip-toggle {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 1.5rem;
  background: none;
  border: 1px solid var(--text);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.tip-toggle:hover {
  background: var(--text);
  color: var(--background);
}

.tip-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  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: 0.25rem;
}

.tip-amount-row .pricing-currency {
  font-size: 1.2rem;
  opacity: 0.7;
}

.tip-amount-input {
  width: 80px;
  font-size: 1.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--light-background);
  font-family: var(--font-mono);
}

.tip-message-input {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  background: var(--light-background);
  font-family: var(--font-body);
  resize: vertical;
}

.tip-submit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  background: var(--text);
  color: var(--background);
  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: 50;
  background: var(--background); border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); min-width: 220px;
}
.collection-picker-list { max-height: 200px; overflow-y: auto; padding: 0.25rem 0; }
.collection-picker-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.9rem;
}
.collection-picker-item:hover { background: var(--surface-muted); }
.collection-picker-loading,
.collection-picker-create { border-top: 1px solid var(--border); padding: 0.5rem 0.75rem; }
.collection-picker-create form { display: flex; gap: 0.5rem; }
.collection-picker-create input { flex: 1; padding: 0.3rem 0.5rem; font-size: 0.85rem; min-width: 0; }
.collection-picker-create button { font-size: 0.85rem; white-space: nowrap; }

/* Save button on discover cards */
.row-save, .grid-card-save {
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; padding: 0.2rem 0.4rem; opacity: 0.4;
  color: var(--detail); 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: 2;
  background: var(--background); border-radius: 3px; padding: 0.25rem 0.4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15); 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(--highlight); color: var(--highlight); }

/* ===========================================
   SEARCH SUGGESTIONS
   =========================================== */

.search-wrapper { position: relative; flex: 1; min-width: 0; }
.search-suggestions {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--background); border: 1px solid var(--border); border-top: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 280px; overflow-y: auto;
}
.suggestion-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem; text-decoration: none; color: var(--detail);
  font-size: 0.85rem; cursor: pointer;
}
.suggestion-item:hover, .suggestion-item.highlighted { background: var(--surface-muted); }
.suggestion-category { font-size: 0.75rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }

/* ===========================================
   DOC UI EXAMPLES (embedded live UI in docs)
   =========================================== */

.doc-ui {
  margin: 1.5rem 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.doc-ui-frame {
  padding: 1rem; background: var(--light-background); pointer-events: none; user-select: none;
}
.doc-ui figcaption {
  padding: 0.5rem 1rem; font-size: 0.8rem; opacity: 0.6;
  border-top: 1px solid var(--border); background: var(--surface-alt);
  font-family: var(--font-mono);
}
.doc-ui-missing {
  padding: 1rem; opacity: 0.4; font-style: italic;
}

/* Library "New" badge for items with undownloaded versions */
.badge-new {
  background: var(--highlight); color: var(--primary-light); font-size: 0.7rem;
  padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); margin-left: 0.4rem;
  vertical-align: middle; font-weight: bold;
}

/* ===========================================
   BENEFIT LIST (bulleted feature lists, e.g. Stripe Connect prompt)
   =========================================== */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-5);
  max-width: 280px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.benefit-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.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(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--light-background);
  border: 1px solid var(--border);
}
.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.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: 0.9rem;
}
.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(--space-4);
}
.stack-row--tight { gap: var(--space-3); flex-wrap: nowrap; }
.stack-row--top { align-items: flex-start; }
.stack-row--bordered,
.transactions-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.content-header,
.user-media-header,
.analytics-range-bar { margin-bottom: var(--space-4); }
.cart-multi-bar {
  margin-bottom: var(--space-5);
  padding: 1rem 1.25rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
}

/* 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(--space-3);
  padding: 0.6rem 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: 1.25rem;
  color: var(--warning);
}

.card-h {
  margin: 0 0 var(--space-3) 0;
  font-size: 1rem;
}

.amount-big {
  font-size: 1.25rem;
  font-weight: bold;
}

.account-details {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.account-details summary { cursor: pointer; }
.account-details-id {
  font-size: 0.8rem;
  opacity: 0.5;
  font-family: var(--font-mono);
  margin-top: var(--space-1);
}

.stripe-actions {
  display: flex;
  gap: var(--space-4);
  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(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.payouts-disabled-notice {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--warning);
  color: var(--primary-light);
  font-size: 0.85rem;
}

.fee-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  font-size: 0.9rem;
}
.fee-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 0.9rem;
}
.check-inline {
  width: auto;
  margin-top: 0.2rem;
}

.stripe-connect-prompt { text-align: center; padding: var(--space-5); }
.stripe-logo { opacity: 0.8; }
.stripe-connect-btn {
  background: var(--stripe);
  padding: var(--space-3) var(--space-6);
}

.export-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.splits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tip-message {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transactions-title { font-size: 1.2rem; }

/* ===========================================
   CREATOR TAB (replaces inline styles in user_creator.html)
   =========================================== */
.creator-tab-section {
  padding: var(--space-6);
}
.creator-tab-section--centered { text-align: center; }
.creator-tab-section--no-top { padding-top: 0; }

.creator-h2 { font-size: 1.3rem; margin-bottom: var(--space-4); }
.creator-h2--sm { font-size: 1.2rem; }

.creator-section-label {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}
.creator-form-section { padding: 0 var(--space-6); }

.creator-plan-box {
  background: var(--light-background);
  padding: var(--space-4) var(--space-5);
}
.creator-plan-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.creator-plan-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.1rem;
}

.badge--founder-locked {
  background: var(--detail);
  color: var(--light-background);
}
.badge--founder-pending {
  background: var(--surface-muted);
}

.founder-callout {
  background: var(--light-background);
  border-left: 3px solid var(--detail);
  padding: 0.85rem 1rem;
}

.creator-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.creator-tier-card {
  background: var(--light-background);
  padding: var(--space-4);
  text-align: center;
}
.creator-tier-name {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: var(--space-1);
}
.creator-tier-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.creator-tier-sub {
  font-size: 0.75rem;
  opacity: 0.7;
}
.creator-tier-storage { font-size: 0.75rem; }
.creator-tier-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.creator-tier-btn {
  font-size: 0.85rem;
  width: 100%;
}

.strike-dim {
  opacity: 0.5;
  text-decoration: line-through;
}

.storage-box {
  background: var(--light-background);
  padding: var(--space-4) var(--space-5);
}
.storage-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}
.storage-track {
  background: var(--border);
  height: 8px;
  width: 100%;
  overflow: hidden;
}
.storage-fill {
  background: var(--highlight);
  height: 100%;
  transition: width 0.3s;
}
.storage-fill--full { background: var(--danger); }
.storage-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-3);
  font-size: 0.85rem;
}

.broadcast-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.broadcast-desc { flex: 1; }
.broadcast-export { margin-left: var(--space-4); }

.creator-divider {
  margin: 0 var(--space-6);
  border-color: var(--border);
}

.creator-intro { line-height: 1.6; }
.creator-pitch-box {
  background: var(--light-background);
  padding: var(--space-5);
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* ===========================================
   PROJECT CONTENT TAB (replaces inline styles in project_content.html)
   =========================================== */

.empty-state--lg { padding: var(--space-6) var(--space-4); }

.content-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.content-filter-search {
  flex: 1;
  min-width: 180px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
}
.content-filter-select {
  padding: 0.4rem;
  font-size: 0.85rem;
}

.bulk-action-bar {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.bulk-form-row {
  display: flex;
  gap: var(--space-3);
  align-items: end;
}
.bulk-form-label {
  font-size: 0.85rem;
  display: block;
  margin-bottom: var(--space-1);
}

/* Sortable table column header */
.sortable-th { cursor: pointer; }
.sort-arrow { opacity: 0.4; }
.sort-arrow--active { opacity: 1; }

/* 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: 0.25rem 0.4rem;
  font-size: 0.85rem;
}
.input--sm {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}
.input--mono { font-family: var(--font-mono); }
.input--upper { text-transform: uppercase; }
.input--numeric { text-align: right; }

.order-arrow-btn {
  padding: 0.1rem 0.3rem;
  font-size: 0.7rem;
  line-height: 1;
}

.bundle-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.bundle-child-cell { padding-left: 2.5rem; }
.bundle-child-title { opacity: 0.85; }
.bundle-child-arrow {
  color: var(--text-muted);
  margin-right: 0.3rem;
}

.item-actions {
  display: flex;
  gap: var(--space-2);
}

.badge--inline-tiny {
  font-size: 0.7rem;
  margin-left: 0.3rem;
  opacity: 0.7;
}

.deleted-items-details { margin-top: var(--space-6); }
.deleted-items-summary {
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.7;
}

.section-divider {
  margin: var(--space-6) 0;
  border: none;
  border-top: 1px solid var(--border);
}

.inline-rename-input {
  font-weight: bold;
  width: 100%;
  padding: 0.2rem 0.4rem;
  font-size: inherit;
}

/* ===========================================
   ITEM DETAILS TAB (replaces inline styles in item_details.html)
   =========================================== */

/* Compact button utility (small icon-side actions) */
.btn-compact { padding: 0.4rem 0.8rem; }

.ml-2 { margin-left: var(--space-2); }
.cursor-pointer { cursor: pointer; }
.inline { display: inline; }

.tag-search-wrap { position: relative; }
.tag-suggestions {
  position: absolute;
  z-index: 10;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.advanced-details { margin-top: var(--space-5); }
.advanced-summary {
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Bundle table inside item-details */
.bundle-table {
  width: 100%;
  border-collapse: collapse;
}
.bundle-table-head {
  text-align: left;
  font-size: 0.8rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bundle-row { border-bottom: 1px solid var(--border); }
.bundle-cell { padding: var(--space-2); }
.bundle-cell--first { padding-left: 0; }
.bundle-cell--actions { width: 60px; }
.bundle-cell--desc { font-size: 0.85rem; opacity: 0.8; }
.bundle-cell--file { font-size: 0.85rem; }

.bundle-remove-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

.bundle-add-row {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.bundle-existing-details { margin-top: var(--space-4); }
.bundle-existing-summary {
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.7;
}
.bundle-existing-row {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.bundle-existing-select {
  flex: 1;
  padding: 0.4rem;
}

.sections-intro {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: var(--space-3) 0 var(--space-4);
}

.section-mgmt-title {
  flex: 1;
  font-weight: bold;
}
.section-edit-btn,
.section-del-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.section-add-details { margin-top: var(--space-4); }
.section-add-summary {
  cursor: pointer;
  font-size: 0.95rem;
}

.insert-image-btn {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

.section-edit-modal {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-muted);
}
.section-edit-actions {
  display: flex;
  gap: var(--space-2);
}

.publish-note {
  margin: var(--space-4) 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: 0.8rem; opacity: 0.6; }
.bundle-picker-row-unlisted {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 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: 0.4rem 0.5rem;
  font-size: 0.85rem;
}
.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: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border: 1px solid;
}
.callout--danger {
  background: var(--danger-bg);
  border-color: var(--danger);
}
.callout--warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
.callout--solid-warning {
  background: var(--warning);
  color: var(--primary-dark);
  border-color: transparent;
  padding: 1rem 1.25rem;
}
.callout-title { text-transform: capitalize; }
.callout-meta {
  opacity: 0.6;
  margin-left: 0.5rem;
}
.callout-body { margin: 0.5rem 0 0 0; }
.callout-hint {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.account-mod-history { margin-top: 0.75rem; }
.account-mod-history summary {
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.7;
}
.account-mod-history-list { margin-top: 0.5rem; }
.account-mod-history-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.account-mod-history-reason {
  margin: 0.25rem 0 0 0;
  opacity: 0.8;
}

.account-tip-card-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.account-tip-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0.8;
}

/* Resend-verification button needs left spacing from preceding strong. */
.account-resend-btn { margin-left: 0.5rem; }

/* 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 1.25rem 0;
}
.pref-fieldset--last { margin-bottom: 0.5rem; }
.pref-legend {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* ===========================================
   PROJECT CODE TAB (replaces inline styles in partials/tabs/project_code.html)
   =========================================== */

.proj-code-docs-link { margin-left: 1rem; }

.proj-code-linked-list { margin-bottom: var(--space-5); }
.proj-code-linked-list > label { margin-bottom: var(--space-2); display: block; }

.proj-code-repo {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--light-background);
}
.proj-code-repo-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.proj-code-repo-link { flex: 1; }
.proj-code-repo .danger { padding: var(--space-1) var(--space-3); font-size: 0.85rem; }

.proj-code-collab-block {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}
.proj-code-collab-label { font-size: 0.85rem; margin-bottom: var(--space-1); display: block; }
.proj-code-collab-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: 0.9rem;
}
.proj-code-collab-name { flex: 1; }
.proj-code-collab-readonly { opacity: 0.5; }

.proj-code-add-collab-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.proj-code-add-collab-row .collab-username-input {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.3rem var(--space-2);
}
.proj-code-add-collab-row .collab-add-btn { white-space: nowrap; }

.proj-code-link-row {
  display: flex;
  gap: var(--space-2);
  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(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.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(--space-1); }
.proj-code-create-status.is-error { color: var(--error); }

.proj-code-disabled {
  padding: var(--space-6);
  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: 0.85rem;
}
.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: 0.5rem;
}
.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: 0.8rem;
}

.admin-report-status-open {
  color: var(--accent);
  font-weight: 600;
}
.admin-report-status-closed { opacity: 0.6; }

.admin-report-resolve-form {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
.admin-report-resolve-form input[type="text"] {
  width: 120px;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}
.admin-report-dismiss-form { display: inline; }

.admin-report-admin-notes {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ===========================================
   PROJECT PROMOTIONS TAB (replaces inline styles in partials/tabs/project_promotions.html)
   =========================================== */

.proj-promo-form {
  margin-bottom: 2rem;
}

.proj-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  max-width: 500px;
}

.proj-promo-grid--spaced {
  margin-top: 0.75rem;
}

.proj-promo-grid--bordered {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.proj-promo-trial-fields {
  display: none;
  max-width: 500px;
  margin-top: 0.75rem;
}

.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: 0.85rem;
}

.proj-promo-trial-group {
  max-width: 240px;
}

.proj-promo-scope {
  grid-column: 1 / -1;
}

.proj-promo-actions {
  margin-top: 1rem;
}

.proj-promo-hint {
  margin-top: 0.5rem;
}

/* ===========================================
   PROJECT OVERVIEW TAB (replaces inline styles in partials/tabs/project_overview.html)
   =========================================== */

.proj-overview-setup {
  margin-bottom: var(--space-4);
  padding: 1.25rem;
  background: var(--light-background);
  border: 1px solid var(--border);
}
.proj-overview-setup-title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: bold;
}
.proj-overview-setup-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.proj-overview-setup-row:last-child { border-bottom: none; }
.proj-overview-setup-check {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  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-color);
  border-radius: 50%;
  flex-shrink: 0;
}
.proj-overview-setup-label {
  flex: 1;
  font-size: 0.9rem;
}
.proj-overview-setup-label--done {
  opacity: 0.5;
  text-decoration: line-through;
}
.proj-overview-setup-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}

.proj-overview-tools { margin-top: var(--space-6); }
.proj-overview-tools-summary {
  cursor: pointer;
  font-size: 1rem;
  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(--space-3);
  margin-top: var(--space-3);
}
.proj-overview-tool {
  background: var(--surface-muted);
  padding: var(--space-3);
}
.proj-overview-tool-name {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
}
.proj-overview-tool-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

/* ===========================================
   PROJECT SYNCKIT TAB (replaces inline styles in partials/tabs/project_synckit.html)
   =========================================== */

.proj-synckit-intro { margin-bottom: 0.75rem; }
.proj-synckit-intro-secondary { margin-bottom: 1.5rem; }
.proj-synckit-create { margin-bottom: 1.5rem; }
.proj-synckit-create-body {
  padding: var(--space-3); background: var(--light-background); border: 1px solid var(--border-color);
}
.proj-synckit-create-form {
  display: flex; flex-direction: row; gap: 0.75rem; align-items: flex-end;
}
.proj-synckit-label {
  display: block; font-size: 0.85rem; margin-bottom: var(--space-1);
}
.proj-synckit-code { font-size: 0.8rem; }
.proj-synckit-code--wrap { font-size: 0.8rem; word-break: break-all; }
.proj-synckit-code--selectable { font-size: 0.85rem; word-break: break-all; user-select: all; }
.proj-synckit-btn-tight {
  margin-left: var(--space-2); padding: 0.15rem 0.4rem; font-size: 0.75rem;
}
.proj-synckit-btn-row {
  padding: 0.15rem 0.4rem; font-size: 0.75rem;
}
.proj-synckit-btn-row + .proj-synckit-btn-row { margin-left: var(--space-1); }
.proj-synckit-hint-inline {
  font-size: 0.7rem; margin-left: var(--space-1);
}
.proj-synckit-hint-warn {
  font-size: 0.7rem; color: var(--error);
}
.proj-synckit-status-active { color: var(--success); }
.proj-synckit-status-inactive { color: var(--error); }
.proj-synckit-new-key {
  padding: 0.75rem; background: var(--light-background);
  border: 1px solid var(--border-color); margin-top: var(--space-2);
}
.proj-synckit-new-key-heading {
  margin: 0 0 var(--space-2) 0; font-weight: 500; color: var(--error);
}
.proj-synckit-create-status--error { color: var(--error); margin-top: var(--space-2); }
.proj-synckit-create-status--reset { margin-top: var(--space-2); }

/* ===========================================
   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: 0.85rem;
  color: var(--detail);
}

.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 .tag-link {
  text-decoration: none;
  color: inherit;
}

.item-page .bundle-notice-inline {
  background: var(--surface-muted);
  padding: 1.25rem;
}

.item-page .bundle-notice-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.item-page .bundle-notice-desc {
  opacity: 0.8;
  font-size: 0.9rem;
}

.item-page .bundle-notice-entry {
  margin-top: 0.75rem;
}

.item-page .bundle-notice-entry a {
  font-weight: bold;
}

.item-page .bundle-notice-price {
  opacity: 0.7;
}

.item-page .bundle-notice-empty {
  margin-top: 0.5rem;
  opacity: 0.7;
  font-size: 0.9rem;
}

.item-page .promo-details {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.item-page .promo-summary {
  cursor: pointer;
  opacity: 0.7;
}

.item-page .promo-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.item-page .promo-input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.item-page .action-row {
  margin-top: 1rem;
}

.item-page .action-row-tight {
  margin-top: 0.5rem;
}

.item-page .full-width-btn {
  width: 100%;
  font-size: 0.9rem;
}

.item-page .license-preset-name {
  margin-bottom: 0.75rem;
}

.item-page .license-summary {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.9rem;
}

.item-page .license-text {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 0.85rem;
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--surface-muted);
}

.item-page .license-download {
  margin-top: 0.75rem;
}

.item-page .license-download a {
  font-size: 0.9rem;
  color: var(--detail);
}

.item-page .bundle-list-entry {
  margin-top: 0.5rem;
}

.item-page .footer-links {
  margin-top: 0.5rem;
}

/* ===========================================
   JOIN COMPLETE STEP (replaces inline styles in wizards/steps/join/complete.html)
   =========================================== */
.join-complete-intro { margin-bottom: var(--space-5); }
.join-complete-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); max-width: 500px;
}
.join-complete-choice { text-decoration: none; color: inherit; display: block; }
.join-complete-card {
  background: var(--surface-muted); padding: var(--space-4); 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(--detail); }
.join-complete-card-title {
  font-family: var(--font-heading); font-weight: bold;
  font-size: 1.1rem; margin-bottom: var(--space-2);
}
.join-complete-card-desc {
  font-size: 0.85rem; opacity: 0.7; margin: 0;
}
.join-complete-footnote {
  font-size: 0.85rem; opacity: 0.5;
  margin-top: var(--space-4); 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: 0.85rem; }
.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: 0.8rem; }
.promo-codes-edit-row { background: var(--surface-muted); }
.promo-codes-edit-cell { padding: var(--space-3); }
.promo-codes-edit-form {
  display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap;
}
.promo-codes-edit-label {
  font-size: 0.8rem; display: block; margin-bottom: var(--space-1);
}
.promo-codes-edit-save { font-size: 0.85rem; }
.promo-codes-bulk-row { margin-top: var(--space-3); }
.promo-codes-bulk-btn { font-size: 0.85rem; opacity: 0.7; }

/* ===========================================
   USER MEDIA TAB (replaces inline styles in partials/tabs/user_media.html)
   =========================================== */

.user-media-intro {
  margin-bottom: 1rem;
}

.user-media-upload {
  border: 2px dashed var(--border-color);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  background: var(--light-background);
}

.user-media-upload--dragover {
  border-color: var(--accent);
}

.user-media-upload-row {
  margin-bottom: 0.75rem;
}

.user-media-upload-label {
  display: inline-block;
  font-size: 0.85rem;
  margin-right: 0.75rem;
}

.user-media-upload-folder-input {
  padding: 0.3rem;
  font-size: 0.85rem;
  width: 140px;
  margin-left: 0.25rem;
}

.user-media-upload-progress {
  margin-top: 0.75rem;
}

.user-media-upload-status {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.user-media-upload-status--ok {
  color: var(--success);
}

.user-media-upload-status--err {
  color: var(--error);
}

.user-media-folders {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.user-media-folders-label {
  font-size: 0.85rem;
  opacity: 0.7;
}

.user-media-folders-btn {
  font-size: 0.8rem;
}

.user-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.user-media-card {
  background: var(--light-background);
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  position: relative;
}

.user-media-card-thumb {
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
}

.user-media-card-thumb--video {
  font-size: 2rem;
  opacity: 0.4;
}

.user-media-card-img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.user-media-card-name {
  font-size: 0.8rem;
  word-break: break-all;
  margin-bottom: 0.25rem;
}

.user-media-card-meta {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.user-media-card-actions {
  display: flex;
  gap: 0.25rem;
}

.user-media-card-btn {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
}

/* ===========================================
   ITEM VERSION UPLOAD (replaces inline styles in partials/item_version_upload.html)
   =========================================== */

.item-version-upload-cell-sm {
  font-size: 0.85rem;
}

.item-version-upload-no-file {
  opacity: 0.5;
}

.item-version-upload-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.item-version-upload-add-btn {
  padding: 0.4rem 0.8rem;
}

.item-version-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.item-version-upload-hint {
  margin-bottom: var(--space-2);
}

.item-version-upload-file-table {
  width: 100%;
  border-collapse: collapse;
}

.item-version-upload-file-table thead tr {
  text-align: left;
  font-size: 0.8rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.item-version-upload-file-table th:first-child {
  padding: 0.4rem 0.5rem 0.4rem 0;
}

.item-version-upload-file-table th + th {
  padding: 0.4rem 0.5rem;
}

.item-version-upload-file-table th:last-child {
  width: 40px;
}

.item-version-upload-add-row {
  margin-top: var(--space-2);
}

.item-version-upload-queue {
  margin-bottom: 0.75rem;
}

.item-version-upload-speed {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* ===========================================
   PROJECT PAGE (replaces inline styles in pages/project.html)
   =========================================== */

.project-page .store-cover {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: var(--space-5);
}
.project-page .store-actions .secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.project-page .follow-btn.is-selected {
  opacity: 0.7;
}
.project-page .follower-count-muted {
  font-size: 0.85rem;
  opacity: 0.7;
  padding: 0.5rem 0;
}
.project-page .item-tags .tag {
  text-decoration: none;
  color: inherit;
}
.project-page .promo-details {
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}
.project-page .promo-details summary {
  cursor: pointer;
  opacity: 0.7;
}
.project-page .promo-input {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.project-page .store-footer-links {
  margin-top: var(--space-2);
}

/* ===========================================
   INSERTION LIST (replaces inline styles in partials/insertion_list.html)
   =========================================== */

.insertion-list-heading {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: var(--space-4);
}
.insertion-list-toolbar {
  margin-bottom: var(--space-4);
}
.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: 0.875rem;
}
.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-muted);
  padding: 1.25rem;
  margin-bottom: var(--space-4);
}

.proj-members-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.proj-members-stat {
  font-size: 1.5rem;
  font-weight: bold;
}

.proj-members-add {
  margin-bottom: var(--space-6);
}

.proj-members-add-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: end;
}

.proj-members-field-label {
  font-size: 0.85rem;
  display: block;
  margin-bottom: var(--space-1);
}

.proj-members-field-label--spaced {
  margin-top: 0.75rem;
}

.proj-members-add-result {
  margin-top: var(--space-2);
}

.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: 1rem;
  margin-bottom: var(--space-3);
}
.placement-list-table {
  width: 100%;
  font-family: var(--font-body);
  margin-bottom: var(--space-4);
}
.placement-list-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.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(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
}
.placement-list-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-bottom: var(--space-1);
}
.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(--space-5); }
.user-synckit-create-body {
  padding: var(--space-4);
  background: var(--light-background);
  border: 1px solid var(--border-color);
}
.user-synckit-create-form {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: flex-end;
}
.user-synckit-create-form label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}
.user-synckit-create-form input[type="text"],
.user-synckit-create-form select {
  padding: var(--space-2);
  font-size: 0.9rem;
}
.user-synckit-create-form input[type="text"] { width: 220px; }
.user-synckit-create-form select { width: 180px; }

.user-synckit-code { font-size: 0.8rem; }
.user-synckit-hint {
  font-size: 0.7rem;
  margin-left: var(--space-1);
}

.user-synckit-inline-btn {
  margin-left: var(--space-2);
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}
.user-synckit-row-btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}
.user-synckit-row-btn + .user-synckit-row-btn {
  margin-left: var(--space-1);
}

.user-synckit-status-active { color: var(--success); }
.user-synckit-status-inactive { color: var(--error); }

.user-synckit-edit-btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}

.user-synckit-create-error {
  color: var(--error);
  margin-top: var(--space-2);
}

/* ===========================================
   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(--space-5); }

/* Confirm-setup section is separated from the backup codes by a top border. */
.totp-confirm {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

/* QR code container, centered above the manual-entry details. */
.totp-qr {
  text-align: center;
  margin-bottom: var(--space-4);
}
.totp-qr img {
  max-width: 200px;
  image-rendering: pixelated;
}

/* Collapsible "Manual entry key" group. */
.totp-manual { margin-bottom: var(--space-4); }
.totp-manual summary {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.85rem;
}
.totp-manual-secret {
  display: block;
  margin-top: var(--space-2);
  word-break: break-all;
  font-size: 0.85rem;
  padding: var(--space-2);
  background: var(--surface-muted);
}

/* 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(--space-2);
}
.backup-codes-grid code {
  padding: var(--space-2);
  background: var(--surface-muted);
  text-align: center;
  font-size: 0.9rem;
}

/* Status row for the "Enabled" badge above the management forms. */
.totp-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Container where regenerated backup codes are swapped in via HTMX. */
.totp-regen-output { margin-top: var(--space-3); }

/* ===========================================
   DASHBOARD-USER SHELL (replaces inline styles in dashboards/dashboard-user.html)
   =========================================== */

.sandbox-banner {
  background: var(--highlight);
  color: var(--primary-light);
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.sandbox-banner-link {
  color: var(--primary-light);
  text-decoration: underline;
  margin-left: 0.5rem;
}
.account-status-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.suspension-wrap {
  margin-bottom: 1rem;
}

.password-warning-banner {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  font-size: 0.95rem;
}

.dash-user-header-links {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 1.5rem;
}

.dash-user-header-link {
  font-size: 0.9rem;
  opacity: 0.7;
}

.checklist-recovery {
  padding: 0.75rem 0;
  text-align: right;
}

.checklist-recovery-link {
  font-size: 0.85rem;
  opacity: 0.7;
}

.tab-spinner {
  margin-left: 1rem;
}

/* ===========================================
   USER PROFILE PAGE (replaces inline styles in pages/user.html)
   =========================================== */

.user-page .creator-paused-notice {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.95rem;
}

.user-page .profile-action-row {
  margin-top: 1rem;
}

.user-page .profile-edit-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 0.9rem;
}

.user-page .follow-btn.is-selected {
  opacity: 0.7;
}

.user-page .follower-count {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.user-page .profile-share-row {
  margin-top: 0.75rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 0.9rem;
}

.user-page .profile-share-link {
  opacity: 0.7;
}

.user-page .collections-section {
  margin-bottom: 2rem;
}

/* ===========================================
   SUSPENSION BANNER (replaces inline styles in partials/suspension_banner.html)
   =========================================== */

.suspension-banner {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.suspension-banner-title {
  margin: 0 0 var(--space-2) 0;
  color: var(--danger);
}

.suspension-banner-reason {
  font-size: 0.9rem;
  margin: 0 0 var(--space-3) 0;
}

.suspension-banner-denial {
  background: var(--light-background);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

.suspension-banner-denial-response {
  margin: var(--space-1) 0 0 0;
}

.suspension-banner-denial-hint {
  margin: var(--space-2) 0 0 0;
  opacity: 0.7;
}

.suspension-banner-pending {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

.suspension-banner-appeal {
  margin-top: var(--space-2);
}

.suspension-banner-appeal-summary {
  cursor: pointer;
  font-size: 0.9rem;
}

.suspension-banner-appeal-form {
  margin-top: var(--space-3);
}

.suspension-banner-appeal-text {
  width: 100%;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

.suspension-banner-appeal-submit {
  font-size: 0.85rem;
}

.suspension-banner-export {
  margin-top: var(--space-3);
}

.suspension-banner-export-link {
  font-size: 0.9rem;
}

/* ===========================================
   REPORT MODAL (replaces inline styles in partials/report_modal.html)
   =========================================== */

.report-modal-content {
  background: var(--background);
  padding: var(--space-6);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.report-modal-title {
  font-size: 1.2rem;
  margin: 0;
}

.report-modal-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.report-modal-legend {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.report-modal-option {
  display: block;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.report-modal-details {
  margin-bottom: var(--space-4);
}

.report-modal-details-label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.report-modal-textarea {
  width: 100%;
  font-size: 0.85rem;
}

.report-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ===========================================
   LIBRARY COLLECTIONS TAB (partials/tabs/library_collections.html)
   =========================================== */

.badge.is-faded { opacity: 0.5; }
.lib-coll-new { margin-top: var(--space-5); }
.lib-coll-new-summary { cursor: pointer; font-weight: bold; }
.lib-coll-new-form { margin-top: var(--space-4); }
.lib-coll-wishlist-heading {
  font-size: 1.1rem;
  margin-top: 2.5rem;
  margin-bottom: var(--space-4);
  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: 0.25rem; }

/* ===========================================
   USER ANALYTICS TAB (partials/tabs/user_analytics.html)
   =========================================== */

.analytics-export-link { margin-left: var(--space-4); }
.analytics-range-heading {
  font-size: 1.1rem;
  margin: 0;
}
.analytics-section--comparison { margin-bottom: 2rem; }
.analytics-section--comparison h2 { margin-bottom: var(--space-4); }
.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(--space-2);
}
.analytics-revenue-bar {
  height: 10px;
  min-width: 2px;
  max-width: 80px;
  background: var(--highlight);
}

/* ===========================================
   ITEM EMBED TAB (templates/partials/tabs/item_embed.html)
   =========================================== */
.embed-intro {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-bottom: var(--space-5);
}
.embed-option {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.embed-option h4 {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.embed-option-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}
.embed-preview {
  margin: var(--space-3) 0;
  overflow: hidden;
}
.embed-iframe {
  border: none;
  border-radius: 4px;
}
.embed-layout-toggle {
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-4);
}
.embed-layout-toggle label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.embed-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.embed-snippet {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--light-background);
  border-radius: 4px;
  font-size: 11px;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}
.copy-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--accent);
  color: var(--primary-light);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.copy-btn:hover {
  opacity: 0.9;
}

/* ===========================================
   ADMIN NAV (templates/partials/admin_nav.html)
   =========================================== */
.admin-nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.admin-nav a {
  padding: 0.3rem 0.8rem;
  text-decoration: none;
}

/* ===========================================
   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(--text-muted);
}
.video-store-cta {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--surface-muted);
  text-align: center;
}
.video-cta-lead {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.video-cta-price {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.video-cta-fineprint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.75rem;
}
.video-library-status {
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.video-tag-link {
  text-decoration: none;
  color: inherit;
}

/* ===========================================
   LIBRARY LOCKED PAGE (templates/pages/library_locked.html)
   =========================================== */
.library-locked-byline {
  opacity: 0.7;
}
.library-locked-cover {
  max-width: 320px;
  margin: var(--space-4) 0;
}
.library-locked-purchase {
  margin-top: var(--space-6);
}
.library-locked-lead {
  opacity: 0.85;
}
.library-locked-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.library-locked-bundles {
  margin-top: var(--space-5);
}
.library-locked-bundles-title {
  font-weight: bold;
}
.library-locked-bundle {
  margin-top: var(--space-2);
}
.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(--space-6) 0; }
.blog-empty-hint {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-top: var(--space-2);
}
.blog-post-title-link { font-weight: bold; }
.blog-post-actions {
  display: flex;
  gap: var(--space-2);
}

/* Blog editor */
.blog-editor h1 {
  font-size: 2rem;
  margin-bottom: var(--space-4);
  text-align: left;
}
.blog-editor .editor-form { max-width: 800px; }
.blog-editor .editor-form .form-group { margin-bottom: 1.25rem; }
.blog-editor .editor-form textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-height: 400px;
  resize: vertical;
}
.blog-editor-slug-spinner { font-size: 0.85rem; }
.blog-editor-media-btn {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}
.blog-editor-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.blog-editor-status { margin-top: var(--space-2); }

/* ===========================================
   AUDIO PLAYER (replaces inline styles in pages/audio_player.html)
   =========================================== */

.audio-store-cta {
  margin: 2rem 0;
  padding: var(--space-5);
  background: var(--surface-muted);
  text-align: center;
}
.audio-store-cta .audio-access-msg {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.audio-store-cta .audio-price {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.audio-store-cta .audio-fee-note {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.75rem;
}
.audio-library-status {
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.audio-tag-link {
  text-decoration: none;
  color: inherit;
}

/* ===========================================
   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(--space-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.section-row-title { flex: 1; font-weight: bold; }
.section-row-length { font-size: 0.8rem; opacity: 0.6; }
.section-row .section-delete-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.section-add-body { margin-top: var(--space-3); }

.wizard-actions { margin-top: var(--space-5); }

/* ===========================================
   PROJECT SUBSCRIPTIONS TAB (templates/partials/tabs/project_subscriptions.html)
   =========================================== */

.subs-connect-info {
  margin-bottom: var(--space-5);
  padding: 1.25rem;
}
.subs-new-tier { margin-bottom: var(--space-6); }

.tier-row-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}
.tier-action-btn {
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
}

.subs-members-bar {
  margin-top: var(--space-6);
  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: 2.5rem 0;
  padding: var(--space-5);
  background: var(--surface-muted);
  text-align: center;
}
.article-page .store-cta-lead {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.article-page .store-cta-price {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.article-page .store-cta-note {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.75rem;
}
.article-page .store-cta .library-status {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Plain (text-decoration-free, inherit-colored) tag link on text_reader.
   Distinguishes from the default linked .article-tag in library_text. */
.article-page .article-tag--plain {
  text-decoration: none;
  color: inherit;
}

/* Library back-link breadcrumb shared by the media library pages. */
.media-container .library-back {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: var(--space-4) 0;
}
.media-container .library-back a { color: var(--detail); }

/* 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(--light-background);
  padding: 1.5rem;
  margin-top: var(--space-6);
}
.media-container .library-downloads h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.media-container .download-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 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: 0.9rem;
}
.media-container .download-label { flex: 1; }
.media-container .download-label--empty { flex: 1; opacity: 0.5; }
.media-container .download-size {
  font-size: 0.85rem;
  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: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* 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: 1.3rem;
}
.library-page .lib-summary-body { margin-top: var(--space-4); }

/* License section on library_downloads.html. */
.library-page .lib-license-name { margin-bottom: 0.75rem; }
.library-page .lib-license-download {
  font-size: 0.9rem;
  color: var(--detail);
}

/* Footer below the item-footer (was inline on library_downloads.html). */
.library-page .item-footer-sub { margin-top: var(--space-2); }

/* library_text.html footer (terse text-page footer, distinct from the
   text_reader.html .text-reader-footer that has its own classed style). */
.article-page .lib-text-footer {
  text-align: center;
  padding: var(--space-6);
  font-size: 0.85rem;
  opacity: 0.6;
  border-top: 1px solid var(--border);
}
.article-page .lib-text-footer a { color: var(--detail); }

/* 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(--space-5);
  font-size: 0.9rem;
  opacity: 0.8;
}
.support-tab .support-form { max-width: 600px; }
.support-tab .response-times {
  margin-top: var(--space-6);
  font-size: 0.85rem;
  opacity: 0.7;
}
.support-tab .response-times ul {
  margin: var(--space-1) 0 0 var(--space-5);
}

/* 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: 0.9rem;
  opacity: 0.8;
  margin-top: var(--space-2);
}
.creators-page .trial-callout {
  font-size: 0.9rem;
  margin-top: var(--space-5);
}

/* ===========================================
   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: 0.9rem;
  opacity: 0.7;
  margin-bottom: var(--space-4);
}

/* Compact row-action button (wishlist Add to Cart / Remove, etc.). */

.library-filter-wrap { margin-bottom: var(--space-4); }

/* Purchases table "Open" action link + context menu trigger group. */
.library-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.library-row-open {
  font-size: 0.8rem;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}

/* Section sub-heading inside purchases tab (e.g. "Subscriptions"). */
.library-tab-subheading {
  font-size: 1.1rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  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(--space-2);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  border-radius: 4px;
}
.context-menu-btn:hover {
  background: var(--surface-muted);
  color: var(--detail);
}
.context-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--light-background);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  min-width: 160px;
  z-index: 100;
}
.context-menu.open { display: block; }
.context-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--detail);
  cursor: pointer;
  text-decoration: none;
}
.context-menu-item:hover { background: var(--surface-muted); }
.context-menu-item.danger { color: var(--danger); }

/* Inline license-key code chip shown beneath a purchase date. */
.license-key-inline { margin-top: var(--space-1); }
.key-code-small {
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
  background: var(--surface-muted);
  border-radius: 3px;
  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 { color: inherit; text-decoration: none; }
.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)
   =========================================== */

/* Status badges built ad hoc (Active / Trusted). */
.badge-active,
.badge-trusted {
  background: var(--success-bg);
  color: var(--success);
}

/* "Trust" toggle button sits next to a Trusted badge. */
.admin-entries-trust-btn {
  margin-left: var(--space-1);
}

/* Waitlist pitch cell — narrow body text. */
.admin-entries-pitch {
  font-size: 0.9rem;
  max-width: 300px;
}
.admin-entries-pitch-empty {
  opacity: 0.5;
  font-style: italic;
}
.admin-entries-pitch-inviter {
  margin-top: var(--space-1);
}

/* Appeal text columns. */
.admin-entries-reason {
  font-size: 0.9rem;
  max-width: 200px;
}
.admin-entries-appeal {
  font-size: 0.9rem;
  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(--space-1);
}

/* Pagination row at the bottom of admin entry tables. */
.admin-entries-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 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(--space-4);
}

.item-sales-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.item-sales-tab-header h2 { margin: 0; }
.item-overview-embed {
  margin-top: var(--space-5);
}
.item-overview-embed > summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
}

/* ===========================================
   ITEM TEXT EDITOR (partials/item_text_editor.html)
   =========================================== */

.text-editor-insert-btn {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

.text-editor-placeholder {
  opacity: 0.6;
}

.text-editor-actions {
  margin-top: var(--space-4);
}

/* ===========================================
   PROJECT ANALYTICS TAB (partials/tabs/project_analytics.html)
   =========================================== */

.tab-docs-extra {
  margin-left: var(--space-4);
}

.analytics-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.analytics-tab-header h2 {
  font-size: 1.1rem;
  margin: 0;
}

.analytics-empty-block {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  opacity: 0.6;
}

/* ===========================================
   RECEIPT PAGE INLINE FRAGMENTS (pages/receipt.html)
   =========================================== */

.receipt-page .receipt-brand {
  opacity: 0.6;
  font-size: 0.9rem;
}
.receipt-page .receipt-meta {
  text-align: right;
}
.receipt-page .receipt-meta-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.6;
}
.receipt-page .receipt-meta-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.4;
  margin-top: 0.25rem;
}
.receipt-page .print-btn {
  margin-top: var(--space-4);
  font-size: 0.85rem;
}

/* ===========================================
   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: 0.85rem;
  margin-bottom: var(--space-2);
}
.import-page .import-mapping-label {
  margin-bottom: 0.75rem;
}
.import-page .import-progress-label {
  font-size: 0.9rem;
}
.import-page .import-start-btn {
  margin-top: var(--space-4);
}
.import-page .import-history-heading {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
}

/* ===========================================
   SLUG STATUS PARTIAL (partials/slug_status.html)
   =========================================== */

.slug-status {
  font-size: 0.85rem;
}
.slug-status.available { color: var(--success); }
.slug-status.taken { color: var(--error); }

.slug-suggestions {
  font-size: 0.85rem;
  display: block;
  margin-top: 0.25rem;
}
.slug-suggestion-link {
  margin-right: var(--space-2);
}

/* ===========================================
   STRIPE DISCLAIMER PAGE (pages/stripe_disclaimer.html)
   =========================================== */

.stripe-disclaimer-page .container {
  max-width: 700px;
  margin: var(--space-5) auto;
  padding: 0 var(--space-6);
}
.stripe-disclaimer-page .stripe-disclaimer-title {
  text-align: center;
}
.stripe-disclaimer-page .tagline {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: var(--space-6);
  text-align: center;
}
.stripe-disclaimer-page h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
}
.stripe-disclaimer-page .stripe-disclaimer-lead {
  margin-bottom: var(--space-5);
  opacity: 0.8;
}
.stripe-disclaimer-page .section { margin-bottom: var(--space-6); }
.stripe-disclaimer-page .section h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
}
.stripe-disclaimer-page .section ul {
  margin: 0;
  padding-left: 1.25rem;
}
.stripe-disclaimer-page .section li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}
.stripe-disclaimer-page .stripe-disclaimer-fee-lead {
  margin-bottom: 0.75rem;
}
.stripe-disclaimer-page .fee-example {
  background: var(--background);
  padding: var(--space-4) 1.25rem;
  margin: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.stripe-disclaimer-page .fee-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}
.stripe-disclaimer-page .fee-row.highlight {
  font-weight: bold;
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
.stripe-disclaimer-page .fee-row .zero { color: var(--detail); }
.stripe-disclaimer-page .stripe-disclaimer-note {
  font-size: 0.9rem;
  opacity: 0.8;
}
.stripe-disclaimer-page .acceptance {
  background: var(--background);
  padding: 1.25rem;
  margin: var(--space-5) 0;
}
.stripe-disclaimer-page .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.stripe-disclaimer-page .checkbox-group input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.stripe-disclaimer-page .checkbox-group label {
  line-height: 1.5;
  cursor: pointer;
}
.stripe-disclaimer-page .button-row {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.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: 0.85rem;
  opacity: 0.6;
  margin-top: var(--space-4);
  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(--space-4); }

/* Inline-block secondary action link styled as a button. */
.btn-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}
.btn-link--sm { padding: var(--space-2) var(--space-4); }

/* Username-availability spinner (wizards + standalone account form). */
.username-spinner { font-size: 0.85rem; }

/* Centered foot-link beneath wizard cards. */
.foot-link--centered { margin-top: var(--space-4); text-align: center; }

/* Health-page status dots. */
.health-indicator-dot { width: 8px; height: 8px; margin-right: 0.4rem; }
.health-error-text { color: var(--health-error); }

/* 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: 0.8em; }

/* 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(--space-2);
  cursor: pointer;
  font-size: 0.9rem;
}

/* Tag suggestion list. */
.tag-suggest-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}
.tag-suggest-pill {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  margin: 0.1rem;
}

/* 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(--space-2);
}

/* Tiny inline action button (admin-metrics, dashboard-item share). */
.dashboard-item-share-btn {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  opacity: 0.6;
}

/* Monospaced page sub-headers. */
.section-mono-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: var(--space-5);
}
.section-mono-hint {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-top: var(--space-2);
}

/* 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(--space-4);
  align-items: flex-end;
}

/* Login screen: "or" divider + passkey button + error slot. */
.login-divider {
  text-align: center;
  margin: var(--space-5) 0 var(--space-4);
  opacity: 0.5;
  font-size: 0.85rem;
}
.login-passkey-btn { width: 100%; }
.login-passkey-error { margin-top: var(--space-2); }

/* Upload-progress sibling text (item_audio_upload). */
.upload-speed-text {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* Faded "Following" follow-button state. */
.follow-btn.is-selected { opacity: 0.7; }

/* Project blog footer. */
.project-blog-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  opacity: 0.6;
}
.project-blog-footer a { color: var(--detail); }

/* Compact alert / paragraph margin variants used 2+ times. */
.alert.mb-4 { margin-bottom: var(--space-4); }

/* Paywall trust line. */
.paywall-trust {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: var(--space-4);
  line-height: 1.4;
}

/* Confirm-delete: button background already covered by .danger class —
   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(--space-4) auto;
}

/* Inline-form margin-left for adjacent pills (collection.html private badge). */
.badge--inline-l { margin-left: var(--space-2); }

/* ===== Team page ===== */

.team-page { max-width: 56rem; margin: 0 auto; }
.team-intro {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 var(--space-6);
  opacity: 0.85;
}
.team-section { margin-top: var(--space-8); }
.team-section + .team-section { margin-top: var(--space-7); }
.team-empty {
  font-size: 0.95rem;
  opacity: 0.65;
  font-style: italic;
}
.team-card-experience {
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.5;
}
.team-card-links {
  margin: var(--space-2) 0;
  font-size: 0.95rem;
}
.team-card-link { font-weight: 500; }
.team-card-bio {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.team-card-bio > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  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(--space-3);
  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: 3px;
  padding: var(--space-2) var(--space-3);
  min-width: 220px;
}
.synckit-billing-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
}
.synckit-billing-toggle { margin-left: auto; color: var(--text-muted, #777); }
.synckit-billing-status {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
}
.synckit-billing-status--draft { background: var(--surface-muted); }
.synckit-billing-status--active { background: var(--success-bg); color: var(--success); }
.synckit-billing-status--suspended_unpaid { background: var(--warning-bg); color: var(--warning); }
.synckit-billing-status--canceled { background: var(--danger-bg); color: var(--danger); }
.synckit-billing-price { font-weight: 600; }
.synckit-billing-body {
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.synckit-billing-section { display: flex; flex-direction: column; gap: var(--space-2); }
.synckit-billing-subheading { font-size: 0.875rem; margin: 0; font-weight: 600; }
.synckit-knob-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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(--space-1); min-width: 0; }
.synckit-billing-summary-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.synckit-price-preview { font-size: 1.125rem; font-weight: 600; }
.synckit-billing-actions { display: flex; gap: var(--space-2); }
.synckit-billing-manage { flex-direction: row; gap: var(--space-2); }
.synckit-billing-status-msg { font-size: 0.875rem; min-height: 1.25em; }
.synckit-billing-status-msg--info { color: var(--text-muted, #777); }
.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: 0.8125rem;
}
.synckit-gauge-value { color: var(--text-muted, #777); }
.synckit-gauge-fill--warn { background: var(--warning); }
.synckit-gauge-fill--danger { background: var(--danger); }

/* Cost-allocation widget on /pricing — "Where your tier fee goes". */
.cost-allocation { margin-top: 0.5rem; }
.cost-allocation-intro {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.cost-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.cost-row-label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.cost-row-label strong { font-family: var(--font-heading); font-size: 1.05rem; display: block; }
.cost-bar {
  display: flex;
  height: 2.25rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
}
.cost-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #fff;
  cursor: help;
  padding: 0 0.25rem;
  overflow: hidden;
  white-space: nowrap;
}
.cost-bar-seg-stripe       { background: #5b6f8a; }
.cost-bar-seg-storage      { background: #7d8c5e; }
.cost-bar-seg-support      { background: #8b6b4a; }
.cost-bar-seg-engineering  { background: #6b4a8b; }
.cost-bar-seg-reserves     { background: #4a6b8b; }
.cost-bar-seg-earnback     { background: #8b8b4a; }
.cost-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}
.cost-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.cost-legend-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .cost-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .cost-bar-seg { font-size: 0; }
}