/* Andra Markets site. Light (default) and dark themes. Tokens and rules: DESIGN.md. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --nav-h: 64px;
  --section: clamp(88px, 12vh, 152px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --horse-size: min(116svh, 96vw);
  /* The Lab plate is dark in both themes, so its chart colours are fixed. */
  --plate-up: #1fd27a;
  --plate-down: #ff4b52;
  --plate-up-tint: rgba(31, 210, 122, 0.3);
  --plate-down-tint: rgba(255, 75, 82, 0.3);
  /* the horse in the middle (owner-approved, 1 Nov 2026; it was 70% across, on the right):
     the centre of its silhouette (x 513 of the engraving's 1024px; the box's anchor is 502)
     on the page's centre line, and halfway between the phrase and the foot of the screen,
     following the hero's top padding (the short-screen rules below set their own) */
  --horse-x: calc(50% - 0.0107 * var(--horse-size));
  --horse-y: calc(50% + 32px + clamp(12px, 3vh, 36px) + 11px);
}

/* Light: pure white paper, ink type, the horse printed as an engraving. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #ffffff;
  --ground-2: #e9eded;
  --ink: #0e1215;
  --ink-2: #424a50;
  --ink-3: #5a6268;
  --rule: rgba(14, 18, 21, 0.15);
  --rule-strong: rgba(14, 18, 21, 0.78);
  --btn-bg: #0e1215;
  --btn-fg: #ffffff;
  --btn-hover: #2a3036;
  --plate: #0e1215;
  --plate-2: #191f23;
  --plate-hover: #232a2f;
  --plate-ink: #eef1f1;
  --plate-ink-2: #b4bbbf;
  --plate-rule: rgba(238, 241, 241, 0.16);
  --chart-line: #0e1215;
  --chart-grid: rgba(14, 18, 21, 0.1);
  --chart-fill: rgba(14, 18, 21, 0.08);
  --up: #00a050;
  --down: #e0202a;
  /* Rise and fall as text: darker than the chart pair so small figures pass
     WCAG AA (4.5:1) on ground and ground-2. */
  --up-text: #00773b;
  --down-text: #d01c25;
  --up-tint: rgba(0, 160, 80, 0.24);
  --down-tint: rgba(224, 32, 42, 0.22);
  --horse-filter: invert(1) grayscale(1) brightness(0.85) contrast(3);
  --horse-blend: multiply;
  --horse-opacity: 0.92;
  --select: rgba(14, 18, 21, 0.14);
  --focus: #0e1215;
  --scrim: rgba(14, 18, 21, 0.32);
}

/* Dark: near-black, the horse as a dim cinematic presence. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a0c0d;
  --ground-2: #14181b;
  --ink: #e9eceb;
  --ink-2: #a8b0b4;
  --ink-3: #899196;
  --rule: rgba(233, 236, 235, 0.13);
  --rule-strong: rgba(233, 236, 235, 0.7);
  --btn-bg: #e9eceb;
  --btn-fg: #0a0c0d;
  --btn-hover: #ffffff;
  --plate: #1a2024;
  --plate-2: #252c31;
  --plate-hover: #2d353a;
  --plate-ink: #e9eceb;
  --plate-ink-2: #a8b0b4;
  --plate-rule: rgba(233, 236, 235, 0.14);
  --chart-line: #e9eceb;
  --chart-grid: rgba(233, 236, 235, 0.09);
  --chart-fill: rgba(233, 236, 235, 0.08);
  --up: #1fd27a;
  --down: #ff4b52;
  --up-text: #1fd27a;
  --down-text: #ff4b52;
  --up-tint: rgba(31, 210, 122, 0.2);
  --down-tint: rgba(255, 75, 82, 0.2);
  --horse-filter: none;
  --horse-blend: screen;
  --horse-opacity: 0.5;
  --select: rgba(233, 236, 235, 0.22);
  --focus: #e9eceb;
  --scrim: rgba(0, 0, 0, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--ground);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--select);
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

.ph {
  color: var(--ink-3);
}

.ph--ink {
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn .icon {
  font-size: 1.05em;
  transition: transform 200ms var(--ease-out);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 550;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}

.link .icon {
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--btn-hover);
    border-color: var(--btn-hover);
  }
  .btn--ghost:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ground);
  }
  .btn:hover .icon {
    transform: translateX(3px);
  }
  a:hover > .link .icon,
  .link:hover .icon {
    transform: translate(2px, -2px);
  }
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition:
    background-color 240ms ease,
    border-color 240ms ease;
}

/* Section pages: the black sphere and the backlit horse behind everything (assets/section-scene.js,
   owner-approved 31 Oct 2026). Fixed behind the page, under the header too. Dark: pure black.
   Light: the same scene inverted, white with dark particles. */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.scene.is-live {
  opacity: 1;
}

/* arriving from the homepage, or from another section: the sphere is there at once (it opens
   out of the point, or carries on from the page before) */
.scene.is-now {
  transition: none;
}

.scene__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

:root:not([data-theme="dark"]) .scene__canvas {
  filter: invert(1);
}

/* the body's own ground would cover the scene; the page's ground stays on html */
body.has-scene {
  background: transparent;
}

:root[data-theme="dark"]:has(body.has-scene) {
  --ground: #000000;
}

/* the header stays clear over the scene; once the page scrolls, a shade behind the menu keeps
   it readable over the content, and the scene still shows through it */
.has-scene .site-header.is-solid:not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
}

.has-scene .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  background: var(--ground);
  background: linear-gradient(var(--ground) 0%, color-mix(in srgb, var(--ground) 86%, transparent) 62%, transparent);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.has-scene .site-header.is-solid::before {
  opacity: 1;
}

.site-header.is-solid,
.site-header.is-open {
  background: var(--ground);
  border-bottom-color: var(--rule);
}

/* Section pages: the open menu (its panel above 960px, the sheet below) keeps the sphere in
   view (owner, 31 Oct 2026). The header and the menu stay clear over the scene, and the page
   itself fades out behind them while the menu is open, so the links read over the particles. */
.has-scene .site-header.is-open {
  background: transparent;
}

.has-scene .site-header.is-open::before {
  opacity: 0;
}

.has-scene .nav__panel {
  background: transparent;
}

/* Without JavaScript the page cannot fade out behind an open panel, so the panel keeps
   its ground. */
html:not(.js) .has-scene .nav__panel {
  background: var(--ground);
}

.has-scene main,
.has-scene .site-footer {
  transition: opacity 200ms var(--ease-out);
}

.has-scene:has(.site-header.is-open) main,
.has-scene:has(.site-header.is-open) .site-footer {
  opacity: 0;
  pointer-events: none;
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__name {
  position: relative;
  z-index: 1;
  text-decoration: none;
}

/* The header's mark is the theme switch (owner, 1 Nov 2026; it replaced the sun and moon
   button). It looks exactly like the mark: the padding, taken back by the negative margin,
   only widens what a finger or pointer can hit (at least 44px tall) without moving anything. */
.brand__toggle {
  box-sizing: content-box;
  margin: -9px -5px -9px -10px;
  padding: 9px 5px 9px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Transparent marks (tools/make_mark.py), one per theme: no box, no blend.
   As tall as the wordmark's line box, so the two centre on one axis. */
.brand__mark {
  display: block;
  flex: none;
  height: 1.55em;
  height: 1lh;
}

.brand__mark img {
  display: block;
  width: auto;
  height: 100%;
}

:root[data-theme="dark"] .brand__mark--light,
:root:not([data-theme="dark"]) .brand__mark--dark {
  display: none;
}

/* The menu in four groups (owner-approved, 31 Oct 2026): Markets, Tools, Research, Careers.
   Above 960px each group is a button that opens a panel the width of the page under the
   header: the group's name and a line on the left, its links in ruled rows on the right,
   each with a line of its own. At 960px and below the same markup is the menu sheet. */
.nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
}

.nav__subscribe {
  display: none;
}

.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.5em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.nav__caret {
  font-size: 0.75em;
  transition: transform 200ms var(--ease-out);
}

.nav__btn[aria-expanded="true"] {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.nav__btn[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__panel {
  position: fixed;
  inset: var(--nav-h) 0 auto;
  padding: 32px 0 40px;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 200ms;
}

.nav__group.is-open .nav__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s;
}

/* Without JavaScript the panels open on hover and keyboard focus. */
html:not(.js) .nav__group:hover .nav__panel,
html:not(.js) .nav__group:focus-within .nav__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}

.nav__intro {
  grid-column: 1 / 4;
}

.nav__title {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.nav__desc {
  margin: 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.nav__links {
  grid-column: 4 / 13;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-content: start;
  border-top: 1px solid var(--rule-strong);
}

.nav__links li {
  border-bottom: 1px solid var(--rule);
}

.nav__links a {
  display: grid;
  gap: 4px;
  padding: 16px 0 18px;
  color: var(--ink);
  text-decoration: none;
}

.nav__name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 1.1875rem;
  font-weight: 540;
  letter-spacing: -0.015em;
}

/* The name's line box is held by its parent, so the name itself can be exactly one em tall:
   the same shape as a page title (line-height 1), which it flies into when clicked (Page
   transitions, below). */
.nav__name {
  min-height: 1.55em;
  min-height: 1lh;
}

.nav__label {
  line-height: 1;
}

.nav__name .icon {
  flex: none;
  font-size: 1rem;
  color: var(--ink-3);
  transition: transform 200ms var(--ease-out), color 160ms ease;
}

.nav__sub {
  max-width: 40ch;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* The open group, above 960px (owner-approved, 1 Nov 2026): it fills the screen under the
   header, the group's title and line in the middle and its sections orbiting them, each with a
   small chart that draws itself (NAV_CHARTS in tools/build_site.py). assets/site.js places the
   sections on an ellipse the size of the panel and turns it once every 120s; they come out of
   the title as the group opens, and stop while the pointer or the focus is on one. Without
   JavaScript the panel keeps the layout above; the phones' menu sheet is unchanged. */
.nav-chart {
  display: none;
}

@media (min-width: 961px) {
  html.js .nav__panel {
    inset: var(--nav-h) 0 0;
    padding: clamp(28px, 5vh, 56px) 0 clamp(28px, 6vh, 64px);
    border-bottom: 0;
    display: flex;
  }

  html.js .nav__inner {
    position: relative;
    flex: 1;
    width: 100%;
  }

  html.js .nav__intro {
    /* out of its grid column, so it centres on the whole panel */
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(36ch, 26%);
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

  html.js .nav__title {
    margin-bottom: 10px;
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  }

  html.js .nav__desc {
    margin: 0 auto;
  }

  html.js .nav__links {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    height: 100%;
    border-top: 0;
  }

  html.js .nav__links li {
    position: absolute;
    left: 0;
    top: 0;
    width: min(380px, 27%);
    border-bottom: 0;
    will-change: transform, opacity;
  }

  html.js .nav__links a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 4px;
    align-content: start;
    align-items: center;
    min-height: clamp(104px, 17svh, 136px);
    padding: clamp(10px, 1.8svh, 16px) 0 clamp(12px, 2svh, 18px);
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
  }

  html.js .nav__name,
  html.js .nav__sub {
    grid-column: 2;
  }

  /* narrower screens: a smaller chart, so the sections keep clear of one another */
  @media (max-width: 1180px) {
    html.js .nav__links a {
      grid-template-columns: 80px minmax(0, 1fr);
      column-gap: 14px;
    }
    html.js .nav-chart {
      width: 80px !important;
      height: 46px !important;
    }
    html.js .nav__sub {
      font-size: 0.8125rem;
    }
  }

  html.js .nav-chart {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 112px;
    height: 64px;
    overflow: visible;
    color: var(--ink-2);
  }

  .nav-chart * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .nav-chart .bar {
    stroke-width: 7;
    stroke-linecap: butt;
  }

  .nav-chart .base {
    stroke: var(--rule-strong);
    stroke-width: 1;
  }

  .nav-chart .dot {
    fill: var(--ink);
    stroke: none;
  }

  .nav-chart .soft {
    stroke: var(--ink-3);
    stroke-dasharray: 2 4;
  }

  /* each chart draws itself as its section arrives, then its dot or guide shows */
  .nav__group.is-open .nav-chart .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: nav-draw 1100ms var(--ease-in-out) forwards;
    animation-delay: calc(420ms + var(--k, 0) * 80ms);
  }

  .nav__group.is-open .nav-chart .dot,
  .nav__group.is-open .nav-chart .soft {
    opacity: 0;
    animation: nav-fade 500ms ease forwards;
    animation-delay: calc(1300ms + var(--k, 0) * 80ms);
  }

  html.js .nav__group.is-open .nav__intro > * {
    animation: nav-title-in 700ms var(--ease-out) both;
  }

  html.js .nav__group.is-open .nav__intro > :nth-child(2) {
    animation-delay: 80ms;
  }

  /* section pages: the scene dims while a group is open, so its sections read over it */
  .has-scene .scene {
    transition: opacity 300ms ease;
  }

  .has-scene:has(.site-header.is-open) .scene {
    opacity: 0.4;
  }
}

@keyframes nav-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nav-fade {
  to {
    opacity: 1;
  }
}

@keyframes nav-title-in {
  from {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__group.is-open .nav-chart .draw,
  .nav__group.is-open .nav-chart .dot,
  .nav__group.is-open .nav-chart .soft,
  html.js .nav__group.is-open .nav__intro > * {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (min-width: 961px) {
  .brand {
    margin-right: clamp(16px, 3vw, 48px);
  }
  .nav {
    flex: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav__btn:hover {
    color: var(--ink);
  }
  .nav__links a:hover .nav__name .icon {
    transform: translateX(3px);
    color: var(--ink);
  }
}

/* The homepage's legal line (it has no footer), at the top right of the header. */
.site-header--home .brand {
  margin-right: clamp(8px, 2vw, 32px);
}

.site-header__legal {
  margin: 0 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 20px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.site-header__legal a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-header__legal a:hover {
    color: var(--ink);
  }
}

/* Phones: in the header row's right corner (owner, 31 Oct 2026), on
   two right-aligned lines: "Not investment advice." then Privacy and cookies. "For information
   only." is left out here (owner, 31 Oct 2026): with it the disclaimer only fits one line at
   about 7px. 15px lines, 2px apart (the approved mock). Measured in
   Chromium: at 0.6875rem "Not investment advice." is 117px wide; with the 44px theme button
   that stood beside it until 1 Nov 2026 it fitted from 370px, and from 360px with 4px header
   gaps, so there is room to spare now. */
@media (min-width: 360px) and (max-width: 600px) {
  .site-header--home .brand {
    margin-right: 0;
  }

  .site-header__legal {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 0.6875rem;
    line-height: 15px;
    text-align: right;
  }

  .site-header__legal a > span:first-child {
    display: none;
  }
}

@media (min-width: 360px) and (max-width: 369px) {
  .site-header.site-header--home .wrap {
    gap: 4px;
  }
}

/* Very narrow phones (below 360px): no room in the row, so it sits just under it, still top right. */
@media (max-width: 359px) {
  .site-header__legal {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    max-width: calc(100% - 2 * var(--gutter));
    margin: 0;
    gap: 0 14px;
    font-size: 0.75rem;
    line-height: 20px;
  }

  .home .hero h1 {
    padding-top: calc(var(--nav-h) + 56px);
  }
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  cursor: pointer;
}

.menu-btn {
  display: none;
}

.menu-btn .icon {
  font-size: 1.25rem;
}

/* 960px and below: the menu sheet, the four groups one under the other, each name a
   heading over its links (Markets in two columns), so the whole menu fits a phone. */
@media (max-width: 960px) {
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    flex-direction: column;
    gap: 0;
    padding: 4px var(--gutter) 28px;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
  .has-scene .nav {
    background: transparent;
  }
  .site-header.is-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s;
  }
  .nav__btn,
  .nav__desc,
  .nav__sub,
  .nav__name .icon {
    display: none;
  }
  .nav__panel,
  .nav__group.is-open .nav__panel,
  html:not(.js) .nav__group:hover .nav__panel,
  html:not(.js) .nav__group:focus-within .nav__panel {
    position: static;
    padding: 0;
    border: 0;
    background: none;
    visibility: inherit;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__inner {
    display: block;
    padding: 0;
  }
  .nav__title {
    margin: 0;
    padding: 22px 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: normal;
    border-bottom: 1px solid var(--rule-strong);
  }
  .nav__group:first-child .nav__title {
    padding-top: 12px;
  }
  .nav__links {
    display: block;
    border-top: 0;
  }
  .nav__links--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
  }
  .nav__name {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .menu-btn {
    display: inline-flex;
  }
  .site-header .wrap {
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .site-header .btn {
    display: none;
  }
  /* Icon only on small phones; the label stays for screen readers. */
  .menu-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Hero */

.hero {
  position: relative;
  view-timeline-name: --hero;
}

.hero__stage {
  position: relative;
  /* The homepage is this one screen (owner, 31 Oct 2026): nothing follows it. */
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.hero__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
}

.hero__art {
  position: absolute;
  left: var(--horse-x);
  top: var(--horse-y);
  width: var(--horse-size);
  height: var(--horse-size);
  transform: translate(-49%, -50.5%);
  filter: var(--horse-filter);
  mix-blend-mode: var(--horse-blend);
  pointer-events: none;
}

.horse {
  width: 100%;
  height: 100%;
  opacity: var(--horse-opacity);
}

/* The particle horse (assets/hero-horse.js, owner-approved 31 Oct 2026). It replaces the
   still engraving once WebGL is running; until then, and without it, the engraving shows.
   The canvas draws light dots on a clear ground; the light theme inverts it, so the dots
   print in soft black (0.8 opacity keeps the deepest ink near #333). */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}

.hero.is-live .hero__canvas {
  display: block;
}

.hero.is-live .hero__art {
  visibility: hidden;
  animation: none;
}

:root:not([data-theme="dark"]) .hero__canvas {
  filter: invert(1);
  opacity: 0.8;
}

/* Under the chart the horse turns into while the hero scrolls. */
.hero__stamp {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
  opacity: 0;
  pointer-events: none;
}

.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--ground) 0%, transparent 40%);
}

/* Dark theme: the homepage is flat, matte black (owner, 31 Oct 2026): no vignette, no fade,
   and no glow around the particles (assets/hero-horse.js). */
:root[data-theme="dark"]:has(main.home) {
  --ground: #000000;
}

:root[data-theme="dark"] .hero__stage {
  background: #000000;
}

:root[data-theme="dark"] .hero__stage::after {
  background: none;
}

/* The phrase, small and centred above the horse (owner-approved, 1 Nov 2026). */
.hero h1 {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

/* The phrase on top, the horse in the middle, the four groups of the header menu around it,
   all symmetric (owner-approved, 1 Nov 2026). */
.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 72px));
  padding-bottom: clamp(32px, 6vh, 64px);
}

/* Two groups each side of the horse, mirrored around it at the height of its centre and
   aligned towards it, 64px clear of its silhouette's box (0.444 of --horse-size wide). */
.hero__index {
  position: absolute;
  left: 50%;
  top: var(--horse-y);
  transform: translate(-50%, -50%);
  width: min(100% - 2 * var(--gutter), calc(0.444 * var(--horse-size) + 2 * (180px + 64px)));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero__side {
  display: grid;
  gap: 22px;
  width: 180px;
}

.hero__side--l {
  text-align: right;
}

.hero__group summary {
  display: block;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 450ms ease;
}

.hero__group summary::-webkit-details-marker {
  display: none;
}

.hero__group ul {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}

.hero__group a {
  display: block;
  padding: 3px 0;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero__group a:hover {
    color: var(--ink);
    text-decoration-color: var(--rule-strong);
  }
}

/* The still engraving (no WebGL or JavaScript) in the mark's look, as the particles draw it:
   light on black, ink on white. */
:root[data-theme="dark"] .home .hero__art {
  filter: none;
}

:root:not([data-theme="dark"]) .home .hero__art {
  filter: invert(1) grayscale(1);
}

.home .hero__art .horse {
  opacity: 1;
}

.hero h1 {
  transition: color 450ms ease;
}

/* While particles form them (assets/hero-horse.js), the headline and the index are in
   place but clear; each turns to ink once its particles have settled. */
/* The still engraving is only a fallback: while the particles are about to form the horse it
   stays hidden, so it never shows for a moment before the cloud starts. */
html.hero-forming .hero__art {
  visibility: hidden;
}

html.hero-forming .hero:not(.crisp-h1) h1,
html.hero-forming .hero:not(.crisp-ix) .hero__index summary {
  color: transparent;
}

html.hero-forming .hero__copy > *,
html.hero-formed .hero__copy > * {
  animation: none;
}

/* The homepage header forms from the same particles (owner, 31 Oct 2026): the mark (the
   theme switch), the name and the legal line are in place but clear until they settle. */
html.hero-forming .site-header--home .brand__name,
html.hero-forming .site-header--home .site-header__legal a {
  transition: color 450ms ease;
}

html.hero-forming .site-header--home .brand__mark {
  transition: opacity 450ms ease;
}

html.hero-forming .site-header--home:not(.crisp-hd) .brand__name,
html.hero-forming .site-header--home:not(.crisp-hd) .site-header__legal a {
  color: transparent;
}

html.hero-forming .site-header--home:not(.crisp-hd) .brand__mark {
  opacity: 0;
}

/* Leaving for a section (owner-approved, 1 Nov 2026; assets/hero-horse.js): the particles take
   the phrase, the group names and the header back into the point, so the real text clears at
   once and an open group's sections fade out. Shown again from the back/forward cache, it all comes back out
   of the point and the real text takes over as it did when it first formed. */
html.hero-leaving .hero h1,
html.hero-leaving .hero__index summary,
html.hero-leaving .site-header--home .brand__name,
html.hero-leaving .site-header--home .site-header__legal a {
  color: transparent;
  text-decoration-color: transparent;
  transition: none;
}

html.hero-leaving .site-header--home .brand__mark {
  opacity: 0;
  transition: none;
}

html.hero-leaving .hero__group ul {
  opacity: 0;
  transition: opacity 240ms ease;
}

html.hero-returning .site-header--home .brand__name,
html.hero-returning .site-header--home .site-header__legal a {
  transition: color 450ms ease;
}

html.hero-returning .site-header--home .brand__mark {
  transition: opacity 450ms ease;
}

/* Short screens (laptops, phones on their side): everything still fits one screen. */
@media (orientation: landscape) and (max-height: 720px) {
  .hero__copy {
    gap: 20px;
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 20px;
  }

  :root {
    --horse-y: calc(50% + 51px);
  }
}

/* Phones and small tablets held upright: one column, all centred (owner-approved, 1 Nov 2026):
   the phrase on top, the horse, then the four group names in two rows of two. The horse and
   the names sit as one block halfway between the phrase and the foot of the screen; an open
   group's sections show centred under the names, over the empty room below, so opening one
   moves nothing (the particles were drawn where the horse stood). The still engraving sits
   in the horse's slot too. On their side phones use the wide layout above, with the
   short-screen sizes. */
@media (max-width: 860px) and (orientation: portrait) {
  .hero__stage {
    flex-direction: column;
  }

  .hero__copy {
    display: contents;
  }

  .hero h1,
  .hero__index {
    position: relative;
    z-index: 1;
    padding-inline: var(--gutter);
  }

  .hero h1 {
    order: 1;
    padding-top: calc(var(--nav-h) + 20px);
    font-size: 1.25rem;
  }

  .hero__stage .hero__art {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: min(42svh, 80vw);
    flex: 0 0 auto;
    margin-block: auto 16px;
    transform: none;
    animation: none;
    container-type: size;
  }

  .hero__art .horse {
    position: absolute;
    /* the horse is 516 of the engraving's 1024px; the centre of its silhouette, x 513 of
       1024, on the centre line */
    width: 198.4cqh;
    max-width: none;
    height: 198.4cqh;
    left: calc(50% - 99.4cqh);
    top: calc(50% - 100cqh);
  }

  .hero__index {
    order: 3;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    margin-bottom: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: start;
    gap: 12px 0;
  }

  .hero__side {
    display: contents;
  }

  .hero__side--l {
    text-align: center;
  }

  .hero__group summary {
    text-align: center;
  }

  .hero__group ul {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 14px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 18px;
    padding: 0;
  }

  .hero__group a {
    padding: 4px 0;
  }
}

/* Small phones held upright (760px tall and less): the phrase a little closer to the header
   (below 360px wide the legal line sits under the header row and keeps its room). */
@media (min-width: 360px) and (max-width: 860px) and (orientation: portrait) and (max-height: 760px) {
  .home .hero h1 {
    padding-top: calc(var(--nav-h) + 14px);
  }
}

/* Laptop screens 721 to 899px tall: the hero's top room follows the height, and the horse
   with it, so the space above and below the horse stays equal. */
@media (orientation: landscape) and (min-height: 721px) and (max-height: 899px) {
  .home .hero__copy {
    padding-top: calc(var(--nav-h) + 3svh);
    padding-bottom: 3svh;
  }

  :root {
    --horse-y: calc(50% + 32px + 1.5svh + 11px);
  }
}

.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* Tape */

.tape {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}

.tape__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 8px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.tape__head h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.tape__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 550;
  text-decoration: none;
}

.tape__note .icon {
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tape__note:hover .icon {
    transform: translateX(3px);
  }
}

.tape__src {
  padding-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.tape__list {
  /* The containing block for the rolling figures' screen-reader copies
     (.visually-hidden, absolutely placed): without it a figure scrolled out
     of the tape escapes the scroller and widens the page on phones. */
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(124px, 1fr));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
  padding-block: 12px 14px;
}

.tape__item {
  scroll-snap-align: start;
  display: grid;
  gap: 2px;
  padding: 4px 16px 4px 0;
}

.tape__item + .tape__item {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.tape__name {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.tape__level {
  font-size: 1.1875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tape__chg {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Each strip figure's own time, or its close date once its market has shut. */
.tape__when {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Sections */

.section {
  padding-block: var(--section);
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head .lede {
  max-width: 44ch;
}

.section-head > div .lede {
  margin-top: 12px;
}

.lede {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-2);
  max-width: 52ch;
}

/* Charts: red and green live only here */

.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart .grid-line {
  stroke: var(--chart-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart .line,
.chart .dash {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart .dash {
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
}

.chart .area {
  fill: var(--chart-fill);
}

.chart .ref {
  stroke: var(--rule-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.chart .dot {
  fill: var(--chart-line);
}

.chart .up {
  fill: var(--up);
}

.chart .down {
  fill: var(--down);
}

.chart .band-up {
  fill: var(--up-tint);
}

.chart .band-down {
  fill: var(--down-tint);
}

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.key i {
  display: inline-block;
  width: 16px;
}

.key .k-solid {
  border-top: 1.6px solid var(--chart-line);
}

.key .k-dash {
  border-top: 1.6px dashed var(--ink-3);
}

.key .sw-up,
.key .sw-down {
  width: 12px;
  height: 12px;
}

.key .sw-up {
  background: var(--up);
}

.key .sw-down {
  background: var(--down);
}

.key__note {
  margin-left: auto;
}

/* Dashboards: browsable, filterable grid */

.dash-index {
  padding-top: clamp(32px, 5vw, 56px);
}

.filters {
  position: relative;
  display: flex;
  gap: 8px;
  padding-block: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.chip:focus-visible {
  outline-offset: -4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.chip__n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-weight: 450;
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

.chip[aria-pressed="true"] .chip__n {
  color: inherit;
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .chip[aria-pressed="false"]:hover {
    border-color: var(--rule-strong);
    color: var(--ink);
  }
}

.filters__status {
  margin: 16px 0 24px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.dash-tile {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dash-tile[hidden] {
  display: none;
}

.dash-tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(18px, 2vw, 28px);
  text-decoration: none;
  transition: background-color 200ms ease;
}

/* Each tile reads without a pointer (owner-approved, 1 Nov 2026): the title, the
   reading (a figure and one line), then the chart with its names and values on it. */
.dash-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.dash-tile h3 {
  font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.dash-tile__read {
  margin-top: 12px;
}

.dash-tile__fig {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.dash-tile__sub {
  margin-top: 4px;
  max-width: 46ch;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.dash-tile__chart {
  margin-top: 20px;
}

.dash-tile__chart .chart {
  display: block;
  width: 100%;
  height: auto;
}

/* No figures yet: the chart's box stays, with one quiet line, never a stand-in chart. */
.dash-tile__chart--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 320 / 176;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.dash-tile__src {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.dash-tile__go {
  flex: none;
  font-size: 1.125rem;
  opacity: 0.5;
  transition:
    opacity 200ms ease,
    transform 200ms var(--ease-out);
}

/* Tile charts: labels at 11.5 units of a 320-wide box (about 14px on a laptop,
   12px on a phone); figures keep proportional digits so points and commas stay
   narrow. */
.chart--tile {
  overflow: visible;
}

.chart.chart--tile .chart__label,
.chart.chart--tile .chart__value {
  font-size: 11.5px;
  font-variant-numeric: normal;
}

.chart.chart--tile .chart__value {
  font-weight: 500;
}

.chart.chart--tile .chart__heat {
  font-size: 11.5px;
  fill: #ffffff;
}

.chart.chart--tile .chart__heat--v {
  font-size: 12.5px;
  font-weight: 500;
}

/* Deeper rises and falls on the tiles (owner, 1 Nov 2026): bars a shade darker
   than the site's chart pair; text figures still pass WCAG AA. */
.dash-grid {
  --up: #0a7a3d;
  --down: #c01d26;
  --down-text: #b81c24;
}

:root[data-theme="dark"] .dash-grid {
  --up: #12964f;
  --down: #cf2a32;
  --up-text: #19b866;
  --down-text: #ee3f47;
}

@media (hover: hover) and (pointer: fine) {
  .dash-tile__link:hover {
    background: var(--ground-2);
  }
  .dash-tile__link:hover .dash-tile__go {
    opacity: 1;
    transform: translate(2px, -2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dash-tile.is-entering {
    animation: tile-in 320ms var(--ease-out) both;
    animation-delay: calc(var(--e, 0) * 35ms);
  }
  @keyframes tile-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

/* Lab: the one dark plate on the page */

.lab {
  background: var(--plate);
  color: var(--plate-ink);
  --ink: var(--plate-ink);
  --ink-2: var(--plate-ink-2);
  --ink-3: var(--plate-ink-2);
  --rule: var(--plate-rule);
  --rule-strong: var(--plate-ink-2);
  --chart-line: var(--plate-ink);
  --chart-grid: var(--plate-rule);
  --btn-bg: var(--plate-ink);
  --btn-fg: var(--plate);
  --focus: var(--plate-ink);
  --up: var(--plate-up);
  --up-text: var(--plate-up);
  --down-text: var(--plate-down);
  --down: var(--plate-down);
  --up-tint: var(--plate-up-tint);
  --down-tint: var(--plate-down-tint);
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tool {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--plate-2);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.tool--wide {
  grid-column: span 7;
}

.tool--next {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  background: transparent;
  border: 1px solid var(--plate-rule);
}

.tool--next p {
  color: var(--plate-ink-2);
  flex: 1 1 32ch;
}

.tool__text {
  margin-top: 24px;
}

.tool h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 540;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.tool--next h3 {
  font-size: 1.25rem;
}

.tool__text p {
  margin-top: 8px;
  color: var(--plate-ink-2);
  max-width: 48ch;
}

.tool__params,
.tool__src {
  font-size: 0.875rem;
}

.tool__text .tool__src {
  margin-top: 4px;
  color: var(--plate-ink-2);
}

.tool > .link {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
  a.tool:hover {
    background: var(--plate-hover);
  }
}

/* Rise and fall (DESIGN.md, The Rise and Fall Rule): the figure only, its sign
   kept; labels, prose and headings stay in ink. */

.mv--up {
  color: var(--up-text);
}

.mv--down {
  color: var(--down-text);
}

.chart .chart__value.mv--up {
  fill: var(--up-text);
}

.chart .chart__value.mv--down {
  fill: var(--down-text);
}

/* Calendar: owner-approved mock, 22 Oct 2026 (DESIGN.md, Calendar) */

.cl__head {
  max-width: 44rem;
}

.cl__controls {
  margin-top: clamp(24px, 4vw, 40px);
}

.cl__weeks {
  margin-bottom: 20px;
}

.cl__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.cl__group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cl__glabel {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.cl__group .filters {
  margin-inline: 0;
  padding-inline: 0;
}

.cl-wrap {
  border-top: 1px solid var(--rule-strong);
}

.cl__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cl__table th,
.cl__table td {
  padding: 14px 16px 14px 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.cl__table thead th {
  padding-block: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.cl__table tbody th[scope="row"] {
  width: 34%;
  font-size: 1.0625rem;
  font-weight: 540;
  white-space: normal;
}

.cl__table tbody[hidden],
.cl__table tr[hidden] {
  display: none;
}

.cl__ev {
  display: block;
}

.cl__src {
  color: inherit;
  text-decoration: none;
}

.cl__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
}

.cl__mregion {
  display: none;
}

.cl__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.cl__table tbody th .tag {
  font-weight: 400;
}

.cl__actual {
  white-space: normal;
}

.cl__react {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.cl__rlabel {
  color: var(--ink-3);
}

.cl__react > .mv {
  font-weight: 600;
}

.cl__ny,
.cl__md {
  width: 5.5rem;
}

.cl__md,
.cl__region,
.cl__prior {
  color: var(--ink-2);
}

.cl__imp {
  font-size: 0.875rem;
  color: var(--ink-2);
}

.cl__imp[data-imp="High"] {
  font-weight: 600;
  color: var(--ink);
}

.cl__act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 550;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
}

.cl__pending {
  font-size: 0.875rem;
  color: var(--ink-3);
  white-space: normal;
}

.cl__day th {
  padding-top: 28px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

.cl__table tbody:first-of-type .cl__day th {
  padding-top: 16px;
}

.is-today .cl__row {
  background: var(--ground-2);
}

.is-today .cl__row > :first-child {
  padding-left: 12px;
}

.is-today .cl__row > :last-child {
  padding-right: 16px;
}

.cl__empty,
.cl__none {
  padding: 24px 0;
  color: var(--ink-2);
}

.cl__sources {
  max-width: 44rem;
  margin-top: clamp(48px, 8vw, 88px);
}

.cl__sources h2 {
  margin: 0 0 12px;
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.cl__sources p {
  max-width: 65ch;
  margin: 0 0 12px;
  color: var(--ink-2);
}

.cl__srclist {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.cl__srclist li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}

.cl__srclist a {
  color: var(--ink);
}

.cl__srclist span:last-child {
  color: var(--ink-3);
  text-align: right;
}

.cl .report__pager {
  margin-top: 32px;
}

@media (hover: hover) and (pointer: fine) {
  .cl__src:hover {
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.18em;
  }
}

@media (max-width: 1100px) {
  .cl__table .cl__type,
  .cl__table thead th:nth-child(5) {
    display: none;
  }
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* Daily note */

.note .grid {
  row-gap: 48px;
}

.note__latest {
  grid-column: 1 / span 6;
}

.note__meta {
  margin-top: 12px;
  display: flex;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.note__title {
  margin-top: 28px;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.note__summary {
  margin-top: 12px;
  max-width: 46ch;
}

.note__latest .btn {
  margin-top: 28px;
}

.note__archive {
  grid-column: 8 / -1;
  align-self: end;
}

.note__label {
  font-size: 0.875rem;
  color: var(--ink-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}

.note-list a {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 20px;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: 0.9375rem;
}

.note-list__title {
  font-size: 1.0625rem;
  font-weight: 500;
}

.note-list .icon {
  align-self: center;
  transition: transform 200ms var(--ease-out);
}

.note__archive > .link {
  margin-top: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .note-list a:hover .note-list__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .note-list a:hover .icon {
    transform: translateX(4px);
  }
}

/* Ruled list of links: the Lab and Simulators indexes. */

.learn-list {
  grid-column: 8 / -1;
  border-top: 1px solid var(--rule-strong);
}

.learn-list a {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.learn-list__title {
  font-size: 1.1875rem;
  font-weight: 540;
  letter-spacing: -0.015em;
}

.learn-list__desc {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.learn-list__time {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .learn-list a:hover .learn-list__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}

/* Lab tool pages (lab/<slug>/): inputs, chart and result, all in the browser. */

.lt-tool[hidden] {
  display: none;
}

.lt-inputs {
  display: grid;
  gap: 20px;
}

.lt-group {
  display: grid;
  gap: 8px;
}

.lt-group .cl__glabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.lt-chips {
  flex-wrap: wrap;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}

.lt-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.lt-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.lt-field[hidden] {
  display: none;
}

.lt-field label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 0.875rem;
  font-weight: 550;
}

.lt-unit {
  font-weight: 400;
  color: var(--ink-3);
}

.lt-field input {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.lt-field input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.lt-field input[aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.lt-reset {
  justify-self: start;
}

.lt-status {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ink);
}

.lt-status:empty {
  display: none;
}

.lt .kpi__level {
  font-size: 1.0625rem;
}

/* The notes under each result are words with figures in them: proportional. */
.lt .kpi__chg {
  font-variant-numeric: normal;
}

.lt .report__pager {
  margin-top: 32px;
}

/* Risk and correlation: the company picker, the picked list and the table. */
.lt-pick {
  position: relative;
  display: grid;
  gap: 8px;
}

.lt-pick label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 0.875rem;
  font-weight: 550;
}

.lt-pick input {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.lt-pick input::placeholder {
  color: var(--ink-3);
}

.lt-pick input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.lt-opts {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  border: 1px solid var(--rule-strong);
  border-top: 0;
  background: var(--ground);
}

.lt-opts[hidden] {
  display: none;
}

.lt-opts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
}

.lt-opts li[aria-selected="true"] {
  background: var(--ground-2);
}

@media (hover: hover) and (pointer: fine) {
  .lt-opts li[data-s]:hover {
    background: var(--ground-2);
  }
}

.lt-opts__name {
  font-size: 0.9375rem;
  font-weight: 500;
}

.lt-opts__meta,
.lt-opts__none {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.lt-picked {
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.lt-picked:empty {
  display: none;
}

.lt-picked li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
}

.lt-picked__name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 540;
}

.lt-picked__name .lt-unit {
  margin-left: 6px;
  font-size: 0.8125rem;
}

.lt-picked__w {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.lt-picked__w input {
  width: 5.5rem;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lt-picked__w input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.lt-picked__x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 1.125rem;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .lt-picked__x:hover {
    color: var(--ink);
  }
}

.lt-risk {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .co-tab.lt-risk tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .co-tab.lt-risk .co-tab__name,
  .co-tab.lt-risk .co-tab__sec {
    grid-column: 1 / -1;
  }
  .co-tab.lt-risk td.num {
    grid-column: auto;
    grid-row: 3;
    margin-top: 6px;
    text-align: left;
  }
  .co-tab.lt-risk td.num::before {
    content: attr(data-label) " ";
    color: var(--ink-3);
    font-size: 0.8125rem;
  }
}

.lab-index {
  max-width: 44rem;
}

/* the Lab and Simulators indexes in their themes (the Tools menu's six) */
.lab-groups .learn-list {
  border-top: 0;
}

.lab-index__next {
  max-width: 44rem;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* World markets (world/): the comparison radar, its picker and tables. The
   picker, status and six line styles match the dashboard pages; they are
   scoped here so this page does not depend on that change landing first. */
.wm .dd__cgroup {
  display: grid;
  gap: 8px;
}

.wm .dd__cgroup > .cl__glabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.wm .dd__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wm .dd__toggles .chip {
  min-height: 44px;
  padding: 0 12px;
  gap: 8px;
}

.wm .dd__toggles .chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--rule-strong);
}

.wm .dd__toggles .chip[aria-pressed="true"] {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.wm .dd__toggles .chip[aria-pressed="true"]::before {
  background: var(--ink);
  border-color: var(--ink);
}

.wm .dd__status {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 650;
}

.wm .dd__status:empty {
  display: none;
}

.wm .chart .s0,
.wm .chart .s1,
.wm .chart .s2 {
  fill: none;
  stroke-linejoin: round;
}

.wm .chart .s0 {
  stroke: var(--chart-line);
  stroke-width: 1.8;
}

.wm .chart .s1 {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.wm .chart .s2 {
  stroke: var(--ink-2);
  stroke-width: 1.8;
  stroke-dasharray: 1 3;
  stroke-linecap: round;
}

.wm .key .key__line,
.wm .wm-cmp__key .key__line {
  display: inline-block;
  width: 16px;
  height: 6px;
  overflow: visible;
}

.wm-ring {
  fill: none;
}

.wm .chart .wm-axis {
  fill: var(--ink-2);
}

.wm-plot {
  height: auto;
  min-height: 280px;
}

.wm-cmp__wrap,
.wm-tab__wrap {
  overflow-x: auto;
}

.wm-cmp {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
}

.wm-cmp th,
.wm-cmp td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.wm-cmp thead th {
  border-bottom-color: var(--rule-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}

.wm-cmp tbody th {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}

.wm-cmp__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 550;
}

.wm-cmp__v {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.wm-cmp__src {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.wm-na {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.wm .kpi__level {
  font-size: 1rem;
}

.wm .kpi__chg {
  font-variant-numeric: normal;
}

.wm .wm-text {
  max-width: none;
}

@media (min-width: 961px) {
  .wm .wm-text {
    grid-column: 1 / -1;
  }
  /* The scale stays beside the radar: the sections under it run full width,
     so a sticky panel would slide over them. */
  .dd.wm .dd__side {
    grid-row: 2;
    position: static;
  }
  .wm .wm-text > section > p,
  .wm .wm-text .wm-src {
    max-width: 65ch;
  }
}

@media (max-width: 640px) {
  .wm .wm-pick {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .wm .wm-pick .chip {
    flex: none;
  }
}

.wm-minis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  list-style: none;
  margin-top: 16px;
}

.wm-mini {
  display: grid;
  justify-items: start;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 12px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.wm-mini[aria-pressed="true"] {
  background: var(--ground-2);
}

.wm-mini[aria-pressed="true"] .wm-mini__name::after {
  content: " · compared";
  font-weight: 400;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .wm-mini:hover {
    background: var(--ground-2);
  }
}

.wm-mini:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -4px;
}

.wm-mini__svg {
  width: 100%;
  max-width: 120px;
  height: auto;
  justify-self: center;
}

.wm-mini .wm-edge {
  stroke: var(--chart-line);
  stroke-width: 1.4;
}

.wm-mini__name {
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 540;
}

.wm-mini__idx {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* The measure under the pointer on a small radar; empty (but holding its
   line) until hovered, so the lattice never jumps. */
.wm-mini__read {
  min-height: 1.55em;
  font-size: 0.8125rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wm-tab {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.875rem;
}

.wm-tab th,
.wm-tab td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.wm-tab thead th {
  border-bottom-color: var(--rule-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: right;
}

.wm-tab thead th:first-child,
.wm-tab tbody th {
  text-align: left;
}

.wm-tab tbody th {
  font-weight: 540;
}

.wm-tab tbody th span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
}

.wm-tab .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wm-tab__wrap:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.wm-src li span {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* FX (fx/, fx/<date>/): the latest analysis, the pairs table, the archive. */
.fx-latest {
  max-width: 44rem;
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid var(--rule);
}

.fx-latest__title a {
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .fx-latest__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}

.fx-latest__sum {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--ink-2);
}

.fx-latest .note__meta {
  margin-top: 16px;
}

.fx-latest .btn {
  margin-top: 24px;
}

.fx-market,
.fx-archive {
  margin-top: clamp(40px, 6vw, 64px);
}

.fx-market h2,
.fx-archive > h2 {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.fx-archive .archive {
  max-width: 44rem;
}

.fx-archive .archive__month h3 {
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.fx-archive .archive__month:first-child h3 {
  padding-top: 16px;
}

.fx-tab__wrap {
  margin-top: 16px;
  overflow-x: auto;
}

.fx-tab {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
}

.fx-tab th,
.fx-tab td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

.fx-tab th:last-child,
.fx-tab td:last-child {
  padding-right: 0;
}

.fx-tab thead th {
  border-bottom-color: var(--rule-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.fx-tab .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fx-tab tbody th {
  font-weight: 540;
}

.fx-tab tbody th span,
.fx-tab td span:not(.mv) {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
}

.fx-tab .fx-tab__group th {
  padding-top: 24px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.fx-src {
  margin-top: 12px;
  max-width: 65ch;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.fx-market .link {
  margin-top: 8px;
}

/* FX charts (assets/fx.js): the dashboard page's controls and plot, one
   block per chart, each under a hairline. */
.fx-charts {
  margin-top: clamp(40px, 6vw, 64px);
}

.fx-charts > h2 {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.fx-charts[hidden] {
  display: none;
}

.fx-chart {
  max-width: 64rem;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule);
}

.fx-chart:first-of-type {
  margin-top: 8px;
  border-top: 1px solid var(--rule-strong);
}

.fx-chart__title {
  margin-bottom: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.fx-chart__lede {
  max-width: 65ch;
  margin: -8px 0 16px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.fx-one[hidden],
.fx-cmp[hidden] {
  display: none;
}

@media (min-width: 641px) {
  .fx-chart .fx-pick {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* On phones each pair is a row of its own: name over the quote, last and
   day on the right, week, month and year below with their labels. */
@media (max-width: 640px) {
  .fx-tab thead {
    display: none;
  }
  .fx-tab,
  .fx-tab tbody {
    display: block;
  }
  .fx-tab tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .fx-tab .fx-tab__group {
    display: block;
    padding: 20px 0 8px;
    border-bottom: 1px solid var(--rule-strong);
  }
  .fx-tab th,
  .fx-tab td,
  .fx-tab .fx-tab__group th {
    padding: 0;
    border: 0;
  }
  .fx-tab tbody th {
    grid-row: span 2;
  }
  .fx-tab td[data-label="Last"],
  .fx-tab td[data-label="Day"] {
    text-align: right;
  }
  .fx-tab td[data-label="Week"],
  .fx-tab td[data-label="Month"],
  .fx-tab td[data-label="Year to date"],
  .fx-tab td[data-label="Policy rate"] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
  }
  .fx-tab td[data-label="Week"]::before,
  .fx-tab td[data-label="Month"]::before,
  .fx-tab td[data-label="Year to date"]::before,
  .fx-tab td[data-label="Policy rate"]::before {
    content: attr(data-label);
    color: var(--ink-3);
  }
  .fx-tab td[data-label="Policy rate"] span {
    display: inline;
    margin-left: 6px;
  }
}

/* About */

.about {
  border-top: 1px solid var(--rule);
}

.about .grid {
  row-gap: 40px;
}

.about__statement {
  grid-column: 1 / span 8;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 480;
  line-height: 1.18;
  letter-spacing: -0.026em;
  text-wrap: pretty;
}

.about dl {
  grid-column: 9 / -1;
  align-self: end;
}

.about dl div {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.about dt {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.about dd {
  margin-top: 4px;
}

/* Signup: the closing plate, the mark returns whole */

.signup {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
}

.signup > .wrap {
  position: relative;
  z-index: 1;
}

.signup__art {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(150svh, 190vw);
  height: min(150svh, 190vw);
  transform: translate(-49%, -50.5%);
  filter: var(--horse-filter);
  mix-blend-mode: var(--horse-blend);
  opacity: 0.32;
  pointer-events: none;
}

.signup .grid {
  row-gap: 40px;
  align-items: end;
}

.signup .section-title {
  grid-column: 1 / span 6;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.signup form {
  grid-column: 8 / -1;
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 550;
  margin-bottom: 8px;
}

.field__row {
  display: flex;
  gap: 8px;
}

.field input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  caret-color: var(--ink);
}

.field input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.field input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.field input[aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.field .btn {
  min-height: 52px;
}

.field__help {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.field__status {
  margin-top: 10px;
  min-height: 1.5em;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 550;
}

.field__icon {
  display: none;
  font-size: 1.25rem;
}

.field__status.is-error {
  font-weight: 650;
}

.field__status.is-error .field__icon {
  display: inline-flex;
}

.signup.is-done .field__row {
  opacity: 0.5;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 48px 40px;
  font-size: 0.9375rem;
}

.site-footer .grid {
  row-gap: 32px;
}

.foot__brand {
  grid-column: 1 / span 4;
}

.foot__brand p {
  margin-top: 8px;
  color: var(--ink-2);
}

.foot__nav {
  grid-column: 6 / span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  align-content: start;
}

.foot__social {
  grid-column: 9 / span 4;
  display: grid;
  align-content: start;
}

.foot__nav a,
.foot__social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms ease;
}

.foot__social .icon {
  font-size: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover,
  .foot__social a:hover {
    color: var(--ink);
  }
}

.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Responsive collapses, per section */

@media (max-width: 1100px) {
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .note__latest,
  .note__archive,
  .learn-list,
  .about__statement,
  .about dl,
  .signup .section-title,
  .signup form,
  .foot__brand {
    grid-column: 1 / -1;
  }
  .foot__nav {
    grid-column: 1 / span 6;
  }
  .foot__social {
    grid-column: 7 / span 6;
  }
  .tool,
  .tool--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  :root {
    --section: 72px;
  }
  body {
    font-size: 1rem;
  }
  .section-head {
    flex-direction: column;
    align-items: start;
  }
  .tape__list {
    grid-template-columns: repeat(10, 40vw);
  }
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-tile__link {
    padding: 18px 16px;
  }
  .dash-tile__fig {
    font-size: 1.25rem;
  }
  .cl__groups {
    display: block;
  }
  .cl__group {
    display: block;
  }
  .cl__group + .cl__group {
    margin-top: 12px;
  }
  .cl__glabel {
    display: block;
    margin-bottom: 4px;
  }
  .cl__group .filters {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .cl-wrap {
    border-top: 0;
  }
  .cl__table thead {
    display: none;
  }
  .cl__table,
  .cl__table tbody,
  .cl__table tr,
  .cl__table th,
  .cl__table td {
    display: block;
  }
  .cl__table tr.cl__row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .cl__table tr.cl__day {
    padding: 24px 0 8px;
    border-bottom: 1px solid var(--rule-strong);
  }
  .cl__table th,
  .cl__table td {
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .cl__table .cl__day th,
  .cl__table tbody:first-of-type .cl__day th {
    padding: 0;
  }
  .cl__ny {
    grid-column: 1;
    grid-row: 1;
  }
  .cl__md {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.875rem;
  }
  .cl__md::after {
    content: "Madrid";
    display: block;
    font-size: 0.75rem;
    color: var(--ink-3);
  }
  .cl__ny[colspan] {
    grid-row: 1 / 3;
    font-size: 0.875rem;
  }
  .cl__table tbody th[scope="row"] {
    grid-column: 2;
    grid-row: 1 / 3;
    width: auto;
    font-size: 1rem;
  }
  .cl__imp {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
  .cl__table .cl__region,
  .cl__table .cl__type {
    display: none;
  }
  .cl__mregion {
    display: inline;
  }
  .cl__prior,
  .cl__actual {
    grid-column: 2 / 4;
    font-size: 0.875rem;
    color: var(--ink-2);
  }
  .cl__table .cl__prior:empty,
  .cl__table .cl__actual:empty {
    display: none;
  }
  .cl__react {
    white-space: normal;
  }
  .cl__prior::before,
  .cl__actual::before {
    content: attr(data-label) " ";
    color: var(--ink-3);
  }
  .cl__table .is-today tr.cl__row {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .cl__table .is-today .cl__row > :first-child,
  .cl__table .is-today .cl__row > :last-child {
    padding-inline: 0;
  }
  .cl__srclist li {
    flex-direction: column;
    gap: 2px;
  }
  .cl__srclist span:last-child {
    text-align: left;
  }
  .note-list a {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 4px 12px;
  }
  .note-list a > .ph {
    font-size: 0.8125rem;
  }
  .note-list__title {
    grid-column: 1;
    grid-row: 2;
  }
  .note-list .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .field__row {
    flex-direction: column;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
  .key__note {
    margin-left: 0;
  }
  .foot__nav a,
  .foot__social a {
    min-height: 44px;
  }
}

/* Motion. Content is visible by default; motion runs only when allowed. */

@media (prefers-reduced-motion: no-preference) {
  .horse {
    animation: horse-in 1600ms var(--ease-out) both;
  }

  .signup__art .horse {
    animation: none;
  }

  .hero__copy > * {
    animation: rise 900ms var(--ease-out) both;
    animation-delay: calc(240ms + var(--i, 0) * 80ms);
  }

  @keyframes horse-in {
    from {
      opacity: 0;
      transform: scale(1.04);
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  html.js .reveal {
    transition:
      opacity 900ms var(--ease-out),
      transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  html.js .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(18px);
  }

  html.js .draw .chart {
    transition: clip-path 1400ms var(--ease-in-out) 150ms;
  }

  html.js .draw:not(.is-in) .chart {
    clip-path: inset(0 100% 0 0);
  }

  /* Signature: the horse recedes as the page scrolls away from it. */
  @supports (animation-timeline: view()) {
    .hero__art {
      animation: recede linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    @keyframes recede {
      to {
        transform: translate(-49%, -44%) scale(0.94);
        opacity: 0.25;
      }
    }
  }

  /* Theme switch: the new theme opens as a circle from the button (site.js). */
  html.theme-reveal::view-transition-old(root),
  html.theme-reveal::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Between section pages (owner-approved, 1 Nov 2026): every page but the homepage opts in to
     a view transition across pages (VIEW_TRANSITION and MOVE_BOOT in tools/build_site.py; the
     page going marks the move in assets/site.js). The header stays put and the sphere carries
     on behind: assets/section-scene.js keeps its clock, light and turn from one page to the
     next, so the page before only has to fade off it. The page before fades (160ms) and the
     next one rises 14px into place (420ms ease-out, from 110ms), down from above when the move
     goes back in history. From a section in the open menu, the menu fades (200ms) and the
     section's name flies across the screen and grows into the new page's title (520ms,
     ease-in-out): the two cross-fade over its first 140ms, while it has barely moved, so a
     name shorter than its title ("World", "World markets") changes into it in place. */
  html:active-view-transition-type(section) .site-header {
    view-transition-name: site-header;
  }

  html:active-view-transition-type(enter) main {
    view-transition-name: page;
  }

  html:active-view-transition-type(leave) main {
    view-transition-name: page-out;
  }

  html:active-view-transition-type(menu) main .page__title {
    view-transition-name: page-title;
    width: fit-content;
  }

  html:active-view-transition-type(section)::view-transition-old(root) {
    animation: move-out 260ms ease both;
  }

  html:active-view-transition-type(section)::view-transition-new(root),
  html:active-view-transition-type(section)::view-transition-new(site-header) {
    animation: none;
  }

  html:active-view-transition-type(section)::view-transition-old(site-header) {
    animation: move-out 200ms ease both;
  }

  ::view-transition-old(page-out) {
    animation: move-out 160ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(page) {
    animation: move-rise 420ms var(--ease-out) 110ms both;
  }

  html:active-view-transition-type(back)::view-transition-new(page) {
    animation-name: move-drop;
  }

  ::view-transition-group(page-title) {
    animation-duration: 520ms;
    animation-timing-function: var(--ease-in-out);
  }

  /* scaled by height and held to the left, so the words keep their shape as they grow */
  ::view-transition-old(page-title),
  ::view-transition-new(page-title) {
    height: 100%;
    width: auto;
    inset-inline: 0 auto;
    mix-blend-mode: plus-lighter;
  }

  ::view-transition-old(page-title) {
    animation: move-out 140ms linear both;
  }

  ::view-transition-new(page-title) {
    animation: move-in 140ms linear both;
  }

  @keyframes move-out {
    to {
      opacity: 0;
    }
  }

  @keyframes move-in {
    from {
      opacity: 0;
    }
  }

  @keyframes move-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  @keyframes move-drop {
    from {
      opacity: 0;
      transform: translateY(-14px);
    }
  }

  /* Arriving from the homepage (owner-approved, 1 Nov 2026): the sphere opens out of the point
     the homepage went back into (assets/section-scene.js) and the page fades up over it. The
     page's head marks html.arrive (ARRIVE_BOOT in tools/build_site.py). Opacity only on the
     header and the footer, which hold fixed panels. */
  html.arrive .site-header,
  html.arrive .site-footer {
    animation: arrive-fade 600ms var(--ease-out) 360ms backwards;
  }

  html.arrive main {
    animation: arrive-rise 700ms var(--ease-out) 300ms backwards;
  }

  @keyframes arrive-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes arrive-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Fewer, gentler: reveals fade in place, nothing moves. */
  html.js .reveal {
    transition: opacity 300ms ease;
  }
  html.js .reveal:not(.is-in) {
    opacity: 0;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Inner pages (methodology and future sub-pages) */

.page {
  padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 112px));
  padding-bottom: var(--section);
}

.page__head {
  max-width: 44rem;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--rule-strong);
}

.page__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.04em;
}

.page__head .lede {
  margin-top: 16px;
}

/* The date the page's figures run to (dashboards). */
.page__asof {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.page__body {
  max-width: 44rem;
}

.page__body section {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.page__body h2 {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.page__body p {
  margin-top: 8px;
  color: var(--ink-2);
  max-width: 65ch;
}

/* Close note archive and report pages (DESIGN.md: Note archive, Report page) */

.note-list time {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.archive {
  max-width: 44rem;
}

.archive__month h2 {
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.archive__month:first-child h2 {
  padding-top: 16px;
}

.report__title {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.report .page__head .note__meta {
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.report__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 28px;
}

.report__share[hidden] {
  display: none;
}

.report__share-status {
  font-size: 0.875rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.page__body .ruled {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
}

.page__body .ruled li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.page__body .ruled li:last-child {
  border-bottom: 0;
}

.page__body p + p {
  margin-top: 12px;
}

/* Report side panel: the session in numbers */

/* Report layout: text, margin charts beside their sections, and the panel.
   1280px and up: text 1-6, margin 7-9, sticky panel 10-12.
   961px to 1279px: text 1-7, panel and margin charts 9-12.
   960px and below: one column; the panel follows the summary, each chart its section. */

.report__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}

.report__grid > .page__body {
  display: contents;
}

.report__grid > .page__head,
.report__grid > .page__body > section {
  grid-column: 1 / span 6;
}

.report__margin {
  grid-column: 7 / span 3;
  margin: 0;
  padding-top: 28px;
}

.report__margin h3 {
  margin-bottom: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.report__side {
  grid-column: 10 / -1;
  grid-row: 1 / span 40;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

@media (max-width: 1279px) {
  .report__grid > .page__head,
  .report__grid > .page__body > section {
    grid-column: 1 / span 7;
  }
  .report__margin,
  .report__side {
    grid-column: 9 / -1;
  }
  .report__side {
    grid-row: 1;
    position: static;
  }
}

@media (max-width: 960px) {
  .report__grid {
    display: block;
  }
  .report__side {
    margin-top: clamp(32px, 5vw, 56px);
  }
  .report__margin {
    padding: 0 0 28px;
    border-bottom: 1px solid var(--rule);
  }
}

.report__side-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Dashboard pages: head, chart with range chips (1-8), Latest panel (10-12), notes */
.dd__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(32px, 5vw, 48px);
}

.dd__head,
.dd__main,
.dd__side,
.dd__text {
  grid-column: 1 / -1;
}

.dd .dd__side {
  grid-row: auto;
  position: static;
  margin-top: 0;
}

@media (min-width: 961px) {
  .dd__main,
  .dd__text {
    grid-column: 1 / span 8;
  }
  .dd .dd__side {
    grid-column: 10 / -1;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
}

.dd__crumbs {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.dd__crumbs a {
  color: var(--ink-2);
}

.dd__chart {
  margin-top: 20px;
}

.dd__plot {
  position: relative;
  height: clamp(240px, 42vw, 380px);
  touch-action: pan-y;
}

.dd__plot--perf,
.dd__plot--matrix {
  height: auto;
  min-height: 120px;
}

.dd__plot--auto {
  height: auto;
  min-height: 120px;
}

/* Dashboard page controls: view, range with a comparison date, series shown. */
.dd__ctl {
  display: grid;
  gap: 16px;
}

.dd__cgroup {
  display: grid;
  gap: 8px;
}

.dd__cgroup[hidden] {
  display: none;
}

.dd__cgroup > .cl__glabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.dd__rangerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.dd__rangerow .dd__ranges {
  flex: 0 1 auto;
}

.dd__date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 550;
}

.dd__date[hidden] {
  display: none;
}

.dd__date input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}

.dd__date input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.dd__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Toggles are many and independent: a hairline chip whose square fills when
   the series is on, instead of the single pressed ink fill of a choice. */
.dd__toggles .chip {
  min-height: 44px;
  padding: 0 12px;
  gap: 8px;
}

.dd__toggles .chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--rule-strong);
}

.dd__toggles .chip[aria-pressed="true"] {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.dd__toggles .chip[aria-pressed="true"]::before {
  background: var(--ink);
  border-color: var(--ink);
}

.dd__ranges .chip[hidden] {
  display: none;
}

.dd__status {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ink);
}

.dd__status:empty {
  display: none;
}

/* Six monochrome line styles for several series on one chart (owner-approved,
   26 Oct 2026); each line is also named at its right end. */
.chart .s0,
.chart .s1,
.chart .s2,
.chart .s3,
.chart .s4,
.chart .s5 {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart .s0 {
  stroke: var(--chart-line);
  stroke-width: 1.6;
}

.chart .s1 {
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
}

.chart .s2 {
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-dasharray: 1 3;
  stroke-linecap: round;
}

.chart .s3 {
  stroke: var(--ink-2);
  stroke-width: 1.3;
  stroke-dasharray: 9 4;
}

.chart .s4 {
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-dasharray: 7 3 1 3;
}

.chart .s5 {
  stroke: var(--ink-3);
  stroke-width: 1;
}

.chart .chart__end {
  fill: var(--ink-2);
}

.key .key__line {
  display: inline-block;
  width: 16px;
  height: 6px;
  overflow: visible;
}

.dd__plot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.dd__plot .chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart .cross {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.chart .hover-band {
  fill: var(--ground-2);
}

.chart .cell-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.key .k-ref {
  border-top: 1px dashed var(--rule-strong);
}

.dd__read {
  min-height: 1.55em;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--ink);
}

.dd__plot--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
}

.dd__pending {
  font-size: 0.875rem;
  color: var(--ink-3);
}

.kpi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi__item {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.kpi__item:nth-child(even) {
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}

.kpi__name {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.kpi__level {
  font-size: 1.1875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.kpi__chg {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.report__src {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.chart .chart__label {
  font-size: 12px;
  fill: var(--ink-2);
}

.chart .chart__value {
  font-size: 12px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

.report__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  max-width: 44rem;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .note-list a > time {
    font-size: 0.8125rem;
  }
  .report__share .btn {
    flex: 1 1 100%;
  }
}

/* Motion components, adapted from beUI (MIT License, Copyright (c) 2026
   Saurabh Chauhan; see assets/LICENSE-beui.txt). Quiet and gated: every figure and
   label is readable at rest and without JS; motion runs only when allowed. */

/* Rolling figures (tape levels and changes, dashboard readout). */
.roll {
  --roll-h: 1.55em;
}

/* One clipped slot per character; the digit column slides inside it. */
.roll__w {
  display: inline-block;
  white-space: nowrap;
}

.roll__d,
.roll__s {
  display: inline-block;
  height: var(--roll-h);
  line-height: var(--roll-h);
  vertical-align: top;
}

.roll__d {
  position: relative;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.roll__s {
  white-space: pre;
}

.roll__col {
  display: block;
  transition: transform 640ms var(--ease-out);
  will-change: transform;
}

.roll__col > span {
  display: block;
  height: var(--roll-h);
}

.dd__read .roll__col {
  transition-duration: 420ms;
}

/* Chip groups: one ink fill glides to the pressed chip (site.js). */
.filters__glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: var(--ink);
  pointer-events: none;
  transition:
    transform 420ms var(--ease-out),
    width 420ms var(--ease-out);
}

.filters.has-glide .chip {
  position: relative;
  z-index: 1;
  transition:
    color 260ms var(--ease-out),
    border-color 160ms ease;
}

.filters.has-glide .chip[aria-pressed="true"] {
  background: transparent;
}

/* Search: header button and palette (site.js builds the palette). */
.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.search-btn[hidden] {
  display: none;
}

.search-btn .icon {
  font-size: 1.125rem;
}

.search-btn kbd {
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .search-btn:hover {
    border-color: var(--rule-strong);
    color: var(--ink);
  }
}

/* Icon only at 1100px and below, where the four menu groups leave no room for the label. */
@media (max-width: 1100px) {
  .search-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--ink);
  }
  .search-btn .icon {
    font-size: 1.25rem;
  }
  .search-btn span,
  .search-btn kbd {
    display: none;
  }
}

.pal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh var(--gutter) 16px;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.pal[hidden] {
  display: none;
}

.pal.is-open {
  opacity: 1;
}

.pal__panel {
  width: min(100%, 560px);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  transform: translateY(-8px) scale(0.985);
  transition: transform 240ms var(--ease-out);
}

.pal.is-open .pal__panel {
  transform: none;
}

.pal__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--rule);
}

.pal__field > .icon {
  flex: none;
  font-size: 1.125rem;
  color: var(--ink-3);
}

.pal__field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  outline: none;
}

.pal__field input::placeholder {
  color: var(--ink-3);
}

.pal__esc {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.pal__list {
  position: relative;
  max-height: min(56vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
}

.pal__glide {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 0;
  background: var(--ground-2);
  pointer-events: none;
  transition:
    transform 220ms var(--ease-out),
    height 220ms var(--ease-out);
}

.pal__grp {
  padding: 10px 16px 4px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.pal__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 8px;
  padding: 10px 8px;
  cursor: pointer;
}

.pal__t {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.pal__m {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.pal__empty {
  padding: 20px 16px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.pal__foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

@media (hover: none) {
  .pal__foot {
    display: none;
  }
}

html.pal-open {
  overflow: hidden;
}

/* Share a close note: the label swaps to "Link copied" and a tick draws. */
.swap {
  display: inline-grid;
}

.swap > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    opacity 220ms var(--ease-out),
    filter 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.swap__b {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
}

.swap.is-on .swap__a {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-6px);
}

.swap.is-on .swap__b {
  opacity: 1;
  filter: none;
  transform: none;
}

.swap__b .icon {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 360ms var(--ease-out) 120ms;
}

.swap.is-on .swap__b .icon {
  clip-path: inset(0 0 0 0);
}

/* Methodology questions: one open at a time (site.js). */
.acc {
  margin-top: 12px;
  border-top: 1px solid var(--rule-strong);
}

.acc__item {
  border-bottom: 1px solid var(--rule);
}

.acc__item:last-child {
  border-bottom: 0;
}

.acc__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 540;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

.acc__btn:focus-visible {
  outline-offset: 2px;
}

.acc__plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.acc__plus::before,
.acc__plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 320ms var(--ease-out);
}

.acc__plus::after {
  transform: rotate(90deg);
}

.acc__btn[aria-expanded="true"] .acc__plus::after {
  transform: none;
}

.acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 380ms var(--ease-out);
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding-bottom: 20px;
  color: var(--ink-2);
  transition:
    opacity 260ms var(--ease-out) 80ms,
    transform 260ms var(--ease-out) 80ms;
}

html.js .acc__item:not(.is-open) .acc__panel {
  grid-template-rows: 0fr;
}

html.js .acc__item:not(.is-open) .acc__panel p {
  opacity: 0;
  transform: translateY(-4px);
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .roll__col,
  .filters__glide,
  .filters.has-glide .chip,
  .pal,
  .pal__panel,
  .pal__glide,
  .swap > span,
  .swap__b .icon,
  .acc__plus::before,
  .acc__plus::after,
  .acc__panel,
  .acc__panel p {
    transition: none;
  }
  .pal__panel,
  .swap > span {
    transform: none;
  }
  .swap > span {
    filter: none;
  }
}

/* Company pages (/companies/ and /companies/<ticker>/). Owner-approved
   design, 22 Oct 2026. Charts drawn by assets/company.js. */

.chart .bar {
  fill: var(--chart-line);
}

.chart .zero-line {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.key .sw-ink {
  width: 12px;
  height: 12px;
  background: var(--chart-line);
}

.co-quote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: 18px;
}

.co-px {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 540;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.co-chg {
  font-size: 1rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.co-quote .note__meta {
  margin: 0;
}

.co .page__head .lede {
  margin-top: 16px;
}

.co-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.co-acts__status,
.co-gate__status {
  flex: 1 1 100%;
  min-height: 1.55em;
  font-size: 0.875rem;
  color: var(--ink-2);
}

@media (max-width: 520px) {
  .co-acts .btn {
    flex: 1 1 100%;
  }
}

.page__body.co__body {
  max-width: none;
}

.co__body section:first-child {
  padding-top: 0;
}

.co-chart {
  margin-top: 18px;
}

.co-read {
  min-height: 1.55em;
  font-size: 0.875rem;
}

.page__body p.co-read {
  color: var(--ink);
}

.page__body p.co-src,
.co-src {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.co-legal {
  padding-top: 28px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Cash flow model */
.co-model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .co-model {
    grid-template-columns: minmax(0, 1fr);
  }
}

.co-ctls {
  display: grid;
  gap: 6px;
  align-content: start;
}

.co-ctl {
  display: grid;
  gap: 4px;
}

.co-ctl label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.co-ctl output {
  color: var(--ink);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.co-ctl input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.co-ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rule-strong);
}

.co-ctl input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--rule-strong);
}

.co-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 22px;
  margin-top: -10px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.co-ctl input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.co-reset {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .co-reset:hover {
    border-color: var(--rule-strong);
  }
}

.co-verdict {
  display: grid;
  gap: 14px;
  align-content: start;
}

.co-v {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.co-v:last-child {
  border-bottom: 0;
}

.co-v__n {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.co-v__v {
  font-size: 1.75rem;
  font-weight: 540;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.co-v__c {
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* Memo notice */
.co-gate {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--rule-strong);
}

.page__body .co-gate p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
}

.co-gate ul {
  display: grid;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.co-gate li::before {
  content: "\2014\00a0";
}

.page__body .co-gate .co-gate__status {
  color: var(--ink-2);
  font-size: 0.875rem;
}

/* Ahead */
.co-cal {
  margin-top: 16px;
  border-top: 1px solid var(--rule-strong);
}

.co-cal li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.co-cal time {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.co-cal b {
  font-weight: 540;
}

.co-cal span {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-2);
}

@media (max-width: 520px) {
  .co-cal li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Companies index */
.co-index .filters {
  margin-top: clamp(24px, 4vw, 40px);
}

.co-tab__wrap {
  overflow-x: auto;
}

.co-tab {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
}

.co-tab th {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}

.co-tab td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  vertical-align: baseline;
}

.co-tab .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.co-tab th:last-child,
.co-tab td:last-child {
  padding-right: 0;
}

.co-tab__rank {
  width: 2.5rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.co-tab__name a {
  color: var(--ink);
  font-weight: 540;
  text-decoration: none;
}

.co-tab__name span {
  margin-left: 10px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.co-tab__sec {
  color: var(--ink-2);
}

.co-tab tbody tr {
  transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .co-tab tbody tr:hover {
    background: var(--ground-2);
  }
  .co-tab__name a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (max-width: 640px) {
  .co-tab thead {
    display: none;
  }
  .co-tab,
  .co-tab tbody {
    display: block;
  }
  .co-tab tr {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .co-tab tr[hidden] {
    display: none;
  }
  .co-tab td {
    padding: 0;
    border: 0;
  }
  .co-tab__rank {
    grid-row: span 2;
  }
  .co-tab__name {
    grid-column: 2;
  }
  .co-tab__sec {
    grid-column: 2;
    font-size: 0.8125rem;
  }
  .co-tab td.num {
    grid-column: 3;
    text-align: right;
    font-size: 0.875rem;
  }
  .co-tab td[data-label="Close"] {
    grid-row: 1;
    font-size: 0.9375rem;
  }
  .co-tab td[data-label="Day"] {
    grid-row: 2;
    color: var(--ink-2);
  }
  .co-tab td[data-label="Value"],
  .co-tab td[data-label="P/E"] {
    display: none;
  }
}

/* Company pages, second pass (owner's request, 22 Oct 2026): logo beside the
   name, where revenue goes, results over time, shareholder returns, valuation
   over time, period returns and risk. */

.co .dd__head {
  max-width: none;
}

/* The logo fills the empty right side of the head, as tall as its text. */
.co-head--logo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.co-head--logo > * {
  grid-column: 1;
}

.co-head--logo > .co-logo {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
}

/* The logo sits cut out on the page ground: no plate, trimmed to its own
   outline (company.js measures it), filling a fixed area at the right. */
.co-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: clamp(160px, 24vw, 320px);
  height: clamp(110px, 13vw, 190px);
  max-width: 100%;
}

.co-logo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.co-logo__crop {
  position: relative;
  overflow: hidden;
  flex: none;
}

.co-logo__crop img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* A one-colour logo takes the theme's ink, so a black logo stays visible on
   the dark theme and a white one on the light theme. Colour logos keep theirs. */
:root[data-theme="dark"] .co-logo--mono-dark img {
  filter: brightness(0) invert(0.92);
}

/* On the dark theme, a colour logo with black or navy lettering flips its
   lightness and keeps its hues, so the lettering turns light. */
:root[data-theme="dark"] .co-logo--dark-parts img {
  filter: invert(1) hue-rotate(180deg);
}

:root:not([data-theme="dark"]) .co-logo--mono-light img {
  filter: brightness(0);
}

@media (max-width: 760px) {
  .co-head--logo > *:not(.dd__crumbs):not(.page__title):not(.co-logo) {
    grid-column: 1 / -1;
  }
  .co-head--logo > .co-logo {
    grid-row: 1 / span 2;
    align-self: start;
    width: clamp(64px, 22vw, 112px);
    height: 64px;
  }
}

.co-lead {
  font-size: 1.0625rem;
}

.page__body p.co-lead {
  color: var(--ink);
  max-width: 44rem;
}

.chart .co-seg {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ground);
  font-variant-numeric: tabular-nums;
}

.key .sw-fill,
.key .sw-hollow {
  width: 12px;
  height: 12px;
  border: 1px solid var(--chart-line);
}

.key .sw-fill {
  background: var(--chart-fill);
}

.key .sw-hollow {
  border-style: dashed;
}

.co-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(16px, 3vw, 32px);
}

@media (max-width: 640px) {
  .co-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.co-h3 {
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.co-pair .co-chart {
  margin-top: 8px;
}

.co-ret {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
}

.co-ret th,
.co-ret td {
  padding: 12px 0 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  text-align: left;
  white-space: nowrap;
}

.co-ret thead th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom-color: var(--rule-strong);
}

.co-ret th:first-child {
  padding-left: 0;
  white-space: normal;
}

.co-ret tbody th {
  font-weight: 400;
  color: var(--ink-2);
}

.co-ret .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.co-ret__self th,
.co-ret__self td {
  font-weight: 600;
}

.co-ret tbody .co-ret__self th {
  color: var(--ink);
}

.kpi.co-risk {
  margin-top: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}

.kpi.co-risk .kpi__item {
  padding: 12px 12px 12px 0;
}

.kpi.co-risk .kpi__item + .kpi__item {
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .kpi.co-risk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi.co-risk .kpi__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Live company data (owner-approved mock, 29 Oct 2026; merged into Companies,
   30 Oct 2026): the search on /companies/, the profile of other US companies
   (/companies/live/) and the news and analysts on US company pages. The search
   field is the palette's field set on the page; the profile reuses the company
   page grid. Sections load one by one: a skeleton in ground-2 with the shape
   of what comes, then the content, or an error in ink with a way out. */
.pf-field[hidden],
.pf-list[hidden] {
  display: none;
}

.pf-field {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin-top: 28px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--rule-strong);
  background: var(--ground);
}

.pf-field > .icon {
  flex: none;
  font-size: 1.125rem;
  color: var(--ink-3);
}

.pf-field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  outline: none;
}

.pf-field input::placeholder {
  color: var(--ink-3);
}

.pf-field input::-webkit-search-cancel-button {
  display: none;
}

.pf-field:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pf-field kbd {
  padding: 0 8px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.pf-field--sm {
  flex: 1 1 220px;
  max-width: 280px;
  margin: 0;
}

.pf-field--sm input {
  height: 40px;
  font-size: 0.9375rem;
}

.pf-list {
  max-width: 640px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid var(--rule-strong);
  border-top: 0;
}

.pf-list a {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 16px;
  color: var(--ink);
  text-decoration: none;
}

.pf-list li[aria-selected="true"] a,
.pf-list a:hover {
  background: var(--ground-2);
}

.pf-list b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pf-list span {
  font-size: 0.9375rem;
}

.pf-status {
  max-width: 640px;
  min-height: 1.55em;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.pf-headrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pf-headrow .dd__crumbs {
  margin: 0;
}

.pf .co-quote {
  display: block;
}

.pf .co-quote .pf-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin: 0;
}

.pf-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .pf-live::before {
    animation: pf-blink 2s var(--ease-in-out) infinite;
  }
}

@keyframes pf-blink {
  50% {
    opacity: 0.25;
  }
}

.pf-subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  margin-top: 28px;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.pf-subnav ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.pf-subnav a {
  display: block;
  padding: 12px 0 10px;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
}

.pf-subnav a[aria-current="true"] {
  color: var(--ink);
  border-color: var(--ink);
}

.pf .pf-subnav a[hidden],
.pf section[hidden] {
  display: none;
}

.pf-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 32px;
  margin: 20px 0 0;
  border-top: 1px solid var(--rule);
}

.pf-facts div {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.pf-facts dt {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.pf-facts dd {
  margin: 2px 0 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.key .k-dot {
  border-top: 2px dotted var(--chart-line);
}

.pf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.pf-scroll {
  margin-top: 18px;
  overflow-x: auto;
}

.pf-tab {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pf-tab th,
.pf-tab td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
}

.pf-tab th:first-child,
.pf-tab td:first-child {
  padding-left: 0;
  text-align: left;
}

.pf-tab thead th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}

.pf-tab tbody th {
  font-weight: 450;
}

.pf-tab .pf-self th,
.pf-tab .pf-self td {
  font-weight: 600;
}

.pf-tab tbody tr:hover {
  background: var(--ground-2);
}

.pf-tab .pf-sub th {
  padding-left: 14px;
  color: var(--ink-2);
}

.pf-tab .pf-tk {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-3);
}

.pf-scroll--sticky th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-right: 16px;
  background: var(--ground);
}

.pf-scroll--sticky tbody tr:hover th:first-child {
  background: var(--ground-2);
}

.pf-news {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.pf-news li {
  border-bottom: 1px solid var(--rule);
}

.pf-news a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  padding: 14px 0;
  color: var(--ink);
  text-decoration: none;
}

.pf-news a:hover .pf-news__t {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-news__t {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.pf-news__m {
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--ink-3);
}

.pf-news .icon {
  display: inline-block;
  vertical-align: -0.125em;
  font-size: 0.9rem;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .pf-news a {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Analyst view: ink steps, never red or green (not a rise or a fall). */
.pf-bar {
  display: flex;
  gap: 2px;
  height: 28px;
  margin-top: 18px;
}

.pf-bar i {
  display: block;
  height: 100%;
}

.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.pf-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
}

.pf-legend b {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pf-an-1 { background: var(--ink); }
.pf-an-2 { background: var(--ink-2); }
.pf-an-3 { background: var(--ink-3); opacity: 0.6; }
.pf-an-4 { background: var(--rule-strong); opacity: 0.35; }
.pf-an-5 { background: var(--rule); }

.pf-outline {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.pf-outline li {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-3);
}

.co-gate .pf-outline li::before {
  content: none;
}

/* Loading, content, error: one state per part (data-st on the part). */
.pf-sk,
.pf-err {
  display: none;
}

[data-part][data-st="loading"] > .pf-ok,
[data-part][data-st="error"] > .pf-ok {
  display: none;
}

[data-part][data-st="loading"] > .pf-sk,
[data-part][data-st="error"] > .pf-err {
  display: block;
}

.sk {
  display: block;
  background: var(--ground-2);
}

@media (prefers-reduced-motion: no-preference) {
  .sk {
    animation: pf-sk 1.6s var(--ease-in-out) infinite;
  }
}

@keyframes pf-sk {
  50% {
    opacity: 0.5;
  }
}

.sk--line,
.sk--line-long,
.sk--line-short {
  height: 12px;
  margin-top: 12px;
}

.sk--line-long {
  width: 80%;
}

.sk--line-short {
  width: 45%;
}

.sk--price {
  width: 220px;
  max-width: 60%;
  height: 36px;
}

.sk--chart {
  height: 220px;
  margin-top: 18px;
}

.sk--block {
  height: 96px;
  margin-top: 18px;
}

.sk--row {
  height: 40px;
  margin-top: 2px;
}

.sk--bar {
  height: 28px;
  margin-top: 18px;
}

.pf-errbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--rule-strong);
}

.pf-errbox .icon {
  margin-top: 2px;
  font-size: 1.125rem;
}

.page__body .pf-errbox p,
.pf-errbox p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
}

.pf-errbox small {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.pf-errbox .btn {
  grid-column: 2;
  justify-self: start;
  margin-top: 10px;
}

.pf-side-err {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.pf .co-quote .note__meta {
  display: inline;
}

.pf-headrow {
  margin-bottom: 8px;
}

/* Companies index: the search above the filters, other US companies below it. */
.co-index__search {
  margin-top: 32px;
}

.co-index .pf-status:empty {
  display: none;
}

.pf-more {
  max-width: 640px;
  margin-top: 16px;
}

.pf-more[hidden] {
  display: none;
}

.pf-more__h {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--ink-3);
}

.pf-more .pf-list {
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--rule-strong);
}

/* Footer: the legal line links to the legal notice. */
.foot__legal a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .foot__legal a:hover {
    color: var(--ink);
  }
}

/* Research Library (DESIGN.md: Research Library, owner-approved mock,
   30 Oct 2026): the latest weekly review leads, earlier issues in a hairline
   lattice, research in a ruled list. Without JS the search cannot work, so
   the tools stay hidden and everything shows. */
html:not(.js) .lib-tools,
html:not(.js) .ip-filters {
  display: none;
}

.lib-count {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.lib-count a {
  color: var(--ink);
}

.lib-lead {
  margin-top: clamp(48px, 7vw, 88px);
  align-items: end;
}

.lib-lead__main {
  grid-column: 1 / span 7;
}

.lib-lead__kicker {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.lib-lead__title {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lib-lead__title a {
  text-decoration: none;
}

.lib-lead .lede {
  margin-top: 20px;
  max-width: 38rem;
}

.lib-lead .note__meta {
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.lib-lead__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.lib-lead__toc {
  grid-column: 9 / -1;
}

.lib-lead__toc h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.lib-lead__toc li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.lib-lead__toc li span {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.lib-lead--empty {
  display: block;
  max-width: 44rem;
}

.lib__none {
  padding: 20px 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.lib-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(40px, 6vw, 64px);
}

.lib-tools .pf-field {
  flex: 1 1 320px;
  max-width: 420px;
  margin: 0;
}

.lib-tools .pf-field input {
  height: 48px;
}

.lib-tools .filters {
  min-width: 0;
  margin-inline: 0;
  padding-inline: 0;
}

.lib__status:empty {
  display: none;
}

.lib-sec {
  margin-top: clamp(56px, 8vw, 104px);
}

.lib-sec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-strong);
}

.lib-sec__head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.03em;
}

.lib-sec__head p {
  font-size: 0.875rem;
  color: var(--ink-2);
}

.lib-issues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--rule);
}

.lib-issue {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.lib-issue a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: clamp(18px, 2vw, 28px);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.lib-issue .icon {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  font-size: 1.125rem;
  opacity: 0;
  transition: opacity 200ms ease;
}

.lib-issue__n {
  font-size: 2.5rem;
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.lib-issue__d {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.lib-issue__t {
  font-size: 1.125rem;
  font-weight: 540;
  letter-spacing: -0.015em;
}

.lib-issue__s {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.lib-issue__f {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.lib-res a {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 20px;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.lib-res__topic {
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-2);
}

.lib-res__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 48rem;
}

.lib-res__t {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.lib-res__s {
  color: var(--ink-2);
}

.lib-res__m {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.lib-res .icon {
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lib-issue a:hover {
    background: var(--ground-2);
  }
  .lib-issue a:hover .icon {
    opacity: 1;
  }
  .lib-res a:hover .lib-res__t,
  .lib-lead__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .lib-res a:hover .icon {
    transform: translateX(4px);
  }
}

[data-lib-item][hidden],
.ip .acc__item[hidden] {
  display: none;
}

.lib__empty {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.lib__empty[hidden] {
  display: none;
}

.lib__empty .link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 960px) {
  .lib-lead__main,
  .lib-lead__toc {
    grid-column: 1 / -1;
  }
  .lib-lead__toc {
    margin-top: 40px;
  }
  .lib-issues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lib-issues {
    grid-template-columns: minmax(0, 1fr);
  }
  .lib-tools .filters {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .lib-res a {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 8px 12px;
  }
  .lib-res__topic {
    grid-column: 1;
  }
  .lib-res__body {
    grid-column: 1;
    grid-row: 2;
  }
  .lib-res .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* The PDF download, locked until the paid tier opens: it says so when pressed. */
.lib-pdf[aria-disabled="true"] {
  color: var(--ink-2);
  cursor: not-allowed;
}

.lib-pdf[aria-disabled="true"]:active {
  transform: none;
}

.lib-pdf__tag {
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--ink-3);
}

.page__body p.lib-src {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Markets Interview Prep (DESIGN.md: Interview Prep) */
.ip .page__body .note__meta {
  flex-wrap: wrap;
  gap: 4px 20px;
}

.ip-week {
  margin-top: 20px;
  border-top: 1px solid var(--rule-strong);
}

.ip-topic {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.ip-topic:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ip-topic__n {
  padding-top: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.ip-topic h3 {
  font-size: 1.125rem;
  font-weight: 540;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ip-topic__parts dt {
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ip-topic__parts dd {
  margin: 4px 0 0;
  max-width: 65ch;
  color: var(--ink-2);
}

.page__body p.ip-topic__src {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.ip-filters {
  margin-top: 20px;
}

/* Six subjects wrap inside the text column; on a phone they scroll. */
@media (min-width: 641px) {
  .ip-filters .filters {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.ip-filters .filters__status {
  margin: 12px 0 0;
}

.ip-q__cat {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--ink-3);
}

.ip .acc__panel p {
  padding-bottom: 12px;
}

.ip .acc__panel .ruled {
  margin: 0 0 12px;
}

.ip .acc__panel p.ip-follow {
  padding-bottom: 20px;
}

.ip-follow b {
  font-weight: 600;
  color: var(--ink);
}

/* Data sources */
.src-list {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
}

.src-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.src-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.src-list h3 {
  font-size: 1.0625rem;
  font-weight: 540;
  letter-spacing: -0.01em;
}

.src-meta {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.875rem;
}

.src-meta dt {
  color: var(--ink-3);
}

.src-meta dd {
  margin: 0;
  color: var(--ink-2);
}

/* Legal notice and privacy: contents, then the sections. */
.legal__toc {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.page__body .legal__toc h2 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

.legal__toc ol {
  margin-top: 12px;
  padding-left: 1.5em;
  list-style: decimal;
  columns: 2;
  column-gap: 32px;
  font-size: 0.9375rem;
}

.legal__toc li {
  padding: 4px 0;
  break-inside: avoid;
  color: var(--ink-3);
}

.legal__toc a {
  color: var(--ink-2);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .legal__toc a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

@media (max-width: 640px) {
  .legal__toc ol {
    columns: 1;
  }
}

.page__body p.legal__updated {
  padding-top: 28px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* Fed & Rates (fed-rates/): the dashboard page grid with one panel per topic,
   a ruled stack beside the sticky Latest panel (DESIGN.md, Fed & Rates). */
.fr__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.fr__range { margin-bottom: 8px; }
.fr__panel {
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--rule-strong);
}
.fr__ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fr__ph h2 {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}
.fr__intro {
  margin-top: 6px;
  max-width: 60ch;
  color: var(--ink-2);
}
.fr__panel > .dd__ctl { margin-top: 20px; }
.fr__fig { margin-top: 20px; }
.fr__src {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.fr__save .icon { width: 1.05em; height: 1.05em; }
@media (max-width: 520px) {
  .fr__save span { display: none; }
  .fr__save { padding: 0 12px; }
}

.fr__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.fr__now {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.fr__big {
  display: block;
  margin-top: 4px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.03em;
}
.fr__sub {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.fr__next { padding-left: 24px; border-left: 1px solid var(--rule); }
.fr__cd {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
.fr__cd span { display: grid; }
.fr__cd b {
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fr__cd i {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.fr__meet {
  margin-top: 28px;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.fr__meet li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.fr__meet li > span:last-child { color: var(--ink-3); font-size: 0.875rem; }
.fr__meet .is-past { color: var(--ink-3); }
.fr__meet .is-next { font-weight: 600; }
.fr__meet .is-next > span:last-child { color: var(--ink); }
@media (max-width: 640px) {
  .fr__now { grid-template-columns: 1fr; }
  .fr__next { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

.fr__probs { margin-top: 24px; }
.fr__probs ul { list-style: none; margin-top: 8px; }
.fr__probs li {
  display: grid;
  grid-template-columns: 7rem 1fr 3.5rem;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.fr-p__bar { height: 12px; background: var(--ground-2); }
.fr-p__bar i { display: block; height: 100%; background: var(--ink); transition: width 600ms var(--ease-out); }
.fr-p__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

.chart .fr-band { fill: var(--chart-fill); }
.key .fr-sw-band { width: 12px; height: 12px; background: var(--chart-fill); outline: 1px solid var(--rule); }
.fr__plot svg { touch-action: pan-y; }
.chart .fr-intra { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.key .fr-sw-intra { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; }
.fr__pending { color: var(--ink-3); font-size: 1rem; }
.fr__save:disabled { opacity: 0.5; cursor: progress; }

.fr__chg { margin-top: 16px; overflow-x: auto; }
.fr-tab {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.fr-tab caption {
  text-align: left;
  padding-bottom: 6px;
  color: var(--ink-3);
}
.fr-tab th, .fr-tab td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  font-weight: 450;
}
.fr-tab thead th { color: var(--ink-2); border-bottom-color: var(--rule-strong); }
.fr-tab th[scope="row"], .fr-tab thead th:first-child { text-align: left; color: var(--ink-2); }
.fr-tab .mv--up { color: var(--up-text); }
.fr-tab .mv--down { color: var(--down-text); }
.fr__side .kpi__level .ph { color: var(--ink-3); }

/* Break into Wall Street (break-into-wall-street/): an inner page with a full-width timeline,
   sample CV and visa grid between 44rem text sections. */
.pw-toc {
  max-width: 44rem;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--rule);
}
.pw-toc h2 { font-size: 0.875rem; font-weight: 600; }
.pw-toc ol {
  margin-top: 10px;
  columns: 2;
  column-gap: 32px;
  padding-left: 1.4em;
  font-size: 0.9375rem;
}
.pw-toc li { padding: 3px 0; color: var(--ink-3); }
.pw-toc a { color: var(--ink-2); }
@media (max-width: 640px) { .pw-toc ol { columns: 1; } }

.pw-lab { margin-top: 18px !important; font-size: 0.8125rem; font-weight: 600; color: var(--ink) !important; }
.pw-day { margin-top: 6px; }

.pw-visa {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.pw-visa h2 { font-size: 1.375rem; font-weight: 540; letter-spacing: -0.02em; }
.pw-time__lede { margin-top: 8px; max-width: 65ch; color: var(--ink-2); }

html:not(.js) .pw-js { display: none; }

.pw-cv { margin: 24px 0 8px; max-width: 52rem; }
.cv {
  padding: clamp(20px, 4vw, 44px) clamp(18px, 4vw, 48px);
  border: 1px solid var(--rule-strong);
  background: var(--ground);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.cv__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; text-align: center; }
.cv__contact { margin-top: 2px; text-align: center; color: var(--ink-2); }
.cv__sec { margin-top: 16px; }
.cv__sec h4 {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cv__row { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; }
.cv__row b { font-weight: 600; }
.cv__row > span { color: var(--ink-2); white-space: nowrap; }
.cv__sub { margin-top: 0; font-style: normal; }
.cv__sub > span:first-child { color: var(--ink); white-space: normal; }
.cv ul { margin-top: 2px; padding-left: 1.1em; color: var(--ink-2); }
@media (max-width: 640px) { .cv__row { flex-direction: column; gap: 0; } .cv__row > span { white-space: normal; } }

.pw-tpl__ctl { margin-top: 20px; }
.pw-tpls { margin-top: 14px; border-top: 1px solid var(--rule-strong); }
.pw-tpl__subj { padding: 12px 0 10px; border-bottom: 1px solid var(--rule); font-weight: 500; color: var(--ink) !important; margin: 0 !important; }
.pw-tpl__subj span { margin-right: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.pw-tpl pre {
  margin: 0;
  padding: 14px 0 18px;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.pw-copy__st { margin-left: 12px; font-size: 0.875rem; color: var(--ink-2); }

.pw-rows { list-style: none; margin-top: 14px; border-top: 1px solid var(--rule-strong); }
.pw-rows a {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.pw-row__t { font-weight: 550; }
.pw-row__d { color: var(--ink-2); font-size: 0.9375rem; }
.pw-rows .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pw-rows a:hover .icon { transform: translateX(3px); } }
@media (max-width: 640px) { .pw-rows a { grid-template-columns: 1fr auto; } .pw-row__d { grid-column: 1; } }

.pw-visa__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid var(--rule-strong);
}
.pw-visa__col { padding: 18px 24px 8px 0; }
.pw-visa__col + .pw-visa__col { padding-left: 24px; border-left: 1px solid var(--rule); }
.pw-visa__col h3 { font-size: 1.0625rem; font-weight: 600; }
.pw-visa__col ul { list-style: none; margin-top: 8px; }
.pw-visa__col li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pw-visa__col li:last-child { border-bottom: 0; }
.pw-visa__col p, .pw-res p { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
@media (max-width: 960px) {
  .pw-visa__grid { grid-template-columns: 1fr; }
  .pw-visa__col + .pw-visa__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}
.pw-ext {
  font-weight: 550;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.pw-cert { list-style: none; margin-top: 14px; border-top: 1px solid var(--rule-strong); }
.pw-cert li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pw-cert__by { margin-left: 10px; font-size: 0.8125rem; color: var(--ink-3); }
.pw-cert dl { display: grid; grid-template-columns: 5.5rem 1fr; gap: 4px 12px; margin-top: 8px; font-size: 0.875rem; }
.pw-cert dt { color: var(--ink-3); }
.pw-cert dd { color: var(--ink-2); }

.pw-res { margin-top: 8px; }
.pw-res__g { padding-top: 16px; }
.pw-res__g h3 { font-size: 0.9375rem; font-weight: 600; }
.pw-res__g ul { list-style: none; margin-top: 6px; border-top: 1px solid var(--rule); }
.pw-res__g li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.pw-res__g b { font-weight: 550; }

/* Simulators (owner-approved, 30 Oct 2026; leaner layout approved the same
   day): the section index, the four simulator pages and the homepage block.
   The horse sits still behind the game chart. */
.sim-page {
  padding-top: calc(var(--nav-h) + 32px);
  padding-bottom: var(--section);
}

.sim-page [hidden] {
  display: none !important;
}

.sim-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}

.sim-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.sim-title:focus {
  outline: none;
}

.sim-tag {
  font-size: 0.875rem;
  color: var(--ink-2);
}

.sim-top {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-top: 20px;
}

.sim-gap > span {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.035em;
}

.sim-gap small,
.sim-month small {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.sim-month {
  font-size: 0.9375rem;
  font-weight: 550;
  text-align: right;
}

.sim-month small {
  font-weight: 400;
  color: var(--ink-3);
}

.sim-stage {
  position: relative;
  height: clamp(300px, 50vh, 500px);
  margin-top: 16px;
  isolation: isolate;
  background: var(--ground);
}

.sim-horse {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* The blend sits on the layer, which blends with the chart's ground; on
     the image it would only blend inside this layer and show its box. */
  mix-blend-mode: var(--horse-blend);
}

.sim-horse img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: 175%;
  transform: translate(-50%, -48%);
  filter: var(--horse-filter);
  opacity: 0.13;
}

[data-theme="dark"] .sim-horse img {
  opacity: 0.3;
}

.sim-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sim-svg path {
  fill: none;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sim-svg .sim-in {
  stroke: var(--chart-line);
  stroke-width: 2.6;
}

.sim-svg .sim-out {
  stroke: var(--chart-line);
  stroke-width: 1.2;
}

.sim-svg .sim-idx {
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
}

.sim-svg .sim-grid {
  stroke: var(--chart-grid);
  vector-effect: non-scaling-stroke;
}

.sim-svg .sim-now {
  stroke: var(--rule-strong);
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.sim-svg .sim-cash {
  fill: var(--chart-fill);
}

.sim-ylabs span {
  position: absolute;
  left: 0;
  transform: translateY(-120%);
  font-size: 0.75rem;
  color: var(--ink-3);
  pointer-events: none;
}

.sim-bandlab {
  position: absolute;
  top: 6px;
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--ink-2);
  pointer-events: none;
}

.sim-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--chart-line);
}

.sim-dot--out {
  background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--chart-line);
}

.sim-label {
  position: absolute;
  margin-left: 12px;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--ink-3);
  pointer-events: none;
}

.sim-label--left {
  margin-left: -12px;
  transform: translate(-100%, -50%);
}

.sim-label--you {
  color: var(--ink-2);
}

.sim-label--you b {
  margin-right: 4px;
  font-weight: 600;
  color: var(--ink);
}

.sim-intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
}

.sim-intro > div {
  max-width: 34rem;
  padding: clamp(20px, 3vw, 32px);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
}

.sim-intro h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.sim-intro p {
  margin-top: 12px;
  color: var(--ink-2);
}

.sim-intro .filters {
  justify-content: center;
  margin-top: 16px;
}

.sim-intro .filters + .filters {
  margin-top: 8px;
}

.sim-intro .chip {
  height: 40px;
  padding: 0 12px;
}

.sim-start {
  min-width: 12rem;
  margin-top: 20px;
}

.sim-intro .sim-intro__note {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.sim-ribbon {
  position: relative;
  height: 10px;
  margin-top: 10px;
}

.sim-ribbon i {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--ink);
}

.sim-ribbon i.sim-r-out {
  top: 4px;
  height: 2px;
  background: var(--ink-3);
}

.sim-key {
  margin-top: 10px;
}

.key .sim-k-in,
.key .sim-k-out {
  width: 16px;
  border-top: 2.6px solid var(--chart-line);
}

.key .sim-k-out {
  border-top-width: 1.2px;
}

.sim-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-top: 24px;
}

.btn.sim-go {
  justify-content: space-between;
  min-height: 72px;
  padding: 0 28px;
  font-size: 1.125rem;
}

.sim-go kbd {
  padding: 2px 8px;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.7;
}

.btn.sim-sq {
  min-width: 72px;
  min-height: 72px;
  padding: 0;
}

.sim-sq .icon {
  font-size: 1.125rem;
}

.sim-more {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sim-more summary {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 1.0625rem;
  font-weight: 540;
  list-style: none;
  cursor: pointer;
}

.sim-more summary::-webkit-details-marker {
  display: none;
}

.sim-more summary::after {
  content: "+";
  font-weight: 400;
}

.sim-more[open] summary::after {
  content: "\2212";
}

.sim-more > div {
  max-width: 65ch;
  padding-bottom: 20px;
}

.sim-more p {
  color: var(--ink-2);
}

.sim-more p + p {
  margin-top: 12px;
}

.sim-panel {
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--ground-2);
}

.sim-pending {
  margin-top: 24px;
}

/* End screens */
.sim-v {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding: 28px 0 32px;
}

.sim-word {
  font-size: clamp(4rem, 11vw, 8.5rem);
  font-weight: 560;
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.sim-word--long {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.sim-r p + p {
  margin-top: 12px;
}

.sim-sub {
  max-width: 36ch;
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--ink-2);
}

.sim-act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.sim-v .sim-stage {
  height: 240px;
  margin: 0;
}

.sim-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-bottom: 32px;
}

.sim-card {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  outline: 1px solid var(--rule);
}

.sim-text {
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.sim-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sim-status {
  min-height: 1.55em;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.sim-r {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 32px 0;
  border-top: 1px solid var(--rule-strong);
}

.sim-r h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.sim-r p {
  max-width: 60ch;
  color: var(--ink-2);
}

.sim-links {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 16px;
}

.sim-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.sim-line b {
  font-weight: 550;
  color: var(--ink);
}

.sim-games {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
}

.sim-games th {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: var(--ink-3);
}

.sim-games td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--rule);
}

.sim-rec {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.sim-src {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Guess the Fed */
.fed-intro {
  margin-top: 24px;
  text-align: center;
}

.fed-intro h2,
.fed-ans h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.fed-intro p {
  max-width: 34rem;
  margin: 12px auto 0;
  color: var(--ink-2);
}

.fed-intro .filters {
  justify-content: center;
  margin-top: 18px;
}

.fed-intro .btn {
  min-width: 12rem;
  margin-top: 16px;
}

.fed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--rule-strong);
}

.fed-grid > div {
  padding: 16px 16px 18px 0;
  border-bottom: 1px solid var(--rule);
}

.fed-grid > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.fed-grid span {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.fed-grid b {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 540;
  letter-spacing: -0.03em;
}

.fed-grid em {
  display: block;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--ink-3);
}

.fed-grid svg {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 8px;
}

.fed-grid path {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.fed-q {
  margin-top: 36px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.028em;
}

.fed-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.fed-btns .btn {
  min-height: 72px;
  font-size: 1.125rem;
}

.fed-btns .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ground);
}

.fed-ans {
  margin-top: 24px;
}

.fed-ans .sim-tag {
  margin-bottom: 8px;
}

.fed-ans p {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--ink-2);
}

.fed-ans .btn {
  margin-top: 20px;
}

/* Portfolio Builder */
.pb {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: 24px;
}

.pb-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.pb-row:first-child {
  border-top: 1px solid var(--rule-strong);
}

.pb-row label,
.pb-row--cash {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9375rem;
  font-weight: 550;
}

.pb-row b {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.pb-row input {
  width: 100%;
  margin-top: 10px;
  accent-color: var(--ink);
}

.pb-lab {
  margin-top: 18px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.pb .filters {
  margin-top: 8px;
}

.pb-form .btn {
  width: 100%;
  margin-top: 20px;
}

.pb-form .pb-new {
  margin-top: 8px;
}

.pb-chart {
  position: relative;
  height: clamp(280px, 40vh, 400px);
}

.pb-chart .sim-you {
  stroke: var(--chart-line);
  stroke-width: 2;
}

.pb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

.pb-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
  border-top: 1px solid var(--rule-strong);
}

.pb-figs > div {
  padding: 12px 16px 12px 0;
}

.pb-figs > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.pb-figs > div > span:first-child {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.pb-figs b {
  font-size: 1.25rem;
  font-weight: 540;
}

.pb-reveal {
  margin-top: 20px;
}

.pb-reveal h2 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: -0.024em;
}

.pb-reveal p {
  margin-top: 10px;
  color: var(--ink-2);
}

/* Homepage block */
.sim-home {
  border-top: 1px solid var(--rule);
}

.sim-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.sim-home .lede {
  margin-top: 16px;
}

.sim-home__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.sim-home__meta {
  max-width: 40ch;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.sim-home__art {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sim-home__art .sim-stage {
  height: clamp(260px, 34vw, 420px);
  margin: 0;
}

@media (max-width: 960px) {
  .sim-home__grid,
  .sim-v,
  .sim-r,
  .pb {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sim-share {
    grid-template-columns: 1fr;
  }

  .fed-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fed-grid > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .sim-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .sim-stage {
    height: 320px;
  }

  .btn.sim-sq {
    min-width: 56px;
  }

  .btn.sim-go {
    padding: 0 18px;
  }

  .sim-go kbd {
    display: none;
  }

  .fed-btns .btn {
    min-height: 60px;
  }

  .pb-figs {
    grid-template-columns: 1fr 1fr;
  }

  .pb-figs > div:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
}

/* Technical preparation (break-into-wall-street/technicals/<topic>/): topic tabs,
   numbered essentials, a worked example table, the practice card and, on
   Brainteasers, the mental maths drill. */
.tq-topics { margin-top: 8px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tq-topics ol { display: flex; gap: 22px; list-style: none; white-space: nowrap; }
.tq-topics a { display: inline-block; padding: 14px 0 12px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 160ms ease; }
.tq-topics a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tq-topics a:hover { color: var(--ink); } }

.tq-know { list-style: none; counter-reset: k; margin-top: 14px; border-top: 1px solid var(--rule-strong); }
.tq-know li { counter-increment: k; display: grid; grid-template-columns: 2.5rem 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tq-know li::before { content: counter(k, decimal-leading-zero); grid-row: 1 / span 2; font-size: 0.875rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tq-know b { font-size: 1.0625rem; font-weight: 540; }
.page__body .tq-know p { margin-top: 4px; }

.tq-ex__title { margin-top: 10px !important; font-weight: 600; color: var(--ink) !important; }
.tq-ex__wrap { overflow-x: auto; }
.tq-ex { width: 100%; min-width: 30rem; margin-top: 16px; border-collapse: collapse; font-size: 0.9375rem; }
.tq-ex thead th { padding: 8px 0; border-bottom: 1px solid var(--rule-strong); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); text-align: left; }
.tq-ex thead th:last-child, .tq-ex__n { text-align: right; }
.tq-ex th[scope="row"] { font-weight: 600; font-size: 0.875rem; text-align: left; vertical-align: top; width: 34%; }
.tq-ex td, .tq-ex th[scope="row"] { padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.tq-ex th[scope="row"] { color: var(--ink); }
.tq-ex__n { font-variant-numeric: tabular-nums; color: var(--ink) !important; font-weight: 500; }
.tq-ex__first th, .tq-ex__first td { border-top: 1px solid var(--rule-strong); }
.tq-ex__note { font-size: 0.9375rem; }

.tq-practice, .tq-drill { padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.tq-practice h2, .tq-drill h2 { font-size: 1.375rem; font-weight: 540; letter-spacing: -0.02em; }
.tq-sub { margin-top: 8px; max-width: 65ch; color: var(--ink-2); }
.tq-practice .dd__ctl, .tq-drill .dd__ctl { margin-top: 20px; }
html.js .tq-nojs, html:not(.js) .tq-js { display: none; }
.tq-nojs { max-width: 44rem; margin-top: 16px; padding-left: 1.4em; color: var(--ink-2); }
.tq-nojs li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tq-nq { color: var(--ink); font-weight: 540; }

.tq-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; max-width: 52rem; }
.tq-prog__txt { font-size: 0.875rem; color: var(--ink-2); }
.tq-prog__bar { flex: 1 1 160px; height: 4px; background: var(--ground-2); }
.tq-prog__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 320ms var(--ease-out); }
.tq-reset { border: 0; background: none; padding: 8px 0; font: inherit; font-size: 0.875rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; cursor: pointer; }

.tq-card { max-width: 52rem; margin-top: 14px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--rule-strong); }
.tq-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.8125rem; color: var(--ink-3); }
.tq-card__q { margin-top: 14px; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 540; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.tq-card__a { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); max-width: 65ch; }
.tq-card__a p + p { margin-top: 10px; }
.tq-card__a .ip-follow { margin-top: 14px; }
.tq-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.tq-card__nav { margin-left: auto; display: flex; gap: 4px; }
.tq-nav { min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 550; color: var(--ink-2); cursor: pointer; }
.tq-nav:disabled { color: var(--ink-3); opacity: 0.5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .tq-nav:not(:disabled):hover { color: var(--ink); } }

.tq-md { max-width: 52rem; margin-top: 18px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--rule-strong); }
.tq-md__bar { display: flex; gap: 24px; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tq-md__bar b { color: var(--ink); font-weight: 600; }
.tq-md__time { color: var(--ink); font-weight: 600; }
.tq-md__q { margin-top: 18px; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 540; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.05; min-height: 1.1em; }
.tq-md__form { display: flex; gap: 10px; margin-top: 20px; }
.tq-md__form input { width: min(14rem, 100%); min-height: 48px; padding: 0 14px; border: 1px solid var(--rule-strong); background: var(--ground); color: var(--ink); font: inherit; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tq-md__form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tq-md__log { margin-top: 12px; min-height: 1.5em; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tq-pager { margin-top: 32px; }

/* Recruiting calendar (recruiting-calendar/; the guide showed its next dates until
   1 Nov 2026): the calendar table's shape, plus a by-firm table. */
.rc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rc-when { font-weight: 600; }
.rc-when--ex { font-weight: 500; color: var(--ink-2); }
.rc-soon { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.rc-what { font-size: 0.875rem; font-weight: 600; }
.rc-what--close { font-weight: 600; }
.rc-sub { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.rc-apply { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 550; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; white-space: nowrap; }
.rc-firmtab { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rc-firmtab th, .rc-firmtab td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.rc-firmtab thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); border-bottom-color: var(--rule-strong); }
.rc-firmtab td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rc-firmtab th[scope="row"] { font-weight: 540; }
.rc-basis { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); max-width: 60ch; }
.rc-byfirm { margin-top: 24px; overflow-x: auto; }
.rc-firmtab { min-width: 44rem; }
.rc-soon:empty { display: none; }
@media (max-width: 640px) {
  .rc-table .rc-divs, .rc-table .rc-cycle { display: none; }
}
.rc-tags .tag { font-weight: 400; }


/* ==== Chart of the day (chart-of-the-day/) ==== */

/* One session: its date with the previous and next sessions, the note's own margin
   chart in a ruled card (the close note's bar and curve charts, sized so their 12-unit
   labels read at about 16px), two lines, the note link and Share, the source. */
.cotd__day {
  max-width: 30rem;
  margin-top: clamp(32px, 5vw, 48px);
}

.cotd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cotd__date {
  font-size: 1.1875rem;
  font-weight: 540;
  letter-spacing: -0.015em;
}

.cotd__nav {
  display: flex;
  gap: 8px;
}

.cotd__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.cotd__step .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.cotd__step--prev .icon {
  transform: rotate(90deg);
}

.cotd__step--next .icon {
  transform: rotate(-90deg);
}

span.cotd__step {
  border-color: var(--rule);
  color: var(--ink-3);
  opacity: 0.5;
}

@media (hover: hover) and (pointer: fine) {
  a.cotd__step:hover {
    background: var(--ink);
    color: var(--ground);
  }
}

.cotd .report__margin.cotd__fig {
  margin: 16px 0 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--rule-strong);
}

.cotd__ctitle {
  margin-bottom: 16px;
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.cotd__read {
  margin-top: 20px;
  font-size: 1.0625rem;
}

.cotd__quote {
  margin: 12px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--rule-strong);
}

.cotd__quote p {
  color: var(--ink-2);
}

.cotd__quote footer {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.cotd__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}

.cotd__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.cotd__share[hidden] {
  display: none;
}

.cotd__src {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.cotd__lead {
  margin-left: 8px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-2);
}

.cotd__lead .mv {
  font-variant-numeric: tabular-nums;
}

.cotd__empty {
  margin-top: 32px;
  color: var(--ink-2);
}

.cotd__text {
  margin-top: clamp(40px, 6vw, 64px);
}

.cotd .report__pager {
  margin-top: 32px;
}

@media (max-width: 960px) {
  .cotd .report__margin.cotd__fig {
    padding: 20px;
    border-bottom: 1px solid var(--rule-strong);
  }
}

@media (max-width: 640px) {
  .cotd__share,
  .cotd__share .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cotd__step {
    transition: none;
  }
}

/* ==== end Chart of the day ==== */


/* ==== Central banks (central-banks/) ==== */
/* The Fed & Rates grid and panels (.dd, .fr), with one ruled table on top: the
   four banks here, the five indicators on Recession watch (which reuses .cb-tab).
   The first panel sits right under the head's rule, so it drops its own. */
.cb .fr__main > .fr__panel:first-child,
.rw .fr__main > .fr__panel:first-child { border-top: 0; padding-top: 0; }
.cb-wrap { margin-top: 20px; }
.cb-tab {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
}
.cb-tab th,
.cb-tab td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.cb-tab th:last-child,
.cb-tab td:last-child { padding-right: 0; }
.cb-tab thead th {
  padding-block: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}
.cb-tab tbody th[scope="row"] { width: 34%; font-weight: 400; }
.cb-bank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.0625rem;
  font-weight: 540;
}
a.cb-bank {
  min-height: 24px;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
}
a.cb-bank .icon { width: 0.9em; height: 0.9em; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.cb-bank:hover .icon { transform: translateX(3px); }
}
/* Proportional figures, as on the calendar: tabular points open wide gaps in this face. */
.cb-fig {
  display: block;
  font-size: 1.1875rem;
  font-weight: 500;
  white-space: nowrap;
}
.cb-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.cb-tab td .cb-sub { color: var(--ink-3); }
.cb-pending { font-size: 0.875rem; color: var(--ink-3); }
@media (max-width: 640px) {
  .cb-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cb-tab,
  .cb-tab tbody,
  .cb-tab tr { display: block; }
  .cb-tab tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--rule);
  }
  .cb-tab th,
  .cb-tab td { display: block; width: auto; padding: 0; border: 0; }
  .cb-tab tbody th[scope="row"] { grid-column: 1 / -1; width: auto; }
  .cb-tab td::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    color: var(--ink-3);
  }
  .cb-tab td[colspan] { grid-column: 1 / -1; }
}
/* ==== end Central banks ==== */


/* ==== Recession watch (recession-watch/) ==== */
/* The Fed & Rates grid and panels; the table is .cb-tab (Central banks region).
   The range chips sit between the table and the first chart. */
@media (min-width: 641px) {
  .rw-tab tbody th[scope="row"] { width: 30%; }
}
.rw-name {
  font-size: 1.0625rem;
  font-weight: 540;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
}
.rw-sig { display: block; font-weight: 500; }
.rw-date { white-space: nowrap; color: var(--ink-2); }
.rw-range { margin: 4px 0 32px; }
.rw .fr__panel .dd__ctl + .fr__fig { margin-top: 16px; }
@media (max-width: 640px) {
  .rw-tab td[data-l="Date"] { grid-column: 1 / -1; }
  .rw-date { white-space: normal; }
}
/* ==== end Recession watch ==== */


/* ==== Market history (market-history/) ==== */

/* Index: the whole history on one chart, then every episode as a ruled timeline.
   Episode pages use the dashboard page grid (.dd__grid). assets/market-history.js
   draws the charts at their pixel width inside .dd__plot. */
.mh-over,
.mh-tl {
  margin-top: clamp(40px, 6vw, 64px);
}

.mh .page__head .note__meta {
  flex-wrap: wrap;
  gap: 4px 20px;
}

.mh__h2 {
  font-size: 1.375rem;
  font-weight: 540;
  letter-spacing: -0.02em;
}

.mh-over .dd__plot {
  height: clamp(260px, 36vw, 420px);
}

.mh__plot--open {
  cursor: pointer;
}

.chart .mh-epband {
  fill: var(--chart-fill);
}

.chart .mh-tick,
.chart .mh-base {
  stroke: var(--rule);
  stroke-width: 1;
}

.chart .chart__label.mh-mark {
  fill: var(--ink);
  font-weight: 550;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.key .mh-sw {
  background: var(--down-tint);
}

.key .mh-k-ep {
  width: 12px;
  height: 12px;
  background: var(--chart-fill);
  outline: 1px solid var(--rule);
  outline-offset: -1px;
}

/* The timeline: years, name, the fall as a bar and a signed figure, arrow. */
.mh-tl__head,
.mh-tl__list a {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(64px, 10rem) 4.75rem 20px;
  gap: 16px;
  align-items: center;
}

.mh-tl__head {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.mh-tl__head span:last-child {
  grid-column: 3 / span 2;
  text-align: right;
}

.mh-tl__list a {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}

.mh-tl__years {
  font-size: 0.875rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.mh-tl__name {
  font-size: 1.0625rem;
  font-weight: 540;
  letter-spacing: -0.01em;
}

.mh-tl__bar {
  display: flex;
  justify-content: flex-end;
  height: 8px;
}

.mh-tl__bar i {
  display: block;
  height: 100%;
  background: var(--down);
}

.mh-tl__fall {
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mh-tl__fall--pending {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
}

.mh-tl__list .icon {
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mh-tl__list a:hover .mh-tl__name {
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.2em;
  }
  .mh-tl__list a:hover .icon {
    transform: translateX(4px);
  }
}

.mh__text {
  margin-top: clamp(40px, 6vw, 64px);
}

/* Episode pages */
.mh-ep .dd__text {
  margin-top: 0;
}

.mh__acts {
  margin-top: 20px;
}

.mh-rel {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.mh__pager {
  grid-column: 1 / -1;
  margin-top: 0;
}

.mh__pending {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 960px) {
  .mh-tl__head,
  .mh-tl__list a {
    grid-template-columns: 7rem minmax(0, 1fr) 4.75rem 20px;
  }
  .mh-tl__bar {
    display: none;
  }
  .mh-tl__head span:last-child {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 640px) {
  .mh-tl__head {
    display: none;
  }
  .mh-tl__list a {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    gap: 2px 12px;
    padding: 14px 0;
  }
  .mh-tl__years {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.8125rem;
  }
  .mh-tl__name {
    grid-column: 1;
    grid-row: 2;
    font-size: 1rem;
  }
  .mh-tl__fall {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .mh-tl__list .icon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-tl__list .icon {
    transition: none;
  }
}

/* ==== end Market history ==== */


/* ==== Interview simulator (interview-simulator/) ==== */
/* Built on the technicals practice card (.tq-card) and the mental maths drill's
   clock (.tq-md__time); assets/interview-sim.js fills the card. */
.isim__sim { padding: clamp(28px, 4vw, 40px) 0 32px; border-bottom: 1px solid var(--rule); }
.isim__ctl { display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 4vw, 48px); }
.isim__ctl .filters { margin-inline: 0; padding-inline: 0; }
.isim__ctl.is-locked .filters { opacity: 0.5; }
.isim__ctl.is-locked .chip { cursor: default; }
.isim__card { margin-top: 20px; }
.isim__card .tq-card__meta { gap: 6px 16px; }
.isim__time { margin-left: auto; color: var(--ink); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.isim__up { margin-left: auto; color: var(--ink); font-weight: 550; }
.isim__up:not([hidden]) + .isim__time { margin-left: 0; }
.isim__h:focus, .isim__q:focus, .isim__lab:focus { outline: none; }
.isim__h:focus-visible, .isim__q:focus-visible, .isim__lab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.isim__txt, .isim__best, .isim__resume { margin-top: 12px; max-width: 62ch; color: var(--ink-2); }
.isim__best { font-size: 0.875rem; }
.isim__resume { padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink); font-weight: 500; }
.isim__ctx { margin-top: 10px; font-size: 1.0625rem; font-weight: 540; color: var(--ink); max-width: 62ch; }
.isim__notes { margin-top: 18px; }
.isim__hint { font-size: 0.875rem; color: var(--ink-2); }
.isim__notes textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}
.isim__notes textarea::placeholder { color: var(--ink-3); opacity: 1; }
.isim__notes textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.isim__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.isim__acts > .btn:last-child { margin-left: auto; }
.isim__acts--start > .btn:last-child { margin-left: 0; }
.isim__acts .btn:disabled { opacity: 0.45; cursor: default; }
.isim__end { padding-left: 0; }
/* The answer opens under a rule across the card, as in the sketch. */
.isim__ans { margin: 24px calc(-1 * clamp(20px, 3vw, 36px)) 0; padding: 22px clamp(20px, 3vw, 36px) 0; border-top: 1px solid var(--rule-strong); }
.isim__lab { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.isim__lab--sec { margin-top: 24px; }
.isim__a { margin-top: 6px; max-width: 65ch; color: var(--ink-2); }
.isim__a p + p, .isim__a p + .ruled, .isim__a .ruled + p { margin-top: 10px; }
.isim__a .ruled { margin-top: 10px; padding-left: 1.4em; border-top: 1px solid var(--rule); }
.isim__a .ruled li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.isim__a .ip-follow { margin-top: 12px; }
.isim__src { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-3); }
.isim__kp { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.isim__kps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; list-style: none; }
.isim__kps li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 0.9375rem; }
.isim__kps .icon { flex: none; width: 1em; height: 1em; margin-top: 0.28em; fill: currentColor; }
.isim__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.isim__rbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.isim__rbtns .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.isim__ans > .isim__acts { margin-top: 24px; }
@media (hover: hover) and (pointer: fine) {
  .isim__rbtns .btn[aria-pressed="false"]:hover { background: var(--ground-2); }
  .isim__acts .btn:not(:disabled):hover .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .isim__ans { animation: isim-in 260ms var(--ease-out) both; }
  @keyframes isim-in { from { opacity: 0; transform: translateY(6px); } }
}
.isim__local { margin-top: 14px; max-width: 52rem; font-size: 0.875rem; color: var(--ink-2); }
.isim__local .tq-reset { min-height: 44px; }
.isim__nojs { padding-left: 0; color: var(--ink); }
/* Results: ratings by topic and every question asked. */
.isim-res__wrap { overflow-x: auto; }
.isim-res { width: 100%; margin-top: 8px; border-collapse: collapse; border-top: 1px solid var(--rule-strong); font-size: 0.9375rem; }
.isim-res thead th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule-strong); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
.isim-res td, .isim-res tbody th { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; text-align: left; }
.isim-res th:last-child, .isim-res td:last-child { padding-right: 0; }
.isim-res tbody th { font-weight: 540; }
.isim-res tbody th a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.isim-res tbody th .tag { margin-left: 6px; font-weight: 400; }
.isim-res tbody th > span:last-child { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.isim-res .num { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.isim-list { margin-top: 8px; padding-left: 1.6em; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.isim-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.isim-list__q { display: block; color: var(--ink); }
.isim-list__m { display: block; font-size: 0.8125rem; color: var(--ink-2); }
/* What each track covers. */
.isim-tracks { list-style: none; margin-top: 12px; border-top: 1px solid var(--rule); }
.isim-tracks li { padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.isim-tracks b { font-weight: 600; color: var(--ink); }
.isim-tracks span { color: var(--ink); }
.isim-cov__wrap { overflow-x: auto; margin-top: 16px; }
.isim-cov { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rule-strong); font-size: 0.9375rem; }
.isim-cov thead th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule-strong); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
.isim-cov td, .isim-cov tbody th { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; text-align: left; }
.isim-cov th:last-child, .isim-cov td:last-child { padding-right: 0; }
.isim-cov tbody th { font-weight: 540; }
.isim-cov tbody th a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.isim-cov tbody th span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.isim-cov .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.isim-cov__tracks { white-space: nowrap; }
.isim-cov__tracks .tag + .tag { margin-left: 6px; }
.isim-cov__none { font-size: 0.8125rem; color: var(--ink-3); }
@media (max-width: 640px) {
  .isim__acts > .btn:last-child { margin-left: 0; }
  .isim__acts:not(.isim__acts--start) { flex-direction: column-reverse; align-items: stretch; }
  .isim__acts:not(.isim__acts--start) .isim__end { align-self: flex-start; }
  .isim__rbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .isim__rbtns .btn { padding: 0 8px; }
  .isim-res .num { width: auto; padding-left: 10px; }
  .isim-res tbody th .tag { display: table; margin: 4px 0 2px; }
  .isim-cov thead th:first-child { white-space: normal; }
}
/* ==== end Interview simulator ==== */


/* ==== Firms (firms/) ==== */
/* Owner-approved sketch, 1 Nov 2026: one entry per firm of the Recruiting calendar (name
   and type, divisions and US offices), its programmes as ruled rows (name, cycle and
   offices, the calendar's tags; opens and closes; apply). The calendar's chips, tags,
   countdown and links (.cl__*, .rc-*) are reused as they are. */
.fm {
  --fm-when: 17rem;
  --fm-go: 6.5rem;
  --fm-gap: 24px;
}
.fm-list { max-width: 64rem; margin-top: clamp(24px, 4vw, 40px); }
.fm-ctl:not([hidden]) + .fm-list { margin-top: 0; }
.fm-firm { padding-top: 28px; border-top: 1px solid var(--rule-strong); }
.fm-firm[hidden], .fm-prog[hidden] { display: none; }
.fm-firm__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--fm-when) + var(--fm-gap) + var(--fm-go));
  gap: 4px var(--fm-gap);
  align-items: baseline;
}
.fm-firm__name { font-size: 1.375rem; font-weight: 540; line-height: 1.2; letter-spacing: -0.02em; }
.fm-firm__type { font-size: 0.875rem; font-weight: 550; color: var(--ink); }
.fm-firm__divs { font-size: 0.9375rem; color: var(--ink-2); }
.fm-firm__locs { font-size: 0.875rem; color: var(--ink-2); }
.fm-progs { margin-top: 16px; }
.fm-prog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fm-when) var(--fm-go);
  gap: 10px var(--fm-gap);
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.fm-prog__name { font-size: 1rem; font-weight: 540; line-height: 1.4; letter-spacing: -0.01em; }
.fm-prog__meta { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }
.fm-prog .rc-tags .tag { font-weight: 400; }
.fm-when { font-size: 0.9375rem; }
.fm-when div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 8px; }
.fm-when div + div { margin-top: 4px; }
.fm-when dt { padding-top: 1px; font-size: 0.8125rem; color: var(--ink-3); }
.fm-when dd { margin: 0; }
.fm-prog__go { text-align: right; }
/* the calendar's link, with a 44px target that keeps its line */
.fm .rc-apply { min-height: 44px; margin-block: -10px; }
.fm-firm__more { padding: 0 0 20px; }
.fm-firm__more .rc-apply { margin-block: 0; }
.fm-empty[hidden] { display: none; }
.fm .page__body { margin-top: clamp(48px, 8vw, 88px); }
@media (hover: hover) and (pointer: fine) {
  .fm .rc-apply .icon { transition: transform 200ms var(--ease-out); }
  .fm-prog__go .rc-apply:hover .icon { transform: translate(2px, -2px); }
  .fm-firm__more .rc-apply:hover .icon { transform: translateX(3px); }
}
@media (max-width: 960px) {
  .fm { --fm-when: 14.5rem; --fm-go: 5.5rem; --fm-gap: 16px; }
}
@media (max-width: 640px) {
  .fm-firm { padding-top: 24px; }
  .fm-firm__head { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fm-firm__type { margin-bottom: 2px; }
  .fm-prog { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .fm-prog__go { text-align: left; }
  .fm-prog__go .rc-apply { margin-block: -8px -12px; }
}

/* ==== end Firms ==== */


/* ==== Application tracker (application-tracker/) ==== */
/* Owner-approved sketch, 1 Nov 2026: the reader's applications in four columns by status
   (one under another on phones), each a hairline card; add, details and confirm in modal
   dialogs drawn like the search palette (ground, --rule-strong border, square, no shadow).
   Fields follow the Lab's; errors are ink only. */
.at-nojs { max-width: 44rem; margin-top: clamp(24px, 4vw, 40px); color: var(--ink-2); }
.at-nojs[hidden], .at-app[hidden], .at-warn[hidden], .at-none[hidden], .at-dlg__links[hidden], .at-textbtn[hidden] { display: none; }
.at-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vw, 40px); }
.at-plus { position: relative; flex: none; width: 12px; height: 12px; }
.at-plus::before,
.at-plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 1.5px; margin-top: -0.75px; background: currentColor; }
.at-plus::after { transform: rotate(90deg); }
.at-warn { display: flex; gap: 12px; max-width: 44rem; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--rule-strong); }
.at-warn > .icon { margin-top: 3px; font-size: 1.25rem; }
.at-warn__t { font-weight: 600; }
.at-warn p + p { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }

.at-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(16px, 2vw, 32px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.at-col__h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); font-size: 0.9375rem; font-weight: 600; }
.at-n { font-variant-numeric: tabular-nums; font-weight: 450; color: var(--ink-3); }
.at-none { padding: 14px 0; font-size: 0.875rem; color: var(--ink-3); }
.at-list { display: grid; gap: 12px; margin-top: 12px; }
.at-list:empty { display: none; }
.at-card { padding: 16px; border: 1px solid var(--rule); }
.at-card__firm { font-size: 1.0625rem; font-weight: 540; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.at-card__role { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.at-card__dl { display: grid; gap: 6px; margin-top: 12px; font-size: 0.875rem; }
.at-card__dl div { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 8px; }
.at-card__dl dt { padding-top: 1px; font-size: 0.8125rem; color: var(--ink-3); }
.at-card__dl dd { margin: 0; overflow-wrap: anywhere; }
.at-soon { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 600; }
.at-src { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }
.at-card__extra { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-3); }
.at-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.at-card__lbl { font-size: 0.8125rem; color: var(--ink-3); }
.at-card .at-open { margin-left: auto; }
.at .btn--sm { min-height: 44px; }

.at-select { position: relative; display: inline-flex; min-width: 0; }
.at-select select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.at-select > .icon { position: absolute; top: 50%; right: 12px; font-size: 0.875rem; transform: translateY(-50%); pointer-events: none; }
.at-select select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

.at-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(32px, 5vw, 48px); padding-top: 16px; border-top: 1px solid var(--rule); }
.at-foot__t { font-size: 0.875rem; color: var(--ink-2); }
.at-foot__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.at-foot__st { flex-basis: 100%; font-size: 0.875rem; color: var(--ink-2); }
.at-foot__st:empty { display: none; }
.at .page__body { margin-top: clamp(48px, 8vw, 88px); }

/* Dialogs */
.at-dlg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 6vh, 64px) var(--gutter);
  border: 0;
  background: var(--scrim);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* the dialog is its own scrim, as the search palette is */
.at-dlg::backdrop { background: transparent; }
.at-dlg__panel { display: block; width: min(100%, 720px); margin: 0 auto; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--rule-strong); background: var(--ground); }
.at-dlg--sm .at-dlg__panel { width: min(100%, 480px); margin-top: clamp(0px, 12vh, 96px); }
.at-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.at-dlg__title { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 540; line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.at-dlg__sub { margin-top: 6px; color: var(--ink-2); overflow-wrap: anywhere; }
.at-x { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin: -10px -12px 0 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.25rem; cursor: pointer; }
.at-file { font: inherit; }
.at-dlg__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.at-dlg__links .rc-apply { min-height: 44px; }
.at-sec { margin: 24px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--rule); min-width: 0; }
.at-sec__h { margin-bottom: 14px; padding: 0; font-size: 1.0625rem; font-weight: 540; letter-spacing: -0.01em; }
.at-contacts > .at-sec__h { float: left; width: 100%; margin-bottom: 12px; }
.at-contacts > .at-sec__h + * { clear: both; }
.at-dlg__note { margin-top: 24px; font-size: 0.8125rem; color: var(--ink-3); }
.at-dlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--rule); }
.at-dlg__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.at-dlg--sm .at-dlg__sub { max-width: 46ch; }

.at-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.at-fields--next { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 16px; }
.at-fields--name { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.at-field .at-select { display: flex; }
.at-field .at-select select { width: 100%; min-height: 52px; padding-left: 16px; font-size: 1rem; font-weight: 400; }
.at-field .at-select > .icon { right: 16px; }
.at-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.at-field label,
.at-pick label { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.875rem; font-weight: 550; }
.at-unit { font-weight: 400; color: var(--ink-3); }
.at-field input,
.at-field textarea,
.at-pick input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.at-field textarea { min-height: 128px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.at-field input::placeholder,
.at-pick input::placeholder { color: var(--ink-3); }
.at-pick input::-webkit-search-cancel-button { display: none; }
.at-field input:focus-visible,
.at-field textarea:focus-visible,
.at-pick input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.at-field input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.at-hint { font-size: 0.8125rem; color: var(--ink-3); }
.at-hint:empty { display: none; }
.at-textbtn { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 550; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.22em; cursor: pointer; }
.at-err { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.875rem; color: var(--ink-2); }
.at-err:empty { display: none; }
.at-err.is-error { font-weight: 650; color: var(--ink); }
.at-err .icon { font-size: 1.25rem; }
.at-own .btn { margin-top: 16px; }

/* the picker: the Lab's company list, set in the dialog */
.at-pick { display: grid; gap: 8px; }
.at-opts { max-height: min(44vh, 22rem); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--rule-strong); border-top: 0; margin-top: -8px; }
.at-opts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; min-height: 44px; padding: 10px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.at-opts li:last-child { border-bottom: 0; }
.at-opts li[aria-selected="true"] { background: var(--ground-2); }
.at-o__firm { font-size: 0.9375rem; font-weight: 540; }
.at-o__prog { grid-column: 1; font-size: 0.875rem; color: var(--ink-2); }
.at-o__meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.8125rem; color: var(--ink-3); text-align: right; }
.at-o__on { display: block; color: var(--ink); font-weight: 550; }
.at-opts li[aria-disabled="true"] { cursor: default; }
.at-opts li[aria-disabled="true"] .at-o__firm,
.at-opts li[aria-disabled="true"] .at-o__prog { color: var(--ink-3); }
.at-opts .at-o__none { display: block; font-size: 0.875rem; color: var(--ink-2); cursor: default; }
.at-qst { font-size: 0.875rem; color: var(--ink-2); }
.at-qst:empty { display: none; }

.at-clist { display: grid; gap: 16px; }
.at-clist:empty { display: none; }
.at-contact { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.at-contact__n { margin-bottom: 8px; font-size: 0.8125rem; color: var(--ink-3); }
.at-clist:not(:empty) + .at-c-add { margin-top: 16px; }

@media (hover: hover) and (pointer: fine) {
  .at-opts li:not([aria-disabled="true"]):not(.at-o__none):hover { background: var(--ground-2); }
  .at-x:hover { color: var(--ink-2); }
  .at-textbtn:hover { text-decoration-color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .at-dlg { opacity: 0; transition: opacity 180ms var(--ease-out); }
  .at-dlg__panel { transform: translateY(-8px) scale(0.985); transition: transform 240ms var(--ease-out); }
  .at-dlg.is-open { opacity: 1; }
  .at-dlg.is-open .at-dlg__panel { transform: none; }
}
@media (max-width: 1100px) {
  .at-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .at-bar .btn { flex: 1 1 100%; }
  .at-board { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .at-foot__acts { margin-left: 0; }
  .at-fields--next,
  .at-fields--name { grid-template-columns: minmax(0, 1fr); }
  .at-opts li { grid-template-columns: minmax(0, 1fr); }
  .at-o__meta { grid-column: 1; grid-row: auto; text-align: left; }
  .at-dlg { padding: 12px; }
  .at-dlg--sm .at-dlg__panel { margin-top: 0; }
  .at-dlg__foot .btn { flex: 1 1 auto; }
}

/* ==== end Application tracker ==== */