/*!
 * memoars portal: shared design system ("Ciphered" identity, dark-first).
 *
 * Served as a static asset at `/static/app.css` (the shell embeds this file
 * verbatim via `include_str!`, same pattern as vendored htmx). Linked once,
 * from `templates/base.html`, which every page `{% extends %}`.
 *
 * Design intent: near-black canvas, hairline borders, a single cold-mint
 * accent, and a display/mono pairing (Space Grotesk + JetBrains Mono, body
 * in IBM Plex Sans). Dark is the primary theme; a tuned light theme ships
 * alongside it. Fonts load from Google Fonts (see base.html); self-host
 * them under /static if you need a zero-third-party CSP.
 *
 * Theming: every color is a custom property on `:root`. Three layers, in
 * ascending priority (later wins, via selector specificity):
 *   1. `:root`: light, the default.
 *   2. `@media (prefers-color-scheme: dark)`: OS/browser preference.
 *   3. `:root[data-theme="dark"|"light"]`: explicit user choice
 *      (base.html's inline script, persisted to localStorage.theme).
 */

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------------------- tokens */

:root {
  /* light theme (default): deeper green accent so text/buttons clear
     WCAG AA on white. */
  --bg: #ffffff;
  --surface: #f6f8f8;
  --surface-2: #eef2f1;
  --surface-hover: #e9efed;
  --text: #0c1512;
  --muted: #566068;
  --dim: #8a929a;
  --border: #e3e8e8;
  --border-strong: #d3dad9;
  --accent: #0f9d76;
  --accent-hover: #0c8564;
  --accent-2: #0891a0;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(15, 157, 118, 0.09);
  --accent-line: rgba(15, 157, 118, 0.28);
  --plan-starter: #0969da;
  --plan-enterprise: #6639ba;
  --glow: none;
  --danger: #b3261e;
  --danger-bg: #fdf1f0;
  --danger-border: #f3c6c2;

  --radius: 9px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 18px 48px -32px rgba(15, 23, 42, 0.35);

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* dark palette, shared by the OS-preference media query and the explicit
   opt-in below; keep the two declaration blocks identical. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b0d;
    --surface: #101216;
    --surface-2: #15181d;
    --surface-hover: #191d23;
    --text: #e7e9ec;
    --muted: #8b919a;
    --dim: #5a616b;
    --border: #1e2228;
    --border-strong: #2a2f37;
    --accent: #4fe3b0;
    --accent-hover: #6ff0c4;
    --accent-2: #2ec9d6;
    --accent-contrast: #06221a;
    --accent-soft: rgba(79, 227, 176, 0.07);
    --accent-line: rgba(79, 227, 176, 0.26);
    --plan-starter: #6cb6ff;
    --plan-enterprise: #b48eff;
    --glow: 0 0 12px rgba(79, 227, 176, 0.7);
    --danger: #ff8f8f;
    --danger-bg: #1f1315;
    --danger-border: #4a2528;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
  }
}

:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --surface: #101216;
  --surface-2: #15181d;
  --surface-hover: #191d23;
  --text: #e7e9ec;
  --muted: #8b919a;
  --dim: #5a616b;
  --border: #1e2228;
  --border-strong: #2a2f37;
  --accent: #4fe3b0;
  --accent-hover: #6ff0c4;
  --accent-2: #2ec9d6;
  --accent-contrast: #06221a;
  --accent-soft: rgba(79, 227, 176, 0.07);
  --accent-line: rgba(79, 227, 176, 0.26);
  --plan-starter: #6cb6ff;
  --plan-enterprise: #b48eff;
  --glow: 0 0 12px rgba(79, 227, 176, 0.7);
  --danger: #ff8f8f;
  --danger-bg: #1f1315;
  --danger-border: #4a2528;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f6f8f8;
  --surface-2: #eef2f1;
  --surface-hover: #e9efed;
  --text: #0c1512;
  --muted: #566068;
  --dim: #8a929a;
  --border: #e3e8e8;
  --border-strong: #d3dad9;
  --accent: #0f9d76;
  --accent-hover: #0c8564;
  --accent-2: #0891a0;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(15, 157, 118, 0.09);
  --accent-line: rgba(15, 157, 118, 0.28);
  --plan-starter: #0969da;
  --plan-enterprise: #6639ba;
  --glow: none;
  --danger: #b3261e;
  --danger-bg: #fdf1f0;
  --danger-border: #f3c6c2;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 18px 48px -32px rgba(15, 23, 42, 0.35);
}

/* ---------------------------------------------------------- typography */

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
}

h3 {
  font-size: 1.1875rem;
}

p {
  margin: 0 0 1rem;
}

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

a:hover {
  color: var(--accent-hover);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

ul,
ol {
  padding-left: 1.25rem;
}

/* monospace: keys, config, backend names, capability tokens */

.mono,
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15em 0.4em;
  color: var(--accent);
}

pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.7;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
  color: inherit;
}

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

th,
td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ------------------------------------------------------ layout: shell */

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 32px;
}

/* skip link: first focusable node in <body>; parks off-screen until
   focused, then slides into the top-left. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font: 600 14px/1 var(--font-mono);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
  outline: none;
}

/* fallback slim bar (base.html default block): only used by a page that
   doesn't ship its own .nav. */
.theme-toggle-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.theme-toggle-bar .container {
  display: flex;
  justify-content: flex-end;
  padding-block: 10px;
}

/* state-aware sun/moon toggle. base.html ships both glyphs; CSS reveals the
   one matching the active theme, no JS needed for the swap. */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  line-height: 1;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .i-sun {
  display: none;
}

.theme-toggle .i-moon {
  display: inline-block;
}

:root[data-theme="light"] .theme-toggle .i-sun {
  display: inline-block;
}

:root[data-theme="light"] .theme-toggle .i-moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .i-sun {
    display: inline-block;
  }

  :root:not([data-theme]) .theme-toggle .i-moon {
    display: none;
  }
}

/* sticky top nav: full-bleed, blurred, hairline underline. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 14px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-right: auto;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* wordmark; the square accent dot is drawn in CSS, no extra markup. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-brand::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: var(--glow);
}

.nav-brand:hover {
  color: var(--text);
}

/* hero: constrained column with an accent wash at the top. */
.hero {
  padding-block: 5.5rem 4rem;
  background: radial-gradient(1200px 520px at 12% -8%, var(--accent-soft), transparent 60%);
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 1.25rem;
}

.hero p {
  font-size: 1.1875rem;
  color: var(--muted);
  max-width: 560px;
}

.hero .actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* eyebrow / pill used above hero + section headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
}

/* full-bleed page section with a hairline divider. */
.section {
  padding-block: 5rem;
  border-top: 1px solid var(--border);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section .section-intro {
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 2.5rem;
  font-size: 1.0625rem;
}

/* cards: hairline surfaces that lift on hover. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-card);
}

.card h3,
.card h4 {
  margin-top: 0;
}

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* dashboard org grid: auto-fill so a lone card stays card-sized. */
.card-grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
}

/* at-cap ghost tile: same grid slot the next org would occupy. */
.upsell-tile {
  border-style: dashed;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upsell-tile .upsell-count {
  color: var(--muted);
  margin: 0;
}

.upsell-tile .btn {
  margin-top: auto;
}

/* unified card shell (unified card redesign, Task 3): dashboard org
   cards today, org-page workspace/plan cards in later tasks. `--rail`
   is supplied per-card by a `.plan-*`/`.rail-*` class (never inline
   style="--rail:…"), falling back to `--accent` when unset. */
.mcard {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rail, var(--accent)) 5%, var(--surface)), var(--surface));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.35rem 1.5rem 1.4rem;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.28s, box-shadow 0.28s;
}

.mcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rail, var(--accent)), transparent 72%);
}

.mcard:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--rail, var(--accent)) 45%, var(--border));
  box-shadow: 0 26px 60px -34px color-mix(in srgb, var(--rail, var(--accent)) 60%, transparent);
}

.mcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcard-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.mcard-arrow {
  font-family: var(--font-mono);
  color: var(--dim);
  transition: transform 0.22s, color 0.22s;
}

.mcard:hover .mcard-arrow {
  color: var(--rail, var(--accent));
  transform: translateX(4px);
}

.mcard-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dim);
  margin: 0.35rem 0 1.1rem;
}

.mcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* plan & usage panel (unified card redesign, task 5): usage meters +
   `.mcard-plan` comparison cards, ported verbatim from the reference CSS. */
.usage-panel{display:flex;align-items:center;gap:2rem 2.5rem;flex-wrap:wrap;padding:1.4rem 1.6rem;margin-bottom:1.5rem}
.usage-meters{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.5rem;flex:1;min-width:300px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.meter-top .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.meter-top .val{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.meter-top .val b{color:var(--text);font-weight:600}
.meter-track{height:7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.meter-track>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.plan-stat-row{display:flex;gap:1.4rem;margin:.9rem 0 0}
.plan-stat-row>div{display:flex;flex-direction:column;gap:3px}
.plan-stat-row b{font-family:var(--font-mono);font-size:1.05rem;color:var(--text);font-weight:600;line-height:1}
.plan-stat-row span{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.mcard-plan{display:flex;flex-direction:column;height:100%}
.mcard-plan .mcard-foot{margin-top:auto;border-top:none;padding-top:0}
.mcard-price{font-family:var(--font-mono);font-size:1.45rem;margin:.55rem 0 .1rem;color:var(--rail,var(--accent))}
.mcard-price span{font-size:.8rem;color:var(--muted)}
.mcard-feat{color:var(--rail,var(--accent));font-family:var(--font-mono);font-size:12px;margin:.5rem 0 0}
.mcard-feat::before{content:"\2713  "}
.mcard-foot .btn,.mcard-foot form,.mcard-foot button{width:100%}
.meter-track > .w-0{width:0}
.meter-track > .w-10{width:10%}
.meter-track > .w-20{width:20%}
.meter-track > .w-30{width:30%}
.meter-track > .w-40{width:40%}
.meter-track > .w-50{width:50%}
.meter-track > .w-60{width:60%}
.meter-track > .w-70{width:70%}
.meter-track > .w-80{width:80%}
.meter-track > .w-90{width:90%}
.meter-track > .w-100{width:100%}

/* grants panel rows (unified card redesign, task 6): ported verbatim
   from the reference CSS — replaces the old <table> grid. */
.grant-list{display:grid;gap:.7rem;margin-top:1.1rem}
.grant-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem 1.2rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.grant-ws{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.grant-ws-name{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.cap-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);background:color-mix(in srgb,var(--accent-2) 10%,transparent);padding:.14rem .5rem;border-radius:6px}
.grant-ctl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.grant-ctl form{display:flex;align-items:center;gap:.5rem;margin:0}
.grant-ctl select{width:auto;min-width:150px;padding-block:.55rem}

.card-group + .card-group {
  margin-top: 3rem;
}

.group-label {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.group-intro {
  margin: 0 0 1.5rem;
  max-width: 60ch;
  color: var(--muted);
}

/* architecture diagram partial */
.diagram-figure {
  margin: 0 0 2rem;
}

.diagram-scroll {
  overflow-x: auto;
  padding-block: 0.5rem;
}

.diagram-svg {
  min-width: 900px;
  height: auto;
  display: block;
}

/* Diagram internals. SVG shapes default to `fill: black` and `stroke: none`,
   so every one of these classes is load-bearing: without them the node boxes
   paint solid black over their own labels and the connector lines vanish,
   leaving only the arrowheads. Painted from the same tokens as `.card`, so
   the diagram flips with the light/dark cascade like the rest of the page. */
.diagram-node-box {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}

.diagram-node-title {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.diagram-node-sub {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
}

.diagram-flow-line line {
  stroke: var(--border-strong);
  stroke-width: 1.5;
  fill: none;
}

.diagram-flow-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.diagram-caption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* flow-step chips: compact restatement of the pipeline stages. */
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.flow-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45ch;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.flow-step .mono {
  color: var(--muted);
  font-weight: 400;
}

.flow-sep {
  color: var(--accent-2);
  font-weight: 400;
}

.diagram-caption-note {
  margin: 0;
}

/* differentiator line + pricing figures */
.tagline {
  color: var(--muted);
  font-size: 1.0625rem;
  margin-top: 1rem;
}

.tier-price {
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.tier-limits {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin: 0 0 0.125rem;
}

.tier-limits-caption {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 0 0 1rem;
}

/* popular / featured tier accent (opt-in class) */
.tier-featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
  box-shadow: 0 20px 50px -30px var(--accent-line);
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-contrast);
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 20px;
}

.footer {
  border-top: 1px solid var(--border);
  padding-block: 3rem;
  color: var(--muted);
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--bg) 85%, #000);
}

.footer a {
  color: var(--muted);
}

.footer a:hover {
  color: var(--text);
}

.footer .blindness-note {
  font-family: var(--font-mono);
  color: var(--accent);
  font-style: normal;
}

/* ------------------------------------------------------------- buttons */

button,
.btn {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--text);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 10px 30px -10px var(--accent-line);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: transparent;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* Disabled buttons must not look clickable: neutral surface, dimmed
   text, no accent glow, and a not-allowed cursor. Specificity note:
   this sits after .btn-primary/.btn-danger and re-declares their
   distinguishing properties, and every :hover/:active rule above is
   scoped :not(:disabled), so the disabled look wins in all states. */
button:disabled,
.btn:disabled {
  background: var(--surface);
  border-color: var(--border);
  color: var(--dim);
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------- forms */

label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 1rem 0 0.5rem;
}

label:first-child {
  margin-top: 0;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  max-width: 440px;
  font: inherit;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--dim);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 227, 176, 0.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------------------------------------------------- status / utility */

.error {
  color: var(--danger);
  font-weight: 600;
}

/* contact honeypot: off-screen, still in flow, JS-free. */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.banner {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.banner p {
  margin: 0.25rem 0;
  color: inherit;
}

/* ------------------------------------------ badges & signed-in layout */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.badge-starter {
  color: var(--plan-starter);
  border-color: color-mix(in srgb, var(--plan-starter) 40%, transparent);
}

.badge-premium {
  color: var(--accent);
  border-color: var(--accent-line);
}

.badge-enterprise {
  color: var(--plan-enterprise);
  border-color: color-mix(in srgb, var(--plan-enterprise) 40%, transparent);
}

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

a.badge:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* tighter section rhythm for signed-in pages; .section's 5rem is
   landing-scaled. */
.section-app {
  padding-block: 2.5rem;
}

/* page/panel header rows: title left, one action button right. */
.page-head,
.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.panel-head {
  justify-content: space-between;
}

.page-head h1,
.panel-head h2 {
  margin: 0;
}

/* structured list rows (tokens): name + badges left, actions right. */
.row-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.row .row-actions {
  margin-left: auto;
}

/* a row of side-by-side forms/buttons (upgrade CTAs). */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn-row form {
  margin: 0;
}

/* plan & usage panel: tier-comparison grid (spec §9). */
.plan-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.plan-card-current {
  border-color: var(--accent-line);
}

.plan-current-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}

.tier-feature {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin: 0 0 6px;
}

.tier-feature::before {
  content: "✓ ";
}

.plan-starter h3 { color: var(--plan-starter); }
.plan-premium h3 { color: var(--accent); }
.plan-enterprise h3 { color: var(--plan-enterprise); }

/* .mcard rail color per plan tier (dashboard org cards) plus a
   workspace rail for later tasks — set via class, never inline style,
   so a bare .mcard still falls back to var(--accent). */
.plan-free { --rail: var(--muted); }
.plan-starter { --rail: var(--plan-starter); }
.plan-premium { --rail: var(--accent); }
.plan-enterprise { --rail: var(--plan-enterprise); }
.rail-ws { --rail: var(--accent-2); }

/* workspace card: collapsible config (spec 2026-07-17 §5). */
.ws-config summary {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

/* compact one-line forms: logout in the topbar, grant preset save. */
.form-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* stacked create/contact forms: breathing room before the submit
   control (spec §2 — buttons must not sit glued to the last field). */
.form-stack > button[type="submit"] {
  margin-top: 1.25rem;
}

.limit-note {
  color: var(--muted);
  margin-bottom: 1rem;
}

/* wrapper that carries the hover tooltip for a disabled action button
   (disabled buttons don't reliably fire hover events themselves). */
.tip-wrap {
  display: inline-block;
  cursor: not-allowed;
}

.field-help {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ dialogs */

dialog.dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: min(28rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-card);
}

dialog.dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

dialog.dialog h2 {
  margin-top: 0;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------ shared footer */

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-links {
  display: flex;
  gap: 28px;
}

/* informational (non-error) banner: plan limits, upgrade nudges. */
.banner-info {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.blindness-note {
  color: var(--muted);
}

/* ---------------------------------------------------------- a11y bits */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .container {
    padding-inline: 18px;
  }

  .nav .container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .hero {
    padding-block: 3.5rem 2.5rem;
  }

  .section {
    padding-block: 3.5rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nav .container {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 1.1rem;
    margin-right: 0;
  }

  .nav-brand {
    margin-right: auto;
  }
}