/* Bloodhound Whiskey — components added with the 2026-08-31 redesign.
   Everything here reads from the tokens in styles.css, because a literal hex
   works in one theme and fails in the other -- which is exactly what the
   design prototype did. The one deliberate exception is .alert-mock, which
   imitates a dark Discord surface in both themes and therefore carries its
   own fixed palette; see the note there. */

@import url("styles.css");

/* --- hero ---------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 3rem;
  align-items: center;
  padding: 4rem 1.5rem 3.5rem;
}
.hero-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.hero-copy h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.08; margin: 0; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.hero-note { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* --- the alert mock: the product, shown ----------------------------------
   Deliberately a dark Discord-like surface in BOTH themes, so it carries its
   own fixed palette. Using the page tokens here is a trap: --ink flips to
   near-black in light mode and the whole card goes dark-on-dark. */
.alert-mock {
  --mock-bg: #0f0b07;
  --mock-inner: #1f1710;
  --mock-ink: #f6efe2;
  --mock-ink-soft: #b9a68d;
  --mock-accent: #f5b571;
  --mock-line: #4a3a29;
  --mock-good: #7fb56f;

  color: var(--mock-ink);
  background: var(--mock-bg);
  border: 1px solid var(--mock-line);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 18px 40px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.alert-chrome {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mock-ink-soft);
}
.alert-chrome .live {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--mock-good); flex: none;
}
.alert-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.alert-head img { width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; }
.alert-head .who { font-weight: 700; color: var(--mock-ink); }
.alert-head .bot {
  font-family: "IBM Plex Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--copper); color: var(--on-copper);
  padding: 0.12rem 0.34rem; border-radius: 3px;
}
.alert-head .when { font-size: 0.78rem; color: var(--mock-ink-soft); }
.alert-title {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.24rem; line-height: 1.28; margin: 0; color: var(--mock-accent);
}
.alert-rows { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.alert-rows div { display: flex; gap: 0.7rem; font-size: 0.95rem; }
.alert-rows dt {
  font-family: "IBM Plex Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mock-ink-soft);
  min-width: 5.2rem; padding-top: 0.22rem;
}
.alert-rows dd { margin: 0; color: var(--mock-ink); }
.verdict {
  border-left: 3px solid var(--copper);
  background: var(--mock-inner);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  color: var(--mock-ink);
}
.verdict strong { color: var(--mock-accent); }
.mock-caption {
  font-family: "IBM Plex Mono", monospace; font-size: 0.78rem;
  color: var(--ink-soft); text-align: center; margin: 0.9rem 0 0;
}

/* --- tiers: three depths of one watch ------------------------------------ */
.tiers { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 1.6rem; }
.tier {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.4rem 1.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.tier .n {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper);
  padding-top: 0.3rem;
}
.tier .body { display: flex; flex-direction: column; gap: 0.5rem; }
.tier h3 { margin: 0; font-size: 1.12rem; }
.tier p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.tier .said {
  font-family: Fraunces, Georgia, serif; font-style: italic;
  color: var(--copper-deep); font-size: 1.02rem;
}
.tier-state {
  font-family: "IBM Plex Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.5rem; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  align-self: start; margin-top: 0.25rem;
}
.tier-state.on { color: var(--good); border-color: var(--good); }
@media (max-width: 40rem) {
  .tier { grid-template-columns: 1fr auto; }
  .tier .n { grid-column: 1 / -1; padding-top: 0; }
}

/* --- value table --------------------------------------------------------- */
.gap-table-wrap { overflow-x: auto; margin-top: 1.4rem; }
.gap-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 30rem; }
.gap-table th {
  text-align: left; padding: 0.7rem 0.9rem;
  font-family: "IBM Plex Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); font-weight: 500;
}
.gap-table td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line); }
.gap-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gap-table .bottle { font-weight: 600; color: var(--ink); }
.gap-table .diff { color: var(--good); font-weight: 600; }
.gap-table tfoot td {
  background: var(--surface-card); font-weight: 600; color: var(--ink);
  border-bottom: 0;
}
.gap-table tfoot .total { color: var(--copper-deep); text-align: right; }
.fineprint { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1rem; }

/* --- what we won't do ---------------------------------------------------- */
.wont-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem; margin-top: 1.6rem;
}
.wont {
  background: var(--surface-card); border: 1px solid var(--line);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.wont h3 { margin: 0; font-size: 1.02rem; color: var(--copper-deep); }
.wont p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }

/* --- footer legal --------------------------------------------------------
   The footer keeps a dark ground in both themes, so it uses the --nav-* inks
   (which are deliberately not redefined in the light block) rather than
   --ink-soft, which would go dark-on-dark in light mode. */
.disclaimer {
  margin-top: 1.2rem; font-size: 0.85rem; line-height: 1.6;
  color: var(--nav-ink-soft); max-width: 62ch;
}