/* ==========================================================================
   Wildsforge guide (blog article) layout. Used by every page in /guides/.
   Needs /assets/site.css loaded first for tokens, header, footer and .photo.
   ========================================================================== */
.article { max-width: 780px; margin: 0 auto; }

.article__header { padding: 10px 0 18px; }
.article__header h1 { margin-top: 12px; font-size: clamp(28px, 4.6vw, 40px); }
.article__standfirst { margin: 12px 0 0; font-size: 18px; color: var(--muted); }
.article__meta { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.article__hero { aspect-ratio: 16 / 9; margin-bottom: 8px; }

.prose { font-size: 16.5px; line-height: 1.75; }
.prose h2 { margin: 44px 0 10px; font-size: 25px; scroll-margin-top: 16px; }
.prose h3 { margin: 26px 0 6px; font-size: 18px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 4px; }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-size: 0.92em; }

/* Boxes: summary, contents, tips and "not confirmed" notes */
.box {
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.box > :last-child { margin-bottom: 0; }
.box__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.box--tip { border-left: 4px solid var(--accent); }
.box--note { border-left: 4px solid var(--spark); }
.box--note .box__title { color: var(--warn); }

.toc ol { columns: 2 220px; column-gap: 28px; margin: 0; padding-left: 20px; }
.toc li { break-inside: avoid; }

/* Tables */
.table-scroll { margin: 16px 0 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
caption { padding: 10px 12px 0; text-align: left; color: var(--muted); font-size: 13px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: var(--surface-2); font-size: 13px; }
tbody tr:last-child > * { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* Call to action to the calculator */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--logo-bg);
}
.cta p { margin: 0; max-width: 460px; }

.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: 4px;
}

.sources { font-size: 14px; color: var(--muted); }

@media (max-width: 820px) {
  .prose { font-size: 16px; }
  .prose h2 { font-size: 22px; }
  .article__standfirst { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Phones: tables with 3+ columns become stacked cards, one per row.
   Labels come from data-label, added by tools/label-tables.js; the ARIA roles
   it adds keep the table readable by screen readers after display changes.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .table-scroll:has(.table--stack) { overflow: visible; border: 0; background: none; }

  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td,
  .table--stack tbody th { display: block; }

  .table--stack caption { display: block; padding: 0 2px 8px; }

  /* Column headings move into each cell's label, so hide the header row visually */
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table--stack tr {
    margin-bottom: 10px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  /* Label sits in a fixed left column; the cell keeps normal text flow so
     inline formatting (em, strong, links) stays in one piece */
  .table--stack td,
  .table--stack tbody th {
    position: relative;
    padding: 7px 0 7px calc(38% + 12px);
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: normal;
  }
  .table--stack tr > :last-child { border-bottom: 0; }
  .table--stack td::before,
  .table--stack tbody th::before {
    position: absolute;
    left: 0;
    width: 38%;
    content: attr(data-label);
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
  }

  /* The first cell names the row: show it as the card's title, without a label */
  .table--stack tr > :first-child {
    display: block;
    padding: 6px 0 8px;
    padding-left: 0;
    font-size: 15.5px;
    font-weight: 700;
  }
  .table--stack tr > :first-child::before { content: none; }
  /* ...unless it is just a number (e.g. a level): then title it "Level 12" */
  .table--stack tr > td.num:first-child::before { position: static; width: auto; content: attr(data-label) " "; color: inherit; font-size: inherit; font-weight: inherit; }
  .table--stack td.num { text-align: left; }
}