/*
  One stylesheet for the shared chrome and the existing pages, no framework. The site is five pages of
  prose and a table; a utility framework would be more bytes than content.

  Nothing in here names a colour, a size scale or a font. Every value is a role token (--text-dim,
  --radius-card, --button-padding ...) supplied by the active theme, which sits on a layer of raw
  primitives:

      tokens.css          primitives: the only place raw values live
      themes/default.css  roles for the original light/dark look; always loaded
      themes/<name>.css   a full redesign; loaded when a page sets ViewData["Theme"]
      site.css            this file: base elements, chrome, shared components
      home.css            components used only by the home page

  Restyling the site is a theme edit. If you find yourself typing a hex code here, add a role instead.
*/


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

code {
  background: var(--code-bg);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font: 0.9em/1 var(--font-code);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* ---------- chrome ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-16) var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-8); font-weight: var(--brand-weight); font-size: var(--brand-size); text-decoration: none; color: var(--text-strong); }
.brand:hover { color: var(--text-strong); }
.brand img { width: var(--brand-mark-size); height: var(--brand-mark-size); }
/* The header carries a mark for each kind of surface; the theme decides which one is visible. */
.brand .mark-on-light { display: var(--mark-on-light-display); }
.brand .mark-on-dark { display: var(--mark-on-dark-display); }
.site-header nav { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.site-header nav a { text-decoration: none; color: var(--text-dim); font-size: var(--nav-size); }
.site-header nav a:hover { color: var(--text-strong); }

/*
  On a phone the navigation wraps onto several rows, and a header that sticks to the top at that height
  takes up half the screen. Below this width it scrolls away with the page, and the brand and the links
  get their own rows with tighter gaps.
*/
@media (max-width: 640px) {
  .site-header { position: static; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
  .site-header nav { gap: var(--space-8) var(--space-16); }
}
.site-header nav a.cta {
  background: var(--accent);
  color: var(--accent-text);
  padding: var(--cta-padding);
  border-radius: var(--radius-control);
  font-weight: var(--cta-weight);
  white-space: nowrap;
}
.site-header nav a.cta:hover { background: var(--accent-hover); color: var(--accent-text); }

/* The signed-in header slot and the profile page's larger copy of it: initials on the accent colour. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  flex: none;
}
.site-header nav a.avatar { color: var(--accent-text); }
.site-header nav a.avatar:hover { background: var(--accent-hover); color: var(--accent-text); }
.avatar.large { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
.profile-head { display: flex; align-items: center; gap: var(--space-24); }

main { padding: 0 var(--gutter); }
/* Pages whose sections run edge to edge manage their own gutters. */
main.bleed { padding: 0; }

.site-footer {
  margin-top: 5rem;
  padding: var(--space-32) var(--gutter);
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  color: var(--footer-text);
  font-size: var(--footer-size);
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: var(--space-20); }
.site-footer nav a { color: var(--footer-link); }
.site-footer nav a:hover { color: var(--link-hover); }
main.bleed + .site-footer { margin-top: 0; }

/* ---------- blocks ---------- */

section { max-width: 1100px; margin-inline: auto; }

h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 1.45rem; letter-spacing: -0.01em; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.4rem; }

.lede { font-size: 1.15rem; color: var(--text-dim); max-width: var(--measure); }

.hero { padding: clamp(3rem, 9vw, 6rem) 0 2rem; }
.hero-logo { display: block; max-width: 100%; height: auto; border-radius: var(--radius-media); margin-bottom: 2rem; }
.hero .lede { font-size: 1.25rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 2rem 0 1rem; }

.page-head { padding: clamp(2rem, 6vw, 4rem) 0 0.5rem; }

.fineprint { color: var(--text-dim); font-size: 0.9rem; max-width: var(--measure); }

.no-card { margin: 0.25rem 0 0.75rem; color: var(--text-dim); }

/*
  Buttons: a plain .button, plus .primary (filled) and .secondary (outline). A section can restyle the
  outline for its own surface by setting --button-outline; see home.css.
*/
.button {
  display: inline-block;
  flex: none;
  padding: var(--button-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-weight: var(--button-weight);
  font-size: var(--button-size);
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.button:hover { border-color: var(--text-dim); color: var(--text); }
.button:active { transform: scale(var(--button-press)); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.button.secondary { background: transparent; border-color: var(--button-outline, var(--border)); color: var(--text-strong); }
.button.secondary:hover { background: color-mix(in srgb, var(--text-strong) 8%, transparent); border-color: var(--button-outline, var(--border)); color: var(--text-strong); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:active { transform: none; }
}

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 1.5rem; }
.cards article { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.25rem 1.35rem; }
.cards h3 { margin-top: 0; }
.cards p { margin-bottom: 0; color: var(--text-dim); font-size: 0.95rem; }

.feature-detail p, .feature-detail ul { max-width: var(--measure); }
.feature-detail ul { color: var(--text-dim); padding-left: 1.25rem; }
.feature-detail li { margin: 0.3rem 0; }

.closer { text-align: center; padding: 4rem 0 2rem; }
.closer p { max-width: var(--measure); margin-inline: auto; color: var(--text-dim); }

/* ---------- pricing ---------- */

.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2rem; }
.tier { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.75rem; }
.tier.featured { border-color: var(--accent); background: var(--accent-dim); }
.tier h2 { margin-top: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tier .price { font-size: 2.4rem; font-weight: 650; margin: 0.25rem 0 0.75rem; letter-spacing: -0.02em; }
.tier .price .per { display: block; font-size: 0.85rem; font-weight: 400; color: var(--text-dim); letter-spacing: 0; }
.tier-who { color: var(--text-dim); min-height: 3.2em; }
.tier .button { margin-top: 0.5rem; }

.comparison { margin-top: 3rem; overflow-x: auto; }
.comparison table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 680px; }
.comparison caption { text-align: left; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1rem; max-width: var(--measure); }
.comparison th, .comparison td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); }
.comparison thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.comparison td { text-align: center; width: 8rem; color: var(--text-dim); }
.comparison tbody th { font-weight: 400; }
.comparison th.group { background: var(--bg-sunken); font-weight: 650; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }

.faq h3 { margin-top: 1.75rem; }
.faq p { max-width: var(--measure); color: var(--text-dim); }

/* ---------- registration ---------- */

.register { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; padding-bottom: 3rem; }
@media (max-width: 800px) { .register { grid-template-columns: 1fr; } }

form label { display: block; margin-bottom: 1.15rem; }
form label > span:first-child { display: block; font-size: 0.9rem; font-weight: 550; margin-bottom: 0.3rem; }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
}
input.code-input { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: 0.35em; text-align: center; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

fieldset.threshold { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1rem 1.15rem; margin: 0 0 1.15rem; }
fieldset.threshold legend { font-size: 0.9rem; font-weight: 550; padding: 0 0.35rem; }
label.radio, label.checkbox { display: flex; gap: 0.6rem; align-items: start; margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--text-dim); }
label.radio input, label.checkbox input { margin-top: 0.3rem; flex: none; }

.field-hint { color: var(--text-dim); font-size: 0.85rem; display: block; margin-top: 0.15rem; }
.auth { max-width: 26rem; margin-inline: auto; }
.auth form { display: grid; gap: 0.9rem; }
.auth .fineprint { margin-top: 1.25rem; }

/* Subscribe: plans as selectable cards. The radio stays in the DOM (keyboard and screen readers use it);
   the card draws the selected and focus states from it. */
.auth.subscribe { max-width: 34rem; }
.plans { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.plans legend { font-size: 0.9rem; font-weight: 550; padding: 0; margin-bottom: 0.6rem; }
.plan { position: relative; display: block; cursor: pointer; }
.plan input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-body {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; row-gap: 0.15rem;
  padding: 1rem 1.15rem;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
}
.plan:hover .plan-body { border-color: var(--text-dim); }
.plan input:checked + .plan-body { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); }
.plan input:focus-visible + .plan-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-name { font-weight: 600; color: var(--text-strong); }
.plan-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 1.6rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.plan-price .per { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-dim); letter-spacing: 0; }
.plan-note { grid-column: 1; font-size: 0.85rem; color: var(--text-dim); }
.plan-note.plan-badge { justify-self: start; padding: 0.1rem 0.55rem; border-radius: var(--radius-chip); background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 0.78rem; }
.auth.subscribe .seats input { width: 7rem; }
.auth.subscribe .subscribe-go { padding-block: 0.8rem; font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .plan-body { transition: none; } }
.field-error, .validation-summary { color: var(--danger); font-size: 0.88rem; display: block; }

.register-aside { background: var(--bg-sunken); border-radius: var(--radius-card); padding: 1.5rem; font-size: 0.95rem; color: var(--text-dim); }
.register-aside h2 { font-size: 0.95rem; margin-top: 1.5rem; color: var(--text); }
.register-aside h2:first-child { margin-top: 0; }
.register-aside ol { padding-left: 1.2rem; }

.confirmation { background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-card); padding: 1.75rem; }
.confirmation h2 { margin-top: 0; }

/* htmx toggles this by adding .htmx-request while a swap is in flight. */
.htmx-indicator { opacity: 0; transition: opacity 120ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* The offer to read the page in the visitor's own language. A slim bar above the header. */
.language-hint {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-12);
  padding: var(--space-8) var(--gutter);
  background: var(--accent-dim); border-bottom: 1px solid var(--accent);
  color: var(--text); font-size: 0.92rem;
}
.language-hint p { margin: 0; }
.language-hint a { font-weight: 600; color: var(--text-strong); }
.language-hint button { background: none; border: 0; color: var(--text-dim); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 var(--space-4); }
.language-hint button:hover { color: var(--text-strong); }