/* ===========================================================================
   URBAN 520 — HTML typography, ported from the RE 519 labs' custom.css.

   Why not almond.css directly: almond is a whole classless layout framework.
   Loading it fights Quarto's grid, which is what positions .column-margin
   content and the book's sidebar navigation. So we keep Quarto's layout and
   port only the type and colour. The four verified files (cleanrmd-base,
   almond, custom, quarto-patch) are still in assets/ if you want to compare.
   =========================================================================== */

:root {
  /* One place for the two type sizes. These are the "L" step of the Aa
     control in assets/typeset.html, which is the book's default; that script
     overwrites both on load, so if the two ever disagree the page resizes
     visibly a moment after it appears. Root is 17px, so:
         0.95rem  = 16.15px   body and right margin
         0.894rem = 15.20px   left sidebar
     The sidebar keeps the 0.8/0.85 ratio the two started with. */
  --fs-body: 0.95rem;      /* body text and right margin */
  --fs-sidebar: 0.894rem;  /* left sidebar */

  /* Body text colour. Cosmo's default is #343a40, a grey that reads washed
     out at these sizes. Bootstrap routes body (and everything that inherits
     from it) through these two variables, so overriding them here is enough;
     tables carry their own copy, re-pointed in the table section below. */
  --bs-body-color: #202124;
  --bs-body-color-rgb: 32, 33, 36;

  --uw-purple: #32006e;
  --uw-underline: #eeebee;
  --uw-underline-hover: rgb(212, 192, 236);
}

/* ---- body type: Avenir stack, 93.75%, 1.6 ---- */
body,
.quarto-container,
#quarto-document-content {
  font-family: "Avenir", -apple-system, system-ui, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.5;
}

/* ---- one size for body text AND the right margin column ---- */
#quarto-document-content,
#quarto-document-content p,
#quarto-document-content li,
#quarto-document-content dd,
#quarto-document-content blockquote,
#quarto-document-content table,
.callout-body,
#quarto-margin-sidebar,
.column-margin, .margin-caption, aside,
#refs .csl-entry {
  font-size: var(--fs-body) !important;
}

/* ---- left sidebar: book navigation and page TOC ---- */
#quarto-sidebar,
#quarto-sidebar .sidebar-menu-container,
#quarto-sidebar .sidebar-menu-container a,
#quarto-sidebar .sidebar-item-text,
#quarto-sidebar .sidebar-item,
nav#TOC, nav#TOC a, nav#TOC a.nav-link {
  font-size: var(--fs-sidebar) !important;
}

/* ---- monospace at 90% ---- */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 90% !important;
}
/* Inline code: Quarto's default is #7d12ba, a brighter violet that reads as a
   citation next to the UW purple. Pull it onto the house colour.
   Prefer #00769e here if you want the RE 519 teal for identifiers instead. */
p code, li code, td code, th code, aside code, .column-margin code,
figcaption code, #TOC code {
  color: #000000 !important;
}
p code, li code { font-size: 1em; vertical-align: middle; line-height: 1.4; }

/* Height of the grey chunk behind inline code.
   Quarto's `code:not(.sourceCode)` puts 0.2em of padding on ALL four sides, and
   its selector outranks a plain `p code`, so the box ends up taller than the
   line. Zeroing the vertical padding makes it hug the text. Note that
   line-height does NOT control this: for an inline box the background covers the
   content area, which comes from the font metrics. If you need it shorter still,
   the only other lever is a smaller font-size on the code itself. */
:not(pre) > code:not(.sourceCode),
p code, li code, td code, th code,
figcaption code, .margin-caption code, .column-margin code, aside code {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.25em !important;
  padding-right: 0.25em !important;
}
pre > code { display: block; line-height: 1.2rem !important; padding: 0.5rem !important; }
pre { margin: 0.5rem 0 !important; }

/* ---- headings: UW purple, 600; h1 heavy and tight to its subtitle ---- */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  color: var(--uw-purple) !important;
  font-weight: 600;
}
h1 { font-weight: 900 !important; margin-bottom: 0 !important; margin-top: 2rem !important; }
h2 { margin-top: 0.5rem !important; }

/* ---- "Optional" badge: a heading marked {.optional} and every subheading
   under it. assets/optional.lua appends an empty span.optional-badge; the
   word is drawn here, so the TOC, sidebar, search and page title never carry
   it. rem, not em: the same small tag at every heading level. ---- */
:is(h1, h2, h3, h4, h5, h6) .optional-badge::before {
  content: "Optional";
  display: inline-block;
  margin-left: 0.6rem;
  /* right side less by the letter-spacing, which trails the last letter */
  padding: 0.2rem calc(0.3rem - 0.03em) 0.15rem 0.3rem;
  font-size: 0.66rem; line-height: 1;
  font-weight: 900;   /* Avenir: 600-800 all map to one face; 900 is the heaviest */
  letter-spacing: 0.03em; text-transform: uppercase;
  vertical-align: middle;
  color: #fff;
  background: #b4a67f;
  border-radius: 2px;
}

/* The same tag on an example (or other theorem-type block) marked .optional:
   optional.lua puts the span at the start of the first paragraph, right
   after Quarto's "Example 4.2" title, so it needs room on both sides. */
.theorem .optional-badge::before {
  content: "Optional";
  display: inline-block;
  margin: 0 0.45rem 0 0.1rem;
  padding: 0.2rem calc(0.3rem - 0.03em) 0.15rem 0.3rem;
  font-size: 0.66rem; line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em; text-transform: uppercase;
  vertical-align: 0.12em;
  color: #fff;
  background: #b4a67f;
  border-radius: 2px;
}

/* ---- links: purple with a pale underline that warms on hover ---- */
a { color: var(--uw-purple) !important; text-decoration: underline !important;
    text-decoration-color: var(--uw-underline) !important; }
a:hover { text-decoration-color: var(--uw-underline-hover) !important; }

/* ---- tables at 90%, roomy cells, top-aligned ---- */
table { font-size: 90% !important; }
/* Bootstrap hard-codes the cosmo grey into .table; follow the body colour. */
.table { --bs-table-color: var(--bs-body-color); }
table th, table td { font-size: 90% !important; padding: 0.5rem 0.5rem; vertical-align: top; }

/* ---- figures ---- */
figure { background: none !important; border: none !important; padding: 15px 0 !important; }

/* ---- margin content line-height (size is set above) ---- */
.column-margin, .margin-caption, aside { line-height: 1.4; }

/* ---- worksheet cells visible so students can see what to fill ---- */
.worksheet table th, .worksheet table td { border: 1px solid #bbb; height: 2.1rem; }

/* ===========================================================================
   Left sidebar: book navigation on top, page TOC underneath.
   `toc-location: left` in _quarto.yml puts nav#TOC inside #quarto-sidebar;
   these rules split the column in half and rule a line between the two.
   =========================================================================== */

/* IMPORTANT: these three rules must stay inside the media query.
   #quarto-sidebar carries Bootstrap's `collapse` class, and `display: flex` on
   an ID selector outranks `.collapse { display: none }`. Unscoped, that forces
   the sidebar open on narrow screens, where it covers the body text — which is
   exactly the bug this replaced. Below 992px, let Quarto's own collapse
   behaviour run: the sidebar hides behind the hamburger and the text shows. */
@media (min-width: 992px) {
  #quarto-sidebar {
    display: flex;
    flex-direction: column;
  }

  /* upper half — book navigation */
  #quarto-sidebar .sidebar-menu-container {
    flex: 1 1 50%;
    min-height: 0;
    overflow-y: auto;
  }

  /* the lower half — this page's table of contents */
  #quarto-sidebar nav#TOC {
    flex: 1 1 50%;
    min-height: 0;
    overflow-y: auto;
  }
}

/* The dividing rule is safe at any width — it also separates the two halves
   when the sidebar is expanded on a phone. */
#quarto-sidebar nav#TOC {
  border-top: 1px solid #d8d4dc;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

/* TOC links were Bootstrap blue (#2761e3). Bring them to the house colour. */
nav#TOC a,
nav#TOC a.nav-link,
#quarto-margin-sidebar nav#TOC a {
  color: var(--uw-purple) !important;
  text-decoration: none !important;
}
nav#TOC a:hover { text-decoration: underline !important;
                  text-decoration-color: var(--uw-underline-hover) !important; }
nav#TOC a.active, nav#TOC .nav-link.active { font-weight: 600; }
nav#TOC > h2, nav#TOC .toc-title {
  font-size: 0.8rem !important; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--uw-purple) !important;
}

/* ---- No site title in the sidebar. Dropping it lets the search box rise to
   the top of the column, level with the breadcrumb on the right.
   Want it back? Delete this rule; the text comes from book.sidebar.title. ---- */
#quarto-sidebar .sidebar-header { display: none !important; }

/* search box flush with the top of the content column */
#quarto-sidebar > div:has(#quarto-search) { margin-top: 0 !important; }

/* ===========================================================================
   The last two blue things Bootstrap leaves behind.
   =========================================================================== */

/* 1. Callout accent bar — was rgb(39,128,227), 5px. Applies to every callout
   type; if you want tip/warning to keep their own colours, scope this to
   .callout-note instead. The 2px width matches the PDF's slimmed 0.4mm rule. */
.callout {
  border-left-color: var(--uw-purple) !important;
  border-left-width: 2px !important;
}

/* 1b. Titled callouts get a light purple header strip instead of Quarto's
   default light blue. rgba keeps it readable in both light and dark themes. */
.callout.callout-style-default > .callout-header {
  background-color: rgba(50, 0, 110, 0.06) !important;
}

/* 2. The callout icon is an inline SVG data URI with the blue baked into its
   fill, so `color` cannot touch it — the whole image has to be replaced.
   This is a filled circle with a white "i". Don't want an icon at all? Use
   `::: {.callout-note icon=false}` in the document, or:
       .callout .callout-icon::before { display: none; }                    */
.callout-note .callout-icon::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7.5' fill='%2332006e'/><rect x='7.1' y='6.6' width='1.8' height='5.2' rx='0.9' fill='white'/><circle cx='8' cy='4.4' r='1.1' fill='white'/></svg>") !important;
}

/* 2b. The tip callout's light bulb: Quarto's green SVG, turned black.
   brightness(0) maps every colour to black and keeps the shape and its
   transparency, so the bulb needs no replacement image of its own. */
.callout-tip .callout-icon::before {
  filter: brightness(0);
}

/* 3. Active item marker in the table of contents — was rgb(39,97,227), 1px. */
nav#TOC a.nav-link.active,
nav#TOC .nav-link.active {
  border-left-color: var(--uw-purple) !important;
}

/* 4. index.qmd is a zero-output redirect stub (see the comment in that file):
   Quarto requires the file to exist, but "Home" must not appear anywhere.
   Hide its entry in the book sidebar and in the prev/next footer navigation.
   (The sidebar title itself still links to index.html, which just bounces to
   Chapter 1 — that one stays clickable on purpose.) */
.sidebar-item a[href$="index.html"],
.nav-page a[href$="index.html"],
a.pagination-link[href$="index.html"] {
  display: none !important;
}

/* 5. Labeled tables (#tbl-) are wrapped in a float:
     <div class="quarto-figure-center"><figure><div><table>...
   and Quarto's rule ".quarto-figure-center > figure > div
   { text-align: center }" -- meant to center figure IMAGES -- leaks into the
   table wrapper, and every cell inherits it (Bootstrap sets
   th { text-align: inherit }). Put table content back to the left. Columns
   with an explicit pipe-header alignment (|:---:|, |---:|) still win, because
   pandoc writes those as inline styles on the cells. */
.quarto-figure-center > figure.quarto-float-tbl > div {
  text-align: left;
}

/* 6. Narrow screens: the breadcrumb strip above the chapter title inherits the
   17px root size, so it comes out LARGER than the body text it sits above.
   Quarto only shows this strip below the 992px sidebar breakpoint, which is
   exactly where the screen can least afford it. Pull it under the body size.
   (On desktop the strip is hidden, so this needs no wide-screen counterpart.) */
@media (max-width: 991.98px) {
  .quarto-secondary-nav,
  .quarto-page-breadcrumbs,
  .quarto-page-breadcrumbs .breadcrumb-item,
  .quarto-page-breadcrumbs .breadcrumb-item a,
  .quarto-secondary-nav .quarto-btn-toggle {
    font-size: 0.76rem !important;
  }
  .quarto-page-breadcrumbs .breadcrumb-item { line-height: 1.35 !important; }
}