/* Shared styling for long-form content pages (/how-to-play, /how-to-play/double-sar,
   /engineering/*). Same felt/brass/cream tokens as style.css -- these read as part of
   the same product, at article density. Mirrors legal.css's approach; kept separate so
   the two can evolve independently (this one carries CTA blocks, tables, code, an
   article footer that the bare legal pages don't need). The sticky header and the
   on-page contents list below are the one shared exception: Privacy/Terms load this
   file too, for exactly those two, so every long page navigates the same way. */

/* style.css sets a global body{text-transform:uppercase} for the game UI -- wrong for
   prose meant to be read. Everything on a content page opts back out. */
.content-page,
.content-header,
.content-footer{ text-transform:none; }

/* style.css pins html,body to height:100% for the app screens; on a long page that makes
   body end one screen down, which releases the sticky header there. Let body grow. */
body{ background:var(--felt-2);height:auto; }

/* ---- sticky header: wordmark home, "Contents" jump, and the way back to Play ----
   Full-bleed bar (so it reads as a bar once content scrolls under it) whose contents line
   up with the article column via padding -- --page-w is the column width (legal.css
   narrows it for Privacy/Terms). Solid enough to read over body text, blurred where
   supported. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
.content-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) max(20px, calc((100% - var(--page-w, 720px)) / 2 + 20px)) 10px;
  background:rgba(var(--felt-1-rgb),.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.content-brand{
  font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.01em;
  color:var(--cream);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px; /* tap target */
}
.content-brand:hover{ color:var(--brass-bright); }
.content-header-end{ display:flex;align-items:center;gap:4px; }
/* both header links are >= 44px tall tap targets; only the CTA carries a visible outline */
.content-header-link,
.content-header-cta{
  display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.content-header-link{ padding:0 10px;color:var(--cream-dim); }
.content-header-link:hover{ color:var(--brass-bright); }
.content-header-cta{
  color:var(--brass-bright);min-height:36px;
  border:1px solid rgba(var(--brass-bright-rgb),.4);border-radius:var(--radius-sm);padding:0 12px;
  position:relative;
}
.content-header-cta::before{ content:"";position:absolute;inset:-4px 0; } /* 36px visible, 44px to tap */
.content-header-cta:hover{ background:rgba(var(--brass-bright-rgb),.12); }
@media (max-width:359px){
  .content-brand{ font-size:17px; }
  .content-header-link{ padding:0 6px; }
  .content-header-cta{ padding:0 9px; }
}

/* anchors land below the sticky bar, not under it */
.content-page h2[id],
.legal-page h2[id],
#contents{ scroll-margin-top:76px; }

/* ---- on-page contents ---- */
.content-toc{
  margin:0 0 26px;
  border:1px solid rgba(var(--cream-rgb),.14);border-radius:var(--radius-md);
  background:rgba(var(--cream-rgb),.04);
  text-transform:none;
}
.content-toc summary{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;
  cursor:pointer;list-style:none;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-bright);
}
.content-toc summary::-webkit-details-marker{ display:none; }
.content-toc summary::after{
  content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;
}
.content-toc details[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
.content-toc-count{ font-weight:600;letter-spacing:.04em;color:var(--cream-dim);text-transform:none; }
/* (element-qualified selectors so the article's own .content-page li / .legal-page li
   sizing doesn't leak into the list) */
.content-toc details ol{ margin:0;padding:2px 16px 12px 38px;columns:1; }
.content-toc ol li{ margin:0;padding:0;font-size:14.5px;line-height:1.35;break-inside:avoid; }
.content-toc ol li a{
  display:block;padding:7px 0;color:var(--cream-dim);text-decoration:none;
}
.content-toc ol li a:hover{ color:var(--brass-bright);text-decoration:underline; }
.content-toc ol li::marker{ color:rgba(var(--brass-rgb),.7);font-size:12.5px; }
@media (min-width:720px){ .content-toc details ol{ columns:2;column-gap:28px; } }

/* ---- article body ---- */
.content-page{
  max-width:720px;margin:0 auto;padding:28px 20px 56px;color:var(--cream-dim);
}
.content-page h1{
  font-family:'Fraunces',serif;font-size:clamp(27px,5vw,36px);line-height:1.2;
  color:var(--cream);margin:0 0 16px;
}
.content-page h2{
  font-family:'Fraunces',serif;font-size:clamp(19px,3.4vw,23px);
  color:var(--brass-bright);margin:38px 0 10px;
}
.content-page h3{
  font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:16px;
  color:var(--cream);margin:22px 0 6px;
}
.content-page p,
.content-page li{ font-size:16px;line-height:1.7;overflow-wrap:break-word; }
.content-page p{ margin:0 0 14px; }
.content-page .content-lede{
  font-size:18px;line-height:1.6;color:var(--cream);margin-bottom:22px;
}
.content-page ul,
.content-page ol{ padding-left:22px;margin:0 0 16px; }
.content-page li{ margin:5px 0; }
.content-page strong{ color:var(--cream); }
.content-page a{ color:var(--brass-bright);text-decoration:underline;text-underline-offset:2px; }
.content-page a:hover{ text-decoration:none; }
.content-page hr{
  border:0;border-top:1px solid rgba(var(--cream-rgb),.14);margin:34px 0;
}

/* inline card notation / short data bits */
.content-page .mono,
.content-page code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em;
  background:rgba(var(--cream-rgb),.08);border-radius:4px;padding:1px 5px;
}

/* "Also Known As" and other compact term lists */
.content-aka{
  list-style:none;padding:0;margin:0 0 16px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.content-aka li{
  margin:0;background:rgba(var(--cream-rgb),.06);border:1px solid rgba(var(--cream-rgb),.12);
  border-radius:999px;padding:6px 13px;font-size:14px;color:var(--cream);
}
.content-aka li span{ color:var(--cream-dim); }

/* facts / scoring tables */
.content-table{
  width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15px;
  table-layout:fixed;
}
.content-table caption{
  text-align:left;color:var(--cream-dim);font-size:13px;margin-bottom:8px;
}
.content-table th,
.content-table td{
  text-align:left;padding:9px 12px;border-bottom:1px solid rgba(var(--cream-rgb),.12);
  vertical-align:top;overflow-wrap:break-word;
}
.content-table th{ color:var(--cream);font-weight:700; }
.content-table td:first-child{ color:var(--cream); }
.content-table th:last-child,
.content-table td:last-child{ width:72px;text-align:right; }
.content-table tr:last-child td{ border-bottom:0; }

/* worked-example / note callout */
.content-note{
  background:rgba(var(--cream-rgb),.05);border:1px solid rgba(var(--cream-rgb),.14);
  border-left:3px solid var(--brass);border-radius:var(--radius-sm);
  padding:14px 16px;margin:0 0 18px;
}
.content-note p:last-child{ margin-bottom:0; }
.content-note .content-note-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass-bright);margin-bottom:6px;
}

/* code blocks (engineering pages) */
.content-page pre{
  background:rgba(var(--bg-0-rgb),.78);border:1px solid rgba(var(--cream-rgb),.12);
  border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 18px;
  overflow-x:auto;font-size:13.5px;line-height:1.55;
}
.content-page pre code{ background:none;padding:0;font-size:inherit; }

/* ---- closing CTA ---- */
.content-cta{
  margin:36px 0 8px;padding:22px;border-radius:var(--radius-md);
  background:linear-gradient(160deg,var(--felt-1),var(--bg-0));
  border:1px solid rgba(var(--brass-bright-rgb),.28);text-align:center;
}
.content-cta p{
  font-size:16px;color:var(--cream);margin:0 0 14px;
}
.content-page .content-cta .btn-primary{
  display:inline-block;text-decoration:none;min-width:200px;color:var(--on-gold);
}

/* ---- article footer ---- */
.content-footer{
  max-width:720px;margin:0 auto;padding:24px 20px 48px;
  border-top:1px solid rgba(var(--cream-rgb),.12);
  font-size:13.5px;color:var(--cream-dim);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
}
.content-footer a{ color:var(--cream-dim);text-decoration:none; }
.content-footer a:hover{ color:var(--brass-bright);text-decoration:underline; }
.content-footer .content-footer-sep{ opacity:.4; }

/* Comparison tables with three text columns (the default .content-table is a two-column
   points table whose last column is a narrow right-aligned number). */
.content-table.content-table-wide th:last-child,
.content-table.content-table-wide td:last-child{ width:auto;text-align:left; }
.content-table.content-table-wide td{ vertical-align:top; }

/* Glossary: term above its definition, same rhythm as a list. */
.content-glossary{ margin:0 0 8px; }
.content-glossary dt{ color:var(--cream);margin-top:14px; }
.content-glossary dd{ margin:3px 0 0;color:var(--cream-dim);line-height:1.6; }