/*
 * Layout rules for the hand-authored orientation/bridge decks
 * (M10-O, M10-B1, M10-B2, S10-O, S10-B1, S10-B2).
 *
 * Loaded *after* the inline <style> blocks in each .md, so these rules win.
 * The mirrored gitea decks don't use any of these classes, so this file is a
 * no-op for them.
 */

/* Headings — reveal.js defaults are huge and centered, which causes the
 * bilingual `## English · Hindi` titles to wrap awkwardly and overflow.
 * Keep them left-aligned, smaller, with comfortable line-height. */
.reveal h2,
.reveal h3,
.reveal h4 {
  text-align: left !important;
  line-height: 1.25 !important;
}
.reveal h3 { font-size: 1.5em !important; }
.reveal h4 { font-size: 1.25em !important; }

/* Two-column bilingual layout — fixed per-column width with overflow control.
 * The inline `flex: 1` was letting columns grow past the slide canvas.
 * Tightened from 48% + 12 px gap to 49.5% + 6 px gap (vision audit
 * flagged the inter-column whitespace as wasted; ~30 px gained per
 * column on a 1280-canvas slide). */
.reveal .bi-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}
.reveal .bi-row > div {
  flex: 0 0 49.5%;
  max-width: 49.5%;
  min-width: 0;            /* allows the column to shrink and wrap */
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Lists inside the two-column layout — tighter padding + force long Hindi
 * words / unbroken strings to wrap so they don't push the UL wider than
 * its 48% column. */
.reveal .bi-row ul,
.reveal .bi-row ol {
  padding-left: 1em;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.reveal .bi-row li,
.reveal .bi-row p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Hindi sentences sometimes contain very long compound words —
   * `word-break: break-word` is non-standard but widely supported and
   * lets the renderer break inside a word as a last resort. */
  word-break: break-word;
}
.reveal .bi-row .sep {
  flex: 0 0 1px;
  max-width: 1px;
  align-self: stretch;
  background: #ccc;
  margin: 0 4px;
}

/* Tables inside two-column layout — let them shrink so they don't push the
 * column wider than its 49% allotment. */
.reveal .bi-row table {
  width: 100%;
  font-size: 0.85em;
}
.reveal .bi-row th,
.reveal .bi-row td {
  padding: 4px 8px;
  word-wrap: break-word;
}

/* Centred title slides — already fine, but tighten the height so the slide
 * doesn't push the page-meta badge in the top-right. */
.reveal .center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 60vh;
  justify-content: center;
  padding: 0 40px;
}
.reveal .center-stack p { text-align: center; }

/* Keyboard shortcut chip */
.reveal .kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #888;
  border-radius: 3px;
  font-family: ui-monospace, "Menlo", monospace;
  background: #f5f5f5;
  box-shadow: 0 1px 0 #888;
  font-size: 0.85em;
  vertical-align: baseline;
}

/* Generic fact / formula boxes used across the bridges */
.reveal .fact-box {
  padding: 12px 18px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  font-size: 0.92em;
  text-align: left;
}
.reveal .formula {
  background: #f0f4ff;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
  margin: 4px;
  border: 1px solid #c5cae9;
  font-size: 0.9em;
}

/* Subject pill (used in S10-O for Phy / Chem / Bio) */
.reveal .subj-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  margin: 0 3px;
  vertical-align: baseline;
}
.reveal .pill-phy  { background: #e3f2fd; color: #0d47a1; }
.reveal .pill-chem { background: #fff3e0; color: #bf360c; }
.reveal .pill-bio  { background: #e8f5e9; color: #1b5e20; }

/* Tables in non-bi-row contexts (full-width tables) — readable by default */
.reveal table {
  margin: 0.6em auto;
  font-size: 0.9em;
}

/* Lists tighter so they don't waste vertical space */
.reveal ul, .reveal ol {
  display: block;
  padding-left: 1.2em;
  text-align: left;
}
.reveal li { margin: 0.2em 0; }

/* When auto-fit can't shrink enough, the slide becomes scrollable. Style
 * the scrollbar so it's discreet and doesn't take horizontal space. */
.reveal .slides > section.auto-fit-scroll {
  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
}
.reveal .slides > section.auto-fit-scroll::-webkit-scrollbar {
  width: 6px;
}
.reveal .slides > section.auto-fit-scroll::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 3px;
}
.reveal .slides > section.auto-fit-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* `<details>` (answer-key collapsibles) */
.reveal details {
  margin: 0.6em 0;
  padding: 0.4em 0.8em;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 0.9em;
}
.reveal details summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.reveal details summary::-webkit-details-marker { display: none; }

/* Make sure the deck-meta badge in the top-right doesn't get covered by
 * over-tall headings — reserve a 30px gutter at the top of every slide. */
.reveal .slides > section,
.reveal .slides > section > section {
  padding-top: 24px;
}