/* css/bar.css: the top bar alone, for pages that carry their own complete stylesheet and must not load
   css/styles.css (grade-rationale.html, the print brief). GENERATED by build/tools/sr_chrome.py from
   css/styles.css and build/tools/chrome/bar-page.css + bar.css; do not edit here, re-run the script.
   Lengths are px (rem x 16): such a page sets its own root font size, and the bar must not follow it. */
@font-face {
  font-family: "SR Bar Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SR Bar Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/publicsans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SR Bar Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/publicsans-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SR Bar Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexmono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SR Bar Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexmono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* the site's tokens, scoped to the bar (the page keeps its own colours) */
.a-bar, .skip {
  --ink: #0c0b09;
  --ink-2: #12110e;
  --ink-3: #161412;
  --ink-4: #1c1915;
  --ink-5: #241f1a;
  --cream: #f3ead8;
  --cream-soft: #e8dcc8;
  --stone: #a89f91;
  --stone-2: #847d75;
  --gold: #c9a56a;
  --gold-2: #e0c48a;
  --gold-dim: rgba(201, 165, 106, 0.14);
  --gold-line: rgba(201, 165, 106, 0.32);
  --forest: #1e3d32;
  --forest-2: #2a5646;
  --forest-3: #3d7a62;
  --oxblood: #4a1c22;
  --oxblood-2: #6b2a32;
  --steel: #8ea0b5;
  --steel-2: #6d7f94;
  --amber: #c4923a;
  --amber-2: #a8782c;
  --paper: var(--ink);
  --paper-2: var(--ink-4);
  --paper-3: var(--ink-3);
  --rule: rgba(232, 220, 200, 0.1);
  --rule-strong: rgba(232, 220, 200, 0.18);
  --grade-a: #e0c48a;
  --grade-a-bg: rgba(201, 165, 106, 0.12);
  --grade-b: #9aacbe;
  --grade-b-bg: rgba(142, 160, 181, 0.12);
  --grade-c: #d4a24a;
  --grade-c-bg: rgba(196, 146, 58, 0.12);
  --display: "SR Bar Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "SR Bar Public Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "SR Bar Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --max: 1152px;
  --tracking: 0.22em;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-modal: 0 40px 90px -24px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(201, 165, 106, 0.18);
}
/* What css/styles.css gives every element on a normal page (box sizing, inherited type and colour, the reduced-motion
   switch), given here to the bar alone. :where() keeps these at element weight, so every bar rule still wins exactly
   as it does on a normal page. */
.a-bar {
  font-family: var(--sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--cream-soft);
  font-feature-settings: "ss01" on, "kern" on;
}
:where(.a-bar) *, :where(.a-bar) *::before, :where(.a-bar) *::after { box-sizing: border-box; }
:where(.a-bar) a { color: inherit; }
:where(.a-bar) button { font: inherit; color: inherit; }
:where(.a-bar) p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  :where(.a-bar), :where(.a-bar) *, :where(.a-bar) *::before, :where(.a-bar) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* copied verbatim from css/styles.css */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 80;
  background: var(--gold);
  color: var(--ink);
  padding: 8px 12px;
}
.focus-ring:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.wrap {
  width: min(var(--max), calc(100% - 32px));
  margin-inline: auto;
}
@media (min-width: 640px) {
  .wrap { width: min(var(--max), calc(100% - 48px)); }
}
.mast-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgba(12, 11, 9, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(12, 11, 9, 0.82);
  border-bottom-color: var(--gold-line);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream);
}
.brand-name {
  display: block;
  font-family: var(--display);
  font-size: 23.2px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cream);
}
.brand-tag {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2.4px;
}
@media (min-width: 640px) {
  .brand-tag { display: block; }
}
.logo {
  width: 36px;
  height: 36px;
  color: var(--gold);
  flex-shrink: 0;
}
.nav-desk {
  display: none;
  align-items: center;
  gap: 2.4px;
}
@media (min-width: 768px) {
  .nav-desk { display: flex; }
}
.nav-desk a {
  position: relative;
  text-decoration: none;
  padding: 8px 12px;
  font-size: 14.4px;
  color: var(--stone);
  transition: color 0.3s var(--ease);
}
.nav-desk a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3.2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-desk a:hover { color: var(--cream); }
.nav-desk a:hover::after { transform: scaleX(1); }
.nav-desk a.is-active {
  color: var(--cream);
}
.nav-desk a.is-active::after { transform: scaleX(1); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10.4px 19.2px;
  font-size: 14.4px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn-ghost {
  border-color: var(--gold-line);
  color: var(--cream);
}
.btn-ghost:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
@media (min-width: 768px) and (max-width: 899px) {
  .nav-desk a { padding: 8px 8px; font-size: 13.76px; }
  .nav-desk a::after { left: 8px; right: 8px; }
}

/* >>> sr_chrome top bar: generated from build/tools/chrome/bar.css by sr_chrome.py; do not edit here >>> */
/* ==== Top bar with the account area (2026-10-08, homepage direction A) ====================================
   Every page: brand, the seven section links (from 1120px; below that they live in the Menu sheet), and the
   account area: "Log in" + gold "Create free account" when signed out, gold "Open Terminal" + an account button when
   signed in. A static page knows which from <html class="is-in">, set in <head> from the srt_in=1 display cookie the
   Terminal API sets at log in and clears at log out (the session cookie itself stays HttpOnly). No API call per view.
   Markup is written by build/tools/sr_chrome.py; behaviour is js/acct.js. Edit the tools copy and re-run the script,
   never this block by hand: the script replaces everything between the two marker lines. */

/* page states on <html>: is-in (srt_in cookie), is-gated (the homepage and /terminal/ only, from /api/terminal/config
   available_here). An element shows only when every word in its data-when matches. */
html:not(.is-in) [data-when~="in"],
html.is-in [data-when~="out"],
html.is-gated [data-when~="open"],
html:not(.is-gated) [data-when~="gated"] { display: none !important; }
/* gate-pending (the homepage since 2026-10-08, /terminal/ since 2026-10-09): set by the page's inline head script
   while it asks /api/terminal/config (at most 2 seconds). Neither the open nor the gated variant shows until the
   answer, so a visitor where the Terminal is not available never sees "Create free account" flash first.
   visibility, not display: the space stays put. */
html.gate-pending [data-when~="open"],
html.gate-pending [data-when~="gated"] { visibility: hidden; }
/* the bar's "Create free account" on a gated page keeps its width, unseen, so the section links and Log in sit
   exactly where they sit on every other page and nothing in the bar moves when the answer lands (below 640px the
   button is not in the bar at all) */
@media (min-width: 640px) {
  html.is-gated:not(.is-in) .a-actions > .a-bar-cta[data-when~="open"] { display: inline-flex !important; visibility: hidden; }
}

/* anchors (#excluded, #plans, a section link) and keyboard focus scroll to just below the sticky bar, not under it */
html { scroll-padding-top: 88px; }

.a-bar [hidden] { display: none !important; }
.a-bar .sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.a-bar a:not(.focus-ring):focus-visible,
.a-bar button:not(.focus-ring):focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.a-bar .a-acct-menu a:focus-visible,
.a-bar .a-sheet-nav a:focus-visible { outline-offset: -2px; }

.a-bar .header-inner { justify-content: flex-start; gap: 12px; }
.a-bar .nav-desk { display: none; margin-left: auto; }
.a-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1120px) {
  .a-bar .nav-desk { display: flex; }
  .a-actions { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--rule-strong); }
}
.a-login {
  padding: 8px 10.4px;
  font-size: 14.4px;
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold);
  white-space: nowrap;
}
.a-login:hover { text-decoration-line: underline; color: var(--gold-2); }
.a-bar-cta { padding: 8.8px 16px; font-size: 14px; white-space: nowrap; }
.a-menu-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 7.2px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--cream-soft);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.a-menu-btn:hover, .a-menu-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-2); }
@media (min-width: 1120px) { .a-menu-btn { display: none; } }
@media (max-width: 639px) {
  .a-bar-cta { display: none; }
  .a-bar .logo { width: 30px; height: 30px; }
  .a-bar .brand { gap: 8.8px; }
  .a-bar .brand-name { font-size: 20.48px; }
  /* phone tap targets: 44px tall, like the Terminal app's own copy of this header */
  .a-login { display: inline-flex; align-items: center; min-height: 44px; padding: 7.2px 8px; }
  .a-menu-btn { min-height: 44px; }
  .a-bar .a-acct { width: 44px; height: 44px; }
}
/* narrow phones (under 390px): brand, Log in and Menu fit inside the 16px gutters, so no page scrolls sideways */
@media (max-width: 389px) {
  .a-bar .header-inner { gap: 8px; }
  .a-bar .logo { width: 26px; height: 26px; }
  .a-bar .brand { gap: 7.2px; min-width: 0; }
  .a-bar .brand-name { font-size: 17.6px; }
  .a-login { padding: 7.2px 5.6px; }
  .a-menu-btn { padding: 7.2px 9.6px; }
}
/* the narrowest phones: Log in, or the account button, lives in the Menu sheet only (the sheet repeats both) */
@media (max-width: 339px) {
  .a-bar .a-login, .a-bar .a-actions > .a-acct-wrap { display: none; }
}

/* the account button (a generic person glyph, never an initial) and its menu */
.a-acct-wrap { position: relative; }
.a-acct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36.8px;
  height: 36.8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--ink-4);
  color: var(--gold-2);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.a-acct svg { width: 18.4px; height: 18.4px; }
button.a-acct:hover, .a-acct[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.a-acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10.4px);
  z-index: 60;
  width: 248px;
  padding: 5.6px 0 7.2px;
  border: 1px solid var(--gold-line);
  background: var(--ink-3);
  box-shadow: var(--shadow-modal);
}
.a-acct-head {
  margin: 0 0 4.8px;
  padding: 10.4px 16px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.4px;
  color: var(--cream);
}
.a-acct-head .mast-kicker { display: block; margin-bottom: 3.2px; font-size: 10px; color: var(--stone); }
.a-acct-menu a {
  display: block;
  padding: 9.6px 16px;
  font-size: 14.88px;
  color: var(--cream-soft);
  text-decoration: none;
}
.a-acct-menu a:hover, .a-acct-menu a:focus-visible { background: var(--gold-dim); color: var(--cream); }
.a-acct-menu .a-sep { border-top: 1px solid var(--rule); margin-top: 4.8px; padding-top: 11.2px; color: var(--stone); }

/* the Menu sheet, below 1120px. It lives inside the sticky header, so it scrolls on its own: taller than the screen
   (a small phone, any phone held sideways, a 1024 x 600 laptop) its last links would otherwise sit below the fold for
   good. js/acct.js sets the exact max-height when it opens; these are the no-measure fallbacks. */
.a-sheet {
  border-top: 1px solid var(--rule);
  background: rgba(12, 11, 9, 0.97);
  padding: 16px 0 20px;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1120px) { .a-sheet { display: none !important; } }
.a-sheet-cta, .a-sheet-acct { display: grid; gap: 8.8px; }
.a-sheet .btn { width: 100%; padding: 13.6px 16px; font-size: 16px; }
.a-sheet-note { margin: 1.6px 0 0; font-size: 14.08px; line-height: 1.5; color: var(--stone); }
.a-sheet-who { display: flex; align-items: center; gap: 12px; margin-bottom: 5.6px; font-size: 15.2px; color: var(--cream); }
.a-sheet-who .a-acct { cursor: default; }
.a-sheet-who .mast-kicker { display: block; font-size: 10px; color: var(--stone); }
.a-sheet-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 3.2px 0 0; padding: 0; list-style: none; }
/* 44px tall tap targets (Settings, Log out) */
.a-sheet-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 7.2px 0; font-size: 15.2px; color: var(--gold-2); text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.a-sheet-nav { margin-top: 16px; border-top: 1px solid var(--gold-line); }
.a-sheet-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 1.6px;
  border-bottom: 1px solid var(--rule);
  font-size: 16.8px;
  color: var(--cream-soft);
  text-decoration: none;
}
.a-sheet-nav a::after { content: ""; width: 7.2px; height: 7.2px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: rotate(45deg); }
.a-sheet-nav a:hover { color: var(--cream); }
.a-sheet-nav a.is-active { color: var(--gold-2); }
.a-sheet-fine { margin: 16px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--stone); }

@media (prefers-reduced-motion: reduce) {
  .a-acct, .a-menu-btn { transition: none; }
}
/* paper: the account area and the sheet never print; nor does the bar on the pages that had none before it
   (the grade-rationale print brief, 404) */
@media print {
  .a-actions, .a-sheet, .a-bar-added { display: none !important; }
}
/* <<< sr_chrome top bar <<< */