/* 2K JUMPERS · per-badge detail pages (/badges/<slug>)
 *
 * One shared file rather than a <style> block in each of the 53 generated pages:
 * it is ~4KB, and inlining it would ship that 53 times and re-download it on every
 * badge a visitor opens. Cached once, it is free from the second page onward.
 *
 * The site has no CSS framework and no build step, so the page chrome here mirrors
 * badges.html by hand (header.top, nav.main, .wrap). chrome.js injects the drawer
 * CSS itself at mount, so only the desktop bar needs declaring.
 *
 * Every colour is a token from tokens.css. The only computed colours are the two
 * category values, passed in as --cat / --catink by the generator, both measured
 * against the dark plane at >= 4.5:1 before shipping (see badge_page.cat_ink).
 */

body { min-height: 100vh; }
.wrap { max-width: var(--jm-w-page); margin: 0 auto; padding: 0 var(--jm-s-5); }

/* ---- chrome, mirrored from badges.html ---------------------------------- */
header.top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--jm-plane) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--jm-line);
}
.top .wrap { display: flex; align-items: center; gap: var(--jm-s-5); height: 56px; }
.brand { display: flex; align-items: center; gap: var(--jm-s-2); color: inherit; text-decoration: none; }
.brand .wm { font-family: var(--jm-font-display); font-weight: 700; font-size: 17px;
             letter-spacing: 0.01em; text-transform: uppercase; }
nav.main { display: flex; gap: var(--jm-s-1); }
nav.main a {
  height: var(--jm-h-ctl); padding: 0 12px; border: 0; border-radius: var(--jm-r-2);
  display: inline-flex; align-items: center;
  background: transparent; color: var(--jm-ink-3); font: inherit; font-size: var(--jm-t-sm);
  font-weight: 500; cursor: pointer; text-decoration: none;
  transition: color var(--jm-dur-1) var(--jm-ease), background var(--jm-dur-1) var(--jm-ease);
}
nav.main a:hover { color: var(--jm-ink); background: var(--jm-surface-2); }
nav.main a[aria-current="page"] { color: var(--jm-ink); background: var(--jm-surface-3); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: var(--jm-s-2); }

/* ---- page --------------------------------------------------------------- */
.bp { padding: var(--jm-s-4) 0 var(--jm-s-8); max-width: 940px; }
/* The /jumpers hub is a comparison table, not prose. Its 11 columns measure
   1102px, so the 940px reading column above made a desktop visitor scroll
   sideways to reach Shots and Game (measured 2026-08-27: overflow 164px at
   both 1440 and 1920). Prose inside stays readable: .bp-lede is capped at
   68ch independently. Per-jumper and badge pages keep the 940px column. */
/* NOTE: this class lands on the SAME element as .wrap, so it overrides .wrap's
   cap rather than nesting inside it. max-width:100% here let the page run edge
   to edge at 1920 (measured 2026-08-27). Name the page width explicitly. */
/* Side padding is re-stated because .bp sets `padding: <top> 0 <bottom>`, which
   zeroes the 24px .wrap gives every other page. That was invisible while the hub
   was capped at 940px; at 1440 the table ran flush to the screen edge on a 1280
   laptop (measured 2026-08-27: main.left 0, main.right 1280). */
.bp--hub { max-width: var(--jm-w-page);
           padding-left: var(--jm-s-5); padding-right: var(--jm-s-5); }

.crumb { display: flex; gap: var(--jm-s-2); flex-wrap: wrap; align-items: center;
         font-size: var(--jm-t-sm); color: var(--jm-ink-3); margin-bottom: var(--jm-s-4); }
.crumb a { color: var(--jm-ink-2); text-decoration: none; }
.crumb a:hover { color: var(--jm-ink); text-decoration: underline; }
.crumb span[aria-hidden] { color: var(--jm-ink-3); opacity: 0.6; }

/* No category rail here on purpose: the filled .bp-cat pill directly below already
   carries the category colour, and a second accent for the same fact is noise. */
.bp-head { display: flex; gap: var(--jm-s-4); align-items: center; }
.bp-art { flex: none; width: 96px; height: 96px; object-fit: contain; }
/* Pushed to the far edge of the head row, never in the h1's way. flex:none so a
   long jumper name cannot squeeze "Share" onto two lines. */
.bp-share { flex: none; margin-left: auto; align-self: center; }
.bp-head h1 {
  font-family: var(--jm-font-display); font-weight: 700;
  font-size: var(--jm-t-display); line-height: var(--jm-t-display-lh);
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
}
.bp-meta { display: flex; gap: var(--jm-s-2); flex-wrap: wrap; align-items: center;
           margin: var(--jm-s-2) 0 0; font-size: var(--jm-t-sm); }
/* White on the solid category fill, the same treatment Lance picked for the table
   ("flip the badges, make the background the color and the text white"). All six
   fills were measured against #fff before shipping; --catink is the lighter
   text-on-dark variant and is deliberately NOT used here. */
.bp-cat { background: var(--cat, var(--jm-surface-2)); color: #fff;
          padding: 3px 9px; border-radius: var(--jm-r-1); font-weight: 600; }
.bp-hgt { color: var(--jm-ink-2); font-family: var(--jm-font-mono); }
/* The stamp is the whole point of the evergreen-URL bet: a reader must be able to
   tell WHICH GAME this page describes without guessing from the copy. */
.bp-stamp { color: var(--jm-ink-2); font-size: var(--jm-t-micro);
            border: 1px solid var(--jm-line); padding: 3px 8px; border-radius: var(--jm-r-1); }

.bp-lede { font-size: var(--jm-t-body); line-height: var(--jm-t-body-lh);
           color: var(--jm-ink); max-width: 68ch; margin: var(--jm-s-5) 0 0; }
/* .bp-desc removed with the duplicate paragraph it styled (2026-08-23). */

.bp h2 {
  font-family: var(--jm-font-display); font-weight: 700; font-size: 19px;
  line-height: 25px; letter-spacing: 0.01em; margin: var(--jm-s-6) 0 var(--jm-s-3);
}

/* ---- requirement ladder -------------------------------------------------- */
/* min-width:0 on the wrapper, not just overflow-x. A grid/flex child defaults to
   min-width:auto, which refuses to shrink below its content and pushes the whole
   page into a horizontal scroll instead of scrolling the table alone. */
.bp-tablewrap { overflow-x: auto; min-width: 0; border: 1px solid var(--jm-line);
                border-radius: var(--jm-r-2); }
.bp-table { width: 100%; border-collapse: collapse; font-size: var(--jm-t-sm); }
.bp-table th, .bp-table td { padding: 11px 14px; text-align: left;
                             border-bottom: 1px solid var(--jm-line); }
.bp-table tbody tr:last-child th, .bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table thead th { background: var(--jm-surface-2); color: var(--jm-ink-2);
                     font-weight: 600; font-size: var(--jm-t-micro);
                     text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.bp-table .num { text-align: right; font-family: var(--jm-font-mono); font-weight: 600;
                 color: var(--jm-ink); white-space: nowrap; }
.bp-table .reqtxt { color: var(--jm-ink-2); }
.bp-table .lv { display: flex; align-items: center; gap: var(--jm-s-2);
                font-weight: 600; white-space: nowrap; }
.bp-table .lv img { flex: none; }
/* Tier colours lifted from the table view. Bronze was 3.69:1 as a text colour and
   was lightened to 6.27:1; do not put it back to the metallic value. */
.lv-bronze { color: #D69B6B; }
.lv-silver { color: #C6D0DA; }
.lv-gold   { color: #E7C25A; }
.lv-hof    { color: #B99BFF; }

.bp-note { color: var(--jm-ink-2); font-size: var(--jm-t-sm);
           line-height: var(--jm-t-body-lh); margin: var(--jm-s-3) 0 0; max-width: 68ch; }
.bp-cta { margin-top: var(--jm-s-4); }
/* Two doors out of the hub: the board, and compare. They wrap rather than
   shrink, so neither ever clips on a phone. */
.bp-ctas { display: flex; flex-wrap: wrap; gap: var(--jm-s-3); align-items: center; }
/* 13 columns at the shared 14px side padding costs 364px of pure gutter, which
   was still hiding the last column on a 1280 laptop. Tighter here only. */
.bp--hub .jhub th, .bp--hub .jhub td { padding-left: 11px; padding-right: 11px; }

/* ---- question sections --------------------------------------------------- */
.qa { border-top: 1px solid var(--jm-line); padding-top: var(--jm-s-1); }
.qa p { color: var(--jm-ink-2); font-size: var(--jm-t-body);
        line-height: var(--jm-t-body-lh); margin: 0; max-width: 68ch; }

/* ---- related links ------------------------------------------------------- */
.rel { border-top: 1px solid var(--jm-line); padding-top: var(--jm-s-1); }
.rel ul { list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
          gap: var(--jm-s-2); }
.rel a { display: flex; align-items: center; gap: var(--jm-s-2);
         padding: 9px 11px; border: 1px solid var(--jm-line); border-radius: var(--jm-r-2);
         color: var(--jm-ink); text-decoration: none; font-size: var(--jm-t-sm);
         background: var(--jm-surface); }
.rel a:hover { background: var(--jm-surface-2); border-color: var(--jm-line-strong); }
.rel a img { flex: none; }

/* ---- next up ------------------------------------------------------------- */
.bp-next { margin-top: var(--jm-s-7); padding: var(--jm-s-5);
           border: 1px solid var(--jm-line); border-radius: var(--jm-r-3);
           background: var(--jm-surface); }
.bp-next h2 { margin-top: 0; }
.bp-next p { color: var(--jm-ink-2); font-size: var(--jm-t-body);
             line-height: var(--jm-t-body-lh); max-width: 62ch; margin: 0; }
.bp-next-row { display: flex; gap: var(--jm-s-3); flex-wrap: wrap; margin-top: var(--jm-s-4); }

/* ---- footer -------------------------------------------------------------- */
.bp-foot { border-top: 1px solid var(--jm-line); padding-top: var(--jm-s-4);
           padding-bottom: var(--jm-s-7); display: flex; gap: var(--jm-s-4);
           flex-wrap: wrap; align-items: center; font-size: var(--jm-t-sm); }
.bp-foot-wm { font-family: var(--jm-font-display); font-weight: 700; font-size: 13px;
              letter-spacing: 0.06em; text-transform: uppercase; }
.bp-foot-legal { font-size: var(--jm-t-micro); margin-left: auto;
                 max-width: 560px; text-align: right; }

/* ---- narrow -------------------------------------------------------------- */
/* The nav/drawer swap at 860px is NOT declared here: chrome.js injects that rule
   itself for every page, and a second copy would be one more place to forget when
   the breakpoint moves. */
@media (max-width: 640px) {
  .bp-head { flex-direction: column; align-items: flex-start; gap: var(--jm-s-3); }
  /* the auto margin means nothing once the row is a column, and it would
     otherwise shove the button down past the gap. min-height because the
     shared .jm-btn is 32px tall, under the 44px touch target this is now
     a phone-first control rather than one more link in a row. */
  /* justify-content, NOT text-align: .jm-btn is an inline-flex box, so once it
     stretches full width the label sits at flex-start and text-align does
     nothing. min-height because .jm-btn is 32px tall, under the 44px touch
     target this now needs as a phone-first control. */
  .bp-share { margin-left: 0; align-self: stretch; justify-content: center;
              min-height: 44px; }
  .bp-art { width: 72px; height: 72px; }
  .bp-foot-legal { margin-left: 0; text-align: left; }
  .rel ul { grid-template-columns: 1fr; }

  /* STACK the requirement table on phones instead of letting it scroll sideways.
     A 6-column table inside an overflow-x scroller technically "fits", and the
     measurement pass agreed because the PAGE never overflowed. But the actual
     experience on a 390px screen was reading the word "Bronze" and then having to
     drag the table right to find the number, on the one page whose entire job is
     showing you that number. Most 2K traffic is phones, so this is the primary
     view, not the fallback.

     The per-attribute number columns are dropped here rather than squeezed: the
     Requirement column already says "65 Mid-Range Shot or 65 Three-Point Shot",
     which is the same data as a sentence. One row per tier, no scrolling. */
  .bp-tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  .bp-table, .bp-table tbody, .bp-table tr { display: block; width: 100%; }
  .bp-table thead { display: none; }
  .bp-table .num { display: none; }
  .bp-table tr {
    border: 1px solid var(--jm-line); border-radius: var(--jm-r-2);
    padding: 10px 12px; margin-bottom: var(--jm-s-2);
    background: var(--jm-surface);
  }
  .bp-table tr:last-child { margin-bottom: 0; }
  .bp-table th, .bp-table td { display: block; border-bottom: 0; padding: 0; }
  .bp-table .lv { font-size: var(--jm-t-sm); }
  .bp-table .reqtxt {
    margin-top: 6px; padding-left: 38px;   /* clears the 30px badge art + its gap */
    color: var(--jm-ink); font-family: var(--jm-font-mono);
    font-size: var(--jm-t-xs, 11px); line-height: 16px;
  }
}

/* ---- jumper pages (share this sheet; same layout language) --------------- */
/* Hold-by-hold green rate as a bar per row. Pure CSS so a crawler and a no-JS
   visitor see the measurement, not a placeholder. Rows inside the window get a
   left rule so the window reads as a band without needing a chart library. */
.holds th[scope="row"] { font-family: var(--jm-font-mono); font-weight: 600;
                         color: var(--jm-ink); white-space: nowrap; width: 1%; }
/* 80px, not 120: at 320px the four columns plus padding came to 307px in a 305px
   viewport and the whole PAGE scrolled sideways by 2px. Measured 2026-08-23. */
.holds td:nth-child(2) { width: 50%; min-width: 80px; }
.holds .bar { display: block; height: 10px; border-radius: 3px;
              background: var(--jm-ink-3); min-width: 2px; }
.holds tr.in .bar { background: var(--jm-brand); }
.holds tr.in th[scope="row"] { box-shadow: inset 3px 0 0 var(--jm-brand); padding-left: 11px; }
/* On phones this table is 4 narrow columns and fits; do NOT let the generic
   stacked-table rule below 640px apply, it would hide the bar column. */
@media (max-width: 640px) {
  .holds, .holds tbody, .holds tr { display: table; }
  .holds tbody { display: table-row-group; } .holds tr { display: table-row; margin: 0; border: 0; padding: 0; background: none; }
  .holds th, .holds td { display: table-cell; padding: 8px 8px; border-bottom: 1px solid var(--jm-line); }
  /* safety net: if a future row is ever wider than the phone, the TABLE scrolls,
     never the page */
  .bp-tablewrap:has(.holds) { overflow-x: auto; }
  .holds thead { display: table-header-group; }
  .holds .num { display: table-cell; }
  .holds .reqtxt { padding-left: 0; }
}
.bp-stale { border-left: 3px solid var(--jm-gold, #E7C25A); padding-left: 12px;
            margin-top: var(--jm-s-3); color: var(--jm-ink); }
.bp-stale a { color: var(--jm-brand); font-weight: 600; text-decoration: none; }
.bp-stale a:hover { text-decoration: underline; }
.jhub th[scope="row"] a { color: var(--jm-ink); text-decoration: none; font-weight: 600; }
.jhub th[scope="row"] a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  /* hub table keeps its columns too; 6 cols but short values, and it scrolls
     inside its wrapper rather than stacking into 6 unlabeled lines */
  .jhub, .jhub tbody, .jhub tr { display: table; width: 100%; }
  .jhub tbody { display: table-row-group; } .jhub tr { display: table-row; margin: 0; border: 0; padding: 0; background: none; }
  .jhub th, .jhub td { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--jm-line); white-space: nowrap; }
  .jhub thead { display: table-header-group; }
  .jhub .num { display: table-cell; }
  .jhub .reqtxt { padding-left: 0; margin: 0; font-size: var(--jm-t-sm); }
  .bp-tablewrap:has(.jhub) { overflow-x: auto; border: 1px solid var(--jm-line); border-radius: var(--jm-r-2); }
}

/* ---- attribute pages ------------------------------------------------------ */
.bp-table thead th a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.bp-table thead th a:hover { color: var(--jm-ink); }
.ladder th[scope="row"] { font-family: var(--jm-font-mono); font-weight: 700; width: 1%;
                          white-space: nowrap; color: var(--jm-ink); }
.ladder td { line-height: 1.9; }
.ladder td a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.ladder td a:hover { text-decoration: underline; }
.attrt th[scope="row"] a { display: inline-flex; align-items: center; gap: 8px;
                           color: var(--jm-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.attrt th[scope="row"] a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  /* both attribute tables keep their columns; ladder is 2 cols, attr table scrolls */
  .ladder, .ladder tbody, .ladder tr, .attrt, .attrt tbody, .attrt tr { display: table; width: 100%; }
  .ladder tbody, .attrt tbody { display: table-row-group; }
  .ladder tr, .attrt tr { display: table-row; margin: 0; border: 0; padding: 0; background: none; }
  .ladder th, .ladder td, .attrt th, .attrt td { display: table-cell; padding: 8px 8px; border-bottom: 1px solid var(--jm-line); }
  .ladder thead, .attrt thead { display: table-header-group; }
  .attrt .num { display: table-cell; }
  .attrt .reqtxt { padding-left: 0; margin: 0; font-size: var(--jm-t-xs, 11px); }
  .ladder td a { white-space: normal; }
  /* the ladder's two header cells inherit nowrap from .bp-table thead th, and
     "Defensive Rebound" + "What that rating reaches" is 310px in a 288px column,
     so the PAGE scrolled sideways on every two-word attribute at 320px. Measured
     2026-08-23, 7 of 20 pages. Let the header wrap; add the same safety net the
     other tables have. */
  .ladder thead th { white-space: normal; }
  .bp-tablewrap:has(.ladder) { overflow-x: auto; }
  .bp-tablewrap:has(.attrt) { overflow-x: auto; border: 1px solid var(--jm-line); border-radius: var(--jm-r-2); }
}

/* ---- height pages --------------------------------------------------------- */
.bp-hgt a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.hnav ul { list-style: none; margin: var(--jm-s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hnav a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
          border: 1px solid var(--jm-line); border-radius: var(--jm-r-2); color: var(--jm-ink-2);
          text-decoration: none; font-family: var(--jm-font-mono); font-size: var(--jm-t-sm); }
.hnav a:hover { color: var(--jm-ink); background: var(--jm-surface-2); }
.hnav a[aria-current] { color: var(--jm-ink); background: var(--jm-surface-3); border-color: var(--jm-line-strong); }
/* the count is .jm-dim (ink-3), which measured 3.44:1 inside the chips on all 20
   pages, 2026-08-23. ink-2 clears 4.5 on every chip state. */
.hnav a .jm-dim { color: var(--jm-ink-2); }
.hlist, .hlists ul { list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--jm-s-2); }
.hlist a, .hlists a { display: flex; align-items: center; gap: var(--jm-s-2); padding: 9px 11px;
          border: 1px solid var(--jm-line); border-radius: var(--jm-r-2); color: var(--jm-ink);
          text-decoration: none; font-size: var(--jm-t-sm); background: var(--jm-surface); }
.hlist a:hover, .hlists a:hover { background: var(--jm-surface-2); border-color: var(--jm-line-strong); }
.hlist.lost a { border-color: color-mix(in srgb, #E0533F 45%, var(--jm-line)); }
.hlist a .hname { flex: 1; }
.hlist a .jm-dim { white-space: nowrap; font-family: var(--jm-font-mono); font-size: var(--jm-t-xs, 11px); }
.hcat { font-family: var(--jm-font-display); font-weight: 600; font-size: var(--jm-t-sm);
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--jm-ink-2);
        margin: var(--jm-s-4) 0 var(--jm-s-2); }
.hcat:first-child { margin-top: 0; }
.hhub th[scope="row"] a { color: var(--jm-ink); text-decoration: none; font-weight: 600; font-family: var(--jm-font-mono); }
.hhub th[scope="row"] a:hover { text-decoration: underline; }

/* One row per lockout GROUP (see height_page.hub_html). The range is the label,
   the individual heights underneath are the links: every one of the 20 height
   pages still needs an internal link from here, so the row collapse must not
   collapse the links with it. */
.hh-range { display: block; font-family: var(--jm-font-mono); font-weight: 700;
            font-size: var(--jm-t-sm); color: var(--jm-ink); white-space: nowrap; }
.hh-links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.hh-links a { font-size: var(--jm-t-micro); font-weight: 500 !important;
              color: var(--jm-ink-2) !important; }
/* A one-height group renders the range ITSELF as the link (see hub_html), so
   there is no second line to suppress. Hiding .hh-links here instead would have
   removed that page's only inbound link and orphaned it. */
.hh-range a { color: var(--jm-ink); text-decoration: none; }
.hh-range a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .hlist, .hlists ul { grid-template-columns: 1fr; }
  .hhub, .hhub tbody, .hhub tr { display: table; width: 100%; }
  .hhub tbody { display: table-row-group; } .hhub tr { display: table-row; margin: 0; border: 0; padding: 0; background: none; }
  .hhub th, .hhub td { display: table-cell; padding: 8px 8px; border-bottom: 1px solid var(--jm-line); }
  .hhub thead { display: table-header-group; } .hhub .num { display: table-cell; }
  .hhub .reqtxt { padding-left: 0; margin: 0; font-size: var(--jm-t-xs, 11px); }
  .bp-tablewrap:has(.hhub) { overflow-x: auto; border: 1px solid var(--jm-line); border-radius: var(--jm-r-2); }
}

/* ---- Shot attributes (2K27 creator grades) ---------------------------------
   The meter carries the grade at a glance, the letter is the exact value. Same
   green as the window: both are "more is better", and a second accent hue would
   imply a different KIND of fact. */
.bp-attrs { margin-top: var(--jm-s-6); }
.ja { display: grid; gap: 2px; max-width: 460px; }
.ja-row { display: grid; grid-template-columns: 1fr 110px 36px; align-items: center;
          gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--jm-line); }
.ja-row:last-child { border-bottom: 0; }
.ja-k { font-size: var(--jm-t-sm); color: var(--jm-ink-2); }
.ja-bar { height: 6px; border-radius: 999px; background: var(--jm-out); overflow: hidden; }
.ja-bar > span { display: block; height: 100%; background: var(--jm-core); border-radius: 999px; }
.ja-g { font-family: var(--jm-font-mono); font-size: var(--jm-t-sm); font-weight: 600;
        color: var(--jm-core-edge); text-align: right; }
@media (max-width: 640px) {
  .ja-row { grid-template-columns: 1fr 80px 32px; gap: 10px; }
}

/* grade cell inside a table column: meter under the letter, right-aligned to
   sit in the same rhythm as the numeric columns beside it */
.gcell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 56px; }
.gbar { display: block; width: 100%; height: 5px; border-radius: 999px; background: var(--jm-out); overflow: hidden; }
.gbar > span { display: block; height: 100%; background: var(--jm-core); border-radius: 999px; }
.gtxt { font-family: var(--jm-font-mono); font-size: var(--jm-t-sm); font-weight: 600; color: var(--jm-core-edge); }

/* The recipe list on the SEO page: what someone needs to BUILD the jumper. */
.jp-recipe { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; max-width: 460px; }
.jp-recipe dt { font-size: var(--jm-t-sm); color: var(--jm-ink-3); }
.jp-recipe dd { margin: 0; text-align: right; font-family: var(--jm-font-mono);
                font-size: var(--jm-t-sm); color: var(--jm-ink); }

/* The measured window lives behind sign-in. This block is the door, not a
   teaser wall: it says exactly what is on the other side. */
.bp-locked { margin-top: var(--jm-s-6); padding: var(--jm-s-5);
             border: 1px solid var(--jm-line-strong); border-radius: var(--jm-r-3);
             background: var(--jm-surface-1); }
.bp-locked h2 { margin-top: 0; }
.bp-locked p { color: var(--jm-ink-2); max-width: 60ch; }