/* The job page (Fable 5.1, round 2, 25 Sep 2026): the sheet on the board.
   The board band carries the identity, the pay in chalk, Apply and Save and
   the chalk scene; the paper below carries the sections in one fixed order.
   The band surface, the buttons, the stamps, the mini job cards and the tier
   table are in this file. Motion lives in css/motion.css only. */

/* Brought across from css/pages/jobs.css so a job leaf does not load the board sheet.
   The board, the hubs and the league still load jobs.css for these same rules. */
/* Every control on the board uses the site's radius tokens; this outranks the
   legacy !important radii in styles.css, so the corner decision is one place. */
:is(.board-page, .sheet-page, .hub-page) :is(.btn, .btn-chalk, input[type="search"], select, .filter-toggle, .pager a, .pager-here, .hub-browse a, .sheet-close, .search-clear) { border-radius: var(--r-s) !important; }

/* Buttons on the board's paper: UI face, 44px. */
:is(.board-page, .sheet-page, .hub-page, .employer-page) :is(.board-toolbar, .job-card, .sheet-rail, .sheet-bar, .sheet-foot, .board-results, .sheet-section) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  font: 700 .98rem/1.1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap;
  border-radius: var(--r-s);
}
.job-card .btn.primary, .sheet-foot .btn.primary, .sheet-rail .btn.primary, .sheet-bar .btn.primary { background: var(--board); border: 1px solid var(--board); color: var(--chalk); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.job-card .btn.primary:hover, .sheet-foot .btn.primary:hover, .sheet-rail .btn.primary:hover, .sheet-bar .btn.primary:hover { background: var(--board-3); border-color: var(--board-3); color: var(--chalk); }
.job-card .btn.ghost, .sheet-foot .btn.ghost, .sheet-rail .btn.ghost, .sheet-bar .btn.ghost { background: var(--surface); border: 1px solid var(--field-border); color: var(--ink); }
.job-card .btn.ghost:hover, .sheet-foot .btn.ghost:hover, .sheet-rail .btn.ghost:hover, .sheet-bar .btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
:is(.job-card, .sheet-rail, .sheet-bar, .sheet-foot) .btn:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 3px; }

/* Save keeps one width; its saved state (a pencil stamp) lives in styles.css. */
.save-job.btn { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }


.employer-mark { flex: none; display: flex; align-items: center; }
.employer-mark--logo { width: auto; max-width: 120px; height: 44px; }
.employer-mark--logo img { display: block; width: auto; height: auto; max-width: 120px; max-height: 44px; object-fit: contain; object-position: left center; }
.employer-mark--letter {
  width: 44px; height: 44px; justify-content: center;
  font: 700 1.05rem/1 var(--font-ui); letter-spacing: .02em; color: var(--chalk);
  background: var(--board); border-radius: var(--r-s);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.track-label { font-weight: 700; color: var(--ink); white-space: nowrap; }
.track-label[data-track]::before {
  content: ""; display: inline-block; width: 14px; height: 6px; margin: 0 7px 2px 0;
  vertical-align: middle; border-radius: 1px; background: var(--track);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18);
}

.flag { display: inline-block; width: 24px; height: 16px; margin-right: 9px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(20, 32, 28, .22), 0 1px 2px rgba(20, 32, 28, .2); object-fit: cover; vertical-align: -3px; }

.pay-num, .pay-lead-num { white-space: nowrap; }
.pay-slot--long .pay-slot__figure { font-size: 19px; }
.pay-cur, .pay-q, .pay-join { font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .03em; color: var(--ink-2); }
.pay-rest { white-space: nowrap; }

.pay-words, .pay-slot__words { font: 700 1rem/1.3 var(--font-ui); letter-spacing: 0; color: var(--ink); }

/* One stamp row everywhere: the site's single 10px gap between stamps, and
   stamps sit on the text baseline of their row (an eligibility label beside
   them shares the line), straight and at the row's left edge. */
.stamp-row { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 10px 10px; margin: 0; }
.eligibility-label { font-size: .9rem; font-weight: 700; color: var(--ink-2); padding-left: 2px; }

/* ======================================================================
   The job sheet: the same card, written up in full and pinned to the board.
   A board band with the employer, the role and the stamps (and, in person,
   the place), then one white sheet in a fixed order beside a sticky rail
   with the pay, the check and the way to apply.
   ====================================================================== */
.sheet-band {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: clamp(20px, 2.6vw, 34px);
  color: var(--chalk);
  background-color: var(--board); background-image: var(--board-plain);
  border-top: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 14px 18px -14px rgba(0, 0, 0, .55);
}
.sheet-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../assets/chalk/ghosts.svg") 80% 20% / max(1400px, 100%) auto no-repeat;
}
/* In person, the place itself: the photograph pressed into the board as a
   desaturated board-green duotone, with the words kept on plain board. */
.sheet-band__photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sheet-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(1) contrast(1.12) brightness(.92); mix-blend-mode: luminosity; opacity: .5; }
.sheet-band--photo::before {
  background: linear-gradient(90deg, rgba(28, 49, 42, .97) 0%, rgba(28, 49, 42, .9) 38%, rgba(28, 49, 42, .55) 72%, rgba(28, 49, 42, .35) 100%),
              linear-gradient(0deg, rgba(20, 36, 32, .55), transparent 45%);
}
.sheet-band__inner { position: relative; display: grid; align-content: start; gap: 16px; padding-bottom: clamp(24px, 3vw, 38px); }
.sheet-band--photo .sheet-band__inner { padding-bottom: clamp(26px, 3.4vw, 44px); min-height: clamp(260px, 26vw, 360px); align-content: start; }
.sheet-back { margin: 0; }
.sheet-band a:not(.btn) { color: var(--chalk); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(243, 241, 232, .5); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.sheet-band a:not(.btn):hover { text-decoration-color: var(--chalk); }
.sheet-band .back-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; color: var(--chalk-2) !important; font-weight: 700; }
.sheet-band .back-link span { text-decoration: underline; text-decoration-color: rgba(243, 241, 232, .4); text-underline-offset: .22em; }
.sheet-band .back-link:hover { color: var(--chalk) !important; }
.sheet-band :focus-visible { outline: 3px solid var(--focus-board); outline-offset: 3px; }
.sheet-id { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.sheet-id__text { min-width: 0; display: grid; gap: 6px; }
.employer-mark--sheet.employer-mark--logo {
  width: auto; height: 64px; max-width: 164px; padding: 10px 12px;
  background: var(--surface); border-radius: var(--r-s);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 12px 24px -14px rgba(0, 0, 0, .7);
}
.employer-mark--sheet.employer-mark--logo img { max-width: 140px; max-height: 44px; }
.employer-mark--sheet.employer-mark--letter {
  width: 64px; height: 64px; font-size: 1.5rem; color: var(--board-deep); background: var(--chalk);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 12px 24px -14px rgba(0, 0, 0, .7);
}
.sheet-employer { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--chalk-2); }
.sheet-band .sheet-title {
  margin: 0; max-width: 24ch;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-variation-settings: "wdth" 94;
  font-size: clamp(2rem, 3.6vw, 3.15rem) !important; line-height: 1.02 !important; letter-spacing: -.024em !important;
  color: var(--chalk); text-wrap: balance; overflow-wrap: anywhere;
}
.sheet-track { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 1rem; }
.sheet-band .track-label { color: var(--chalk); }
.sheet-place { display: inline-flex; align-items: center; font-weight: 700; color: var(--chalk); }
.sheet-place--online { color: var(--chalk-2); }
.sheet-band .flag { box-shadow: 0 0 0 1px rgba(243, 241, 232, .55), 0 1px 3px rgba(0, 0, 0, .4); }
.sheet-stamps { margin-top: 4px; }
.sheet-credit { margin: 6px 0 0; font-size: .8125rem; }
.sheet-band .sheet-credit a { color: var(--chalk-3); font-weight: 500; text-decoration-color: rgba(163, 179, 171, .5); }
.sheet-band .job-posted-by { margin: 0; color: var(--chalk-2); }

.sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(22px, 3vw, 40px) clamp(48px, 6vw, 88px); }
@media (min-width: 960px) {
  .sheet-page { --rail-w: clamp(300px, 26vw, 344px); --rail-rise: 176px; }
  .sheet-layout { grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: clamp(28px, 3vw, 48px); align-items: start; }
  /* The decision card is pinned half on the board, half on the page. */
  .sheet-band__inner { padding-right: calc(var(--rail-w) + clamp(28px, 3vw, 48px)); min-height: calc(var(--rail-rise) + 96px); }
  .sheet-rail { grid-column: 2; grid-row: 1; margin-top: calc(-1 * var(--rail-rise)); z-index: 2; }
  .sheet-main { grid-column: 1; grid-row: 1; }
}
.sheet-main {
  min-width: 0; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--card-pin);
}
.sheet-section { padding: 26px clamp(20px, 3vw, 34px); border-top: 1px dashed var(--rule-strong); }
.sheet-section:first-child { border-top: 0; }
.sheet-section h2, .sheet-evidence > summary h2 { margin: 0 0 14px; font-size: 1.42rem !important; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.sheet-section h3 { margin: 0 0 8px; font-family: var(--font-ui) !important; font-size: .9rem !important; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.sheet-section p { max-width: 68ch; }
.sheet-small { margin: 12px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.not-stated { color: var(--ink-3); font-weight: 500; }

/* Pay box */
.pay-box { display: grid; gap: 8px; }
.pay-box p { margin: 0; }
.pay-box__figure { font: 700 22px/1.25 var(--font-mono); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.pay-box__figure .pay-cur, .pay-box__figure .pay-q, .pay-box__figure .pay-join { font-size: .85rem; }
.pay-box__unit { font: 600 1.02rem/1.3 var(--font-ui); color: var(--ink-2); }
.pay-box__usd { font-size: .98rem; color: var(--ink-2); }
.pay-box__terms { margin: 6px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: .96rem; color: var(--ink-2); }
.pay-box__terms li { position: relative; padding-left: 18px; }
.pay-box__terms li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--ink-3); }
.pay-box__terms strong { color: var(--ink); }
.pay-box--unknown .pay-box__none { font: 600 1.12rem/1.3 var(--font-ui); color: var(--ink-3); }
.pay-box__line { color: var(--ink-2); }
.job-pay-context { margin-top: 16px; padding: 14px 16px; background: var(--sunken); border-radius: var(--r-s); font-size: .95rem; }
.job-pay-context p { margin: 0 0 6px; }
.job-prov { color: var(--ink-2); font-size: .92rem; }

/* Facts */
.sheet-facts { margin: 0; display: grid; }
.sheet-facts > div { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 4px 20px; padding: 11px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.sheet-facts > div:first-child { border-top: 0; padding-top: 0; }
.sheet-facts dt { font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.sheet-facts dd { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.sheet-facts .place { font-weight: 700; }
.sheet-variant { margin: 14px 0 0; font-size: .98rem; }
.sheet-variant a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* Who can apply */
.eligibility-label--sheet { display: inline-block; margin: 0 0 14px; padding: 6px 10px; font-size: .95rem; color: var(--ink); background: var(--sunken); border-radius: var(--r-s); }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; }
@media (min-width: 720px) { .who-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.who-block p { margin: 0; line-height: 1.55; }
.who-missing { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.who-missing li { position: relative; padding-left: 20px; color: var(--ink-2); }
.who-missing li::before { content: ""; position: absolute; left: 0; top: .66em; width: 11px; height: 2px; background: var(--stamp-pencil); transform: rotate(-4deg); }

/* What we found when we checked */
details.sheet-evidence { background: transparent !important; border: 0 !important; border-top: 1px dashed var(--rule-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.sheet-evidence > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.sheet-evidence > summary::-webkit-details-marker { display: none; }
.sheet-evidence > summary::before { content: none !important; }
.sheet-evidence > summary::after { content: "Hide" !important; transform: none !important; font: 700 .9rem var(--font-ui); color: var(--stamp-blue); text-decoration: underline; text-underline-offset: .2em; }
.sheet-evidence:not([open]) > summary::after { content: "Show" !important; }
.sheet-evidence > summary h2 { display: inline; }
.sheet-evidence > summary:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 4px; }
.evidence-body { display: grid; gap: 16px; padding-top: 4px; }
.evidence-quote, .evidence-finding {
  margin: 0; max-width: none; padding: 16px 18px; font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--rule); border-radius: var(--r-s);
}
.evidence-quote::before { content: "“"; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.evidence-quote::after { content: "”"; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.evidence-meta { margin: 0; display: grid; }
.evidence-meta > div { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 4px 20px; padding: 9px 0; border-top: 1px solid var(--rule); }
.evidence-meta dt { font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.evidence-meta dd { margin: 0; font-size: .96rem; line-height: 1.5; overflow-wrap: anywhere; }
.evidence-meta a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.evidence-body .job-checked { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* Teachers say */
.review-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 720px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: 0 1px 0 rgba(20, 32, 28, .05); }
.review-card p { margin: 0; }
/* The source stamp: its own size (.75rem) with the base stamp's vertical
   padding, so its height is the one height for that size; it wraps instead
   of turning. */
.stamp--source { color: var(--stamp-pencil); font-size: .75rem; padding: 5px 8px 4px; white-space: normal; max-width: 100%; line-height: 1.25; }
.review-card__quote { margin: 0; padding: 0; border: 0; background: none; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.review-card__quote::before { content: "“"; } .review-card__quote::after { content: "”"; }
.review-card__source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0; }
.review-card__source a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-weight: 700; font-size: .92rem; }
.evidence-label { margin: 0 0 -8px; font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.fact-note { display: block; margin-top: 2px; font-size: .95rem; color: var(--ink-2); }

/* More from this employer · Similar jobs */
.mini-jobs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .mini-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-job {
  position: relative; display: grid; gap: 3px; height: 100%; padding: 14px 16px 14px 20px;
  color: var(--ink) !important; text-decoration: none !important; border: 1px solid var(--rule) !important; border-radius: var(--r-m);
  background: var(--surface);
}
.mini-job::before { content: ""; position: absolute; left: 8px; top: 16px; width: 4px; height: 14px; border-radius: 1px; background: var(--track, var(--rule-strong)); }
.mini-job:hover { border-color: var(--ink-3) !important; box-shadow: var(--card-pin); }
.mini-job:hover .mini-job__title { text-decoration: underline; text-underline-offset: .18em; }
.mini-job__employer { font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.mini-job__title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.mini-job__pay { margin-top: 4px; font: 700 1rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.mini-job__pay .pay-cur, .mini-job__pay .pay-q, .mini-job__pay .pay-join { font-size: .72rem; }
.mini-job__unit { font: 600 .88rem var(--font-ui); color: var(--ink-2); }
.mini-job__none { font: 500 .95rem var(--font-ui); color: var(--ink-3); }
.mini-job__where { display: flex; align-items: center; font-size: .9rem; color: var(--ink-2); }
.mini-job__where .flag { width: 18px; height: 12px; margin-right: 7px; vertical-align: 0; }

/* About the employer */
.sheet-about p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.55; }
.sheet-about .back-link { color: var(--stamp-blue); }
.job-summary { color: var(--ink) !important; }

/* The vacancy, in the employer's words (Fable B2-24): pencil daters, then the
   employer's own paragraphs, then where we copied them from. */
/* The pencil daters: the oval stamp, straight. Both sit on one line with the
   site's single 10px stamp gap — the old second-dater tilt is gone with the
   rule that gave each its own angle. */
.sheet-vacancy__dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.stamp--dater { color: var(--stamp-pencil); border-color: currentColor; border-radius: 999px; padding: 5px 12px 4px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.sheet-vacancy__body { display: grid; gap: .7em; color: var(--ink); overflow-wrap: anywhere; }
.sheet-vacancy__body p { max-width: 68ch; margin: 0; font-size: 1.02rem; line-height: 1.6; }
.sheet-vacancy__source { max-width: none !important; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.sheet-vacancy__source a { font-weight: 700; }

/* The employer's own title heads a marked-up vacancy; the card's role line follows it.
   Long employer titles step down a size so the heading keeps to three lines. */
.sheet-band .sheet-title.sheet-title--long { max-width: 30ch; font-size: clamp(1.9rem, 2.8vw, 2.55rem) !important; line-height: 1.06 !important; }
@media (max-width: 719px) { .sheet-band .sheet-title.sheet-title--long { font-size: clamp(1.55rem, 6.8vw, 1.9rem) !important; } }
.sheet-title__keep { white-space: nowrap; }
.sheet-band .sheet-role { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--chalk-2); }

/* The recruiter route (Fable B2-26), on the board head and under the apply route. */
.board-head .board-hero__employers { margin: -8px 0 0; font-size: 1rem; color: var(--chalk-2); }
.board-head .board-hero__employers a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.sheet-recruit { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.sheet-recruit a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--stamp-blue); }
.sheet-rail__card .sheet-rail__foot { margin-top: -2px; padding-top: 4px; border-top: 1px dashed var(--rule-strong); }
.sheet-about .sheet-about__recruit { margin: 4px 0 0; }
@media (min-width: 960px) { .sheet-about .sheet-about__recruit { display: none; } }

/* The sticky decision rail */
.sheet-rail { position: sticky; top: 108px; min-width: 0; }
.sheet-rail__card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--card-lift);
}
.sheet-rail__card p { margin: 0; }
.rail-pay__figure { font: 700 24px/1.2 var(--font-mono); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); overflow-wrap: anywhere; }
.rail-pay__unit { margin-top: 4px !important; font: 600 1rem/1.3 var(--font-ui); color: var(--ink-2); }
.rail-pay__usd { margin-top: 6px !important; font-size: .88rem; color: var(--ink-3); }
.rail-pay__none { font: 600 1.05rem var(--font-ui); color: var(--ink-3); }
.rail-pay__note { margin-top: 6px !important; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.rail-stamp { padding-bottom: 4px; }
.sheet-page .sheet-rail .sheet-rail__card .btn { white-space: normal; }
.sheet-rail .btn { width: 100% !important; max-width: none !important; min-height: 52px !important; font-size: 1.04rem !important; white-space: normal; text-align: center; }
.sheet-rail .rail-apply span { overflow-wrap: anywhere; }
.rail-closed { padding: 12px 14px; font-size: .95rem; color: var(--ink-2); background: var(--sunken); border-radius: var(--r-s); overflow-wrap: anywhere; }
.rail-note { font-size: .86rem; line-height: 1.5; color: var(--ink-2); }

/* Phones: one column and a sticky bottom bar with the pay and the way to apply. */
.sheet-bar { display: none; }
@media (max-width: 959px) {
  .sheet-rail { display: none; }
  .sheet-page { padding-bottom: 84px; }
  .sheet-bar {
    position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--rule-strong);
    box-shadow: 0 -10px 24px -14px rgba(20, 32, 28, .5);
  }
  .sheet-bar__pay { min-width: 0; flex: 1 1 auto; display: grid; line-height: 1.2; }
  .sheet-bar__figure { font: 700 17px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
  .sheet-bar__figure .pay-cur, .sheet-bar__figure .pay-q, .sheet-bar__figure .pay-join { font-size: .7rem; }
  .sheet-bar__unit { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
  .sheet-bar__none, .sheet-bar__closed { font-size: .92rem; font-weight: 600; color: var(--ink-3); }
  .sheet-bar__note { flex: 1 0 100%; order: 3; margin: 0; font-size: .78rem; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sheet-page:has(.sheet-bar__note) { padding-bottom: 112px; }
  .sheet-bar .btn { min-height: 48px !important; flex: none; }
  .sheet-bar .save-job.btn { width: 5.6rem; min-width: 5.6rem; max-width: 5.6rem; padding: 0 8px; }
  .sheet-page .sheet-bar .btn.job-recruitment { white-space: normal; max-width: 8.75rem; line-height: 1.15; text-align: center; padding: 0 12px; }
  .sheet-bar__figure .pay-rest { white-space: normal; }
  .sheet-bar .job-apply { padding: 0 20px !important; }
}
@media (max-width: 719px) {
  .sheet-band__inner { gap: 14px; }
  .sheet-band--photo .sheet-band__inner { min-height: 0; padding-bottom: 40px; }
  .sheet-id { flex-direction: column; gap: 14px; }
  .employer-mark--sheet.employer-mark--logo { height: 54px; padding: 8px 10px; }
  .employer-mark--sheet.employer-mark--logo img { max-height: 38px; max-width: 120px; }
  .employer-mark--sheet.employer-mark--letter { width: 54px; height: 54px; font-size: 1.3rem; }
  .sheet-band .sheet-title { font-size: clamp(1.85rem, 8.4vw, 2.3rem) !important; }
  .sheet-layout { padding-top: 16px; gap: 20px; }
  .sheet-main { margin-inline: calc(var(--page-gutter, 20px) * -0.5); }
  .sheet-section { padding: 22px 18px; }
  .sheet-facts > div, .evidence-meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.fact-src { display: inline-block; margin-left: 4px; font-size: .82rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* Checked pay research (24 Sep 2026): a found figure's basis, and the "Pay by tier" table. Paper, mono figures, stamp marks. */
.pay-slot__basis { margin: 4px 0 0; font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
.pay-slot__basis--reported { color: var(--stamp-pencil); }
.pay-box__basis { margin: 6px 0 0; font-size: .92rem; color: var(--ink-2); }
.sheet-tiers .tier-system { margin: 0 0 12px; color: var(--ink-2); }
/* Pay by tier (Fable B3-2): a plain ruled table on the paper in the reading face; mono digits only; rows stack on phones. */
.tier-table-wrap { margin-top: 4px; }
.tier-table { width: 100%; border-collapse: collapse; font: 400 .98rem/1.45 var(--font-ui); }
.tier-table th, .tier-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: inherit; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; background: none; }
.tier-table thead th { border-top: 0; padding-top: 0; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.tier-name { display: block; font-weight: 600; color: var(--ink); }
.tier-who { display: block; margin-top: 2px; font-weight: 400; font-size: .88rem; color: var(--ink-3); }
.tier-figure .pay-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.tier-figure .pay-cur, .tier-figure .pay-join, .tier-unit { font-family: var(--font-ui); }
.tier-basis { font-size: .72rem; white-space: nowrap; }
.tier-bonuses { margin: 6px 0 0; padding-left: 1.1em; color: var(--ink-2); }
.tier-basis--employer { color: var(--stamp-blue); border-color: currentColor; }
.tier-basis--reported { color: var(--stamp-pencil); border-color: currentColor; border-style: dashed; }
@media (max-width: 560px) {
  .tier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tier-table tr, .tier-table th, .tier-table td { display: block; }
  .tier-table tr { padding: 12px 0; border-top: 1px solid var(--rule); }
  .tier-table th, .tier-table td { border-top: 0; padding: 0; }
  .tier-table td { margin-top: 6px; }
}

.tier-basis--published, .tier-basis--asking { color: var(--ink-2); }

.sheet-page { --sheet-max: 1180px; }
.sheet-page main { background: var(--ground); }

/* ---------- The band ---------- */
.band .band__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: clamp(26px, 3vw, 40px); }
.band__grid {
  display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "scene" "pay" "eligibility" "actions";
  gap: 18px 40px; align-items: start;
}
.band__text { grid-area: text; min-width: 0; display: grid; gap: 10px; }
.band__scene { grid-area: scene; margin: 0; justify-self: start; width: min(100%, 340px); }
.band__scene svg { display: block; width: 100%; height: auto; }
.band__pay { grid-area: pay; }
.band__eligibility { grid-area: eligibility; min-width: 0; max-width: 70ch; }
.band__eligibility .job-eligibility__heading { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--chalk); }
.band__eligibility .job-eligibility__facts { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--chalk-2); overflow-wrap: anywhere; }
.band__eligibility ul.job-eligibility__facts { padding-inline-start: 1.2em; }
.band__eligibility .job-eligibility__facts > li + li { margin-top: 4px; }
.band__eligibility .job-eligibility__link { display: inline-block; margin-top: 6px; font-size: 1rem; color: var(--chalk); }
.band__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.band__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.band .employer-mark--sheet { transform: none; }
.band .employer-mark--sheet.employer-mark--logo { height: 52px; padding: 8px 10px; max-width: 150px; }
.band .employer-mark--sheet.employer-mark--logo img { height: 36px; width: auto; max-width: 128px; }
.band .employer-mark--sheet.employer-mark--letter { width: 52px; height: 52px; font-size: 1.25rem; }
.band__employer { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--chalk-2); overflow-wrap: anywhere; }
.band .band__title {
  margin: 0; max-width: 20ch;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-variation-settings: "wdth" 94;
  font-size: clamp(2rem, 3.7vw, 3.2rem) !important; line-height: 1.02 !important; letter-spacing: -.024em !important;
  color: var(--chalk); text-wrap: balance; overflow-wrap: anywhere;
}
.band__heading { margin: 0; max-width: 60ch; font-size: 1.02rem; line-height: 1.45; color: var(--chalk-3); overflow-wrap: anywhere; }
.band__heading-q { color: var(--chalk-3); }
.band__meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 1rem; }
.band .track-label { color: var(--chalk); }
.band__type { color: var(--chalk-2); font-weight: 600; }
.band__place { display: inline-flex; align-items: center; font-weight: 700; color: var(--chalk); }
.band .flag { box-shadow: 0 0 0 1px rgba(243, 241, 232, .55), 0 1px 3px rgba(0, 0, 0, .4); }
.band__closed { margin: 0; max-width: 40ch; font-size: 1.15rem; line-height: 1.4; font-weight: 600; color: var(--chalk-2); }

/* Chalk buttons on the band: Apply is the chalk button; Save is an outline in chalk. */
.band__actions .band-apply, .sheet-band .band__actions a.band-apply { min-height: 54px; height: auto; padding: 0 22px; white-space: normal; text-align: center; color: var(--board-deep) !important; text-decoration: none !important; font-weight: 700; }
.band__actions .band-apply .chalk-arrow { width: 1em; }
.band__actions .save-job.btn {
  width: auto; min-width: 6.5rem; max-width: none; min-height: 54px; padding: 0 20px;
  font: 700 1rem/1.1 var(--font-ui); color: var(--chalk); background: transparent;
  border: 2px solid rgba(243, 241, 232, .75); border-radius: var(--r-s) !important;
}
.band__actions .save-job.btn:hover { border-color: var(--chalk); background: rgba(243, 241, 232, .08); color: var(--chalk); }
.band__actions .save-job.btn:focus-visible { outline: 3px solid var(--focus-board); outline-offset: 3px; }

/* ---------- The pay, everywhere (ruling 0.4): one block, three sizes ---------- */
.payline { display: block; text-align: left; }
.payline p { margin: 0; max-width: none; }
.payline__figure { font: 700 1.6rem/1.15 var(--font-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.payline__num { white-space: nowrap; }
/* The currency name moves as one word: it drops to its own line under the
   figure when it does not fit, never breaks "Japanese / yen" (Fable, 0.9). */
.payline__code { white-space: nowrap; }
.payline__code, .payline__join, .payline__q, .payline__cur { font-family: var(--font-ui); font-weight: 700; letter-spacing: .02em; }
.payline__code, .payline__cur { font-size: .58em; margin-left: .1em; }
.payline__join { font-size: .62em; }
.payline__q { font-size: .58em; margin-right: .05em; }
.payline__words { font: 600 1.15rem/1.3 var(--font-ui); }
.payline__unit { margin-top: 3px !important; font: 600 1.02rem/1.3 var(--font-ui); }
.payline__about { margin-top: 5px !important; font-size: .98rem; line-height: 1.35; }
.payline__basis { margin-top: 8px !important; }
.payline__note { margin-top: 8px !important; max-width: 44ch; font-size: .95rem; line-height: 1.45; text-wrap: pretty; }
.payline--band { color: var(--chalk); }
.payline--band .payline__figure { font-size: clamp(2rem, 3.2vw, 2.5rem); color: var(--chalk); }
.payline--band .payline__code, .payline--band .payline__join, .payline--band .payline__q, .payline--band .payline__cur { color: var(--chalk-2); }
.payline--band .payline__unit, .payline--band .payline__about { color: var(--chalk-2); }
.payline--band .payline__note { color: var(--chalk-3); }
.payline--band .payline__words { color: var(--chalk); font-size: 1.3rem; }
.payline--band .stamp--reported { color: var(--chalk-2); border-color: currentColor; border-style: dashed; }
.payline--paper .payline__figure { color: var(--ink); }
.payline--paper .payline__code, .payline--paper .payline__join, .payline--paper .payline__q { color: var(--ink-2); }
.payline--paper .payline__unit, .payline--paper .payline__about { color: var(--ink-2); }
.payline--paper .payline__note { color: var(--ink-3); }
.stamp--reported { color: var(--stamp-pencil); border-color: currentColor; border-style: dashed; }
.paystrip { font: 700 15px/1.25 var(--font-mono); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); overflow-wrap: anywhere; }
.paystrip .payline__code, .paystrip .payline__join, .paystrip .payline__q, .paystrip .payline__cur { font-size: .78rem; color: var(--ink-2); }
.paystrip__unit { font: 600 .82rem var(--font-ui); color: var(--ink-2); }
.paystrip--words { font: 600 .95rem/1.3 var(--font-ui); color: var(--ink-2); }

/* ---------- The paper ---------- */
.sheet-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "aside" "main";
  gap: 18px; padding-block: clamp(18px, 3vw, 36px) clamp(48px, 6vw, 88px);
}
.sheet-card { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--card-pin); }
.sheet-card--about { grid-area: about; }
.sheet-card--main { grid-area: main; }
.sheet-aside { grid-area: aside; min-width: 0; display: grid; gap: 14px; align-self: start; }
.sheet-aside .sheet-glance { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--card-pin); border-top: 1px solid var(--rule); }
.sheet-section { padding: 24px clamp(18px, 3vw, 32px); border-top: 1px dashed var(--rule-strong); }
.sheet-card > .sheet-section:first-child, .sheet-aside .sheet-section { border-top: 0; }
.sheet-section h2, .sheet-questions > summary h2 { margin: 0 0 12px; font-family: var(--font-ui) !important; font-size: 1.3rem !important; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); }
.sheet-section h3 { margin: 0 0 8px; font-family: var(--font-ui) !important; font-size: 1rem !important; font-weight: 700; color: var(--ink); }
.sheet-section p { max-width: 66ch; margin: 0 0 10px; font-size: 1.04rem; line-height: 1.58; color: var(--ink); }
.sheet-section p:last-child { margin-bottom: 0; }
.sheet-small { font-size: .92rem !important; line-height: 1.5 !important; color: var(--ink-2) !important; }

/* Fact rows: the label, then the fact; a row from the posting and a row of typical wording read the same. */
.facts { margin: 0; display: grid; }
.facts .fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px 20px; padding: 9px 0; border-top: 1px solid var(--rule); }
.facts .fact:first-child { border-top: 0; padding-top: 0; }
.facts .fact:last-child { padding-bottom: 0; }
.facts dt { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.facts dd { margin: 0; font-size: 1rem; line-height: 1.48; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.facts .fact[data-from="given"] dd { color: var(--ink-2); font-weight: 600; }
@media (min-width: 720px) {
  .sheet-card--main .facts .fact { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}

/* Phones fold the four secondary sections (JS-14); wide screens open them (js/job-page.js). */
details.sheet-fold { margin: 0; background: transparent !important; border: 0 !important; border-top: 1px dashed var(--rule-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.sheet-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; min-height: 44px; }
.sheet-fold > summary::-webkit-details-marker { display: none; }
.sheet-fold > summary::before { content: none !important; }
.sheet-fold > summary::after { content: "Show" !important; transform: none !important; font: 700 .9rem var(--font-ui); color: var(--stamp-blue); text-decoration: underline; text-underline-offset: .2em; }
.sheet-fold[open] > summary::after { content: "Hide" !important; }
.sheet-fold > summary h2 { margin: 0 !important; display: inline; }
.sheet-fold > summary:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 4px; }
.sheet-fold > .sheet-fold__body { padding-top: 12px; }
@media (min-width: 1000px) {
  .sheet-fold[data-open-desk] > summary { pointer-events: none; }
  .sheet-fold[data-open-desk] > summary::after { content: none !important; }
}

.who-label { display: inline-block; margin: 0 0 12px; padding: 5px 10px; font-size: .95rem; font-weight: 700; color: var(--ink); background: var(--sunken); border-radius: var(--r-s); }

.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; }
@media (min-width: 720px) { .setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.setup-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.setup-list li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.setup-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--ink-3); }
.setup-col--nice .setup-list li { color: var(--ink-2); }

.new-teacher { margin: 16px 0 0; padding: 16px 18px; background: var(--sunken); border-radius: var(--r-s); }
.new-teacher h3 { margin-bottom: 8px; }
.new-teacher__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.new-teacher__list li { position: relative; padding-left: 26px; font-size: .98rem; line-height: 1.5; color: var(--ink); }
.new-teacher__list li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--stamp-green); border-bottom: 2px solid var(--stamp-green); transform: rotate(-48deg);
}

.apply-steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; max-width: 66ch; }
.apply-steps li { position: relative; padding-left: 44px; font-size: 1.02rem; line-height: 1.55; color: var(--ink); counter-increment: step; }
.apply-steps li::before {
  content: counter(step); position: absolute; left: 0; top: .1em; width: 30px; height: 30px;
  display: grid; place-items: center; font: 700 .95rem/1 var(--font-mono); color: var(--chalk); background: var(--board); border-radius: var(--r-s);
}
.apply-never { font-weight: 700; }
.apply-prov { font-size: .95rem !important; color: var(--ink-2) !important; }
.apply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.apply-actions .btn { min-height: 48px; }
.apply-actions .save-job.btn { width: auto; min-width: 6rem; max-width: none; }

.posting-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.posting-body { display: grid; gap: .7em; color: var(--ink); overflow-wrap: anywhere; }
.posting-body p { margin: 0; max-width: 66ch; font-size: 1.02rem; line-height: 1.6; }
.posting-quote { margin: 0; padding: 12px 16px; max-width: 66ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink); background: var(--sunken); border-radius: var(--r-s); }
.posting-quote::before { content: "“"; color: var(--ink-3); } .posting-quote::after { content: "”"; color: var(--ink-3); }
details.posting-more { margin: 0; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; display: grid; gap: .7em; }
details.posting-more > summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; font-weight: 700; color: var(--stamp-blue); text-decoration: underline; text-underline-offset: .2em; }
details.posting-more > summary::-webkit-details-marker { display: none; }
details.posting-more > summary::before, details.posting-more > summary::after { content: none !important; }
details.posting-more[open] > summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.posting-prov { margin: 0 0 12px !important; font-size: .95rem !important; color: var(--ink-2) !important; }
.posting-terms { margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .96rem !important; color: var(--ink-2) !important; max-width: none !important; }
.posting-terms__k { font-weight: 700; color: var(--ink); margin-right: 6px; }

/* Hiring teachers? One quiet line at the foot of the sheet, the home page's own words. */
.sheet-recruit { margin: 20px 0 0 !important; padding-top: 16px; border-top: 1px dashed var(--rule-strong); font-size: .95rem !important; color: var(--ink-2) !important; }
.sheet-recruit a { font-weight: 700; color: var(--stamp-blue); }
.sheet-recruit .chalk-arrow { width: 1.1em; height: .75em; vertical-align: -.05em; margin-left: .1em; }

details.sheet-questions { margin: 0; background: transparent !important; border: 0 !important; border-top: 1px dashed var(--rule-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.sheet-questions > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; min-height: 44px; }
.sheet-questions > summary::-webkit-details-marker { display: none; }
.sheet-questions > summary::before { content: none !important; }
.sheet-questions > summary::after { content: "Show" !important; transform: none !important; font: 700 .9rem var(--font-ui); color: var(--stamp-blue); text-decoration: underline; text-underline-offset: .2em; }
.sheet-questions[open] > summary::after { content: "Hide" !important; }
.sheet-questions > summary h2 { margin: 0; display: inline; }
.sheet-questions > summary:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 4px; }
.questions { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 66ch; }
.questions li { position: relative; padding-left: 20px; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.questions li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--ink-3); }

.sheet-employer .back-link { color: var(--stamp-blue); }

/* Similar jobs: four compact rows on phones, two columns of cards from 720px. */
.sheet-similar .mini-jobs { gap: 10px; }
.sheet-similar .mini-job { padding: 12px 14px 12px 18px; gap: 2px; }
.sheet-similar .mini-job__title { font-size: .98rem; }
.sheet-similar .mini-job__pay { margin-top: 2px; font-size: .95rem; }
.sheet-similar .mini-job__where { font-size: .875rem; }

/* ---------- Following the teacher down the page ---------- */
.sheet-follow { display: none; }
.sheet-bar { display: none; }
@media (max-width: 999px) {
  .sheet-page.pay-followed, html.pay-followed .sheet-page { padding-bottom: 84px; }
  .sheet-bar[hidden] { display: none; }
  .sheet-bar {
    position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--rule-strong);
    box-shadow: 0 -10px 24px -14px rgba(20, 32, 28, .5);
  }
  .sheet-bar__pay { flex: 1 1 auto; min-width: 0; }
  .sheet-bar__pay[hidden] { display: none; }
  .sheet-bar .btn { min-height: 48px !important; flex: none; }
  .sheet-bar .save-job.btn { width: 5.6rem; min-width: 5.6rem; max-width: 5.6rem; padding: 0 8px; }
  .sheet-bar .job-apply { padding: 0 20px !important; }
}
@media (min-width: 1000px) {
  .sheet-layout { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "about aside" "main aside"; gap: 24px clamp(24px, 3vw, 40px); }
  .sheet-aside { position: sticky; top: 92px; }
  .sheet-follow[hidden] { display: none; }
  .sheet-follow { display: grid; gap: 12px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--card-lift); }
  .sheet-follow__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .sheet-follow .btn { min-height: 48px; white-space: normal; }
  .sheet-follow .save-job.btn { width: auto; min-width: 6rem; max-width: none; }
  .band__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "text scene" "pay scene" "eligibility scene" "actions scene"; align-items: start; }
  .band__scene { justify-self: end; align-self: start; width: 100%; max-width: 360px; margin-top: 10px; }
}
@media (max-width: 719px) {
  .sheet-section p { font-size: 1rem; line-height: 1.52; }
  .new-teacher { padding: 14px 16px; }
  .new-teacher__list { gap: 5px; }
  .new-teacher__list li { font-size: .95rem; line-height: 1.45; }
  .apply-steps { gap: 8px; }
  .apply-steps li { font-size: .98rem; line-height: 1.5; }
  .band__id { gap: 12px; }
  .band .band__title { font-size: clamp(1.85rem, 8.2vw, 2.3rem) !important; }
  .band__scene { width: min(100%, 300px); justify-self: center; }
  .band__actions .band-apply { flex: 1 1 auto; }
  .sheet-layout { padding-top: 14px; gap: 14px; }
  .sheet-card, .sheet-aside .sheet-glance { margin-inline: calc(var(--page-gutter, 20px) * -0.5); border-radius: var(--r-s); }
  .sheet-section { padding: 20px 18px; }
}

/* The chalk scene: crisp strokes with a soft halo, drawn once (motion in css/motion.css). */
.chalk-scene { overflow: visible; }
.chalk-scene .halo { stroke: rgba(243, 241, 232, .16); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chalk-scene .ink { stroke: var(--chalk); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chalk-scene .ink--thin { stroke-width: 1.8; }
.chalk-scene .ink--thick { stroke-width: 3.4; }
.chalk-scene .accent { stroke: var(--scene-accent, var(--chalk-yellow)); }
.chalk-scene .hatch { stroke: rgba(243, 241, 232, .34); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.chalk-scene .wash { fill: rgba(243, 241, 232, .07); stroke: none; }
.band[data-type^="online-maths"] .chalk-scene { --scene-accent: var(--track-maths); }
.band[data-type^="abroad"] .chalk-scene { --scene-accent: var(--track-inperson); }

/* An agency-placed job says so beside the employer's name (owner decision 7). */
.band__employer .via-agency { font-weight: 400; color: var(--chalk-3); }

/* Known facts lead; unknown terms remain a deliberate check, not repeated filler. */
.fact-gaps { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; }
.fact-gaps > summary { font-size: .95rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.fact-gaps[open] > summary { margin-bottom: 10px; }
.fact-gaps > summary:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 4px; }