/*
  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); }
.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; }
.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); }