@import url('a11y.css');
@import url('theme.css');
/* ============================================================================
   Squsha App Shell — shared "cockpit" chrome for authenticated pages.
   Include this on any logged-in page (dashboard, settings, billing, …) together
   with app-shell.js. It provides a fixed dark left sidebar + mobile top bar so
   the app feels distinct from the marketing site.
   ============================================================================ */

/* The display serif the marketing pages use for headlines. Loaded here rather
   than per page because the in-shell router swaps only each page's <style>,
   never its <link>s — a font a page linked on its own would be missing after
   a soft navigation. Self-hosted (fonts.css), never fonts.googleapis.com: the
   privacy policy promises no third-party font requests. */
@import url('fonts.css');

:root {
  --bg: #f2ecdf;
  --bg-2: #e9e3d5;
  --surface: #ffffff;
  --border: #dde1da;
  --ink: #14211e;
  --line: rgba(20, 33, 30, 0.10);
  --line-strong: rgba(20, 33, 30, 0.20);
  --accent: #0b7268;
  --accent-ink: #0a5e56;
  --accent-dim: rgba(13, 124, 114, 0.06);
  --accent-soft: rgba(13, 124, 114, 0.08);
  --accent-glow: rgba(13, 124, 114, 0.10);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --text: #1e2d2a;
  --muted: #576965;
  --orange: #f97316;
  --red: #dc2626;
  --green: #10b981;

  /* Shell-specific */
  --sidebar-w: 244px;        /* expanded (on hover) */
  --sidebar-collapsed: 64px; /* resting icon-only rail */
  --sidebar-bg: #10201d;
  --sidebar-bg-2: #0b1917;
  --sidebar-text: #cdddd8;
  --sidebar-muted: #7d938d;
  --sidebar-active: rgba(255, 255, 255, 0.06);
  --sidebar-border: rgba(255, 255, 255, 0.08);
}

/* ---- Layout: content sits beside the *collapsed* rail; the expanded panel
   overlays content on hover so nothing reflows. ---------------------------- */
body.rn-app {
  padding-left: var(--sidebar-collapsed);
}
/* Transitions turn on only after the first paint (see app-shell.js) so pages
   don't slide/animate on load — hover and pin/open toggles still animate. */
body.rn-anim { transition: padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1); }

/* Pinned: sidebar locks expanded and pushes content aside (permanent). */
body.rn-app.rn-pinned { padding-left: var(--sidebar-w); }
body.rn-pinned .rn-sidebar { width: var(--sidebar-w); box-shadow: none; }

/* Kept-open: expanded like hover but sticky across navigation. It overlays
   content (padding stays put → no reflow) and tucks back to the rail when you
   move off the sidebar; the intent is remembered so the next page re-opens it. */
body.rn-open .rn-sidebar { width: var(--sidebar-w); box-shadow: 10px 0 44px rgba(0, 0, 0, 0.32); }
body.rn-pinned .rn-brand-word,
body.rn-pinned .rn-sidebar__section,
body.rn-pinned .rn-navlink > span,
body.rn-pinned .rn-navlink__soon,
body.rn-pinned .rn-account__meta,
body.rn-pinned .rn-account__chev,
body.rn-pinned .rn-pin,
body.rn-open .rn-brand-word,
body.rn-open .rn-sidebar__section,
body.rn-open .rn-navlink > span,
body.rn-open .rn-navlink__soon,
body.rn-open .rn-account__meta,
body.rn-open .rn-account__chev,
body.rn-open .rn-pin { opacity: 1; }

/* ---- Sidebar (collapsed icon rail → expands on hover or keyboard focus) -- */
.rn-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-collapsed);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
}
body.rn-anim .rn-sidebar {
  transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease;
}
/* :focus-within is the keyboard's hover: Tab into the rail and it opens, so a
   keyboard user sees the labels instead of six unlabelled icons. */
.rn-sidebar:hover,
.rn-sidebar:focus-within {
  width: var(--sidebar-w);
  box-shadow: 10px 0 44px rgba(0, 0, 0, 0.32);
}

/* Keep inner content laid out at full width so icons never shift — the rail
   simply clips the labels until it expands. */
.rn-sidebar__head,
.rn-sidebar__nav,
.rn-sidebar__pinrow,
.rn-account { width: var(--sidebar-w); flex-shrink: 0; }

.rn-sidebar__head { display: flex; align-items: center; }
.rn-sidebar__brand { flex: 1; min-width: 0; }

/* Pin toggle — a nav-style row just above the account block. Inherits .rn-navlink
   styling (icon + fading label); locks the sidebar open when active. */
.rn-sidebar__pinrow {
  padding: 0.4rem 0.7rem;
  border-top: 1px solid var(--sidebar-border);
}
.rn-pin, .rn-theme { color: var(--sidebar-muted); }
.rn-theme { justify-content: flex-start; }
.rn-theme .theme-toggle__icon svg { width: 18px; height: 18px; opacity: 0.85; }
.rn-pin.is-pinned { color: #2dd4bf; }
.rn-pin.is-pinned svg { opacity: 1; }

/* Labels/badges fade in with the expansion; hidden (not just clipped) while
   collapsed so no half-letters peek past the rail edge. */
.rn-brand-word,
.rn-sidebar__section,
.rn-navlink > span,
.rn-navlink__soon,
.rn-account__meta,
.rn-account__chev {
  opacity: 0;
  transition: opacity 0.16s ease;
  white-space: nowrap;
}
.rn-sidebar:hover .rn-brand-word,
.rn-sidebar:hover .rn-sidebar__section,
.rn-sidebar:hover .rn-navlink > span,
.rn-sidebar:hover .rn-navlink__soon,
.rn-sidebar:hover .rn-account__meta,
.rn-sidebar:hover .rn-account__chev,
.rn-sidebar:focus-within .rn-brand-word,
.rn-sidebar:focus-within .rn-sidebar__section,
.rn-sidebar:focus-within .rn-navlink > span,
.rn-sidebar:focus-within .rn-navlink__soon,
.rn-sidebar:focus-within .rn-account__meta,
.rn-sidebar:focus-within .rn-account__chev {
  opacity: 1;
  transition: opacity 0.2s ease 0.06s;
}

.rn-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.3rem 1rem 1.05rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none;
}
.rn-sidebar__brand img { height: 32px; width: auto; flex-shrink: 0; }
/* Wordmark image (light-on-dark variant) — shorter than the mark so icon +
   word still fit inside the expanded rail. */
.rn-sidebar__brand img.rn-brand-word { height: 20px; }

.rn-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rn-sidebar__section {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-muted);
  padding: 1rem 0.75rem 0.4rem;
  /* The Workspace heading can be a Consultant's business name (see
     paintIdentity in app-shell.js), and a long one must end in the rail. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.rn-navlink {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  border-radius: 10px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.rn-navlink svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.rn-navlink:hover { background: var(--sidebar-active); color: #fff; }
.rn-navlink.is-active {
  background: rgba(45, 212, 191, 0.10);
  color: #fff;
}
.rn-navlink.is-active svg { color: #2dd4bf; opacity: 1; }
.rn-navlink.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.rn-navlink__soon {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-muted);
  border: 1px solid var(--sidebar-border);
  border-radius: 5px;
  padding: 0.08rem 0.3rem;
}

/* ---- Account block (bottom of sidebar) --------------------------------- */
.rn-account {
  border-top: 1px solid var(--sidebar-border);
  padding: 0.6rem;
  position: relative;
}
.rn-account__btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 10px;
  font-family: inherit;
  transition: background 0.15s;
  text-align: left;
}
.rn-account__btn:hover { background: var(--sidebar-active); }
.rn-account__avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
/* A Consultant's logo in place of the initial, on a light tile so a dark or
   transparent mark still reads against the sidebar. */
.rn-account__avatar.has-logo { background: var(--surface); padding: 3px; }
.rn-account__avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.rn-account__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rn-account__name {
  font-size: 0.83rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-account__plan {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--sidebar-muted);
  text-transform: capitalize;
}
.rn-account__chev { color: var(--sidebar-muted); flex-shrink: 0; }

.rn-account__menu {
  position: absolute;
  bottom: calc(100% - 0.4rem);
  left: 0.85rem;
  right: 0.85rem;
  background: #182c28;
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  padding: 0.35rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  gap: 0.1rem;
}
.rn-account__menu.is-open { display: flex; }
.rn-account__menu a,
.rn-account__menu button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.rn-account__menu a:hover,
.rn-account__menu button:hover { background: var(--sidebar-active); color: #fff; }
.rn-account__menu svg { width: 15px; height: 15px; opacity: 0.8; }
.rn-account__menu .rn-signout { color: #fca5a5; }
.rn-account__menu .rn-signout:hover { background: rgba(239, 68, 68, 0.12); color: #fecaca; }
.rn-account__menu-sep { height: 1px; background: var(--sidebar-border); margin: 0.25rem 0.3rem; }

/* Plan badge reused in main content areas */
.rn-plan-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.rn-plan-badge.free   { background: rgba(var(--muted-rgb), 0.14); color: #cdddd8; }
.rn-plan-badge.pro    { background: rgba(45,212,191,0.16); color: #5eead4; }
.rn-plan-badge.consultant { background: rgba(167,139,250,0.18); color: #c4b5fd; }

/* ---- Mobile top bar + toggle ------------------------------------------- */
.rn-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  z-index: 150;
}
.rn-topbar__brand {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.03em;
}
.rn-topbar__brand img { height: 19px; width: auto; display: block; }
.rn-burger {
  background: transparent;
  border: 1px solid var(--sidebar-border);
  border-radius: 9px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  color: #cdddd8;
  display: flex;
  align-items: center;
}
.rn-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 190;
}

@media (max-width: 860px) {
  body.rn-app,
  body.rn-app.rn-pinned,
  body.rn-app.rn-open { padding-left: 0; }
  .rn-topbar { display: flex; }
  /* Off-canvas drawer: always full width with labels shown (no hover-expand).
     While closed it is also visibility:hidden, so its links leave the Tab
     order and the accessibility tree instead of being focusable off-screen;
     the visibility flip is delayed on close so the slide-out still shows. */
  .rn-sidebar,
  .rn-sidebar:hover,
  .rn-sidebar:focus-within {
    width: var(--sidebar-w); transform: translateX(-100%); box-shadow: 0 0 60px rgba(0,0,0,0.5);
    visibility: hidden;
  }
  body.rn-anim .rn-sidebar { transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  body.rn-nav-open .rn-sidebar { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  body.rn-nav-open .rn-scrim { display: block; }
  .rn-brand-word,
  .rn-sidebar__section,
  .rn-navlink > span,
  .rn-navlink__soon,
  .rn-account__meta,
  .rn-account__chev { opacity: 1; }
  .rn-pin { display: none; }  /* pinning is meaningless for the mobile drawer */
}

/* ============================================================================
   Loading state — the shared waiting screen for every authenticated page.
   Markup (see Squsha.loadingHTML in app-shell.js, or write it inline so the
   loader paints before any script runs):

     <div class="rn-loading">
       <div class="rn-loading__dial" aria-hidden="true">
         <span class="rn-loading__sweep"></span>
         <span class="rn-loading__ping"></span>
         <span class="rn-loading__ping"></span>
         <span class="rn-loading__ring rn-loading__ring--2"></span>
         <span class="rn-loading__ring rn-loading__ring--1"></span>
       </div>
       <p class="rn-loading__label">Loading your reports…</p>
     </div>

   It is the sonar from generating.html and 404.html shrunk to card size, so a
   two-second wait and a four-minute one look like the same product rather than
   two unrelated spinners. Add .rn-loading--sm inside a card, or .rn-loading--lg
   when the loader owns the whole view.
   ============================================================================ */
.rn-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
}
.rn-loading--sm { padding: 1.75rem 1rem; }
.rn-loading--lg { padding: 5rem 1.5rem; }

.rn-loading__dial {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
}
.rn-loading--sm .rn-loading__dial { width: 56px; height: 56px; }
.rn-loading--lg .rn-loading__dial { width: 96px; height: 96px; }

/* Rings: the outer edge is the dial itself, the inner two are nested spans, so
   the whole motif costs no SVG and scales with the modifier classes. */
.rn-loading__dial,
.rn-loading__ring,
.rn-loading__ping,
.rn-loading__sweep {
  box-sizing: border-box;
}
.rn-loading__dial,
.rn-loading__ring {
  border: 1.25px solid var(--accent);
  border-radius: 50%;
}
/* Tinted from --accent so the same component drops into the portal's blue
   theme unchanged; the rgba line before each is the fallback a browser without
   color-mix() keeps. */
.rn-loading__dial { border-color: rgba(var(--accent-rgb), 0.14); }
.rn-loading__dial { border-color: color-mix(in srgb, var(--accent) 14%, transparent); }
.rn-loading__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rn-loading__ring--2 { width: 68%; height: 68%; border-color: rgba(var(--accent-rgb), 0.20); }
.rn-loading__ring--1 { width: 36%; height: 36%; border-color: rgba(var(--accent-rgb), 0.28); }
.rn-loading__ring--2 { border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.rn-loading__ring--1 { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }

/* The beam. Feathered at both rims by the mask: a hard circular edge reads as a
   pie slice sitting on the rings rather than a sweep contained by them. */
.rn-loading__sweep {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--accent-rgb), 0.28) 0deg,
    rgba(var(--accent-rgb), 0.13) 22deg,
    rgba(var(--accent-rgb), 0.04) 56deg,
    rgba(var(--accent-rgb), 0.00) 108deg,
    rgba(var(--accent-rgb), 0.00) 360deg
  );
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--accent) 28%, transparent) 0deg,
    color-mix(in srgb, var(--accent) 13%, transparent) 22deg,
    color-mix(in srgb, var(--accent) 4%, transparent) 56deg,
    transparent 108deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 22%, #000 48%, #000 92%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 22%, #000 48%, #000 92%, rgba(0,0,0,0) 100%);
  animation: rn-loading-sweep 2.4s linear infinite;
}
@keyframes rn-loading-sweep { to { transform: rotate(360deg); } }

/* Two outward pings, staggered so one is always mid-flight. Faster than the
   generating page's: this wait is measured in seconds, not minutes, and a
   languid ping over a short wait reads as a stalled page. */
.rn-loading__ping {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: rn-loading-ping 2.4s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
}
.rn-loading__ping + .rn-loading__ping { animation-delay: 1.2s; }
@keyframes rn-loading-ping {
  0%   { transform: scale(0.34); opacity: 0; }
  14%  { opacity: 0.40; }
  100% { transform: scale(1); opacity: 0; }
}

.rn-loading__label {
  margin: 1.1rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  max-width: 22rem;
}
.rn-loading--sm .rn-loading__label { margin-top: 0.85rem; font-size: 0.85rem; }

/* Motion is decoration — the label carries the message on its own. The sweep is
   held at a fixed angle rather than hidden, so the dial still reads as a dial
   for anyone who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  .rn-loading__sweep,
  .rn-loading__ping { animation: none; }
  .rn-loading__sweep { opacity: 0.55; }
  .rn-loading__ping { opacity: 0.18; transform: scale(1); }
}

/* ── Credit pill ──
   The report-credit balance, shown beside a page heading. One rule set for
   every page that carries one; the markup is a bare
   <a class="rn-credit-pill" data-rn-credits hidden> and app-shell.js fills it. */
/* `display` on the element itself beats the UA stylesheet's [hidden] rule, so
   without this the pill shows as an empty capsule before JS fills it - and
   stays one for good if the profile fetch fails. */
.rn-credit-pill[hidden] { display: none; }

.rn-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  border: 1px solid transparent;
  color: var(--accent);
  background: var(--accent-dim);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rn-credit-pill:hover { background: rgba(var(--accent-rgb), 0.12); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rn-credit-pill.is-empty {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}
.rn-credit-pill.is-empty:hover { color: var(--text); border-color: var(--muted); }

/* Pairs a heading with its pill on one line. */
.rn-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ============================================================================
   Page content system — the parts every shell page shares, in the same language
   as the marketing pages (site.css): a serif page title, pill buttons, and one
   white hairline surface. Each page keeps the rules for its own blocks inline.
   Lives here rather than per page so it also survives a soft navigation.
   ============================================================================ */
.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.page-title em { font-style: italic; color: var(--accent); }
.page-sub { font-size: 0.9rem; color: var(--muted); margin: 0.55rem 0 2rem; line-height: 1.6; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; background: var(--accent); }

/* Quiet outline pill — the secondary action beside a .btn-primary. */
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-quiet:hover { color: var(--text); border-color: var(--muted); background: var(--ink-tint); }
.btn-quiet:disabled { opacity: 0.55; cursor: default; }

.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 var(--hl) inset, 0 10px 30px var(--shadow-card);
}
.card { padding: 1.6rem 1.75rem; margin-bottom: 1.25rem; }
.card h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.25rem; }
.card-sub { font-size: 0.86rem; color: var(--muted); margin: 0 0 1.4rem; line-height: 1.6; }
.card > .card-sub:last-child { margin-bottom: 0; }

/* Uppercase teal label with the short dash, for a section inside a page. */
.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.section-label::before { content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.6; }

/* Form fields: pill inputs on the cream, going white on focus. */
.field-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.68rem 1.05rem;
  font-size: 0.9rem; font-family: inherit; color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field-input::placeholder { color: var(--muted); }
.field-input:focus { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); background: var(--surface); }

@media (max-width: 640px) {
  .page-title { font-size: 2.1rem; }
  .card { padding: 1.3rem 1.2rem; }
}