:root {
  /* Typography: nothing. All three tokens come from typography.css, which
     loads before this file.

     `--font-mono` and `--font-sans` are the house slots and `--font-display`
     is MNW's own, an override declared in build.rs. Do not redefine any of the
     three here -- that is the divergence the unification deleted, and this
     file is the one that would win. A product face belongs in the override,
     where the whole tree can read it. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a:hover {
  text-decoration: underline;
}

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

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

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

/* The profile is described, so it has no container: the measure lands on the
   element the renderer draws the page into. The width is this page's own and
   the rest of the block was the design system's. */
.user-page main { max-width: 600px; }

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

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

/* READING COLUMN, the 680px measure every long-form surface uses. Narrower
   than .container and with tighter horizontal padding, so it is its own
   primitive rather than a .container width tier.

   These four wrappers were four identical rules until 2026-08-16. They are
   grouped rather than replaced by one class because the charter treats a new
   class as a smell, and because grouping keeps each selector's own
   specificity intact. A fifth long-form surface joins this list; it does not
   copy the recipe.

   .media-container's rule used to live in media-player.css. It is here now so
   the measure has one definition; that sheet keeps its descendant rules. */
.article-page .article-container,
.doc-container,
.docs-index,
.media-container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--gap-page) var(--gap-pane) var(--gap-page);
}

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

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

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

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

/* A described act carries the generated `.button` class, and the element rule
   above sets the same surface, bevel and tone the generated class does. This
   file is in @layer components, which the order statement puts after
   `makeover`, so the element rule wins whatever the specificity. Without the
   handoff below a described act renders in --surface-overlay with
   --shadow-raised and, worse, in --content rather than its tone: a
   destructive act looks identical to an ordinary one. Same mechanism and same
   remedy as `.tab.chosen` further down; read the comment there.

   The split is deliberate. The app keeps padding, border and font from the
   element rule, makeover keeps surface, bevel and tone. That is the
   arrangement that already makes `.field` work, where the app's input rule
   happens to set only geometry and typography.

   Tone is handed back on `[data-tone]` rather than on `.button`, because an
   untoned button has no colour in the layer to roll back to and would land on
   the UA default instead of --content. */
.button,
.chip,
.segment,
.toggle {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

.button:hover,
.chip:hover,
.segment:hover,
.toggle:hover {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
}

.button:active,
.chip:active,
.segment:active,
.toggle:active {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

.button[data-tone] {
  /* respec-ok: a layer handoff, not a value. */
  color: revert-layer;
}

/* A described link, same handoff on the `a` and `button` element rules.
   `a { color: var(--content); text-decoration: none }` renders a described
   link as body text -- the reader cannot tell it is a link at all, which is
   the same defect as the lost tone above and worse for being silent.

   `button.link` is the second arm: a link that posts is a button in the
   markup, and makeover already flattens it (`background: none`, no border, no
   padding, `font: inherit`). The element rule's chrome beat all four, so it
   rendered as an ordinary raised button. Only the properties makeover sets on
   this class are handed back; `font` is handed back on the button arm alone,
   because an `a.link` has no lower-layer font to roll back to and would land
   on the UA default face. */
.link {
  /* respec-ok: a layer handoff, not a value. */
  color: revert-layer;
  text-decoration: revert-layer;
}

button.link {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  border: revert-layer;
  padding: revert-layer;
  font: revert-layer;
  box-shadow: revert-layer;
  cursor: revert-layer;
}

/* A described facet value, the third arm of the same handoff. makeover 0.67.0
   names the element-chrome reset, and a facet control withdraws the button's
   fill, stroke and bevel with it: a value reads flat until it is hovered,
   pressed or in force. The element rule above supplies all three, so without
   this a described facet renders as an ordinary raised button and
   `[aria-pressed="true"]` is its only correct state -- which is the whole of
   what the panel had to say and the one thing it could not.

   Wider than the `.button` group above by one property. That group keeps the
   app's border deliberately, because a described act is still a button. Here
   the flat rest look IS the withdrawal of the border, so it is handed back
   with the other two. */
.facet-take,
.facet-prune {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  border: revert-layer;
  box-shadow: revert-layer;
}

.facet-take:hover,
.facet-prune:hover {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
}

.facet-take:active,
.facet-prune:active,
.facet-take[aria-pressed="true"],
.facet-prune[aria-pressed="true"] {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

/* A described field on a `select` or a `textarea`. The input rule further down
   sets padding and font only, which is why the shipped `.field` precedents
   survived; these two also set `background` and `box-shadow`, so a described
   field on either renders in --surface-sunken rather than the well. The focus
   ring is handed back with them: makeover insets it (`calc(-1 * 2px)`) so it
   does not collide with the bevel, and the app's outer 2px was winning. */
.field {
  /* respec-ok: a layer handoff, not a value. */
  background: revert-layer;
  box-shadow: revert-layer;
}

.field:focus-visible {
  /* respec-ok: a layer handoff, not a value. */
  outline-offset: revert-layer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

select {
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Muted card primitive. */
.card-muted {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
}
/* Bordered card. Templates put this modifier on the element alongside any
   component class of their own (.tier-card, .fork-card), so the name the
   charter teaches is the name in the markup. A described screen names none of
   them: a card there is a region, and the design system draws it. */
.card--bordered {
  background: transparent;
  padding: var(--gap-section);
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.fork-card { padding: var(--gap-pane); display: flex; flex-direction: column; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===========================================
   NOTIFICATION SURFACES (info-box, warning-box, error-message)
   =========================================== */

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

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

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

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

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

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

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

/* ===========================================
   ERROR PAGE
   =========================================== */

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

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

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

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

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


/* ===========================================
   BUY PAGE (standalone direct purchase)
   =========================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===========================================
   SECTIONED CONTENT (tabs + panels, shared by three pages)
   =========================================== */

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

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

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

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

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