/* ============================================================
   explain.css — shared styles for algorithm explanation pages
   (algos/*.html).

   Load order on those pages: styles.css first (paper texture,
   custom properties, Fraunces/Spectral/JetBrains Mono fonts,
   .sound-toggle/.lang-toggle button chrome), then this file.
   This stylesheet only adds the page-specific layer: the
   explanation column, header, content sections, code blocks,
   quiz widget and prev/next nav.
   ============================================================ */

/* ---------- language visibility ---------- */
body.lang-en .i-uz{ display:none !important; }
body.lang-uz .i-en{ display:none !important; }

/* ---------- page column ---------- */
.explain-wrap{
  max-width:760px;
  margin:0 auto;
  padding:48px 28px 90px;
  /* long inline-code tokens in prose/quiz text must break rather than
     paint past the column and give the page a horizontal scrollbar */
  overflow-wrap:break-word;
}

/* ---------- header ---------- */
.explain-header{
  padding-bottom:32px;
  margin-bottom:36px;
  border-bottom:1px solid var(--line);
}
.explain-num{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
  margin-bottom:16px;
}
.explain-num::before{ content:""; width:26px; height:1px; background:var(--rust); display:inline-block; }
.explain-header h1{ font-size:clamp(30px,4.4vw,44px); line-height:1.05; }
.explain-tagline{ margin-top:14px; max-width:56ch; color:var(--ink-soft); font-size:17px; }
.explain-back{
  display:inline-flex; align-items:center; gap:6px; margin-top:24px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.03em;
  color:var(--ink); text-decoration:none;
}
.explain-back:hover{ color:var(--rust); }

/* ---------- content sections ---------- */
.explain-section{ margin-bottom:44px; }
.explain-section:last-of-type{ margin-bottom:0; }
.explain-section h2{ font-size:22px; margin-bottom:14px; }
.explain-section p{ color:var(--ink-soft); }
.explain-section p + p{ margin-top:14px; }
.explain-section ul,
.explain-section ol{ color:var(--ink-soft); padding-left:22px; }
.explain-section li + li{ margin-top:6px; }

#how-it-works li[data-step]{
  cursor:pointer;
  padding:2px 6px;
  margin:-2px -6px;
}
#how-it-works li[data-step]:hover,
#how-it-works li[data-step].active{
  background:var(--paper-dark);
}

/* ---------- animation figures ---------- */
.viz-plate{
  position:relative;
  height:140px;
  margin-bottom:20px;
  padding:10px;
  background:var(--plate);
  border:1px solid var(--line);
}
.viz-plate.viz-plate--tall{ height:160px; }
.viz-plate svg{ width:100%; height:100%; display:block; }
.viz-plate rect{ transition:x .35s ease, fill .2s ease, stroke .2s ease; }
.viz-plate circle,
.viz-plate line{ transition:fill .2s ease, stroke .2s ease, stroke-width .2s ease; }
.viz-replay{
  position:absolute;
  top:10px; right:10px;
  padding:5px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  cursor:pointer;
}
.viz-replay:hover{ color:var(--rust); border-color:var(--rust); }

@media (prefers-reduced-motion: reduce){
  .viz-plate rect,
  .viz-plate circle,
  .viz-plate line{ transition:none; }
}

/* ---------- python code blocks ---------- */
/* reuses the dark code-plate look from styles.css's .code-col/.code-block */
pre.code{
  margin:20px 0 0;
  padding:16px 18px;
  background:var(--code-bg);
  border:1px solid var(--ink);
  color:var(--code-text);
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  line-height:1.9;
  overflow-x:auto;
}
pre.code code{ background:none; color:inherit; font-family:inherit; }

/* ---------- quiz ---------- */
.quiz-item{
  margin-bottom:14px;
  border:1px solid var(--line);
  background:var(--plate);
}
.quiz-item:last-child{ margin-bottom:0; }
/* block + inline ::before (not flex): inline <code> children of a flex button
   become non-wrapping flex items and overflow the viewport on mobile */
.quiz-q{
  display:block;
  width:100%;
  padding:16px 18px;
  border:none; background:none;
  font-family:'JetBrains Mono', monospace; font-size:14px;
  color:var(--ink); text-align:left;
  cursor:pointer;
}
.quiz-q::before{ content:"Q"; color:var(--rust); font-weight:600; margin-right:10px; }
.quiz-q:hover{ background:var(--paper-dark); }
.quiz-a{
  padding:0 18px 18px 42px;
  color:var(--ink-soft);
  font-size:15px;
}
.quiz-a[hidden]{ display:none; }

/* ---------- prev/next nav ---------- */
.pn-nav{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:56px; padding-top:28px;
  border-top:1px solid var(--line);
}
.pn-nav a{
  display:flex; flex-direction:column; gap:4px;
  max-width:46%;
  font-family:'JetBrains Mono', monospace; font-size:13px;
  color:var(--ink); text-decoration:none;
}
.pn-nav a:hover{ color:var(--rust); }
.pn-nav .pn-dir{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.pn-nav a:hover .pn-dir{ color:var(--rust); }
.pn-nav .pn-next{ margin-left:auto; align-items:flex-end; text-align:right; }

@media (max-width:600px){
  .explain-wrap{ padding:36px 20px 70px; }
  .pn-nav{ flex-direction:column; }
  .pn-nav a{ max-width:100%; }
  .pn-nav .pn-next{ margin-left:0; align-items:flex-start; text-align:left; }
}

/* ---------- cheat-sheet table (cheatsheet.html) ---------- */
.cheat-table-wrap{ overflow-x:auto; background:var(--plate); border:1px solid var(--line-strong); }
.cheat-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.cheat-table th{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; text-align:left;
  padding:12px 14px; border-bottom:1px solid var(--line-strong);
}
.cheat-table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.cheat-table tbody tr:last-child td{ border-bottom:none; }
.cheat-table tbody tr:hover{ background:var(--paper-dark); }
.cheat-table td:nth-child(2), .cheat-table td:nth-child(3){
  font-family:'JetBrains Mono', monospace; font-size:12.5px; white-space:nowrap; color:var(--ink-soft);
}
.cheat-table td a{
  font-family:'Fraunces', serif; font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none;
}
.cheat-table td a:hover{ color:var(--rust); }

/* ---------- print: black-on-white handout, chrome hidden, answers revealed.
   Kept last in the file with explicit colors so it also overrides dark mode. ---------- */
@media print{
  .sound-toggle, .viz-plate, .viz-replay, .pn-nav, .explain-back{ display:none !important; }
  .quiz-a[hidden]{ display:block !important; }
  html, body{ background:#fff !important; background-image:none !important; color:#111 !important; }
  .explain-wrap, .explain-section, .quiz-item, .quiz-q, .quiz-a, .cheat-table-wrap{
    background:#fff !important; color:#111 !important; border-color:#999 !important;
  }
  h1, h2, h3, .explain-num, .explain-tagline, .quiz-q::before, .cheat-table th, .cheat-table td,
  .cheat-table td a{ color:#111 !important; }
  pre.code{ background:#fff !important; color:#111 !important; border:1px solid #999 !important; }
  .explain-section, .quiz-item, pre.code, .cheat-table tr{ break-inside:avoid; }
  a{ color:#111 !important; }
}