/* Page layout layer (DESIGN_SPEC.md §CSS architecture): page-specific composition only —
   spacing and grids. All look-and-feel lives in components.css. Loads last. */

/* Vertical rhythm between the major bands of a page. */
.page-main {
  padding-block: var(--sp-8);
}

.section {
  margin-bottom: var(--sp-8);
}

.section > h2 {
  margin-bottom: var(--sp-3);
}

/* ---- Home / tool directory --------------------------------------------- */
.hero {
  margin-bottom: var(--sp-8);
}

/* The page title carries the one scarce lime accent as a highlighter swipe under the text.
   Inline + box-decoration-break:clone so the swipe follows every wrapped line; sized as a
   baseline band (not a full highlight) so long titles — e.g. the home hero — read as marked,
   not flooded with accent. Hero titles only; auth/error/account headings keep the lighter type
   but no accent, so the accent stays scarce. */
.hero h1 {
  display: inline;
  background: linear-gradient(var(--accent), var(--accent)) 0 88% / 100% 0.3em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero p {
  margin-top: var(--sp-2);
  color: var(--gray-600);
  font-size: var(--text-lg);
  max-width: var(--measure);
}

/* Popular block: single column on mobile, two across once there's room. */
.popular-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .popular-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* A popular link is a bold, full-size pill target — the same shape language as the primary CTA. */
.popular-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border: var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.popular-link:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.popular-link .icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.intro {
  margin-top: var(--sp-12);
}

/* ---- Calculator page shell (form + result side-by-side on wide screens) - */
.calc-layout {
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr track has min-width:auto and refuses to shrink below its
     content's min size, so a .table-scroll inside (time-card grid) can't clip and the whole column
     overflows the viewport. minmax(0,...) lets the track shrink so inner scroll containers work. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  /* The interactive block (form + result region) is a major page band like the hero: it needs the
     same --sp-8 rhythm before the prose sections, or the CALCULATE button / result actions collide
     with the intro copy that follows (nothing else separated them). Matches .section spacing. */
  margin-bottom: var(--sp-8);
}

@media (min-width: 1024px) {
  .calc-layout {
    /* Form 40 / result 60 per page anatomy. minmax(0,...) so both tracks can shrink below content
       (keeps inner scroll containers working; prevents a wide result table pushing the grid). */
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: start;
  }
}

/* The form column stacks the form with optional siblings (OBBBA sunset banner). The gap keeps a
   trailing banner clear of the CALCULATE button's hard shadow (--shadow-hard renders outside the
   button's layout box, so zero gap reads as an overlap). */
.calc-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---- Error pages -------------------------------------------------------- */
.error-page {
  padding-block: var(--sp-12);
}

.error-page h1 {
  margin-bottom: var(--sp-4);
}

.error-page .section {
  margin-top: var(--sp-8);
}

/* ---- Auth screens (F-014, mocks/signup-upgrade.md + login.md) ----------- */
/* A single narrow, centred card holds every auth form (signup/login/reset). */
.auth-card {
  max-width: 26rem;
  margin-inline: auto;
  padding-block: var(--sp-8);
}

.auth-card h1 {
  margin-bottom: var(--sp-2);
}

/* Benefit-led lead line under the heading. */
.auth-lead {
  color: var(--gray-600);
  margin-bottom: var(--sp-6);
}

/* Secondary links row (log in / sign up / forgot password). */
.auth-alt {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
}

/* "or" divider between the Google button and the email form. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  color: var(--gray-600);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--gray-300);
}

/* The header "Log out" is a POST form; strip its button back to a plain menu link. */
.logout-form {
  margin: 0;
}

.linklike {
  display: block;
  width: 100%;
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.linklike:hover {
  text-decoration: underline;
}

/* ---- Account danger zone (F-014, mocks/account-settings.md) ------------- */
.danger-zone {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  /* A heavy top rule sets the destructive block apart from ordinary settings above it. */
  border-top: var(--border-thick);
}

.danger-zone h2 {
  color: var(--error);
  margin-bottom: var(--sp-2);
}

/* Destructive action: outlined in error red until hover, then fills — never mistaken for save. */
.btn-danger {
  background: var(--paper);
  border-color: var(--error);
  color: var(--error);
  box-shadow: none;
}

.btn-danger:hover {
  background: var(--error);
  color: var(--paper);
}

/* ---- Saved history (F-015, mocks/account-history.md) ------------------- */
.history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.history-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

/* Each saved row: a bordered card with the summary on the left, actions on the right. */
.history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--border-thin);
  border-radius: var(--radius-ctl);
}

.history-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}

.history-label {
  font-weight: 700;
}

.history-net {
  font-family: var(--font-mono);
  font-weight: 700;
}

.history-row-meta {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-600);
}

.history-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.history-delete {
  margin: 0;
}

.history-status {
  margin-top: var(--sp-4);
  color: var(--gray-600);
}

/* Empty state: invites the first calculation (mock copy). */
.history-empty {
  padding: var(--sp-6);
  border: var(--border-thin);
  border-radius: var(--radius-ctl);
  text-align: center;
}

.history-empty .btn {
  margin-top: var(--sp-4);
}

/* ---- Account settings (F-015, mocks/account-settings.md) --------------- */
.settings-form {
  max-width: var(--measure);
}

.settings-block {
  margin-bottom: var(--sp-6);
}

.settings-block h2 {
  margin-bottom: var(--sp-3);
}

.banner-success {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border: var(--border-thin);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-ctl);
}

/* ---- Premium teaser + waitlist (F-015, mocks/premium-teaser.md) -------- */
.waitlist {
  margin-top: var(--sp-6);
  /* --sp-5 doesn't exist in the scale; the invalid value zeroed the padding, so the heading sat
     flush against the card border. --sp-6 gives comfortable, design-system-consistent internal space. */
  padding: var(--sp-6);
  border: var(--border-thick);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.waitlist-form .field {
  flex: 1;
  min-width: 14rem;
}

.waitlist-done {
  font-weight: 700;
}

/* ---- Feedback report (F-026, mocks/calculator-result.md) --------------- */
.feedback {
  margin-top: var(--sp-3);
}

.feedback > summary {
  cursor: pointer;
  font-weight: 700;
}

.feedback-form {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--measure);
}

.feedback-thanks {
  margin-top: var(--sp-3);
  font-weight: 700;
}

/* Honeypot: kept in the DOM + accessible tree removed; hidden from humans, tempting to bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Embed-widget generator (/embed-widget, F-022) --------------------- */
/* Controls on the left, live preview on the right once there's room; stacked on mobile. */
.widget-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

@media (min-width: 1024px) {
  .widget-grid {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: start;
  }
}

.widget-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* The snippet is code: monospace, wrapped, and visibly read-only (it's copied, not typed). */
.widget-snippet {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre;
  overflow-x: auto;
}

.widget-copy-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.widget-copied {
  font-weight: 700;
  color: var(--ok);
}

/* The live preview frame sits in the design-system card (border + hard shadow), like a result panel. */
.widget-preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.widget-preview-frame {
  width: 100%;
  height: 640px;
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
}

/* "Embed this calculator" promo line on every calculator page — quiet, above the source note. */
.embed-promo p {
  color: var(--gray-600);
}