/* ==========================================================================
   Four Winds — stylesheet

   One file, no preprocessor. Everything themeable lives in `:root`, so the
   palette can be swapped without touching a rule.

   Three structural rules are load-bearing and easy to undo by accident:

   1. Every multi-column grid uses `minmax(0, 1fr)`, never a bare `1fr`.
      A bare `1fr` is `minmax(auto, 1fr)`, and grid children default to
      `min-width: auto`, so a wide table or an unbreakable string pushes the
      track past the viewport and the whole page scrolls sideways. The cards
      also carry `min-width: 0` for the same reason.

   2. Text may wrap; numbers may not. A column of figures that breaks between
      `4` and `.25` is worse than a column that is a little wide.

   3. Hover states go darker, never lighter. On a cream page a lighter hover
      disappears into the background; the shadow does the lifting instead.
   ========================================================================== */

:root {
  /* surfaces — warm paper and light wood */
  --bg: #faf5ec;
  --bg-tint: #f4ebdd;
  --surface: #fffdf8; /* lighter than --bg, or cards stop reading as raised */
  --surface-2: #f7f0e4;
  --border: #e7dcc9;
  --border-strong: #d3c3a8;

  /* text */
  --text: #2a2118;
  --text-soft: #55483a;
  --text-mute: #6d5f4f;

  /* brand — mahjong green, vermilion accent */
  --primary: #17694a;
  --primary-strong: #0f4e37; /* hover: darker, because this is a light theme */
  --primary-soft: #e8f1ea;
  --accent: #b23a25;
  --accent-ink: #8a2a19;
  --accent-soft: #fbe9e4;

  /* tiles */
  --tile-face: #fffdf7;
  --tile-edge: #d9cbb2;
  --tile-ink: #2a2118;
  --tile-red: #b23a25;
  --tile-green: #17694a;

  /* type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --font-head: Georgia, 'Iowan Old Style', 'Noto Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono',
    monospace;

  /* geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --wrap: 1120px;
  --gutter: 24px;

  /* elevation — never pure black: a neutral shadow on a cream page reads as
     a dirty smudge rather than depth */
  --shadow-sm: 0 1px 2px rgba(62, 44, 22, 0.06), 0 2px 8px rgba(62, 44, 22, 0.05);
  --shadow-md: 0 2px 4px rgba(62, 44, 22, 0.06), 0 10px 28px rgba(62, 44, 22, 0.08);

  /* native controls (select, date, scrollbar) follow this */
  color-scheme: light;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a:hover {
  color: var(--primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

button {
  font: inherit;
  color: inherit;
}

/* Tabular figures everywhere a number is compared down a column. Without
   this the temperature-style values jitter as digits change width. */
.tnum,
table.data .num,
.result-value,
.meter-value,
.spec dd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-md) 0;
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  left: 0;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main {
  display: block;
  padding: 28px 0 72px;
  min-height: 60vh;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  min-width: 0;
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  flex: none;
}

.brand-mark .icon {
  width: 19px;
  height: 19px;
}

.brand-name {
  white-space: nowrap;
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.nav-link.is-current {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}

.nav-toggle-close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-close {
  display: grid;
}

/* ---------- breadcrumb ---------- */

.breadcrumb {
  margin-bottom: 18px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-mute);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: '/';
  color: var(--border-strong);
}

.breadcrumb a {
  color: var(--text-soft);
}

.breadcrumb [aria-current='page'] {
  color: var(--text-mute);
}

/* ---------- page head ---------- */

.page-head {
  margin-bottom: 28px;
  max-width: 720px;
}

.page-head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 10px;
}

.page-lead {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.55;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn .icon {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-strong);
  color: #fff;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  /* No background. The hero lives inside the page wrap, so anything painted
     here is clipped to a 1072px box and the clip is visible as a rectangle
     against the cream page. A radial glow centered near the edge is still at
     full strength where it gets cut. Typography does the work instead. */
}

.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px var(--gutter) 56px;
}

.hero-kicker {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-title {
  font-size: clamp(34px, 5.2vw, 58px);
  max-width: 15ch;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.hero-sub {
  max-width: 56ch;
  color: var(--text-soft);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  margin-bottom: 26px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--text-mute);
  font-size: 14px;
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-facts .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* ---------- sections ---------- */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
}

.section-tint {
  max-width: none;
  margin-top: 56px;
  padding: 56px 0 60px;
  background: var(--bg-tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* the tinted band spans full width, so its contents get their own wrapper */
.section-tint > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* The heading box must span the full wrap so its left edge lines up with the
   cards. `.section-tint > *` centers its children, so a 640px head inside it
   ended up centered while the grid below stayed left-aligned. The paragraph is
   what needs the measure, not the box. */
.section-head {
  margin-bottom: 26px;
  max-width: none;
}

.section-head h2 {
  font-size: clamp(23px, 2.6vw, 31px);
  margin-bottom: 8px;
}

.section-head p {
  max-width: 640px;
  color: var(--text-soft);
  font-size: 16px;
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

.section-more .icon {
  width: 15px;
  height: 15px;
}

/* ---------- tool grid ---------- */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tool-card {
  min-width: 0;
}

.tool-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.tool-card-link:hover {
  text-decoration: none;
  color: var(--text);
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.tool-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  margin-bottom: 16px;
}

.tool-card-icon .icon {
  width: 23px;
  height: 23px;
}

.tool-card-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.tool-card-blurb {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* The example line is the evidence that this card leads to something that
   actually computes, so it must never be truncated. */
.tool-card-example {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tool-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--primary-strong);
  font-size: 14px;
  font-weight: 600;
}

.tool-card-more .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.16s ease;
}

.tool-card-link:hover .tool-card-more .icon {
  transform: translateX(3px);
}

/* ---------- audience ---------- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.audience-card {
  min-width: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.audience-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin-bottom: 14px;
}

.audience-icon .icon {
  width: 20px;
  height: 20px;
}

.audience-card h3 {
  font-size: 16.5px;
  margin-bottom: 7px;
}

.audience-card p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.audience-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.audience-link .icon {
  width: 15px;
  height: 15px;
}

/* ---------- post grid ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.post-card {
  min-width: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.post-card-meta {
  color: var(--text-mute);
  font-size: 12.5px;
  margin-bottom: 9px;
}

.post-card h3 {
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 9px;
}

.post-card p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- faq preview ---------- */

.faq-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
}

.faq-preview-item {
  min-width: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.faq-preview-item h3 {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 6px;
}

.faq-preview-item p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- panels ---------- */

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.panel-head h2 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- tool layout ---------- */

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.tool-form {
  padding: 0 0 8px;
}

.tool-form .panel-head {
  border-bottom: 1px solid var(--border);
}

.tool-form .field {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.form-aside {
  margin: 0 22px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 1.6;
}

.tool-form .field:last-of-type {
  border-bottom: 0;
}

.field-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 10px;
}

.field-hint {
  margin-top: 9px;
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Inputs. The `:not()` chain is deliberate: a blanket `.field input` rule
   stretches checkboxes and radios to full width and there is no DOM-level
   symptom — it only shows up in a screenshot. */
.field input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.field select {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.field input:not([type='checkbox']):not([type='radio']):not([type='hidden']):hover,
.field select:hover {
  border-color: var(--text-mute);
}

.field input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.segmented button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.segmented button:hover {
  color: var(--text);
}

.segmented button.is-on {
  background: var(--surface);
  color: var(--primary-strong);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ---------- result panel ---------- */

.tool-result {
  position: sticky;
  top: 84px;
}

.result-body {
  padding: 22px;
}

.result-hero {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.result-label {
  color: var(--text-mute);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.result-value {
  /* Body face, not the serif: this element carries both numbers and short
     words ("American", "46"), and Georgia's old-style figures make a 46 look
     like it is falling over at 50px. */
  font-family: var(--font);
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--primary-strong);
}

.result-unit {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--text-mute);
  margin-left: 8px;
  letter-spacing: 0;
}

.result-sub {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 14.5px;
}

.result-note {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.result-note.is-quiet {
  color: var(--text-mute);
  font-size: 13px;
}

.result-note.is-warn {
  color: var(--accent-ink);
  font-weight: 500;
}

.spec-grid {
  display: grid;
  /* Four columns, or three when the tool passes three values. `auto-fit` was
     tried here and cannot help: it only collapses empty tracks, so three
     values in a four-column grid still leave a blank cell at the right and
     five values still orphan one onto a second row. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.spec-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Separators are inset shadows on the cells, not a colored gap behind them.
   With a colored gap, five values in a four-column grid leave the empty
   tracks painted as one solid beige block that reads as a missing cell. */
.spec {
  padding: 13px 15px;
  background: var(--surface);
  min-width: 0;
  box-shadow: inset -1px -1px 0 var(--border);
}

.spec dt {
  color: var(--text-mute);
  font-size: 12px;
  margin-bottom: 3px;
}

.spec dd {
  margin: 0;
  /* Body face: these are values, often numbers, and Georgia's old-style
     figures sit at three different heights down a column. */
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.callout {
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--primary-soft);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.callout .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary-strong);
}

.rule-lines {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.rule-lines li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.rule-lines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-warn {
  background: var(--surface-2);
  color: var(--text-soft);
}

.badge-hot {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.result-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.result-block-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}

.skip-list {
  display: grid;
  gap: 10px;
}

.skip-list li {
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.skip-list strong {
  color: var(--text);
}

/* ---------- meters ---------- */

.meter-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 38px;
  align-items: center;
  gap: 10px;
}

.meter-label {
  font-size: 13px;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.meter-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.meter-value {
  font-size: 12.5px;
  color: var(--text-mute);
  text-align: right;
  white-space: nowrap;
}

/* ---------- tables ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 16px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data caption {
  text-align: left;
}

table.data th,
table.data td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

table.data thead th {
  background: var(--surface-2);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}

table.data tbody tr:last-child th,
table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tfoot th,
table.data tfoot td {
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
  background: var(--surface-2);
  font-family: var(--font-head);
  font-weight: 700;
}

/* Numbers right-aligned and unbreakable; text wraps freely. */
table.data .num {
  text-align: right;
  white-space: nowrap;
}

.gear-table th[scope='row'] {
  font-weight: 500;
  color: var(--text);
}

/* ---------- next step ---------- */

.next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.next-step-label {
  color: var(--text-mute);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-step-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
}

.next-step-link .icon {
  width: 16px;
  height: 16px;
}

/* ---------- article ---------- */

/* One centered column, not a left-aligned one. At 760px the article sat
   against the left edge of a 1080px wrap and the empty right-hand side read
   as a broken layout rather than as margin. */
.article {
  max-width: 640px;
  margin-inline: auto;
}

.article-narrow {
  max-width: 560px;
}

.article-head {
  margin-bottom: 26px;
}

.article-kicker {
  color: var(--text-mute);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.article-head h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-bottom: 12px;
}

.article-lead {
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.55;
}

.article-tool {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-mute);
}

/* The link inside the "Pairs with…" line is the whole point of the line, so
   it keeps the accent color instead of inheriting the muted gray. */
.article-tool a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Article pages center their column, so the breadcrumb has to center with it
   or it floats a hundred pixels to the left of everything else. Index pages
   keep it flush left, because their content is flush left too. */
body[data-page='guide'] main > .breadcrumb,
body[data-page='blog'] main > .breadcrumb {
  max-width: 640px;
  margin-inline: auto;
}

body[data-page='faq'] main > .breadcrumb,
body[data-page='page'] main > .breadcrumb {
  max-width: 560px;
  margin-inline: auto;
}

.article-updated {
  margin-top: 12px;
  color: var(--text-mute);
  font-size: 13px;
}

/* ---------- toc ---------- */

.toc {
  margin-bottom: 28px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.toc-title {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}

.toc ol {
  display: grid;
  gap: 5px;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  font-size: 14px;
  line-height: 1.5;
}

.toc li::before {
  content: counter(toc) '. ';
  color: var(--text-mute);
}

/* ---------- prose ---------- */

.prose {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text);
}

.prose > * + * {
  margin-top: 1.05em;
}

/* The article column is the reading measure — about 75 characters at this
   size. Capping paragraphs again inside it produced a ragged 100px gap on
   the right and heading rules that stopped short of the column edge. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > h2,
.prose > h3 {
  max-width: none;
}

.prose h2 {
  font-size: clamp(21px, 2.2vw, 26px);
  margin-top: 1.9em;
  padding-top: 0.7em;
  border-top: 1px solid var(--border);
  scroll-margin-top: 84px;
}

.prose h3 {
  font-size: 18px;
  margin-top: 1.5em;
  scroll-margin-top: 84px;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.5em;
  padding-left: 1.25em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li::marker {
  color: var(--text-mute);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.prose a:hover {
  text-decoration-color: var(--primary);
}

.prose strong {
  font-weight: 650;
}

.prose blockquote {
  margin-left: 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--primary);
  color: var(--text-soft);
  font-style: italic;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  /* inline code sits mid-sentence, so it must break rather than push the
     whole paragraph sideways on a phone */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prose pre {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* A code block scrolls on its own; it must not inherit the inline rule. */
.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 320px;
}

.prose th,
.prose td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.prose thead th {
  background: var(--surface-2);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.prose td.num,
.prose th.num {
  text-align: right;
  white-space: nowrap;
}

/* ---------- cta ---------- */

.cta {
  margin-top: 40px;
  padding: 24px;
  background: var(--primary-soft);
  border-radius: var(--r-lg);
  text-align: center;
}

.cta-quiet {
  background: var(--surface);
  border: 1px solid var(--border);
}

.cta-label {
  color: var(--primary-strong);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cta-note {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 13px;
}

/* ---------- related ---------- */

.related {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.related-title {
  font-size: 15px;
  margin-bottom: 14px;
}

.related ul {
  display: grid;
  gap: 10px;
}

.related a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
}

.related a:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.related-title-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
}

.related-note {
  color: var(--text-mute);
  font-size: 12.5px;
}

/* ---------- guide index ---------- */

.guide-list {
  display: grid;
  gap: 14px;
}

.guide-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}

.guide-index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
  padding-top: 4px;
}

.guide-card-body {
  min-width: 0;
}

.guide-card h2 {
  font-size: 19px;
  margin-bottom: 7px;
}

.guide-card p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.guide-card-tool {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--text-mute);
}

/* ---------- post list ---------- */

.post-list {
  display: grid;
  gap: 0;
}

.post-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.post-item:first-child {
  border-top: 1px solid var(--border);
}

.post-date {
  color: var(--text-mute);
  font-size: 13px;
  padding-top: 4px;
  white-space: nowrap;
}

.post-body {
  min-width: 0;
}

.post-body h2 {
  font-size: 19px;
  margin-bottom: 6px;
}

.post-body p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* A bare word on its own line reads as a stray paragraph. As a chip it reads
   as the label it is. */
.post-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- faq ---------- */

/* The FAQ index is seven short cards in five groups; at full wrap width each
   card is 90% empty space. A narrower column makes the grouping read as
   structure rather than as gaps. */
body[data-page='faq-index'] main > * {
  max-width: 760px;
  margin-inline: auto;
}

.faq-group {
  margin-bottom: 34px;
}

.faq-group h2 {
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}

.faq-item h3 {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 6px;
}

.faq-item p {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.faq-back {
  margin-top: 28px;
  font-size: 14px;
}

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

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 48px 0 28px;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}

.footer-col {
  min-width: 0;
}

.footer-col h4 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.footer-col ul {
  display: grid;
  gap: 7px;
}

.footer-col a {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.footer-col a:hover {
  color: var(--primary-strong);
}

.footer-col .footer-more {
  font-weight: 600;
  color: var(--primary);
}

.brand-footer {
  margin-bottom: 10px;
}

.footer-tagline {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
}

.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 3px;
}

.copyright {
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.5;
}

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

@media (max-width: 980px) {
  .tool-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The result panel stops being sticky once it is below the form, otherwise
     it follows the reader around the page for no reason. */
  .tool-result {
    position: static;
  }

  .tool-grid,
  .audience-grid,
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 18px;
  }

  .nav-toggle {
    display: grid;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    padding: 10px var(--gutter) 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  /* Required alongside the `display: none` above, or the button does
     nothing when tapped. */
  .nav.is-open {
    display: block;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-link {
    display: block;
    padding: 11px 14px;
    border-radius: var(--r-sm);
  }

  .hero-inner {
    padding: 44px var(--gutter) 40px;
  }

  .hero-title {
    max-width: none;
  }

  .section {
    padding-top: 42px;
  }

  .section-tint {
    margin-top: 42px;
    padding: 42px 0 44px;
  }

  .tool-grid,
  .audience-grid,
  .post-grid,
  .faq-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .post-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .post-date {
    padding-top: 0;
  }

  .meter {
    grid-template-columns: minmax(0, 1fr) 60px 36px;
  }

  .result-body {
    padding: 18px;
  }

  .tool-form .field {
    padding: 16px 18px;
  }

  /* Wide tables scroll instead of being squeezed into unreadable columns.
     The lower bound only stops a table collapsing; `table-layout: auto` still
     lets a genuinely wide one scroll. */
  .prose table {
    min-width: 340px;
  }

  .prose {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta,
  .next-step,
  .toc {
    display: none;
  }
}
/* ==========================================================================
   Mahjong pieces — tiles, pickers, pattern browser, run sheet

   Everything below is specific to this site's content. The tiles are drawn
   in CSS rather than as SVG because there are 34 of them on screen at once
   in the picker and an inline SVG per tile triples the markup for no gain.
   ========================================================================== */

/* ---------- a tile ---------- */

.tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  border: 1px solid var(--tile-edge);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--tile-face);
  color: var(--tile-ink);
  font-family: var(--font);
  line-height: 1;
  user-select: none;
  flex: 0 0 auto;
}

.tile-rank {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Ink each suit the way a printed set does: vermilion characters, green
   bamboo, ink dots. It also makes a mixed hand readable at a glance, which
   matters when the tiles are 34 pixels wide. */
.tile.suit-m .tile-rank {
  color: var(--tile-red);
}

.tile.suit-s .tile-rank {
  color: var(--tile-green);
}

.tile-suit {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Honors have no suit mark, so the letterform carries the whole face. */
.tile-honor .tile-rank {
  font-size: 15px;
  letter-spacing: 0;
}

.tile-honor .tile-rank::after {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  margin: 4px auto 0;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* ---------- the picker ---------- */

.picker {
  margin-top: 6px;
}

.tile-pool {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px 12px 12px;
}

.pool-row + .pool-row {
  margin-top: 8px;
}

.pool-row-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 5px;
}

.pool-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pool-tile {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 7px;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.pool-tile .tile {
  /* Nine to a row at the narrowest desktop column: 9 x 28 + 8 x 4 = 284px,
     which clears the 304px the pool has inside a 380px panel. At 30px it
     overflowed by six and the nine wrapped onto its own line. */
  width: 28px;
  height: 37px;
}

.pool-tile .tile-rank {
  font-size: 14px;
}

.pool-tile:hover {
  transform: translateY(-2px);
}

.pool-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pool-tile.is-full {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
}

.tile-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 52px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}

.tile-strip-empty {
  margin: 0;
  color: var(--text-mute);
  font-size: 13px;
}

.strip-tile {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 7px;
}

.strip-tile:hover .tile {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.strip-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.picker-count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  font-weight: 600;
}

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linkish:hover {
  color: var(--primary-strong);
}

/* ---------- the hand, as the engine reads it ---------- */

.hand-view {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.hand-set {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hand-set-type {
  margin-right: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
  writing-mode: horizontal-tb;
}

/* ---------- pattern browser ---------- */

.pattern-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pattern-group-title {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.pattern-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pattern-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.pattern-btn:hover {
  background: var(--primary-soft);
  border-color: var(--border-strong);
}

.pattern-btn[aria-pressed='true'] {
  background: var(--primary-soft);
  border-color: var(--primary);
  font-weight: 600;
}

.pattern-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.pattern-btn-pts {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
}

.pattern-btn[aria-pressed='true'] .pattern-btn-pts {
  color: var(--primary-strong);
}

.pattern-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pattern-head h3 {
  margin: 0;
  font-size: 22px;
}

.pts-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fffdf8;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pattern-need {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 14.5px;
}

.pattern-why {
  margin: 0 0 4px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- score rows ---------- */

.score-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.score-row.is-target {
  padding-inline: 8px;
  margin-inline: -8px;
  background: var(--accent-soft);
  border-radius: 6px;
  font-weight: 700;
}

.score-name {
  min-width: 0;
}

.score-pts {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--primary-strong);
}

.score-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 2px solid var(--border-strong);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- badges ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.badge-good {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.badge-warn {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ---------- checkboxes ---------- */

.checks {
  margin-top: 4px;
}

.checks-stage {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.checks-stage:first-child {
  margin-top: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}

.check:hover {
  background: var(--surface-2);
}

.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.check-box .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.check input:checked + .check-box {
  background: var(--primary);
  border-color: var(--primary);
  color: #fffdf8;
}

.check input:focus-visible + .check-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.check-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.check-text em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-mute);
}

.check input:checked ~ .check-text strong {
  color: var(--primary-strong);
}

/* ---------- waiting tiles ---------- */

.wait-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wait-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 13.5px;
}

.wait-name {
  flex: 1 1 auto;
  min-width: 0;
}

.wait-left {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--primary-strong);
}

/* ---------- remaining-tile grid ---------- */

.count-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.count-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 3px;
  border-radius: 6px;
  background: var(--surface-2);
}

.count-cell.is-dead {
  opacity: 0.42;
}

.count-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
}

/* ---------- plain lists used inside result panels ---------- */

.reason-list {
  margin: 10px 0 0;
  padding-left: 20px;
  /* Explicit, because the global list reset above strips markers and a wall
     of unbulleted sentences in a result panel reads as one paragraph. */
  list-style: disc;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.reason-list li + li {
  margin-top: 6px;
}

/* ---------- run sheet ---------- */

.timeline {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.timeline-item:first-child {
  border-top: 0;
}

.timeline-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-strong);
  white-space: nowrap;
  padding-top: 1px;
}

.timeline-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.timeline-body em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ---------- comparison table ---------- */

.compare-section {
  margin-top: 40px;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--surface);
}

.compare-table th,
.compare-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 2px solid var(--border-strong);
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--text);
  width: 20%;
}

.compare-table tbody tr:hover td {
  background: var(--surface-2);
}

/* ---------- serif headings need slightly tighter tracking ---------- */

h1,
h2,
h3 {
  letter-spacing: -0.012em;
}

/* Georgia has no tabular figures by default; the numbers in the result
   panels are set in the body face, which does. */
.result-value,
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---------- the mahjong components on a narrow screen ----------

   These come last on purpose: the block above is appended after the general
   media queries, so an override written up there would lose on source order. */

@media (max-width: 720px) {
  /* Two columns rather than four. A three-value row keeps its last cell
     full-width instead of orphaning it into a half-empty second row. */
  .spec-grid,
  .spec-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spec-grid--3 .spec:last-child {
    grid-column: 1 / -1;
  }

  .pattern-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .score-name {
    font-size: 14px;
  }
}