/* ═══════════ Analysis Lab shared components (chess & othello) ═══════════
   Loaded by every /analysis/ page. Holds the pieces both games share:
   the candidate-move table, the method block, and the conclusion /
   takeaway boxes. Game-specific board styling stays in
   othello.css (Othello) and style.css (chess diagrams). */

/* Verification conditions — what was analysed, and how. */
.analysis-meta {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.88rem;
}
.analysis-meta dl {
  display: grid;
  /* minmax(0, …) rather than 1fr: a plain 1fr takes its minimum from the
     content, so a long value could not wrap and pushed the whole page wider
     than the screen on phones. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
}
/* On a narrow screen the label column leaves too little for the value, so the
   pairs stack instead. */
@media (max-width: 480px) {
  .analysis-meta dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .analysis-meta dd { margin: 0 0 0.5rem; }
  .analysis-meta dd:last-child { margin-bottom: 0; }
}
.analysis-meta dt { color: var(--muted); font-weight: 700; }
.analysis-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Candidate-move table: one row per move, best first. */
.eval-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.92rem;
}
.eval-table th,
.eval-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.eval-table th { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.eval-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.eval-table .cell-name { font-weight: 800; font-variant-numeric: tabular-nums; }
.eval-table tr.is-best td { background: rgba(31, 107, 69, 0.08); }
.eval-table tr.is-best .cell-name { color: #1f6b45; }
.eval-table .m-pos  { color: #1f6b45; font-weight: 700; }
.eval-table .m-zero { color: var(--muted); font-weight: 700; }
.eval-table .m-neg  { color: #c62828; font-weight: 700; }
.eval-table .tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.eval-table .tag-x      { background: #fdecea; color: #c62828; }
.eval-table .tag-c      { background: #fff4e5; color: #b26a00; }
.eval-table .tag-corner { background: #e7f4ec; color: #1f6b45; }

/* Narrow screens: let a wide table scroll inside its own box, never the page. */
/* The table scrolls inside this box. `contain: inline-size` keeps its width
   out of the page's own width calculation — without it a wide table made the
   whole page scroll sideways on a phone instead of just the table. */
.table-scroll { overflow-x: auto; contain: inline-size; }

/* The answer, stated before the article explains it. */
.conclusion-box {
  border-left: 4px solid #1f6b45;
  background: rgba(31, 107, 69, 0.06);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.conclusion-box h2,
.article-body .conclusion-box h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  border-left: 0;
  padding-left: 0;
}
.conclusion-box p:last-child { margin-bottom: 0; }

/* What to actually remember at the board. */
.takeaway-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.takeaway-box h2,
.article-body .takeaway-box h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  border-left: 0;
  padding-left: 0;
}
.takeaway-box ul { margin: 0; padding-left: 1.2rem; }

/* Section headings inside the Analysis Lab hub, which lists both games. */
.lab-section-title {
  margin: 2rem 0 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}
.lab-section-lead { color: var(--muted); margin: 0 0 1rem; font-size: 0.92rem; }

/* Article byline: who wrote it, and where the method is written down. */
.byline {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── "How we analyse": three numbered steps, no card frames ───────────────── */
.how-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.how-steps li { display: flex; gap: 0.85rem; align-items: flex-start; }
.how-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  opacity: 0.35;
  line-height: 1;
  flex: 0 0 auto;
}
.how-steps h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.how-steps p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

@media (max-width: 760px) {
  .how-steps { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ── Analysis card: badge, question, and the figures that answer it ───────── */
.analysis-card .metric-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.6rem 0 0.9rem;
}
.analysis-card .metric {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.metric-label { color: var(--muted); }
.metric-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.metric.is-best .metric-value { color: #1f6b45; }

/* On a narrow screen the figures stack instead of wrapping mid-pair. */
@media (max-width: 420px) {
  .analysis-card .metric-list { flex-direction: column; gap: 0.25rem; }
}

/* ── Compact learning path used on the two game top pages ────────────────── */
.path-compact { max-width: 560px; }
.path-compact .path-step { padding-bottom: 0.85rem; }
.path-compact .path-title { font-size: 0.95rem; }

/* The "free, no account" line: useful, but not the headline. */
.free-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
}

/* A badge sitting where a section label would normally go. */

/* ── "Verified by Game Dojo": a guide's principle, with the measured result ── */
.verify-callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  padding: 1rem 1.2rem;
  margin: 1.75rem 0;
}
.verify-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.article-body .verify-callout h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.article-body .verify-callout p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.verify-callout .metric-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 0 0.8rem;
}
.verify-callout .metric { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.85rem; }
.verify-link { font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.verify-link:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .verify-callout .metric-list { flex-direction: column; gap: 0.25rem; }
}

/* ── Small category label on guide cards ─────────────────────────────────── */
/* The card is a flex column, so the label must not stretch to its width. */
.guide-label {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
  margin-bottom: 0.5rem;
}

/* ── Byline parts: the name, then the role, then the method link ─────────── */
.byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.byline a:hover { color: var(--accent); }
/* Separated by a middot rather than punctuation, so the line reads as a strip
   of credits instead of a sentence. */
.byline-role::before,
.byline > a + a::before,
.byline-role + a::before { content: "・"; margin: 0 0.5rem; color: var(--border); }
.byline-role { color: var(--muted); }

/* ── Analysis setup, stated where readers can check it ───────────────────── */
.footer-spec {
  font-size: 0.72rem;
  color: #fff;
  opacity: 0.5;
  margin: 0.5rem 0 0;
  line-height: 1.6;
}
.spec-list { margin: 1rem 0; }
.spec-list dt {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--accent-dark);
  margin-top: 0.8rem;
}
.spec-list dd { margin: 0.2rem 0 0; font-size: 0.92rem; }

/* ── Move explorer: try each candidate on the board in the article ───────── */
.explorer { margin: 1.5rem 0; }
.explorer-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.5rem 0 0.75rem;
}
.explorer-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.explorer-moves button {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.explorer-moves button:hover { border-color: var(--accent); transform: translateY(-1px); }
.explorer-moves button.is-active { border-color: var(--accent); background: var(--surface); }
.explorer-moves button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.explorer-san { font-weight: 800; }
.explorer-eval { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.explorer-readout {
  text-align: center;
  min-height: 1.4em;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

/* ── Proof strip: the three figures that say what this site actually does ── */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.proof-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.proof-value {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--accent-dark);
  margin: 0;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.proof-note { font-size: 0.78rem; color: var(--muted); margin: 0.25rem 0 0; }

@media (max-width: 560px) {
  .proof-strip { gap: 0.6rem; padding: 1.1rem 0.75rem; }
  .proof-value { font-size: 1.05rem; }
  .proof-note { font-size: 0.7rem; }
}

/* The hero's secondary link sits with the note, not as a second button. */
.hero-note a { color: inherit; text-decoration: underline; }

/* ── Jump links at the top of the combined lab, so neither game is buried ── */
.lab-jump {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.5rem;
}
.lab-jump a {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s;
}
.lab-jump a:hover { border-color: var(--accent); }

/* ── Credits for the open-source tools behind the analysis ───────────────── */
.credit-list { margin: 0.75rem 0; padding-left: 1.2rem; }
.credit-list li { margin-bottom: 0.5rem; font-size: 0.92rem; line-height: 1.8; }

/* ── Author card on the About page (the target of every article's author link) */
.author-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  padding: 1.1rem 1.3rem;
  margin: 1rem 0 1.5rem;
}
/* .article-body p sets its own size, so the name needs to out-specify it. */
.author-name,
.article-body .author-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent-dark);
  margin: 0 0 0.6rem;
}
.author-concept {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.article-body .author-card p:last-child { margin-bottom: 0; }

/* ── Multi-position analysis ─────────────────────────────────────────────── */

/* The move list that identifies a case, e.g. "1.e4 2.e5 3.Nf3". Monospaced so
   the move numbers line up under each other when the line wraps. */
.case-line {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.case-line code {
  background: var(--surface-2, #f4f6f8);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 0.92em;
  word-break: break-word;
}

/* One row per position: what was best, what we were testing, how far apart. */
.summary-table td:first-child { font-weight: 600; }
.summary-table .m-pos, .summary-table .m-neg, .summary-table .m-zero { font-variant-numeric: tabular-nums; }

/* What a handful of positions can and cannot settle. Deliberately plain —
   it is a caveat, not a highlight, and should not compete with the findings. */
.limits-box {
  margin: 2rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
}
.limits-box h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.limits-box ul { margin: 0; padding-left: 1.1rem; }
.limits-box li { margin: 0.35rem 0; font-size: 0.88rem; line-height: 1.7; }
.limits-box code {
  background: var(--surface-2, #f4f6f8);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.92em;
  word-break: break-all;
}

/* A proverb we could not test. It sits among six verified callouts, so it needs
   to read as the same kind of statement — an aside about method — without
   borrowing their authority. Quiet, dashed, no badge. */
.verify-note {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--border);
  background: var(--surface-2, #f4f6f8);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.85;
}

/* ── Card preview: the article's own board, on the card ──────────────────── */

/* A card used to show three summary figures, which gave away the answer without
   showing the question. The board and the candidate list say what the article
   actually looks at, so a reader can tell at a glance whether it interests them.

   The board sits above the moves rather than beside them. Side by side, the
   board was squeezed into a strip barely wide enough for half the files, which
   made an 8x8 position unreadable; stacked, it gets the full width of the card. */
.card-preview {
  margin: 0.8rem 0 0.9rem;
}
.card-board {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
/* The diagram scripts add their own caption; a card already has its title. */
.card-board figcaption,
.card-board .cb-caption { display: none; }

/* `1fr` takes its minimum from the content, and a piece glyph is wider than an
   eighth of a small card — which is what forced the board past its container.
   minmax(0, …) lets the squares shrink to whatever the card can give them. */
.card-board .cb-board,
.card-board .oth-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
}
/* The piece glyph carries its own size (clamp(1.4rem, 6.5vw, 2.1rem)), sized for
   a full-width diagram. On a card square of about 29px that overflows by a third,
   so it is re-sized here rather than inherited. Coordinates are dropped: at this
   size they only add clutter, and the article shows them full size. */
/* A fixed size, not a viewport-relative one: the card board is 208-240px wide
   whatever the viewport, so vw units made the pieces shrink on phones where the
   board had not shrunk with them. */
.card-board .cb-piece { font-size: 18px; }
/* Every board names its squares in the move list beside it, so every board
   shows its files and ranks — at card size too, scaled down to suit. Chess
   draws them inside the edge squares; Othello puts them in strips around the
   board, which is why the card has a frame of its own. */
.card-board .cb-coord { font-size: 0.45rem; }
.card-preview .oth-frame {
  max-width: 240px;
  margin: 0 auto;
  grid-template-columns: 0.7rem 1fr;
  grid-template-rows: 1fr 0.7rem;
  gap: 2px;
}
.card-preview .oth-ranks,
.card-preview .oth-files { font-size: 0.5rem; }

.card-moves {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}
.card-moves li {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.24rem 0.5rem;
  border-radius: 5px;
  background: var(--surface-2, #f4f6f8);
  font-size: 0.82rem;
  line-height: 1.4;
}
.card-moves li.is-best {
  background: #e9f2ea;
  font-weight: 700;
}
.cm-san,
.cm-eval { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One column of moves when the card itself is narrow. */
@media (max-width: 380px) {
  .card-moves { grid-template-columns: 1fr; }
}

/* The three studies at the foot of an article. The article column is narrower
   than a hub page, so these cards are allowed to be narrower too — three across
   reads as one row of suggestions rather than a second article. */
.related-studies .guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}