/* ECE 343 -- reading-page layout.
 *
 * Layers on top of shell.css. Everything here is scoped under `.page` or a
 * page-only component (.crumb, .index-search), because shell.css's type scale
 * is tuned for a slide-sized frame -- h1 at --step-3, zero margins, flex-gap
 * lists -- and a reading page needs document rhythm instead.
 *
 * custom.css loads after this and owns the content components themselves
 * (.callout, .fig, .two-col, .lo-list, admonitions).
 */

/* The bar is fixed over a full-width reading column, so it sits on top of the
   text at almost every scroll position. Rather than narrow the column to dodge
   it, it retracts while you are reading forward and comes back the moment you
   scroll up, reach for it, or open something. */
.hud { transition: transform .22s ease, opacity .22s ease; }
/* Both transforms, together: .hud is centerd with translateX(-50%), and a
   bare translateY here would replace it and snap the bar to the left half. */
body.chrome-away .hud { transform: translateX(-50%) translateY(160%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hud { transition: none; }
}

/* ---- the reading column ----------------------------------------------- */
/* A breakout grid: prose sits in the `text` track, and the components that
   were authored to be wider -- two-column figures, wide tables, the module
   dashboard -- reach into `wide` without any negative-margin tricks.
   Docutils nests each section in its own <section>, so those wrappers are
   flattened with display:contents to let their children reach the grid. */
.page {
  --text-w: min(54rem, 100% - 2.4rem);
  --gutter: minmax(0, 7rem);
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.2rem, 1fr)
    [wide-start] var(--gutter)
    [text-start] var(--text-w) [text-end]
    var(--gutter)
    [wide-end] minmax(1.2rem, 1fr) [full-end];
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(6rem, 14vh, 9rem);
  row-gap: clamp(.9rem, 2vh, 1.4rem);
}
.page section { display: contents; }
.page > *, .page section > * { grid-column: text; min-width: 0; }

.page .two-col,
.page .fig-wide,
.page .fig-xwide,
.page .module-toc,
.page .schedule-grid,
.page .deliverable-cards,
.page .hero,
.page .pst-scrollable-table-container,
.page .table-scroll,
.page > table,
.page section > table { grid-column: wide; }

/* ---- document rhythm --------------------------------------------------- */
/* shell.css sets margin:0 on p/h1/h2 because a frame lays out with flex gap.
   A reading page flows, so the margins come back -- scoped, so frames are
   untouched. */
.page h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  margin: 0 0 .15em;
}
.page h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  margin: 2.2em 0 .1em;
}
.page h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  font-weight: 700; color: var(--blue-dark);
  margin: 1.6em 0 .1em; border-bottom: none;
}
.page h1 + p, .page h2 + p, .page h3 + p { margin-top: .35em; }
.page p { margin: 0; max-width: none; line-height: 1.62; }
.page ul, .page ol {
  display: block; max-width: none;
  margin: 0; padding-left: 1.35em; line-height: 1.62;
}
.page li { margin: 0 0 .35em; }
.page li > ul, .page li > ol { margin-top: .35em; }

/* The heading anchors the theme adds; keep them, keep them quiet. */
.page a.headerlink {
  opacity: 0; margin-left: .35em; text-decoration: none;
  color: var(--blue); font-weight: 400;
}
.page :hover > a.headerlink, .page a.headerlink:focus-visible { opacity: .6; }

/* The download pills style themselves. `.page a` would outrank a plain
   `.doc-link` on specificity (0,0,1,1 over 0,0,1,0) and repaint them, so
   they are excluded by name here the way frames.css excludes them. */
.page a:not(.doc-link) { color: var(--blue-dark); text-underline-offset: .18em; }
.page a:not(.doc-link):hover { color: var(--blue); }

/* The theme's bootstrap was quietly supplying this. Without it a bare <img>
   renders at its intrinsic size -- L01 has one 4080px wide, which dragged the
   whole page 3000px sideways on a desktop. */
.page img, .page svg, .page video, .page canvas, .page iframe {
  max-width: 100%;
}
.page img, .page video { height: auto; }

/* Wide content scrolls inside its own box rather than pushing the page. */
.page .pst-scrollable-table-container,
.page .table-scroll { overflow-x: auto; max-width: 100%; }
.page div.math { overflow-x: auto; overflow-y: hidden; }

/* Code does not wrap either, and the theme's stylesheet was what let it
   scroll. Without this a long line in a lesson's Python sample drags the page
   sideways -- 263px on the syllabus, 399px on L17. */
.page div[class^="highlight-"], .page div.highlight, .page pre {
  overflow-x: auto; max-width: 100%;
}

/* Inline math does not wrap, and a long run of it -- "2.200 GHz, ..." on L17 --
   pushes the page sideways on a phone.
   Two ways NOT to fix this, both measured:
   - a scroll container on the mjx-container moves its baseline to its bottom
     margin edge, and every inline formula on the site rides 4px above the text
     around it. MathJax's own `display: inline` is what keeps math on the
     baseline; do not override it.
   - `overflow-x: auto` on every p/li also turns on overflow-y, which clipped
     11px off the tall radicals in L05's boundary table -- blocks that had no
     horizontal overflow to begin with.
   So page.js tags only the blocks that genuinely overflow, and the padding
   gives tall math somewhere to sit inside the scroll box. */
.page .scrolls-x { overflow-x: auto; }

/* ---- search field in the overlay -------------------------------------- */
.index-search { margin: 0 0 clamp(1rem, 3vh, 1.8rem); }
.index-search input {
  width: 100%; font: inherit; font-size: var(--step-0);
  padding: .6rem .85rem; border-radius: 10px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule);
}
.index-search input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--soft);
}
.index-search input::placeholder { color: var(--muted); opacity: .8; }

/* The page-local TOC Sphinx already builds, restyled to match the course
   column beside it. */
.index-pagetoc ul { list-style: none; margin: 0; padding: 0; display: block; max-width: none; }
.index-pagetoc ul ul { padding-left: .9rem; margin: .15em 0 .5em; }
.index-pagetoc li { margin: 0; }
.index-pagetoc a {
  display: block; padding: .3rem .5rem; border-radius: 4px;
  color: var(--ink); text-decoration: none;
  font-size: calc(var(--step-0) * .92); line-height: 1.3;
}
.index-pagetoc a:hover { background: var(--soft); color: var(--blue-dark); }
.index-pagetoc a.here { color: var(--blue-dark); font-weight: 700; background: var(--soft); }

/* Rows hidden by the instant filter. */
.index li[data-hit="0"] { display: none; }
.index-empty {
  padding: .4rem .5rem; color: var(--muted);
  font-size: calc(var(--step-0) * .92);
}

/* ---- print -------------------------------------------------------------- */
/* A reading page is already natural document flow -- .page is a grid, not a
   scroll container, so nothing here needs unclipping the way a frame page's
   `.deck` does. Only the screen-only chrome needs to go: the bottom bar and
   its panels, the progress rail, and the search/jump overlay. */
@media print {
  .hud, .rail, .index { display: none !important; }
}