/*
 * The ECE 552 site's stylesheet. Hand-written and shipped as-is: it is
 * passthrough-copied by eleventy.config.js, so there is no CSS build step
 * and no generated file to keep in sync.
 *
 * The design is a documentation shell -- sticky left rail of page links, a
 * breadcrumb topbar, a measured article column, and a sticky "on this page"
 * table of contents -- over a warm paper/ink palette with a Wisconsin red
 * accent. Structure is carried by hairlines and the type scale; there are
 * deliberately no cards, shadows or fills beyond the callout tints.
 *
 * Class vocabulary is shared with the markup in _includes/project.njk. Three
 * class names are not ours to rename: .instructions-box (emitted by
 * markdown-it-container for `::: instructions-box` blocks), .table-scroll
 * (emitted by the table renderer override in eleventy.config.js) and .line
 * (emitted by Shiki).
 */

/* ── design tokens ───────────────────────────────────────────── */
:root {
  --red: #b8252b;

  --ink: #1a1916;
  --ink-mute: #5a554e;
  --ink-faint: #8a857c;
  --paper: #f8f6f1;
  --paper-2: #efece4;
  --rule: rgba(26, 25, 22, 0.12);
  --rule-strong: rgba(26, 25, 22, 0.22);

  --red-tint: rgba(184, 37, 43, 0.03);
  --red-wash: rgba(184, 37, 43, 0.08);
  --red-edge: rgba(184, 37, 43, 0.35);
  --code-fill: rgba(26, 25, 22, 0.06);

  --sans: "Red Hat Display", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shared height of the two boxes that make up the page's header band:
     the rail's wordmark head and the main column's breadcrumb topbar. Both
     are min-height: var(--head-h) with box-sizing: border-box, so their
     bottom hairlines land on the same pixel row and read as one unbroken
     rule across the page. Neither box may set vertical padding large
     enough to grow past it. */
  --head-h: 56px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* ── wordmark ────────────────────────────────────────────────── */
.wa-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  text-decoration: none;
}
.wa-wordmark > .wisc { color: var(--ink-mute); }
.wa-wordmark > .arch { color: var(--red); }

/* ── docs shell ──────────────────────────────────────────────── */
.wa-docs-shell {
  width: 100%;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  display: flex;
}

/* left rail */
.wa-docs-rail {
  width: 240px;
  flex-shrink: 0;
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  /* No padding-top: the rail head is the first child and has to start at
     y=0 so its bottom hairline lines up with the topbar's. */
  padding: 0 0 60px;
  position: sticky;
  top: 0;
  /* align-self keeps this a sticky box of its own rather than a stretched
     flex item, so its height has to be stated: without min-height the
     panel and its right hairline stop after the last nav link. Pinned at
     top: 0 with min == max == 100vh, it covers the viewport at every
     scroll position and scrolls internally when the nav outgrows it. */
  align-self: flex-start;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}
.wa-docs-rail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--head-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
/* Term badge, inline to the right of the wordmark rather than stacked
   under it -- stacking is what made the rail head twice the topbar's
   height. A hairline outline, no fill: the same structure-by-rules
   treatment as the rest of the shell. 10px text on a 1 line-height plus
   4px/1px of padding and border makes it exactly 20px tall, matching the
   wordmark's own line box, so the row centres cleanly. */
.wa-docs-rail-version {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.wa-docs-rail-nav { padding: 0 16px 0 22px; }
.wa-docs-rail-link {
  display: block;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.wa-docs-rail-link:hover,
.wa-docs-rail-link:focus-visible { color: var(--ink); outline: none; }
.wa-docs-rail-link.is-active {
  color: var(--ink);
  background: var(--red-wash);
  border-left-color: var(--red);
  font-weight: 600;
}

/* main column */
.wa-docs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* top bar */
.wa-docs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Height comes from --head-h, not from padding, so it stays locked to
     the rail head; the 8px is only a floor for a breadcrumb that wraps. */
  min-height: var(--head-h);
  padding: 8px 48px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
}
.wa-docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: var(--ink-mute);
}
.wa-docs-breadcrumb .crumb-mono {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.wa-docs-breadcrumb .crumb-sep { color: var(--ink-faint); }
.wa-docs-breadcrumb .crumb-cur {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-docs-topbar-right {
  display: flex;
  gap: 14px;
  align-items: center;
}
.wa-docs-topbar-link {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.wa-docs-topbar-link:hover,
.wa-docs-topbar-link:focus-visible { color: var(--ink); outline: none; }

/* two-col content */
.wa-docs-content {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 48px;
  padding: 56px 56px 80px;
}
.wa-docs-content.is-single-column { grid-template-columns: minmax(0, 1fr); }

/* 900px, not the 760px this started at. The pages are instruction-format
   diagrams, opcode tables and SystemVerilog listings rather than prose, and
   760px forced most of them to scroll. The fixed chrome around the article
   is 600px (240 rail + 2x56 page padding + 48 gap + 200 contents), so the
   cap only binds from ~1500px up; at 1440x900 the column simply fills the
   840px that are left, and at 1728 it settles at 900 with the slack going
   to the right margin. Above 900 the 44px h1 starts to look small against
   its own measure and body text passes ~120 characters a line. */
.wa-docs-article {
  min-width: 0;
  max-width: 900px;
}

/* page header */
.wa-docs-page-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 36px;
}

.wa-docs-h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* draft banner -- project pages whose front matter is still draft: true.
   Sticks under the topbar so it stays visible while reading. */
.draft-banner {
  position: sticky;
  top: 0;
  z-index: 9;
  margin: 0 0 32px;
  padding: 10px 16px;
  border-radius: 2px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* ── markdown content inside .wa-docs-article ───────────────── */
.wa-docs-article h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 48px 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  scroll-margin-top: 88px;
  text-wrap: balance;
}
.wa-docs-article h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: 88px;
  text-wrap: balance;
}
.wa-docs-article h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--ink);
  scroll-margin-top: 88px;
}
.wa-docs-article p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.wa-docs-article a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--red-edge);
}
.wa-docs-article a:hover,
.wa-docs-article a:focus-visible { border-bottom-color: var(--red); outline: none; }
.wa-docs-article ul,
.wa-docs-article ol {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0 0 16px;
  padding-left: 24px;
}
.wa-docs-article li { margin-bottom: 6px; }
.wa-docs-article li > p { margin: 0 0 8px; }
.wa-docs-article code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--code-fill);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}
.wa-docs-article blockquote {
  border-left: 3px solid var(--red);
  padding: 4px 16px;
  margin: 0 0 16px;
  color: var(--ink-mute);
  background: var(--red-tint);
}
/* Shiki writes its own token colors inline; the theme's background is
   remapped to --paper-2 in eleventy.config.js so this frame matches. */
.wa-docs-article pre {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 20px;
  overflow-x: auto;
  line-height: 1.55;
}
.wa-docs-article pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}
/* Wide tables scroll inside the measure rather than widening the page. */
.table-scroll {
  margin: 0 0 20px;
  overflow-x: auto;
  overflow-y: hidden;
}
.wa-docs-article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin: 0;
}
.wa-docs-article th,
.wa-docs-article td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.wa-docs-article th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
}
.wa-docs-article img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.wa-docs-article hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

/* instructions-box container (::: instructions-box) */
.wa-docs-article .instructions-box {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 20px 24px 4px;
  background: var(--red-tint);
  margin: 0 0 32px;
}
.wa-docs-article .instructions-box > h2:first-child,
.wa-docs-article .instructions-box > h3:first-child {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* ── homepage page list ─────────────────────────────────────── */
/* These live inside .wa-docs-article, so every rule that has to beat the
   article's generic red link styling is scoped to it. */
.wa-docs-article .wa-docs-quicklinks {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.wa-docs-article .wa-docs-quicklinks-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  padding: 13px 20px;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
}
.wa-docs-article .wa-docs-quicklinks-row:nth-child(even) { background: rgba(26, 25, 22, 0.012); }
.wa-docs-article .wa-docs-quicklinks-row:last-child { border-bottom: none; }
.wa-docs-article .wa-docs-quicklinks-row:hover,
.wa-docs-article .wa-docs-quicklinks-row:focus-visible {
  background: var(--red-wash);
  color: var(--red);
  outline: none;
}
.wa-docs-article .wa-docs-quicklinks-row .label { font-weight: 500; }
.wa-docs-article .wa-docs-quicklinks-row .arrow { color: var(--ink-faint); text-align: right; }
.wa-docs-article .wa-docs-quicklinks-row:hover .arrow,
.wa-docs-article .wa-docs-quicklinks-row:focus-visible .arrow { color: var(--red); }

/* ── reference-material rows ────────────────────────────────── */
.wa-docs-article .download-link {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.wa-docs-article .download-link a {
  display: block;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.wa-docs-article .download-link:last-child a { border-bottom: none; }
.wa-docs-article .download-link a:hover,
.wa-docs-article .download-link a:focus-visible { color: var(--red); }

/* ── prev / next pager ──────────────────────────────────────── */
.wa-docs-article .wa-docs-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
}
.wa-docs-article .wa-docs-prev-next a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.wa-docs-article .wa-docs-prev-next a:hover,
.wa-docs-article .wa-docs-prev-next a:focus-visible { border-color: var(--rule-strong); outline: none; }
.wa-docs-article .wa-docs-prev-next .next { text-align: right; grid-column: 2; }
.wa-docs-article .wa-docs-prev-next .arrow {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink-faint);
}

/* ── on-this-page table of contents ─────────────────────────── */
.wa-docs-toc {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  padding-top: 4px;
}
.wa-docs-toc .h {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wa-docs-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--rule);
}
.wa-docs-toc-list > li { margin: 0; }
.wa-docs-toc-list a {
  display: block;
  font-size: 12.5px;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 0;
}
.wa-docs-toc-list a:hover,
.wa-docs-toc-list a:focus-visible { color: var(--ink); outline: none; }
.wa-docs-toc-list details { margin: 0; }
.wa-docs-toc-list details > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.wa-docs-toc-list details > summary::-webkit-details-marker { display: none; }
.wa-docs-toc-list details > summary a {
  display: inline;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.wa-docs-toc-sublist {
  list-style: none;
  padding: 0 0 0 12px;
  margin: 4px 0 8px;
  border-left: 1px solid var(--rule);
}
.wa-docs-toc-sublist li { margin: 0; }
.wa-docs-toc-sublist a {
  display: block;
  padding: 3px 0 3px 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── footer ─────────────────────────────────────────────────── */
.wa-docs-footer {
  padding: 32px 56px 36px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.wa-docs-footer p { margin: 0; }

/* mobile nav disclosure button -- hidden by default (desktop) */
.wa-docs-disclosure-summary {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ── responsive ─────────────────────────────────────────────── */
/* The narrow-desktop tier trades chrome for column: a 20px-narrower rail
   and tighter page padding buy the article ~60px back. It used to start at
   1100px, which was fine while the article was capped at 760px -- below
   that the cap never bound and the tier only affected margins. With a
   900px cap the article is space-limited all the way up to ~1500px, so the
   trade is worth making sooner. 1280px is where the roomy desktop chrome
   (600px of it) would otherwise squeeze the column under ~680px, which is
   about the narrowest the wider opcode tables read at. */
@media (max-width: 1280px) {
  .wa-docs-rail { width: 220px; }
  .wa-docs-topbar { padding: 8px 32px; }
  .wa-docs-content { padding: 48px 40px 64px; gap: 40px; }
  .wa-docs-h1 { font-size: 40px; }
  .wa-docs-footer { padding: 28px 40px 32px; }
}

@media (max-width: 860px) {
  .wa-docs-shell { flex-direction: column; }
  .wa-docs-rail {
    width: 100%;
    min-height: 0;
    max-height: none;
    position: relative;
    top: auto;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 24px;
    overflow-y: visible;
  }
  .wa-docs-rail-head { padding: 0 28px; margin-bottom: 18px; }
  .wa-docs-rail-nav { padding: 8px 16px 16px 28px; }

  .wa-docs-topbar { padding: 8px 28px; }

  .wa-docs-content,
  .wa-docs-content.is-single-column {
    grid-template-columns: 1fr;
    padding: 40px 28px 56px;
    gap: 32px;
  }
  .wa-docs-article { max-width: 100%; }
  .wa-docs-toc { display: none; }
  .wa-docs-h1 { font-size: 36px; }
  .wa-docs-article .wa-docs-prev-next { grid-template-columns: 1fr; }
  .wa-docs-article .wa-docs-prev-next .next { text-align: left; grid-column: 1; }
  .wa-docs-footer { padding: 24px 28px; }

  /* show disclosure button on mobile */
  .wa-docs-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: rgba(26, 25, 22, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-top: 1px solid rgba(26, 25, 22, 0.08);
  }
  .wa-docs-disclosure-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wa-docs-disclosure-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    color: rgba(26, 25, 22, 0.45);
  }
  .wa-docs-rail-nav[data-mobile-hidden] { display: none; }
}

@media (max-width: 560px) {
  /* Phone viewports get a shorter header band; the rail head and the
     topbar are stacked here, so 56px twice is a lot of chrome to scroll
     past. 48px still clears the 20px wordmark and its badge. */
  :root { --head-h: 48px; }
  .wa-docs-rail-head { padding: 0 18px; }
  .wa-docs-rail-nav { padding: 8px 12px 12px 18px; }
  .wa-docs-disclosure-summary { padding: 14px 18px; }
  .wa-docs-topbar { padding: 8px 18px; gap: 10px; }
  .wa-docs-topbar-link { font-size: 12px; }
  .wa-docs-content,
  .wa-docs-content.is-single-column { padding: 32px 18px 48px; gap: 24px; }
  .wa-docs-h1 { font-size: 30px; margin-bottom: 14px; }
  .wa-docs-article .instructions-box { padding: 16px 18px 4px; }
  .wa-docs-article .wa-docs-quicklinks-row { padding: 14px 16px; }
  .wa-docs-footer { padding: 20px 18px; font-size: 10.5px; }
}