/* ==========================================================================
   ASTER — Component recipes
   Requires aster-tokens.css. Implements §10 of DESIGN-SYSTEM.md.

   Naming: .as-<component>[--<variant>]
   Every class here is a direct expression of a documented rule. If you need
   something not covered, derive it from the nearest rule — don't invent.
   ========================================================================== */

/* ==========================================================================
   1. TYPOGRAPHY UTILITIES
   ========================================================================== */

/* ---- Page layer (ratio line-heights, Clash Display ≥32px) ---- */
.as-display-xl {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-display-xl); line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls); color: var(--ink);
}
.as-display-lg {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-display-lg); line-height: var(--t-display-lg-lh);
  letter-spacing: var(--t-display-lg-ls); color: var(--ink);
}
.as-display-md {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-display-md); line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-ls); color: var(--ink);
}
.as-lead {
  font-size: var(--t-lead); line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-ls); font-weight: var(--fw-regular); color: var(--ink-2);
}
.as-eyebrow {
  font-size: var(--t-lead); line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-ls); font-weight: var(--fw-medium); color: var(--accent-500);
}
.as-prose-lg {
  font-size: var(--t-prose-lg); line-height: var(--t-prose-lg-lh);
  letter-spacing: var(--t-prose-lg-ls); font-weight: var(--fw-regular); color: var(--ink-2);
}
.as-prose {
  font-size: var(--t-prose); line-height: var(--t-prose-lh);
  letter-spacing: var(--t-prose-ls); font-weight: var(--fw-regular); color: var(--ink-2);
}
.as-overline {
  font-size: var(--t-overline); line-height: var(--t-overline-lh);
  letter-spacing: var(--t-overline-ls); font-weight: var(--fw-medium);
  text-transform: uppercase; color: var(--ink-2);
}

/* ---- App layer (integer grid) ---- */
.as-title-lg { font-size: var(--t-title-lg); line-height: var(--t-title-lg-lh); letter-spacing: var(--t-title-lg-ls); font-weight: var(--fw-semibold); }
.as-title    { font-size: var(--t-title);    line-height: var(--t-title-lh);    letter-spacing: var(--t-title-ls);    font-weight: var(--fw-semibold); }
.as-heading  { font-size: var(--t-heading);  line-height: var(--t-heading-lh);  letter-spacing: var(--t-heading-ls);  font-weight: var(--fw-semibold); }
.as-body-strong { font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: -0.02em; font-weight: var(--fw-semibold); }
.as-body     { font-size: var(--t-body);     line-height: var(--t-body-lh);     letter-spacing: var(--t-body-ls);     font-weight: var(--fw-medium); }
.as-label    { font-size: var(--t-label);    line-height: var(--t-label-lh);    letter-spacing: var(--t-label-ls);    font-weight: var(--fw-medium); color: var(--ink-4); }
.as-caption  { font-size: var(--t-label);    line-height: var(--t-label-lh);    letter-spacing: var(--t-label-ls);    font-weight: var(--fw-medium); color: var(--ink-2); }
.as-mono     { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0; }

.as-ink   { color: var(--ink); }
.as-ink-2 { color: var(--ink-2); }
.as-ink-3 { color: var(--ink-3); }
.as-ink-4 { color: var(--ink-4); }
.as-ink-5 { color: var(--ink-5); }
.as-accent-text { color: var(--accent-500); }

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */
.as-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  height: var(--h-control); padding: var(--s-2) var(--s-4);
  border: 0; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: var(--transition-button);
}
.as-btn:disabled,
.as-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: default; }
/* leading icon gets tighter left padding */
.as-btn--icon-start { padding-left: var(--s-3); }
.as-btn--icon-only  { width: var(--h-control); padding: 0; }
.as-btn svg { width: var(--icon); height: var(--icon); flex: none; }

/* Popover footer: same --t-body as the field above; only the box shrinks. */
.as-btn--sm {
  height: var(--h-control-sm);
  padding: 0 var(--s-3);
}

.as-btn--primary   { background: var(--n-900); color: var(--n-0); box-shadow: var(--shadow-raised); }
.as-btn--primary:hover { background: #000; }
[data-theme="dark"] .as-btn--primary { background: var(--n-900); color: var(--bg-canvas); }

.as-btn--accent    { background: var(--accent-btn); color: var(--accent-btn-fg); box-shadow: var(--glow-accent); }
.as-btn--accent:hover { background: var(--accent-btn-hover); }

.as-btn--secondary { background: var(--bg-canvas); color: var(--ink); box-shadow: var(--shadow-raised); }
.as-btn--secondary:hover { background: var(--bg-hover); }

.as-btn--soft  { background: var(--a-1); color: var(--ink-4); transition: var(--transition-ghost); }
.as-btn--soft:hover { background: var(--a-2); color: var(--ink); }

/* On: the control tints itself. Accent, not a per-tool hue — the workspace
   picks the accent and a hardcoded green fights an orange one. */
.as-btn--active {
  background: var(--accent-100); color: var(--accent);
  transition: var(--transition-ghost);
}
.as-btn--active:hover { background: var(--accent-200); }

.as-btn--ghost { background: transparent; color: var(--ink-3); transition: var(--transition-ghost); }
.as-btn--ghost:hover { background: var(--a-1); color: var(--ink); }

.as-btn--danger { background: var(--danger-strong); color: #fff; box-shadow: var(--glow-danger); }
.as-btn--danger:hover { background: var(--danger-deep); }

/* Page-layer CTA: 48px, 12px radius, larger type, allowed a 1px lift */
.as-btn--cta {
  height: var(--h-cta); padding: var(--s-6) var(--s-8);
  border-radius: var(--r-xl); gap: var(--s-4);
  font-size: var(--t-prose-lg); line-height: var(--t-prose-lg-lh);
  letter-spacing: var(--t-prose-lg-ls);
}
.as-btn--cta:hover { transform: translateY(-1px); }
.as-btn--cta svg { width: 20px; height: 20px; }

/* Nav pill: 36px, fully round */
.as-btn--pill {
  height: 36px; padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  font-size: var(--t-prose); line-height: 24px; letter-spacing: var(--t-prose-ls);
}

/* ==========================================================================
   3. INPUTS
   ========================================================================== */
.as-field {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--h-control); padding: 0 var(--s-3);
  border-radius: var(--r-md); background: transparent;
  box-shadow: var(--shadow-ring);
  transition: var(--transition-ghost);
}
.as-field:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.as-field--lg { height: var(--h-control-lg); padding: 0 var(--s-5); border-radius: var(--r-lg); }
/* .as-field has two shapes — a container wrapping a control, and a control
   wearing it directly — and both need the §16.1 reset. */
.as-field input,
.as-field textarea {
  flex: 1; width: 100%; border: 0; outline: 0; background: transparent;
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink);
}
/* Removing the native outline is safe here because .as-field:focus-within
   already paints an accent ring, and an element matches :focus-within when
   it is itself focused. The replacement exists before the removal. (Rule 11) */
input.as-field,
select.as-field,
textarea.as-field,
button.as-field {
  border: 0; outline: 0;
  -webkit-appearance: none; appearance: none;
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium);
  color: var(--ink);
}
.as-field input::placeholder { color: var(--ink-4); }
.as-field svg { width: var(--icon); height: var(--icon); color: var(--ink-4); flex: none; }
.as-field--error { box-shadow: inset 0 0 0 1px var(--danger-strong); }

.as-field-label {
  display: block; margin-bottom: var(--s-3);
  font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls); font-weight: var(--fw-medium); color: var(--ink-4);
}

.as-checkbox {
  width: 16px; height: 16px; border: 0; padding: 0; border-radius: var(--r-sm);
  background: var(--bg-canvas); box-shadow: var(--shadow-ring);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition-ghost); flex: none;
  -webkit-appearance: none; appearance: none;
}
.as-checkbox[aria-checked="true"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-fg); }

.as-switch {
  width: 32px; height: 20px; border: 0; padding: 0; border-radius: var(--r-pill);
  background: var(--a-4); position: relative; cursor: pointer;
  transition: var(--transition-ghost); flex: none;
  -webkit-appearance: none; appearance: none;
}
.as-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--shadow-raised);
  transition: transform var(--dur-fast) var(--ease);
}
.as-switch[aria-checked="true"] { background: var(--accent); }
.as-switch[aria-checked="true"]::after { transform: translateX(12px); }

/* ==========================================================================
   4. TAGS, PILLS, BADGES
   ========================================================================== */
.as-tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: var(--h-chip); padding: 0 var(--s-2);
  border-radius: var(--r-chip);
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium);
  white-space: nowrap; max-width: 100%;
}
.as-tag > span { overflow: hidden; text-overflow: ellipsis; }
.as-tag--grey    { background: var(--tag-grey-bg);    box-shadow: inset 0 0 0 1px var(--tag-grey-ring);    color: var(--tag-grey-fg); }
.as-tag--blue    { background: var(--tag-blue-bg);    box-shadow: inset 0 0 0 1px var(--tag-blue-ring);    color: var(--tag-blue-fg); }
.as-tag--cyan    { background: var(--tag-cyan-bg);    box-shadow: inset 0 0 0 1px var(--tag-cyan-ring);    color: var(--tag-cyan-fg); }
.as-tag--green   { background: var(--tag-green-bg);   box-shadow: inset 0 0 0 1px var(--tag-green-ring);   color: var(--tag-green-fg); }
.as-tag--lime    { background: var(--tag-lime-bg);    box-shadow: inset 0 0 0 1px var(--tag-lime-ring);    color: var(--tag-lime-fg); }
.as-tag--yellow  { background: var(--tag-yellow-bg);  box-shadow: inset 0 0 0 1px var(--tag-yellow-ring);  color: var(--tag-yellow-fg); }
.as-tag--amber   { background: var(--tag-amber-bg);   box-shadow: inset 0 0 0 1px var(--tag-amber-ring);   color: var(--tag-amber-fg); }
.as-tag--orange  { background: var(--tag-orange-bg);  box-shadow: inset 0 0 0 1px var(--tag-orange-ring);  color: var(--tag-orange-fg); }
.as-tag--red     { background: var(--tag-red-bg);     box-shadow: inset 0 0 0 1px var(--tag-red-ring);     color: var(--tag-red-fg); }
.as-tag--pink    { background: var(--tag-pink-bg);    box-shadow: inset 0 0 0 1px var(--tag-pink-ring);    color: var(--tag-pink-fg); }
.as-tag--magenta { background: var(--tag-magenta-bg); box-shadow: inset 0 0 0 1px var(--tag-magenta-ring); color: var(--tag-magenta-fg); }
.as-tag--purple  { background: var(--tag-purple-bg);  box-shadow: inset 0 0 0 1px var(--tag-purple-ring);  color: var(--tag-purple-fg); }

.as-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--t-body); line-height: 1; font-weight: var(--fw-medium);
}
.as-pill--up      { background: var(--delta-up-bg);   color: var(--delta-up-fg); }
.as-pill--down    { background: var(--delta-down-bg); color: var(--delta-down-fg); }
.as-pill--outline { background: var(--bg-canvas); box-shadow: var(--shadow-hairline); color: var(--ink); padding: var(--s-5) var(--s-6); }

.as-kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-ring);
  font-size: var(--t-micro); line-height: var(--t-micro-lh);
  letter-spacing: var(--t-micro-ls); font-weight: var(--fw-medium);
  text-transform: uppercase; color: var(--ink-4);
}

.as-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--icon); height: var(--icon); padding: 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg);
  font-size: var(--t-micro); line-height: 1; font-weight: var(--fw-medium);
}

.as-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-squircle);
  background: var(--accent); color: #fff; flex: none; overflow: hidden;
  font-size: var(--t-label); line-height: 1; font-weight: var(--fw-medium);
}
.as-avatar--sm { width: 16px; height: 16px; font-size: 10px; }
.as-avatar--lg { width: 32px; height: 32px; font-size: var(--t-body); }

/* ==========================================================================
   5. SURFACES
   ========================================================================== */
.as-card {
  border-radius: var(--r-2xl); background: var(--bg-canvas);
  padding: var(--s-9); box-shadow: var(--shadow-hairline);
}
.as-card--flat    { box-shadow: none; background: var(--a-1); }
.as-card--metric  { border-radius: var(--r-2xl); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-6); }
.as-card--panel   { border-radius: var(--r-4xl); padding: var(--s-11); }
.as-card--hero    { border-radius: var(--r-5xl); padding: var(--s-13) var(--s-7) var(--s-7); }
.as-card--featured{ box-shadow: var(--shadow-accent); background: var(--bg-canvas); }

.as-popover {
  border-radius: var(--r-xl); background: var(--bg-canvas);
  padding: var(--s-2); box-shadow: var(--shadow-popover), var(--shadow-ring);
  display: flex; flex-direction: column; gap: 1px;
  min-width: 240px; max-width: 320px;
}
.as-menu-item {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--h-control-lg); padding: var(--s-3) var(--s-4);
  border: 0; border-radius: var(--r-md); background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink);
  transition: var(--transition-ghost);
}
.as-menu-item:hover { background: var(--a-2); }
.as-menu-item svg { width: var(--icon); height: var(--icon); color: var(--ink-4); flex: none; }
.as-menu-sep { height: 1px; background: var(--border); margin: var(--s-2) 0; }

.as-modal {
  border-radius: var(--r-2xl); background: var(--bg-canvas);
  padding: var(--s-8); box-shadow: var(--shadow-overlay), var(--shadow-band); max-width: var(--w-dialog-form);
}
/* The shell of the band-and-line pair: 4px of translucent shell IS the band, so
   the shell draws no edge of its own and .ar-palette__inner draws the line
   outward into it with --shadow-line. --r-2xl - --edge-band = --r-xl is what
   keeps the pane's curve concentric with this one. */
.as-palette {
  width: 748px; max-width: calc(100vw - 40px);
  border-radius: var(--r-2xl); padding: var(--edge-band);
  background: var(--palette-bg); backdrop-filter: var(--palette-blur);
  box-shadow: var(--shadow-overlay);
}
.as-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); }

.as-tooltip {
  display: inline-flex; align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--ink); color: var(--ink-on-dark);
  font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-raised);
}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
/* Page layer: floating glass pill */
.as-navbar {
  position: sticky; top: var(--s-9); z-index: 50;
  display: flex; align-items: center; gap: var(--s-6);
  width: min(var(--container-text), calc(100% - 2 * var(--s-8)));
  margin-inline: auto; height: var(--h-navbar); padding: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-float);
}
.as-navbar__link {
  display: flex; align-items: center; height: 36px; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-prose); line-height: 24px; letter-spacing: var(--t-prose-ls);
  font-weight: var(--fw-medium); color: var(--ink);
  transition: var(--transition-ghost);
}
.as-navbar__link:hover { background: var(--a-1); }
.as-navbar__link[aria-current="page"] { background: var(--a-2); }

/* App layer: sidebar separated by tone AND a right-edge hairline. This said
   "never a border" until the tone was measured — in dark, --bg-subtle against
   --bg-canvas is 1.04:1, which is not an edge. The tone stays (the dark
   inversion is the signature); the line is in addition to it. It is drawn in
   src/styles/app.css on .ar-sidebar, as inset -1px 0 0 0 var(--border) rather
   than a border, because that is the element whose width animates on resize
   and collapse, and a shadow costs no width. See DESIGN-SYSTEM.md §10. */
.as-sidebar {
  width: var(--sidebar); flex: none; background: var(--bg-subtle);
  display: flex; flex-direction: column; padding: var(--s-4);
  height: 100%; overflow: hidden;
}
.as-navrow {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--h-control); min-height: var(--h-control);
  padding: 0 var(--s-2) 0 var(--s-4); border-radius: var(--r-lg);
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink);
  cursor: pointer; transition: var(--transition-ghost);
}
.as-navrow:hover { background: var(--a-1); }
.as-navrow[aria-current="page"] { background: var(--a-2); }
.as-navrow svg { width: var(--icon); height: var(--icon); color: var(--ink-4); flex: none; }
.as-navgroup {
  display: flex; align-items: center; height: var(--h-control);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls); font-weight: var(--fw-medium); color: var(--ink-2);
}

/* 49px including its closing hairline (§8).

   The hairline is an inset shadow, not `border-bottom`. AGENTS rule 5 reserves
   the `border` property for table grid lines, and this bar is chrome; it read as
   compliant only because design-system.test.ts scans `app.css` and not this
   file. Same form the app-side dividers already use — `.ar-set__tab`,
   `.ar-meetings`, `.ar-notemodal__bar`.

   `padding-bottom: 1px` is what makes the swap free of layout. Everything is
   `box-sizing: border-box`, so the 1px border used to hold the content box at
   48px, and `align-items: center` centres in that box; 1px of padding keeps it
   at 48px now that the border is gone. The shadow paints the box's last pixel
   row — the row the border occupied — so the line and every child stay put.
   `.ar-shell:has(.as-topbar) .ar-sidebar::after` is pinned to --h-topbar rather
   than to this declaration, so the sidebar half of the line is unaffected. */
.as-topbar {
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--h-topbar); padding: 0 var(--s-6) 1px;
  box-shadow: inset 0 -1px 0 0 var(--border); background: transparent;
}

.as-tab {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: var(--h-control); padding: var(--s-2) var(--s-4);
  border: 0; border-radius: var(--r-md); background: transparent;
  box-shadow: inset 0 0 0 1px transparent;   /* reserves space so it never jumps */
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink);
  cursor: pointer; transition: var(--transition-ghost);
}
.as-tab:hover { background: var(--a-1); }
.as-tab[aria-selected="true"] { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); }

/* ==========================================================================
   7. TABLE — the one place real borders are allowed
   ========================================================================== */
.as-table { width: 100%; border-collapse: collapse; }
.as-table th {
  height: var(--h-row-head); padding: 0 var(--s-6); text-align: left;
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink-2);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  white-space: nowrap;
}
.as-table td {
  height: var(--h-row); padding: var(--s-4) var(--s-6);
  font-size: var(--t-body); line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: middle;
}
.as-table th:last-child, .as-table td:last-child { border-right: 0; }
.as-table tbody tr:hover td { background: var(--a-1); }
.as-table .as-num { text-align: right; font-variant-numeric: tabular-nums; }
.as-table .as-cell-tags { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; }
.as-table--sticky th:first-child,
.as-table--sticky td:first-child { position: sticky; left: 0; background: var(--bg-canvas); z-index: 1; }

/* ==========================================================================
   8. PAGE LAYOUT
   ========================================================================== */
.as-section { padding: var(--section-y) var(--gutter); }
.as-section--hero { padding: var(--section-y-hero) var(--gutter) 0; }
.as-section--band { background: var(--bg-subtle); }
.as-section__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--stack-gap);
}
.as-section__inner--text { max-width: var(--container-text); }
.as-section__inner--wide { max-width: var(--container-wide); }

/* eyebrow → heading → prose */
.as-stack { display: flex; flex-direction: column; gap: var(--copy-gap); }
.as-stack--center { align-items: center; text-align: center; }
.as-stack p.as-prose-lg, .as-stack p.as-prose { max-width: var(--col-half); }

.as-grid { display: grid; gap: var(--s-6); }
.as-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.as-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.as-shell { display: flex; height: 100vh; overflow: hidden; }
.as-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ==========================================================================
   9. SCREENSHOT / MOCKUP FRAMING
   ========================================================================== */
.as-mockup { border-radius: var(--r-xl); background: var(--bg-hover); padding: var(--s-2); }
.as-mockup__screen {
  border-radius: var(--r-md); background: var(--bg-canvas);
  box-shadow: var(--halo); overflow: hidden;
}
.as-mockup--fade { position: relative; }
.as-mockup--fade::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 114px;
  background: var(--fade-to-canvas); pointer-events: none;
}
.as-panel-gradient { border-radius: var(--r-4xl); background: var(--panel-gradient); padding: var(--s-2); }

/* ==========================================================================
   10. PRICING
   ========================================================================== */
.as-price-grid { display: flex; gap: var(--s-6); align-items: stretch; }
.as-price-card {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-7);
  border-radius: var(--r-3xl); background: var(--bg-canvas);
  padding: var(--s-7); box-shadow: var(--shadow-hairline);
}
.as-price-card--featured {
  background: var(--accent-50); padding-top: 0;
  box-shadow: var(--shadow-accent);
}
.as-price-card__badge {
  display: flex; align-items: center; height: var(--h-cta);
  margin: 0 calc(-1 * var(--s-7)); padding: var(--s-6) var(--s-7);
  font-size: var(--t-prose); line-height: 24px; letter-spacing: var(--t-prose-ls);
  font-weight: var(--fw-medium); color: var(--accent);
}
.as-price-card__amount {
  font-family: var(--font-display); font-size: var(--t-display-md);
  line-height: var(--t-display-md); letter-spacing: var(--t-display-md-ls);
  font-weight: var(--fw-semibold); color: var(--ink);
}
.as-price-card__period {
  font-size: var(--t-label); line-height: var(--t-label-lh);
  font-weight: var(--fw-medium); color: var(--ink-4); letter-spacing: 0;
}

/* ==========================================================================
   11. EMPTY STATE
   ========================================================================== */
.as-empty {
  /* Centre in the pane while the block fits; top-align once it overflows.
     Auto margins absorb leftover space, then resolve to 0, so nothing is
     clipped off the top and nothing jumps. Centring on the flex axis is
     the trap — overflow goes off the start edge and cannot be scrolled to.
     Home used to do this and it moved the greeting when rows arrived;
     do not copy that onto the page. First/last-child autos do the same
     job *inside* a min-height box (the inbox popover) without a second wrapper. */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-4); padding: var(--s-13) var(--s-8);
  margin-block: auto;
  min-height: 0;
  overflow: auto;
}
.as-empty > :first-child { margin-block-start: auto; }
.as-empty > :last-child { margin-block-end: auto; }
.as-empty__art {
  flex: none;
  width: 160px;
  height: 160px;
  pointer-events: none;
}
.as-empty__art-svg { display: block; width: 160px; height: 160px; }
/* Stroke is set here, not inherited from the svg, so the grid and the
   object cannot collapse onto currentColor. */
.as-empty__art-grid {
  stroke: var(--border);
  stroke-width: 1px;
  stroke-dasharray: 2 5;
  fill: none;
}
/* Dark: --border and --bg-canvas sit 11 RGB steps apart. A 1px dashed
   line on that delta vanishes, and the grid is most of the drawing.
   --border-strong is the next token on the same ramp (white 9%). */
[data-theme="dark"] .as-empty__art-grid { stroke: var(--border-strong); }
.as-empty__art-object {
  stroke: var(--ink-5);
  stroke-width: 1.5px;
  fill: none;
}
/* Exactly one element. The accent is per workspace, so this is the part of
   the drawing that belongs to the client rather than to the style. */
.as-empty__art-accent { stroke: var(--accent); }
.as-empty__title { font-size: var(--t-title); line-height: var(--t-title-lh); letter-spacing: var(--t-title-ls); font-weight: var(--fw-semibold); color: var(--ink); }
.as-empty__body  { font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--t-body-ls); font-weight: var(--fw-medium); color: var(--ink-2); max-width: 266px; }
.as-empty__actions { display: flex; gap: var(--s-4); margin-top: var(--s-4); }
@media (max-width: 360px) {
  .as-empty__art { display: none; }
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --t-display-xl: 40px; --t-display-xl-lh: 44px;
    --t-display-lg: 32px; --t-display-lg-lh: 38px;
    --t-display-md: 24px; --t-display-md-lh: 30px;
    --section-y: 56px; --section-y-hero: 72px; --stack-gap: 40px;
  }
  .as-grid--2, .as-grid--3, .as-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .as-price-grid { flex-direction: column; }
  .as-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); }
  .as-sidebar[data-open="true"] { transform: none; }
}