/* ============================================================================
   ib-papers.css: /math/ib_papers/
   A quiet reading room: the archive as a scannable list, a calm serif
   reading column for each paper, math given room to breathe, and the
   formula booklet on a panel beside the work. Reads only tokens.
   ========================================================================= */

/* Before JavaScript has opened a paper (?paper=), the archive stays hidden
   and a quiet skeleton holds the place. Without JavaScript the class is
   never set, so the archive shows. */
.ib-opening-state { display: none; }
.ib-opening .ib-archive { display: none; }
.ib-opening .ib-opening-state { display: block; padding-block: var(--space-8); }
.ib-skeleton { display: grid; gap: var(--space-3); max-width: var(--measure); }
.ib-skeleton span {
  display: block;
  height: 1.1em;
  border-radius: var(--radius-sm);
  background: var(--surface);
  animation: ib-pulse 1.4s var(--ease) infinite alternate;
}
.ib-skeleton span:first-child { width: 35%; height: 0.8em; }
.ib-skeleton span:nth-child(2) { width: 65%; height: 2.6em; margin-bottom: var(--space-5); }
.ib-skeleton span:nth-child(3) { width: 92%; }
.ib-skeleton span:last-child { width: 50%; }
@keyframes ib-pulse { to { opacity: 0.45; } }

.ib-state { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: 0; padding-block: var(--space-8); }
.ib-state h1 { margin-top: var(--space-3); font-size: var(--step-4); }
.ib-state p { margin-top: var(--space-4); color: var(--ink-2); }
.ib-state .btn { margin-top: var(--space-5); }

/* ==================== ARCHIVE ==================== */
.ib-stats { color: var(--ink-3); align-self: center; }
.ib .page-title__meta { align-items: center; }

.ib-body { padding-bottom: var(--space-4); }

/* Filters: a row of small pills, one per way the IB labels a paper. A pill
   reads "Year" until something is chosen, then shows the choice in accent. */
.lib-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.lib-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 1.9rem 0 0.9rem;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-round);
  color: var(--ink-2);
  font-size: var(--step-n1);
  white-space: nowrap;
  cursor: pointer;
}
/* The real control, invisible, covering the pill: tap anywhere to choose. */
.lib-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  appearance: none;
  font-size: 16px; /* no zoom on iOS */
  cursor: pointer;
}
/* The caret is a mask, so it takes a token color in both themes. */
.lib-select::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
}
.lib-select:hover { border-color: var(--ink-3); color: var(--ink); }
.lib-select:has(select:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lib-select.is-set { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.lib-clear { margin-left: var(--space-1); font-size: var(--step-n1); white-space: nowrap; }
.lib-count { margin: var(--space-5) 0 var(--space-2); color: var(--ink-3); }
.lib-empty { padding: var(--space-6) 0; color: var(--ink-2); }

.shelf {
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line-strong);
}
.shelf + .shelf { margin-top: var(--space-5); }
.shelf__year { font-size: var(--step-1); letter-spacing: 0; margin-bottom: var(--space-1); }

.rail__list, .qbar__list, .shelf__list { list-style: none; padding: 0; margin: 0; }

.paper-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 3.5rem 9.5rem 1.25rem;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
}
.shelf__list li:last-child .paper-row { border-bottom: 0; }
.paper-row__title { color: var(--ink); font-weight: var(--weight-medium); }
.paper-row__level {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 0.45em;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step-n2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--ink-2);
  vertical-align: 0.1em;
}
.paper-row__paper, .paper-row__tz, .paper-row__count { color: var(--ink-3); }
.paper-row__count { text-align: right; }
.paper-row__count.is-started { color: var(--accent); }
.paper-row__arrow { width: 1.1rem; height: 1.1rem; align-self: center; color: var(--ink-3); transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease); }
.paper-row:hover .paper-row__title,
.paper-row:hover .paper-row__arrow { color: var(--accent); }
.paper-row:hover .paper-row__arrow { transform: translateX(3px); }

.lib-note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line-strong);
  font-size: var(--step-n1);
  color: var(--ink-3);
}
.lib-note + .lib-note { margin-top: 0; border-top: 0; padding-top: var(--space-2); }

/* ==================== READER LAYOUT ==================== */
.reader {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-7);
  transition: padding var(--dur-slow) var(--ease);
}

/* Rail (large screens) */
.rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--space-7));
  overflow-y: auto;
  scrollbar-width: none;
  font-size: var(--step-n1);
}
.rail::-webkit-scrollbar { display: none; }
.rail svg { width: 1em; height: 1em; }

.rail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--ink-3);
  text-decoration: none;
}
.rail__back:hover { color: var(--ink); }

.rail__label {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-n2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.rail__list { border-left: var(--hairline) solid var(--line); }
.rail__list a {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: var(--space-2);
  margin-left: -1px;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rail__list a:hover { color: var(--ink); }
.rail__list a.is-active { color: var(--ink); border-left-color: var(--accent); }
.rail__num { color: var(--ink-3); }
.rail__list a.is-active .rail__num { color: var(--accent); }
.rail__check { visibility: hidden; color: var(--accent); }
.rail__list a.is-done .rail__check { visibility: visible; }

.rail__progress { margin-top: var(--space-3); min-height: 1.2em; color: var(--ink-3); }

.rail__tools {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  cursor: pointer;
}
.switch input {
  appearance: none;
  position: relative;
  width: 2.1rem;
  height: 1.2rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(0.9rem); background: var(--on-accent); }

/* Question bar (small screens) */
.qbar { display: none; }

/* ==================== PAPER ==================== */
/* The paper fills the space beside the rail; only very wide screens cap it. */
.paper { min-width: 0; width: 100%; max-width: 76rem; }
.paper-head {
  padding-bottom: var(--space-6);
  border-bottom: var(--hairline) solid var(--line-strong);
}
.paper-head .eyebrow { margin-bottom: var(--space-3); color: var(--accent); }
.paper-title { font-size: var(--step-4); margin-bottom: var(--space-3); }
.paper-meta { color: var(--ink-3); }
.paper-tip {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-size: var(--step-n1);
  color: var(--ink-2);
}

/* One question */
.q {
  padding-block: var(--space-7);
  border-bottom: var(--hairline) solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.q__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.q__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-n2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.q__num {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--space-1);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-round);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.q.is-open .q__num { border-color: var(--accent); color: var(--accent); }

.q__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-round);
  background: transparent;
  font: inherit;
  font-size: var(--step-n1);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.q__done svg { width: 1em; height: 1em; opacity: 0.5; }
.q__done:hover { color: var(--ink); border-color: var(--line-strong); }
.q__done.is-done { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.q__done.is-done svg { opacity: 1; }

.q__toggle { margin-top: var(--space-5); }
.q__toggle svg { transition: transform var(--dur) var(--ease); }
.q.is-open .q__toggle svg { transform: rotate(180deg); }

.q__pending { margin-top: var(--space-5); font-size: var(--step-n1); color: var(--ink-3); font-style: italic; }

.q__solution {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}
.q__solution:not([hidden]) { animation: sol-in var(--dur-slow) var(--ease); }
@keyframes sol-in { from { opacity: 0; transform: translateY(calc(var(--rise) * -1)); } to { opacity: 1; transform: none; } }

.paper-end { padding-top: var(--space-7); color: var(--ink-3); font-size: var(--step-n1); }
.paper-end__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ==================== PROSE & MATH ==================== */
/* Questions and solutions are set in the serif, with KaTeX's own fonts for
   the math. */
.tex {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.q__body.tex { color: var(--ink); }
.tex > * + * { margin-top: 0.85em; }
.tex strong, .tex b { color: var(--ink); }
.tex ul, .tex ol { padding-left: 1.25em; }
.tex ul { list-style: disc; }
.tex h3, .tex h4 { font-size: var(--step-1); margin: 1.5em 0 0.5em; }
.tex hr { margin: var(--space-5) 0; }

.part {
  display: inline-block;
  min-width: 2em;
  margin-right: 0.15em;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.indent { display: inline-block; width: 1.5em; }

.ib .katex { font-size: 1.04em; color: var(--ink); }
.q__solution .katex { color: inherit; }

/* Consecutive display equations read as one derivation; a wide one
   scrolls inside its own strip rather than widening the page. */
.math-stack {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-4);
}
.math-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--space-1);
  scrollbar-width: thin;
}
.math-display .katex-display { margin: 0; }
.math-display--inline { display: block; margin-block: var(--space-3); }

.booklet-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.8em;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.booklet-ref:hover { color: var(--accent-strong); }
.booklet-ref svg { width: 0.95em; height: 0.95em; align-self: center; }

/* Figures drawn in black (SVG, scanned diagrams) sit on a light card in
   both themes: paper in light, the light ink in dark. KaTeX draws square
   roots, long arrows and braces as SVG too; those are left alone, or the
   card would cover what is under the root. */
.tex img,
.tex svg:not(.booklet-ref svg, .katex svg) {
  /* One size for every figure, whatever width the paper's HTML asks for
     (hence !important over inline styles); a phone still gets full width. */
  max-width: min(100%, 22rem) !important;
  height: auto;
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  vertical-align: middle;
}
.tex .boxplot svg:not(.katex svg) { display: block; width: 100%; max-width: min(100%, 26rem) !important; margin-inline: auto; font-family: var(--font-serif, serif); }
.tex .venn svg:not(.katex svg) { display: block; width: 100%; max-width: min(100%, 19rem) !important; margin-inline: auto; font-family: var(--font-serif, serif); }
.tex .venn .venn__set { font-size: 24px; }
.tex .graph svg:not(.katex svg) { display: block; width: 100%; max-width: min(100%, 24rem) !important; margin-inline: auto; font-family: var(--font-serif, serif); }
.tex .graph .graph__num { font-size: 14px; font-style: normal; }
/* An open dot shows the card behind it (paper in light, ink in dark). */
.tex .graph .graph__open { fill: var(--paper); }
:root[data-theme="dark"] .tex .graph .graph__open { fill: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tex .graph .graph__open { fill: var(--ink); } }
:root[data-theme="dark"] .tex img,
:root[data-theme="dark"] .tex svg:not(.booklet-ref svg, .katex svg) { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tex img,
  :root:not([data-theme="light"]) .tex svg:not(.booklet-ref svg, .katex svg) { background: var(--ink); color: var(--paper); }
}
.tex div[style*="text-align: center"],
.tex div[style*="text-align:center"] { margin-block: var(--space-5); }
.tex div[style*="display: flex"] { flex-wrap: wrap; gap: var(--space-3) !important; }
.tex div[style*="inline-block"] { max-width: 100%; }

/* The "boxed final answer" pattern in the source */
.tex div[style*="border: 1px solid black"] {
  border: var(--hairline) solid var(--accent) !important;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-4) !important;
  background: var(--accent-tint);
}
/* \boxed{...} in the math gets the same look as the HTML answer box: KaTeX
   draws the frame as its own span (.fbox) behind the content (.boxpad). */
/* KaTeX sizes the frame tightly, so the tint and border are drawn a little
   outside it (spread shadow, offset outline) to give the answer room. */
.tex .katex:has(.fbox) { isolation: isolate; }   /* keeps the tint behind the math, above the page */
.tex .katex .fbox {
  position: relative;
  z-index: -1;
  border-color: transparent !important;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  box-shadow: 0 0 0 0.3em var(--accent-tint);
  outline: var(--hairline) solid var(--accent);
  outline-offset: 0.3em;
}
.tex .katex .boxpad { padding: 0 0.3em; }
.tex .math-display:has(.fbox) { padding-block: 0.55em; }
.tex .math-display--inline:has(.fbox) { margin-block: var(--space-4); }
.tex p .katex:has(.fbox) { margin-inline: 0.35em; }

.table-wrap { max-width: 100%; overflow-x: auto; margin-block: var(--space-4); }
.tex table {
  margin-inline: auto;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--step-n1);
  font-variant-numeric: tabular-nums;
}
.tex th, .tex td {
  padding: var(--space-2) var(--space-4) !important;
  border: var(--hairline) solid var(--line-strong);
  text-align: center;
}
.tex th { background: var(--surface); color: var(--ink); font-weight: var(--weight-semibold); }

/* ==================== FORMULA BOOKLET PANEL ==================== */
.booklet {
  --booklet-w: clamp(360px, 40vw, 680px);
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--booklet-w);
  background: var(--paper);
  border-left: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow-float);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.booklet[hidden] { display: none; }
.booklet-open .booklet { transform: none; }
.booklet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
}
.booklet__title { color: var(--ink); font-size: var(--step-n1); font-weight: var(--weight-medium); }
.booklet__page { color: var(--ink-3); font-size: var(--step-n2); }
.booklet__actions { display: flex; gap: var(--space-1); }
.booklet__frame { flex: 1; width: 100%; border: 0; background: var(--surface); }

/* With the booklet open, the reading column makes room instead of hiding */
@media (min-width: 1024px) {
  body { --booklet-w: clamp(360px, 40vw, 680px); }
  .booklet-open .reader {
    grid-template-columns: minmax(0, 1fr);
    padding-right: calc(var(--booklet-w) + var(--gutter));
  }
  .booklet-open .rail { display: none; }
  .booklet-open .ib-archive > * { padding-right: calc(var(--booklet-w) + var(--gutter)); }
}

/* ==================== SMALL SCREENS ==================== */
@media (max-width: 1023px) {
  .booklet { display: none !important; }

  .reader { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); }
  .rail { display: none; }

  .qbar {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
            backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: var(--hairline) solid var(--line);
  }
  .qbar .icon-btn { border: var(--hairline) solid var(--line-strong); }
  .qbar__list {
    flex: 1;
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-1) var(--space-2);
  }
  .qbar__list::-webkit-scrollbar { display: none; }
  .qbar__list a {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-2);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-round);
    font-family: var(--font-mono);
    font-size: var(--step-n1);
    color: var(--ink-3);
    text-decoration: none;
  }
  .qbar__list a.is-done { border-color: var(--accent); color: var(--accent); }
  .qbar__list a.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

  .q { scroll-margin-top: calc(var(--header-h) + 4.25rem); }
}

@media (max-width: 700px) {
  .paper-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .paper-row__title { flex-basis: 100%; }
  .paper-row__count { margin-left: auto; }
  .paper-row__arrow { display: none; }
  .q__done span { display: none; }
  .q__done { padding: var(--space-1) var(--space-2); }
}

@media print {
  .qbar, .rail, .booklet, .q__toggle, .q__done, .paper-tip, .site-header, .site-footer { display: none !important; }
  .q__solution[hidden] { display: block !important; }
  .reader { display: block; }
}

/* ==================== FORMULA CARDS ==================== */
/* A phrase linked to the booklet: a dotted underline and the page it's on.
   Pressing it opens .formula-pop with the formula and where to find it. */
.formula-ref {
  display: inline;
  padding: 0;
  border: 0;
  border-bottom: 1.5px dotted var(--accent);
  background: none;
  color: var(--accent);
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}
.formula-ref:hover { border-bottom-style: solid; }
.formula-ref[aria-expanded="true"] { background: var(--accent-tint); border-radius: 2px; }
.formula-ref__tag {
  margin-left: 0.3em;
  padding: 0 0.3em;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.62em;
  vertical-align: 0.15em;
  opacity: 0.8;
}

.formula-pop {
  position: absolute;
  z-index: 60;
  width: min(30rem, calc(100vw - 32px));
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 40px -18px var(--page-shade, rgb(0 0 0 / 0.35)), 0 2px 6px rgb(0 0 0 / 0.06);
  animation: formula-in var(--dur) var(--ease);
}
.formula-pop[hidden] { display: none; }
@keyframes formula-in { from { opacity: 0; transform: translateY(4px); } }
.formula-pop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.formula-pop__page { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.formula-pop__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: calc(var(--space-2) * -1);
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.formula-pop__close:hover { background: var(--surface); color: var(--ink); }
.formula-pop__close svg { width: 18px; height: 18px; }
.formula-pop__name { margin-top: var(--space-1); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 400; }
.formula-pop__tex { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); }
.formula-pop__line { overflow-x: auto; overflow-y: hidden; }
.formula-pop__line + .formula-pop__line { margin-top: var(--space-2); }
.formula-pop__line .katex-display { margin: var(--space-1) 0; }
.formula-pop__where { margin-top: var(--space-3); font-size: var(--step-n1); color: var(--ink-2); }
.formula-pop__find {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--step-n1);
  color: var(--ink-2);
}
.formula-pop__find-label { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.formula-pop__open { margin-top: var(--space-4); }
.formula-pop__open svg { width: 16px; height: 16px; }

/* Phones: a sheet along the bottom of the screen. */
@media (max-width: 40rem) {
  .formula-pop {
    position: fixed;
    inset: auto 0 0 0 !important;
    width: auto;
    max-height: 75vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
    border-radius: var(--radius) var(--radius) 0 0;
    border-width: var(--hairline) 0 0;
    animation-name: formula-up;
  }
  @keyframes formula-up { from { transform: translateY(100%); } }
}