/* Mahjongg School, the public site (0026, 12 Sep: the look). The same world as the table: ivory paper to read
   on, forest felt and walnut where the table shows, amber for the one thing to press, the tiles the one bold
   thing. Atkinson Hyperlegible for reading (drawn so that b/d, 1/l/I and 0/O cannot be confused; the players
   are sixty to a hundred), Outfit for the titles. The fonts are vendored beside the table's (served at /fonts). */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400i.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/outfit-500.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/outfit-700.woff2?v=7947b61a32") format("woff2"); }

:root {
  --ink: #232019; --ink-soft: #5c5445; --paper: #f6f1e6; --paper-2: #ece5d5; --line: #d9cfb8;
  --felt: #35693f; --felt-deep: #244a2d; --walnut: #2a231b; --walnut-2: #17120d;
  --wood: #7b4a27; --wood-2: #4e2e18; --wood-light: #a5703f;
  --accent: #b8771f; --accent-ink: #fff; --accent-deep: #915c14;
  --tile: #fdfbf5; --tile-edge: #d9d2c2; --tile-shadow: rgba(60, 45, 25, 0.28);
  --card: #fffdf8; --shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.08); --shadow-md: 0 6px 16px rgba(40, 30, 15, 0.12);
  --bam: #1a7a44; --crak: #b02a2f; --dot: #1e5391; --wind: #6b5636; --joker: #7a3d8f;
  --radius: 12px;
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Outfit", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --sans: var(--font);
}
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.55 var(--font); color: var(--ink); background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
.card-surface, .card { background: var(--card); }
a { color: var(--accent-deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 2.5rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
article { max-width: 44rem; margin: 0 auto; }
.lead { font-size: 1.2rem; }
.fine { color: var(--ink-soft); font-size: 0.92rem; }
.eyebrow { font-weight: 700; color: var(--felt); margin-bottom: 0.6rem; }

/* header and footer */
header.site { display: flex; align-items: center; gap: 1.2rem; padding: 0.7rem 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
a.brand { font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.35rem; display: inline-flex; align-items: center; gap: 0.6rem; letter-spacing: -0.01em; margin-right: auto; }
.mark { display: inline-block; width: 1.5em; height: 2.1em; background: url("/static/logo.svg?v=7947b61a32") no-repeat center / contain; flex: none; }
header.site nav { display: flex; gap: 0.15rem; flex-wrap: wrap; align-items: center; }
header.site nav a, header.site nav .bell { min-height: 44px; display: inline-flex; align-items: center; padding: 0.4rem 0.8rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 700; transition: background 150ms; }
header.site nav a:hover { background: var(--paper-2); }
header.site nav a[aria-current="page"] { background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--felt); border-radius: 12px 12px 4px 4px; }
header.site nav a.play { background: var(--felt); color: #fff; }
header.site nav a.play:hover { background: var(--felt-deep); }
header.site nav.me { border-left: 1px solid var(--line); padding-left: 0.8rem; }
header.site nav a.account, header.site nav summary.account { border: 1px solid var(--line); background: var(--card); }
header.site nav a.account:hover, header.site nav summary.account:hover { background: var(--paper-2); }
/* the account menu (Jeff, 13 Sep: sign out and Ops belong in the header): a details element, no script needed */
.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.9rem 0.3rem 0.5rem; border-radius: 999px; font-weight: 700; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary .avatar { vertical-align: middle; }
.account-menu[open] summary { background: var(--paper-2); }
.account-panel { position: absolute; right: 0; top: 3rem; min-width: 11rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.18); padding: 0.4rem; z-index: 31; display: grid; }
.account-panel a, .account-panel button.link { display: block; padding: 0.55rem 0.9rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; text-align: left; width: 100%; }
.account-panel a:hover, .account-panel button.link:hover { background: var(--paper-2); text-decoration: none; }
.account-panel form { margin: 0; border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.3rem; }
header.site nav .bell { border: 0; background: none; cursor: pointer; padding: 0.4rem 0.6rem; }
header.site nav .bell svg { display: block; color: var(--ink); }
.feedback-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 700; background: var(--card); }
.feedback-tab:hover { background: var(--paper-2); }
.feedback-form { display: grid; gap: 0.9rem; max-width: 40rem; }
.feedback-form label { display: grid; gap: 0.3rem; font-weight: 700; }
.feedback-form textarea { font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; width: 100%; }
footer.site { background: var(--walnut); color: rgba(255, 255, 255, 0.82); padding: 2.4rem 1.5rem 1.6rem; margin-top: 3rem; }
.foot-grid { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.foot-grid h3 { color: #fff; font-size: 1.05rem; margin: 0 0 0.6rem; }
.foot-grid a, .foot-grid button.link { display: block; color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 0.25rem 0; font-size: 1rem; }
.foot-grid a:hover, .foot-grid button.link:hover { color: #fff; text-decoration: underline; }
.foot-brand .mark { width: 2.2rem; height: 3rem; margin-bottom: 0.4rem; }
.foot-brand strong { display: block; font-family: var(--display); color: #fff; font-size: 1.2rem; margin-bottom: 0.4rem; }
.foot-brand p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; max-width: 30ch; }
footer.site .fine { max-width: 72rem; margin: 1.8rem auto 0; color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } header.site nav.me { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* buttons and forms */
.button { display: inline-block; padding: 0.75rem 1.3rem; background: var(--accent); color: var(--accent-ink); text-decoration: none; border-radius: 10px; font: 700 1rem var(--font); border: 1px solid transparent; cursor: pointer; box-shadow: 0 2px 0 var(--accent-deep); }
.button:hover { filter: brightness(1.06); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.button.danger { background: var(--crak); box-shadow: 0 2px 0 #7d1d21; }
.button.secondary:hover { background: var(--paper-2); }
form.inline { display: inline; }
button.link { background: none; border: none; color: var(--accent-deep); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
input[type=email], input[type=text], input[type=url], input[type=search], select { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
input[type=email] { display: block; width: 100%; margin: 0.3rem 0 1rem; }
.inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.inline-form input[type=email] { display: inline-block; width: min(24rem, 100%); margin: 0; }
.consent, .dev { color: var(--ink-soft); font-size: 0.9rem; }
.ok { color: var(--felt); font-weight: 700; }
table { border-collapse: collapse; } td, th { padding: 0.35rem 0.9rem 0.35rem 0; text-align: left; border-bottom: 1px solid var(--line); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- the front page ------------------------------------------------------------------------------------- */
/* The hero is the table: felt under a lamp, a wooden rack, real tiles. The headline sits on the felt. */
.hero {
  position: relative; color: #fff; margin: 0 -1.5rem; padding: 3rem 1.5rem 2.6rem;
  background:
    radial-gradient(70% 55% at 50% 10%, rgba(255, 235, 190, 0.18), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--felt), var(--felt-deep));
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.35);
}
.hero-inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); color: #fff; max-width: 18ch; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.hero .lead { max-width: 52ch; color: rgba(255, 255, 255, 0.92); }
.hero .fine { color: rgba(255, 255, 255, 0.78); }
.hero .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.2rem 0 0.8rem; }
/* the lobby's tables playing now, under the hero's buttons (15 Sep): a live dot and one line into the lobby */
.hero .playing-now { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.8rem; font-weight: 600; }
.hero .playing-now a { color: #fff; text-underline-offset: 3px; }
.hero .hands-played { margin: 0 0 0.8rem; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; }
.hero .hands-played strong { color: #fff; font-size: 1.15em; }
.hero .hands-played a { color: #fff; text-underline-offset: 3px; white-space: nowrap; }
.hero .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #7ee29b; box-shadow: 0 0 0 0 rgba(126, 226, 155, 0.6); animation: live-dot 2s ease-out infinite; flex: none; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(126, 226, 155, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(126, 226, 155, 0); } }
@media (prefers-reduced-motion: reduce) { .hero .live-dot { animation: none; } }
.hero .button.secondary { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero .button.secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* the rack in the hero: the table's own wood and tiles, drawn from the same sprite */
.rack-demo {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-end;
  padding: 16px 16px 20px; border-radius: 14px 14px 10px 10px; width: fit-content; max-width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 235, 200, 0.16), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(90deg, rgba(255, 230, 190, 0.05) 0 3px, transparent 3px 11px, rgba(0, 0, 0, 0.05) 11px 13px, transparent 13px 29px),
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 30%, var(--wood-2) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.28), inset 0 -7px 0 rgba(0, 0, 0, 0.30), 0 18px 34px rgba(0, 0, 0, 0.45);
}
.rack-demo .tile {
  width: 58px; height: 81px; border-radius: 7px; position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 16%),
    linear-gradient(0deg, rgba(88, 66, 36, 0.30), rgba(88, 66, 36, 0) 11%),
    radial-gradient(130% 95% at 50% 18%, #fffdf7 0%, var(--tile) 55%, var(--tile-edge) 135%);
  box-shadow: 0 3px 0 var(--tile-shadow), 0 9px 12px rgba(0, 0, 0, 0.42);
  --pip-bam: var(--bam); --pip-crak: var(--crak); --pip-dot: var(--dot); --pip-wind: var(--wind); --tile-ink: var(--ink); --tile-face: var(--tile);
}
.rack-demo .tile svg { position: absolute; left: 6%; top: 11%; width: 88%; height: 84%; }
.rack-demo .tile.joker { display: grid; place-items: center; font: 800 1.1rem var(--display); color: var(--joker); }
.rack-demo .tile.flower { display: grid; place-items: center; font: 800 1.4rem var(--display); color: var(--bam); }
.hero .caption { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: 0.6rem 0 0; }
@media (min-width: 880px) {
  .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
}

/* every inner page opens with a felt band: the title, one sentence, a figure of real tiles (MASTER.md) */
.band-head { color: #fff; margin: 0 -1.5rem; padding: 2.4rem 1.5rem 2.2rem;
  background:
    radial-gradient(70% 60% at 30% 0%, rgba(255, 235, 190, 0.16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--felt), var(--felt-deep));
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.3); }
.band-head .inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.band-head h1 { color: #fff; margin-bottom: 0.4rem; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.band-head .lead { color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 46ch; }
.band-head .actions { margin: 1.2rem 0 0; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.band-head .button.secondary { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.band-head .figure { justify-content: flex-end; }
/* a picture of the thing the page is about, in the band, instead of a row of tiles that means nothing and was
   the same row on five pages (18 Sep: "alot of the pages have the same graphics. (tile pics) why?") */
.band-head .band-shot { margin: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); background: var(--card); }
.band-head .band-shot img { display: block; width: 100%; height: auto; max-height: 15rem; object-fit: cover;
  object-position: top; }
@media (max-width: 800px) { .band-head .band-shot { display: none; } }
.band-head + h2, .band-head + .cards-grid, .band-head + .rules-layout { margin-top: 2.2rem; }
.band-head .figure .tile { box-shadow: 0 3px 0 var(--tile-shadow), 0 10px 16px rgba(0, 0, 0, 0.45); }
@media (max-width: 800px) { .band-head .inner { grid-template-columns: 1fr; } .band-head .figure { justify-content: flex-start; } }

/* the club hub (0026 item 21): the band in the club's own felt, the face big, the access code as a form */
.band-head.hub .hub-face { margin: 0 0 0.6rem; }
.band-head.hub .where { color: rgba(255, 255, 255, 0.92); font-weight: 700; margin: 0.4rem 0 0; }
.band-head.hub .join { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; }
.band-head.hub .join label { display: grid; gap: 0.25rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.band-head.hub .join input { margin: 0; width: 11rem; font: 700 1.1rem var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.band-head.hub .warn { color: #ffd9c2; font-weight: 700; margin: 0.8rem 0 0; }
.band-head.hub .ok { color: #dff5d6; }
.band-head.hub .fine { color: rgba(255, 255, 255, 0.78); }
.band-head.hub .button.secondary { color: #fff; }
.card ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.card ul.plain .avatar { vertical-align: middle; margin-right: 4px; }
strong.code { font-family: var(--display); letter-spacing: 0.12em; background: var(--paper-2); padding: 0.1rem 0.5rem; border-radius: 8px; }
.felts { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.felts legend { font-size: 0.92rem; margin-bottom: 4px; }
.felt-choice { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; border-radius: 10px; padding: 0.25rem 0.6rem 0.25rem 0.3rem; }
.felt-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.felt-choice .swatch { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.felt-choice:has(input:checked) { outline: 3px solid var(--accent); }
.felt-choice:has(input:focus-visible) { outline: 3px solid var(--felt); }

/* the market: a price on every card, struck through in beta like the pricing page */
.card .price { font: 700 1.15rem var(--display); color: var(--ink); margin: 0.2rem 0 0; flex: 0; }
.card .price s { color: var(--ink-soft); font-weight: 400; margin-right: 0.4rem; }
.card button.go { font: 700 1rem var(--font); color: var(--accent-deep); text-decoration: none; }
.card button.go:hover { text-decoration: underline; }
.market-box .inline-form label { display: grid; gap: 0.2rem; font-size: 0.92rem; }
.warn { color: #8a2a12; font-weight: 700; }

/* the .org (0026 item 30): a reading page, 65 characters wide, the figures drawn in the text, a way into the school */
header.site.org nav.pages { margin-left: auto; }
/* the reading room's header (14 Sep): a word under the brand, the pages in two named groups, one button */
header.site.org .brand-words { display: inline-flex; flex-direction: column; line-height: 1.05; }
header.site.org .brand-words small { font-family: var(--font); font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0; }
header.site nav.grouped { gap: 0.9rem; }
header.site .nav-group { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem 0.3rem 0.15rem 0; border-right: 1px solid var(--line); margin-right: 0.3rem; }
header.site .nav-label { font-size: 0.8rem; font-weight: 700; color: var(--felt); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.5rem 0 0.2rem; }
main > .into-the-school { max-width: 46rem; margin: 3rem auto 0; }
.settlement-words { font-weight: 700; margin: 0.8rem 0 0; }
/* teacher pages (14 Sep): a photo and a bio */
.teacher-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-md); }
.teacher-photo.small { width: 56px; height: 56px; border-width: 2px; }
.teacher-about { max-width: 46rem; margin: 1.5rem auto 0; font-size: 1.08rem; line-height: 1.6; }
/* certificates (14 Sep): the shelf; an earned one is felt-edged, a waiting one quiet, a locked one says so */
.cert-shelf .cert { border-top: 5px solid var(--line); }
.cert-shelf .cert.earned { border-top-color: var(--felt); }
.cert-shelf .cert.locked { border-top-color: var(--accent); }
.cert-shelf .cert.waiting { opacity: 0.72; }
.rating-history { font-size: 0.92rem; }
/* the feedback form's trap for bots: off the screen, out of the tab order, never read out */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 800px) { header.site .nav-group { border-right: 0; margin-right: 0; } }
.article { max-width: 46rem; margin: 2rem auto 3rem; }
.article h1 { margin-bottom: 0.5rem; }
.article .lead { color: var(--ink-soft); margin-bottom: 1.6rem; }
.article-body { font-size: 1.08rem; line-height: 1.65; }
.article-body h2 { margin: 2rem 0 0.6rem; font-size: 1.45rem; }
.article-body p, .article-body li { max-width: 65ch; }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
.article-body li { margin: 0.35rem 0; }
.article-body .figure { margin: 1.2rem 0 0.4rem; }
.article-body .figure-caption { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.4rem; max-width: 65ch; }
.figure.inline-tile { display: inline-flex; align-items: center; vertical-align: -0.35em; margin: 0 0.1em; gap: 0; --tile-scale: 0.42; }   /* a tile drawn inside the words, the figure's drawing at a smaller size */
.article-body table { border-collapse: collapse; margin: 1rem 0; }
.article-body th, .article-body td { border-bottom: 1px solid var(--line); padding: 0.4rem 0.8rem; text-align: left; }
.into-the-school { background: var(--paper-2); border-radius: 16px; padding: 1.4rem 1.6rem; margin: 2.4rem 0 1rem; }
.into-the-school h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.into-the-school p { margin: 0 0 0.8rem; }
.into-the-school .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0; }
.card .swatch-line { height: 8px; border-radius: 4px; margin-bottom: 0.4rem; }
.card .hub-face { margin: 0 0 0.2rem; }
.teach-form .teach-fields { display: grid; gap: 0.6rem; margin: 0.6rem 0; }
.teach-form label { display: grid; gap: 0.2rem; font-size: 0.92rem; }
.teach-form label.check { display: flex; align-items: center; gap: 0.5rem; }
.teach-form input[type=datetime-local] { font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
input[type=datetime-local] { font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table.board.replays { max-width: 72rem; margin: 2rem auto; }
.replay .deal { display: grid; gap: 0.6rem; margin: 0.6rem 0 1.4rem; }
.replay .rack-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.replay .seat-name { font-weight: 700; }
.replay ol.log { padding-left: 1.4rem; font-size: 1rem; line-height: 1.55; }
.replay ol.log li { margin: 0.2rem 0; }
.band-head .search { margin-top: 1.2rem; }
.band-head .search input { margin: 0; }

.band-head .eyebrow.welcome { color: #ffe3a8; margin-bottom: 0.3rem; }
.narrow select { display: block; margin: 0.3rem 0 0.8rem; }
.narrow form label { display: block; margin-top: 0.8rem; font-weight: 700; }

/* the modular grid: a figure, a title, one line, one link */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.card { border-radius: 16px; padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 0.6rem; transition: transform 150ms, box-shadow 150ms; position: relative; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(40, 30, 15, 0.16); }
.card .figure { min-height: 60px; margin-bottom: 0.3rem; }
.card h3 { margin: 0; font-size: 1.25rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; flex: 1; }
.card .num { position: absolute; top: 1.1rem; right: 1.2rem; font: 700 0.95rem var(--display); color: var(--accent-deep); background: var(--paper-2); border-radius: 999px; padding: 0.15rem 0.7rem; }
.card .len { color: var(--ink-soft); font-size: 0.92rem; }
.card a.go { font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.card a.go:hover { text-decoration: underline; }
.card a.go::after { content: ""; }
.card.wide { grid-column: span 2; }
@media (max-width: 640px) { .card.wide { grid-column: auto; } }
.card.stretch { text-decoration: none; color: inherit; }
/* a whole-card link's words keep their own height and what closes the card (its length, its link) sits at the foot
   (Jeff, 15 Sep: gaps opened between a lesson's summary and its list of steps, the summary stretched to the tallest card) */
.card.stretch p { flex: 0 0 auto; }
.card.stretch .len, .card.stretch .go { margin-top: auto; }

/* the rules: a contents list, sections with figures */
/* the rules (13 Sep, the design pass): six facts at a glance, then the document rendered whole beside a rail that follows */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 2rem auto 0; max-width: 72rem; }
.glance .fact { background: var(--card); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.5rem; }
.glance .n { font: 700 2rem var(--display); line-height: 1; color: var(--felt); letter-spacing: -0.02em; }
.glance .figure { --tile-scale: 0.36; min-height: 32px; }
.glance p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.rules-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 3rem; align-items: start; max-width: 72rem; margin: 2rem auto; }
.contents a.current { color: var(--accent-deep); font-weight: 700; }
.rules-body h2 .num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--felt); color: #fff; font-size: 0.95rem; margin-right: 0.35rem; vertical-align: middle; }
.rules-body h4 { margin: 1.4rem 0 0.4rem; font-size: 1.1rem; }
.rules-body p, .rules-body li { max-width: 65ch; line-height: 1.6; }
.rules-body ul, .rules-body ol { padding-left: 1.3rem; }
.rules-body li { margin: 0.3rem 0; }
.rules-body table { border-collapse: collapse; margin: 0.8rem 0 1.2rem; font-size: 0.95rem; background: var(--card); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.rules-body th, .rules-body td { padding: 0.45rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.rules-body th { background: var(--paper-2); }
.rules-body tr:last-child td { border-bottom: 0; }
.rules-body blockquote { margin: 0.8rem 0; padding: 0.2rem 1rem; border-left: 4px solid var(--accent); color: var(--ink-soft); }
.rules-body code { background: var(--paper-2); padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.9em; }
.rules-body .scroll { overflow-x: auto; }
.rules-body table.house { width: 100%; font-size: 0.92rem; }
.rules-body table.house td:nth-child(2), .rules-body table.house td:nth-child(3) { white-space: nowrap; font-weight: 700; }
.rules-body table.house td.fine { max-width: 28rem; }
.rules-body .into-the-school { margin-top: 2rem; }
.contents { position: sticky; top: 5rem; background: var(--card); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); }
.contents h2 { font-size: 1rem; margin-bottom: 0.4rem; }
.rules-search { display: grid; gap: 0.3rem; margin: 0 0 0.9rem; }
.rules-search label { font-weight: 700; font-size: 0.95rem; }
.rules-search input { font: inherit; width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.rules-search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.rules-search .fine { margin: 0; min-height: 1.2em; }
.rules-body mark.hit { background: #ffe39a; color: inherit; border-radius: 3px; padding: 0 1px; }
.contents ol { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }
.contents li { margin: 0.25rem 0; }
.contents a { color: var(--ink); text-decoration: none; }
.contents a:hover { text-decoration: underline; }
.rules-body { max-width: 46rem; }
.rules-body section { padding: 1.4rem 0 0.4rem; border-top: 1px solid var(--line); margin-top: 1.2rem; }
.rules-body section:first-of-type { border-top: 0; margin-top: 0; }
.rules-body h2 { font-size: 1.5rem; color: var(--felt-deep); }
.rules-body .figure { margin: 0.4rem 0 1rem; }
.rules-body .house li { margin-bottom: 0.4rem; }
/* 1fr keeps a min of min-content, so the contents column stayed 500px wide on a phone and the page scrolled
   sideways: minmax(0, 1fr) is what lets it shrink (18 Sep, found with tools/overflow.py) */
@media (max-width: 800px) { .rules-layout { grid-template-columns: minmax(0, 1fr); } .contents { position: static; } }

/* tournaments */
.event-form { display: grid; gap: 0.7rem; max-width: 34rem; }
.event-form label { display: grid; gap: 0.25rem; font-weight: 700; }
.event-form label.check { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.event-form input[type=text], .event-form input[type=number], .event-form select, .event-form textarea { font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* the dashboard (the account page) */
.dash-head .inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.dash-head h1 .avatar { vertical-align: middle; margin-right: 6px; }
.engine { background: rgba(0, 0, 0, 0.26); border-radius: 16px; padding: 1.1rem 1.4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.engine h2 { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin-bottom: 0.3rem; }
.engine-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: #fff; margin: 0 0 0.3rem; }
.engine-name .tag { font: 700 0.85rem var(--font); background: var(--accent); color: #fff; border-radius: 999px; padding: 0.15rem 0.6rem; vertical-align: middle; margin-left: 0.4rem; }
.engine-line { color: rgba(255, 255, 255, 0.9); margin: 0 0 0.3rem; }
.engine-line.fine { color: rgba(255, 255, 255, 0.7); }
.dash-grid { margin-top: 2rem; }
.card .big { font-family: var(--display); font-weight: 700; font-size: 2.2rem; margin: 0.2rem 0 0.4rem; color: var(--ink); }
.card .big .rank { font-size: 1rem; color: var(--accent-deep); margin-left: 0.4rem; font-family: var(--font); }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.6rem 0 0; font-size: 0.95rem; }
.stats dt { font-weight: 700; color: var(--ink-soft); }
.stats dd { margin: 0; }
.partners { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.partners a { color: var(--ink); text-decoration: none; }
.partners a:hover { text-decoration: underline; }
.account .profile { display: grid; gap: 0.6rem; max-width: 26rem; margin: 0.5rem 0 1.5rem; }

/* today's challenge */
table.board { width: 100%; max-width: 44rem; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
table.board th, table.board td { padding: 0.55rem 0.9rem; }
table.board th { background: var(--paper-2); font-weight: 700; }
table.board tr.me td { background: #fff3dc; font-weight: 700; }
table.board td .avatar { vertical-align: middle; margin-right: 4px; }
/* the boards (Jeff, 15 Sep: "Today's challenge, over time" spilled out of its card, names wrapped, columns were cut, and
   the cards' words stretched into gaps): a board scrolls inside its own card, a name stays on one line, numbers line up
   on the right, and a card's words keep their own height */
.boards-grid { display: block; columns: 2 26rem; column-gap: 1.5rem; }
.boards-grid .card { break-inside: avoid; margin-bottom: 1.5rem; }
.boards-grid .card:hover { transform: none; }
.boards-grid .card p { flex: 0 0 auto; }
.boards-grid .card .table-scroll { margin-inline: -0.5rem; }
.boards-grid table.board { box-shadow: none; border: 1px solid var(--paper-2); }
.boards-grid table.board th, .boards-grid table.board td { padding: 0.45rem 0.55rem; }
table.board th.n, table.board td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.board td.who { white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }

/* the card library */
.library-grid .card .lines { --tile-scale: 0.46; }
.library-grid .card .lines .line-head { display: none; }
.library-grid .card .lines .line { margin: 0 0 4px; }
.library-grid .card .about { font-size: 0.95rem; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2.5rem; }
.ways .card { background: var(--paper-2); box-shadow: none; }
.ways .card code { font-size: 0.9rem; }

/* the sections below: reading on ivory, one idea each, no card kit */
.band { background: var(--paper-2); border-radius: 16px; padding: 2rem 2.2rem; margin: 2.2rem 0; }
.band h2 { font-size: 1.8rem; }
.band .measured { font-family: var(--display); font-size: 1.15rem; color: var(--felt); font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin: 2.4rem 0; }
.grid h3 { margin-bottom: 0.3rem; }
.grid p { color: var(--ink-soft); font-size: 0.98rem; }
.strip-title { margin: 2.4rem 0 0; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin: 1rem 0 2.4rem; align-items: start; }
.strip figure img { aspect-ratio: 1200 / 617; object-fit: cover; object-position: top; }
.strip figure { margin: 0; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.strip img { display: block; width: 100%; height: auto; }
.strip figcaption { padding: 0.9rem 1.2rem 1.1rem; font-size: 0.98rem; color: var(--ink-soft); }
.strip figcaption strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.1rem; margin-bottom: 0.15rem; }
.waitlist { text-align: left; }

/* pricing: in beta the prices are shown struck through, with the tag */
.beta-badge { display: inline-block; vertical-align: middle; font: 700 0.85rem var(--font); letter-spacing: 0.04em; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.2rem 0.7rem; margin-left: 0.4rem; transform: rotate(-4deg); }
.tier .price s { color: var(--ink-soft); text-decoration-thickness: 3px; text-decoration-color: var(--accent); }
.tier .price .free-beta { display: inline-block; font: 700 0.95rem var(--font); color: var(--felt); background: #dff3e2; border-radius: 999px; padding: 0.15rem 0.7rem; vertical-align: middle; margin-left: 0.3rem; }
.pricing { max-width: none; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.tier.featured { border-color: var(--felt); box-shadow: 0 10px 30px rgba(47, 95, 63, 0.15); }
.tier h2 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.tier .price { font: 700 2rem var(--display); margin: 0 0 0.6rem; }
.tier .price span { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); font-family: var(--font); }
.tier ul { padding-left: 1.1rem; margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.tier li { margin-bottom: 0.35rem; }

/* The page an activity director reads (18 Sep): a JCC, a library, a recreation department, a senior living
   community. Jeff: "alot of white space man". Two reasons, both here: this block was written .organisations while
   the page says organizations, so none of it applied and the page fell back to a 44rem reading column; and every
   section held three things in a grid that fitted two, so each one ended on a half-empty row. The page is now the
   full width, each grid takes the count it holds, and the bands alternate paper, walnut and felt so the reader is
   not looking at one flat field of cream. */
.organizations { max-width: 72rem; margin: 0 auto; padding: 0 1rem 4rem; }
.organizations h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.4rem; }
.organizations h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.organizations p { margin: 0; }
.organizations section { margin-top: 3.5rem; }

/* the hero: what it is on the left, what it looks like on the right */
.org-hero { padding: 3rem 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem; align-items: center; }
.org-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 0.9rem; text-wrap: balance; }
.org-hero .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; }
.org-hero .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.org-hero figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.org-hero figure img { display: block; width: 100%; height: auto; }

/* the four plain facts, across the page under the hero */
.org-proof { list-style: none; padding: 1.2rem 0 0; margin: 2.5rem 0 0; display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 1px solid var(--line); }
.org-proof li { font-size: 0.95rem; color: var(--ink-soft); }
.org-proof strong { display: block; font: 700 1.35rem var(--display); color: var(--ink);
  font-variant-numeric: tabular-nums; margin-bottom: 0.1rem; }

/* three steps, and they really are a sequence, so they are numbered */
.step-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-grid li { position: relative; padding-top: 1.2rem; border-top: 3px solid var(--felt); }
.step-grid .step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem;
  height: 1.9rem; border-radius: 50%; background: var(--felt); color: #fff; font: 700 1rem var(--display);
  margin-bottom: 0.7rem; }
.step-grid h3 { font-size: 1.15rem; }
.step-grid p { color: var(--ink-soft); font-size: 0.97rem; }

/* the screenshots: a green table on cream disappears, so this band is walnut */
.seeing { background: var(--walnut); border-radius: 20px; padding: 2.5rem 2rem; color: #fff; }
.seeing h2 { color: #fff; }
.seeing .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0;
  align-items: start; }
.seeing figure { margin: 0; background: transparent; border-radius: 12px; overflow: hidden; box-shadow: none; }
.seeing figure img { display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); aspect-ratio: 1200 / 760; object-fit: cover; object-position: top; }
.seeing figcaption { padding: 0.9rem 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); }
.seeing figcaption strong { display: block; color: #fff; font-family: var(--display); font-size: 1.08rem;
  margin-bottom: 0.15rem; }

/* what a license includes: six things, three across, hairlines rather than six more cards */
.gets .card-grid { display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gets .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 1.1rem 0 0; }
.gets .card h3 { font-size: 1.08rem; }
.gets .card p { color: var(--ink-soft); font-size: 0.97rem; }

/* three prices, three columns, the one most people buy on felt */
.price-block .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem;
  align-items: stretch; margin: 0; }
.price-block .tier { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; }
.price-block .tier.featured { background: linear-gradient(170deg, var(--felt) 0%, var(--felt-deep) 100%);
  border-color: transparent; color: #fff; box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.35)); }
.price-block .tier h3 { font-size: 1.2rem; }
.price-block .tier.featured h3 { color: #fff; }
.price-block .tier .price { font: 800 2.1rem/1.1 var(--display); margin: 0.3rem 0 0.9rem;
  font-variant-numeric: tabular-nums; }
.price-block .tier .price span { font: 400 0.95rem var(--font); color: var(--ink-soft); }
.price-block .tier.featured .price, .price-block .tier.featured .price span { color: #fff; }
.price-block .tier p { color: var(--ink-soft); font-size: 0.97rem; }
.price-block .tier.featured p { color: rgba(255, 255, 255, 0.88); }
.price-block .fine { margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.9rem; }

.q-grid { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-grid p { color: var(--ink-soft); font-size: 0.97rem; }

/* the ask: one card on felt, because it is the one thing on the page to press */
.ask-card { background: linear-gradient(170deg, var(--felt) 0%, var(--felt-deep) 100%); border: 0;
  border-radius: 20px; padding: 2.2rem; color: #fff; }
.ask-card h2 { color: #fff; margin-bottom: 0.4rem; }
.ask-card > p { color: rgba(255, 255, 255, 0.85); margin-bottom: 1.4rem; }
.ask-form { display: grid; gap: 0.9rem; max-width: 46rem; }
.ask-form .two { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ask-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; color: #fff; }
.ask-form input, .ask-form select, .ask-form textarea { font: inherit; font-weight: 400; padding: 0.7rem 0.8rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); min-height: 44px; }
.ask-form input:focus-visible, .ask-form select:focus-visible, .ask-form textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; }
.ask-form .send { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.3rem; }
.ask-form .send .fine { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.organizations .ok { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.15);
  padding: 0.6rem 0.9rem; border-radius: 10px; }

@media (max-width: 62rem) {
  .org-hero { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .step-grid, .seeing .strip, .gets .card-grid, .price-block .tiers, .q-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
@media (max-width: 40rem) {
  .organizations section { margin-top: 2.6rem; }
  .seeing { padding: 1.5rem 1.2rem; }
  .ask-card { padding: 1.3rem; }
}

/* the school's own staff, marked wherever the account is shown: the owner seeing "the free plan" reads as though
   he were a customer who had not paid (18 Sep) */
.badge-staff { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--walnut);
  color: #fff; font: 700 0.78rem var(--font); letter-spacing: 0.04em; vertical-align: 0.1em; margin-right: 0.4rem; }
header.site .account .badge-staff { margin: 0 0 0 0.4rem; padding: 1px 7px; font-size: 0.7rem; }

/* the account page */
.account .plan { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); font-weight: 700; font-size: 0.85rem; }
.account .profile { display: grid; gap: 0.6rem; max-width: 26rem; margin: 0.5rem 0 1.5rem; }
.account .profile label { display: grid; gap: 0.2rem; font-size: 0.92rem; }

/* lessons and drills pages */
ol.lessons li, ul.drills li { margin-bottom: 1rem; }
.narrow { max-width: 32rem; }
/* the sign-in page (16 Sep): the felt band the rest of the school uses, the form and the reasons side by side */
.band-figure { display: grid; gap: 0.6rem; justify-items: end; }
.band-head .fig-note { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; margin: 0; max-width: 34ch; text-align: right; }
.signin-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.6rem; align-items: start; margin: 2.2rem 0 1rem; }
.signin-form { max-width: 32rem; }
@media (min-width: 801px) { .signin-form { position: sticky; top: 1.2rem; } }   /* the form stays beside the examples while they are read */
.signin-form label[for=email] { display: block; font-weight: 700; }
.signin-form .button { margin-top: 0.4rem; }
.signin-form .button + .fine { margin-top: 0.9rem; }
.signin-form .consent { margin-top: 1rem; }
.pick-set { border: 0; padding: 0; margin: 0.6rem 0 1.2rem; }
.pick-set legend { padding: 0; font-weight: 700; }
.pick-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.4rem; }
.pick { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; font-weight: 700; cursor: pointer; }
.pick:has(input:checked) { background: var(--felt); color: #fff; border-color: transparent; }
.pick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.signin-shows { display: grid; gap: 1.6rem; }
.signin-shows h2 { margin: 0; font-size: 1.15rem; }
.show { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.show > p { margin: 0; font-size: 0.98rem; line-height: 1.5; align-self: center; }
.show-card { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.9rem 1rem 1rem; font-size: 0.88rem; box-shadow: 0 6px 14px rgba(40, 30, 15, 0.1); }
.show-card h3 { margin: 0.1rem 0 0.2rem; font-size: 1rem; }
.show-card .hub-face { margin: 0; }
.show-card .show-line, .show-card .show-seat { margin: 0.15rem 0 0; color: var(--ink-soft); }
.show-card .show-seat { color: var(--accent-deep); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.show-card .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.78rem; }
.show-card .figure { --tile-scale: 0.3; min-height: 26px; margin: 0.5rem 0 0; }
.show-card .board { width: 100%; font-size: 0.86rem; margin: 0.3rem 0 0; }
.show-tag { position: absolute; top: -0.6rem; right: 0.7rem; background: var(--felt); color: #fff; border-radius: 999px;
  padding: 0.1rem 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 620px) { .show { grid-template-columns: 1fr; } }
.signin-sent { max-width: 36rem; margin: 2.2rem 0; font-size: 1.05rem; }
@media (max-width: 800px) {
  .signin-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .band-figure { justify-items: start; }
  .band-head .fig-note { text-align: left; }
}

/* the operations panel */
/* the ops screen (Jeff, 13 Sep: "the skills treatment"): a dashboard, scanned not read; the numbers big, the
   lists as boards, the live parts swapped in every five seconds with a stamp that says so */
.ops { max-width: none; }
.ops .sub { color: var(--ink-soft); font-size: 0.9rem; }
.ops .band-head .lead { max-width: none; font-size: 1rem; }
.ops .band-head code { color: #fff; background: rgba(0,0,0,0.25); padding: 0.05rem 0.4rem; border-radius: 6px; }
.ops .live-bar { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0 0; flex-wrap: wrap; }
.ops .live-bar .stamp { color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.ops .live-bar .stamp.stale { color: #ffd9c2; }
.ops .counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.8rem; margin: 1.6rem 0 0; }
.ops .count { background: var(--card); border-radius: 14px; padding: 0.8rem 1rem 0.7rem; box-shadow: var(--shadow-sm); }
.ops .count .n { font: 700 1.9rem var(--display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ops .count .l { color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.15rem; }
.ops .count.attention .n { color: var(--accent-deep); }
.ops .dash-grid { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
/* ops boxes take their own height and their words do not stretch (14 Sep: the lessons box sat beside the tall bots box and its one line grew to fill it) */
.ops .dash-grid { align-items: start; }
.ops .card p { flex: 0 0 auto; }
.ops .card { gap: 0.5rem; }
.ops .card h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.ops .card h3 .pill { font: 700 0.78rem var(--font); background: var(--paper-2); color: var(--ink-soft); border-radius: 999px; padding: 0.1rem 0.6rem; }
.ops .card h3 .pill.hot { background: var(--accent); color: #fff; }
.ops table.board { max-width: none; font-size: 0.92rem; box-shadow: none; border: 1px solid var(--line); }
.ops table.board th, .ops table.board td { padding: 0.4rem 0.7rem; vertical-align: top; }
.ops table.board td code { font-size: 0.85rem; }
.ops .errors { background: #fff4f0; padding: 10px; font-size: 0.8rem; max-height: 300px; overflow: auto; border-radius: 8px; margin: 0; }
.ops form.inline { display: inline; }
.ops button.link { color: #a33; padding: 0 4px; }
.ops .scroll { overflow-x: auto; }

/* the report card and the shared hand */
.review .result { font-weight: 700; }
.review ol.decisions, .review ol.worst, .review ol.log { padding-left: 1.2rem; }
.review ol.decisions li { margin: 0.35rem 0; }
.review .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; margin-right: 6px; }
.review .grade-agreed .badge { background: #dff3e2; color: #1f6a35; }
.review .grade-fine .badge { background: #eee; color: #444; }
.review .grade-mistake .badge { background: #ffe9c7; color: #8a5a00; }
.review .grade-blunder .badge { background: #ffd9d9; color: #a11; }
.review .n { color: #888; margin-right: 6px; }
.review .kind { color: #666; font-size: 0.85rem; margin-right: 6px; }
.review .cands { display: block; margin: 2px 0 0 1.6rem; font-size: 0.82rem; color: #555; }
.review .cand { margin-right: 10px; }
.review .cand.mine { font-weight: 700; color: #a11; }
.review .cta a.button { display: inline-block; }

/* the teacher view's list */
.teach tr.hand-up td, .ops tr.hand-up td { background: #fff4d6; }
.teach .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.78rem; }
.teach td .button { padding: 0.35rem 0.8rem; font-size: 0.9rem; }

/* the avatars: a fixed drawn set, picked, never uploaded */
.account h1 .avatar { vertical-align: middle; margin-right: 6px; }
.avatars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avatars legend { font-size: 0.92rem; margin-bottom: 4px; }
.avatar-choice { display: inline-grid; place-items: center; cursor: pointer; border-radius: 50%; padding: 3px; }
.avatar-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-choice:has(input:checked) { outline: 3px solid var(--accent); }
.avatar-choice:has(input:focus-visible) { outline: 3px solid var(--felt); }

/* notices: the bell, its panel, the corner toasts */
.bell { position: relative; }
.bell .count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 0.7rem/18px var(--font); text-align: center; padding: 0 4px; }
.bell .count:empty { display: none; }
.bell-panel { position: absolute; right: 1.5rem; top: 3.4rem; width: min(24rem, 90vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.18); padding: 0.8rem 1rem; z-index: 30; font-size: 0.95rem; }
.bell-panel[hidden] { display: none; }
.bell-panel .notice { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.bell-panel .notice.unread { font-weight: 700; }
header.site { position: relative; }
#toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: 8px; z-index: 60; max-width: min(26rem, 92vw); }
.toast { display: flex; align-items: center; gap: 10px; background: var(--walnut); color: #fff; padding: 0.8rem 1rem; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.3); font: 0.95rem var(--font); }
.toast .button { padding: 0.4rem 0.8rem; font-size: 0.85rem; white-space: nowrap; }
.toast .close { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; }
ul.notices { padding-left: 1.1rem; } ul.notices li.unread { font-weight: 700; }
.groups .card-form, .group .card-form, .clubs .card-form, .club .card-form { display: grid; gap: 0.6rem; max-width: 30rem; }
.groups .card-form label, .group .card-form label, .clubs .card-form label, .club .card-form label { display: grid; gap: 0.2rem; font-size: 0.92rem; }
.club .card-form label.check { display: flex; align-items: center; gap: 0.5rem; }
.group h1 .avatar { vertical-align: middle; margin-right: 6px; }

form.signout { display: block; }
.ops .card p:last-child { margin-bottom: 0; }

/* the card of the month's page: how it plays */
.measured { background: var(--paper-2); border-radius: var(--radius); padding: 1rem 1.3rem; margin: 0 0 1.4rem; }
.measured h2 { font-size: 1.2rem; }
.measured p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the replay board (13 Sep): the table face up after every move, stepped through */
.board-replay { background: var(--felt); color: #fff; border-radius: 18px; padding: 0.8rem 1.2rem; box-shadow: var(--shadow-md); position: relative; }
.board-replay .board-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* the teacher's drawing (14 Sep) */
.board-replay .tile.ringed { outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 6px; }
.board-replay .coach-note { margin: 0.6rem 0 0; padding: 0.5rem 0.8rem; background: rgba(0, 0, 0, 0.28); border-radius: 10px; font-size: 0.95rem; }

/* community card layouts (14 Sep): a picture and a line each */
.cards-grid.layouts figure.layout { margin: 0; padding: 0; overflow: hidden; }
.cards-grid.layouts figure.layout img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cards-grid.layouts figcaption { padding: 0.9rem 1.1rem 1.1rem; }
.cards-grid.layouts figcaption h3 { margin-bottom: 0.3rem; }
ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.plain li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.board-replay .seat-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.board-replay .seat-row:first-child { border-top: 0; }
.board-replay .seat-name { font-weight: 700; line-height: 1.25; }
.board-replay .seat-read { font-weight: 500; font-size: 0.85rem; opacity: 0.85; margin-top: 2px; }   /* the seat's chances (14 Sep) */
.board-replay .seat-name .fine { display: block; color: rgba(255, 255, 255, 0.72); font-weight: 400; }
.board-replay .seat-row.turn .seat-name { color: #ffe3a8; }
.board-replay .seat-row.winner .seat-name { color: #ffc23d; }
.board-replay .seat-row.dead .seat-tiles { opacity: 0.55; }
.board-replay .figure { --tile-scale: 0.52; gap: 8px; margin: 0; }
.board-replay .figure-group.exposure { outline: 2px solid rgba(255, 227, 168, 0.75); outline-offset: 2px; border-radius: 6px; }
.board-replay .figure.discards { --tile-scale: 0.34; gap: 4px; align-items: center; }
.board-replay .figure.discards .fine { color: rgba(255, 255, 255, 0.72); margin-right: 0.3rem; }
.board-replay .tile.last { box-shadow: 0 0 0 3px #ffc23d, 0 3px 0 var(--tile-shadow); }
.replay-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 0.6rem; }
.replay-controls input[type="range"] { flex: 1 1 12rem; margin: 0; }
.replay-controls .counter { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 6rem; }
.replay-words { font-size: 1.12rem; min-height: 2.8rem; margin: 0.8rem 0 1rem; font-weight: 700; }
ol.replay-log { padding-left: 1.4rem; max-height: 18rem; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem 0.8rem 2.4rem; background: var(--paper-2); }
ol.replay-log li { margin: 0.15rem 0; cursor: pointer; }
ol.replay-log li.now { font-weight: 700; color: var(--felt); }
@media (max-width: 800px) { .board-replay .seat-row { grid-template-columns: 1fr; gap: 0.3rem; } .board-replay .figure { --tile-scale: 0.42; } }


/* badges and the certificate (13 Sep) */
ul.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
ul.badges li { display: grid; gap: 0.1rem; padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--paper-2); border-left: 4px solid var(--felt); }
ul.badges li .fine { font-size: 0.85rem; }
.certificate { max-width: 46rem; margin: 2rem auto; padding: 0 1rem; }
.certificate .sheet { border: 6px double var(--felt); border-radius: 14px; padding: 2.4rem 2.6rem; text-align: center; background: #fffdf7; }
.certificate h1 { font-family: var(--display); font-size: 2.2rem; margin: 0.2rem 0 1rem; }
.certificate .who { font-family: var(--display); font-size: 2rem; font-weight: 700; margin: 0.3rem 0 0.6rem; }
.certificate .rank-big { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--felt); margin: 0.2rem 0; }
.certificate .iq-line { font-weight: 700; margin: 0 0 1rem; }
.certificate .figure { justify-content: center; margin-top: 1rem; }
.certificate .actions { text-align: center; margin: 1.4rem 0; }
@media print { header.site, footer.site, .noprint { display: none !important; } body { background: #fff; } .certificate .sheet { border-color: #000; } }
/* an article prints as itself (4 Oct, the cheat sheet): no invitations, no related cards, figures kept whole */
@media print { .article .into-the-school, .article ~ *, .article .eyebrow { display: none !important; } .article-body .figure, .article-body table { break-inside: avoid; } }


/* a teacher's free slots and reviews (13 Sep) */
.slots-form .slot-day { margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.slots-form .slot-day strong { min-width: 6.5rem; }
.slots-form .button.slot { padding: 0.3rem 0.7rem; min-height: 36px; }
details.typed { margin-top: 0.8rem; }
ul.reviews li { line-height: 1.4; }


/* the groups, clubs and events pages with the design (13 Sep) */
.band .card-form, .card .card-form { display: grid; gap: 0.6rem; max-width: 34rem; }
.band .card-form label, .card .card-form label { display: grid; gap: 0.2rem; font-size: 0.92rem; }
.card .card-form label.check, .band .card-form label.check { display: flex; align-items: center; gap: 0.5rem; }
.card .card-form input[type="text"], .card .card-form input[type="url"], .card .card-form select, .band .card-form input[type="text"], .band .card-form select { margin: 0; }
.card-form.two-col { max-width: none; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card-form.two-col fieldset, .card-form.two-col details, .card-form.two-col p { grid-column: 1 / -1; }
.rules-fold summary { cursor: pointer; font-weight: 700; margin: 0.4rem 0; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem 1.2rem; margin-top: 0.6rem; }
.rules-grid label { display: grid; gap: 0.2rem; font-size: 0.9rem; }
.felts { display: flex; flex-wrap: wrap; gap: 0.6rem; border: 0; padding: 0; margin: 0; }
.felts legend { font-weight: 700; font-size: 0.92rem; padding: 0; margin-bottom: 0.3rem; }
.felt-choice { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.felt-choice .swatch { width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--felt); display: inline-block; border: 2px solid var(--line); }
.band-head .actions form.inline { display: inline; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card a.go + a.go { margin-top: -0.3rem; }
.band-head .fine { color: rgba(255, 255, 255, 0.82); }
.band-head .fine a, .band-head .fine code, .band-head .fine strong, .band-head p a { color: #ffe3a8; }
.band-head .ok { color: #dfffd8; }
.band-head .warn { color: #ffd0c4; }


/* from the report card to the board (13 Sep) */
.decision-box { border-left: 5px solid var(--felt); background: var(--paper-2); border-radius: 12px; padding: 0.8rem 1.1rem; margin: 1rem 0 0; }
.decision-box .words { font-weight: 700; margin: 0.2rem 0; }
.decision-box .cand.mine { font-weight: 700; text-decoration: underline; }
.decision-box.grade-blunder { border-left-color: #b8322e; }
.decision-box.grade-mistake { border-left-color: #d9832b; }
.decision-box.grade-agreed { border-left-color: #2f7d4f; }
a.on-board { font-size: 0.88rem; margin-left: 0.4rem; }


/* the scorekeeper (13 Sep) */
.score-form .who-won { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; border: 0; padding: 0; margin: 0; }
.score-form .who-won legend { font-weight: 700; font-size: 0.92rem; padding: 0; margin-bottom: 0.3rem; width: 100%; }
.score-form .who-won label { display: inline-flex; align-items: center; gap: 0.4rem; }


/* where you left off (14 Sep) */
.card.stretch.done { outline: 3px solid var(--felt); outline-offset: -3px; }
.card.stretch.done .num { background: var(--felt); color: #fff; }
.band-head .lead.where { font-weight: 700; }
.card .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 0; }


/* the wall of live tables (14 Sep) */
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.wall-board { display: block; text-decoration: none; color: inherit; border-radius: 16px; background: var(--paper-2); padding: 0.7rem 0.8rem 0.8rem; box-shadow: var(--shadow-md); }
.wall-board:hover { transform: translateY(-2px); }
.wall-board.over { opacity: 0.6; }
.wall-board .wall-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; margin-bottom: 0.5rem; }
.wall-board .board-replay.mini { padding: 0.4rem 0.6rem; border-radius: 12px; }
.board-replay.mini .seat-row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.4rem; padding: 0.25rem 0; }
.board-replay.mini .seat-row .discards { display: none; }
.board-replay.mini .figure { --tile-scale: 0.3; gap: 3px; }
.board-replay.mini .seat-name { font-size: 0.85rem; }
.board-replay.mini .seat-name .fine { display: none; }
.wall-board .wall-words { margin-top: 0.5rem; min-height: 1.2rem; }

/* the lessons page lists each lesson's steps by their titles, the same titles the table shows (14 Sep) */
.cards-grid .card ol.steps { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.cards-grid .card ol.steps li { margin: 0.1rem 0; }

/* the account in tabs (14 Sep, after lichess, chess.com and Duolingo): a short head with the tabs, what to do next,
   the numbers as small tiles, then the games beside the play style; settings and teaching on their own tabs */
.acct-head { margin: 0 -1.5rem; padding: 1.6rem 1.5rem 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.acct-head .inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.acct-head .who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.acct-head .who .avatar { flex: none; }
.acct-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }
.acct-head .meta { margin: 0.25rem 0 0; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; overflow-wrap: anywhere; }
.acct-head .actions { margin: 0; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.plan-chip { font: 700 0.8rem var(--font); background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.6rem; }
.plan-chip.paid { background: var(--felt); color: #fff; border-color: var(--felt); }
.acct-tabs { max-width: 72rem; margin: 1.2rem auto 0; display: flex; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a { flex: none; padding: 0.7rem 1rem; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-soft); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.acct-tabs a:hover { color: var(--ink); background: rgba(0, 0, 0, 0.03); }
.acct-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--felt); }
.acct-tabs a:focus-visible { outline: 2px solid var(--felt); outline-offset: -2px; }

.acct-notices { list-style: none; margin: 1.5rem 0 0; padding: 0.8rem 1rem; background: var(--card); border-left: 4px solid var(--accent); border-radius: 10px; display: grid; gap: 0.3rem; box-shadow: var(--shadow-sm); }
.acct-next { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; margin: 1.6rem 0 1.2rem; }
.acct-next .card { gap: 0.5rem; }
.acct-next .card:hover { transform: none; }
.acct-next h2 { font-size: 1.25rem; margin: 0; }
.acct-next .next-main { background: var(--felt); color: #fff; }
.acct-next .next-main h2, .acct-next .next-main p { color: #fff; }
.acct-next .next-main .button.secondary { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.acct-next .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 0; margin-top: auto; padding-top: 0.4rem; }
.acct-next .card p { flex: 0; }
.acct-next .big { font-size: 1.8rem; margin: 0; }

.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.acct-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.acct-stats h3 { margin: 0; font: 700 0.9rem var(--font); color: var(--ink-soft); }
.acct-stats .big { font: 700 1.9rem/1.1 var(--display); color: var(--ink); margin: 0.1rem 0; font-variant-numeric: tabular-nums; }
.acct-stats .big.quiet { font-size: 1.15rem; color: var(--ink-soft); padding: 0.35rem 0; }
.acct-stats .big .rank { font: 700 0.9rem var(--font); color: var(--accent-deep); margin-left: 0.3rem; }
.acct-stats .fine { flex: 1; margin: 0; font-size: 0.88rem; }
.acct-stats .go, .panel .go { font-weight: 700; color: var(--accent-deep); text-decoration: none; font-size: 0.92rem; }
.acct-stats .go:hover, .panel .go:hover { text-decoration: underline; }
.acct-stats .go-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }

.acct-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.acct-main, .acct-side { display: grid; gap: 1.2rem; min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; min-width: 0; }
.panel > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin-bottom: 0.7rem; }
.panel > header .go { margin-left: auto; }
.panel h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.panel > header h2 { margin: 0; }
.panel h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.panel p { margin: 0 0 0.5rem; }
.panel p:last-child { margin-bottom: 0; }
.panel table.board { max-width: none; box-shadow: none; border: 1px solid var(--line); }
.panel table.board th, .panel table.board td:first-child, .panel table.board a, .panel table.board button.link { white-space: nowrap; }
.panel .side-big { font: 700 1.4rem var(--display); color: var(--ink); margin: 0 0 0.3rem; }
.panel .partners { margin-bottom: 0.6rem; }
.table-scroll { overflow-x: auto; }
.acct-solo { margin: 1.6rem 0; }
.acct-intro { margin: 1.6rem 0 0; max-width: 62ch; color: var(--ink-soft); }
.acct-intro p { margin: 0 0 0.4rem; }
.badge-chips { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badge-chips li { font-weight: 700; font-size: 0.9rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); cursor: default; }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; }
.badge-grid li { display: grid; gap: 0.1rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--paper-2); border-left: 4px solid var(--felt); }
.badge-grid li.waiting { background: transparent; border: 1px dashed var(--line); border-left-width: 4px; opacity: 0.75; }

.teach-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.teach-fold > summary::-webkit-details-marker { display: none; }
.teach-fold > summary::before { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); transition: transform 150ms; }
.teach-fold[open] > summary::before { transform: rotate(45deg); }
.teach-fold > summary h2 { margin: 0; }
.teach-form .form-two { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.8rem 1.2rem; }
.teach-form .form-two label { display: grid; gap: 0.25rem; }
.teach-form .form-two label.check { display: flex; align-items: center; }
.teach-form .form-two .span { grid-column: 1 / -1; }
.teach-form .form-two input[type="text"], .teach-form .form-two select, .teach-form .form-two textarea { width: 100%; box-sizing: border-box; }

.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; margin: 1.6rem 0; align-items: start; }
.settings-nav { position: sticky; top: 1rem; display: grid; gap: 0.1rem; }
.settings-nav a { padding: 0.5rem 0.8rem; border-radius: 8px; color: var(--ink-soft); font-weight: 700; text-decoration: none; }
.settings-nav a:hover { background: var(--paper-2); color: var(--ink); }
.settings-body { display: grid; gap: 1.2rem; max-width: 44rem; min-width: 0; }
.settings-body .profile { display: grid; gap: 0.9rem; max-width: 26rem; }
.settings-body .profile > label { display: grid; gap: 0.3rem; font-weight: 700; }
.settings-body .profile input[type="text"], .settings-body .profile select { width: 100%; box-sizing: border-box; }
.settings-body section { scroll-margin-top: 1rem; }
.settings-body code { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .acct-next, .acct-columns { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .settings-nav a { background: var(--paper-2); }
}

/* searching the lessons, and every step a link (15 Sep) */
.lesson-search { display: grid; gap: 6px; margin: 1.6rem 0 0.6rem; max-width: 640px; }
.lesson-search label { font-weight: 700; }
.lesson-search input { font: inherit; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.lesson-search .fine { margin: 0; }
.search-hits { display: grid; gap: 10px; margin-bottom: 1.5rem; }
.search-hits .hit { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; color: var(--ink); }
.search-hits .hit:hover { background: var(--paper-2); }
.search-hits .hit-where { font-size: 0.85rem; color: var(--ink-soft, #5a665d); }
.search-hits .hit-line { color: var(--ink-soft, #5a665d); }
.lesson-card .steps a { color: inherit; text-decoration: none; }
.lesson-card .steps a:hover, .lesson-card .steps a:focus-visible { text-decoration: underline; }
.lesson-card h3 a { color: inherit; text-decoration: none; }
.lesson-card h3 a:hover { text-decoration: underline; }

/* typing a card in: the instructions read like the printed card (16 Sep) */
.how-to { background: var(--paper-2, #efe7d7); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 1rem; }
.how-to summary { font-weight: 700; cursor: pointer; }
.how-to p { max-width: 80ch; }
.how-to-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.94rem; }
.how-to-table th, .how-to-table td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.how-to-table code { white-space: nowrap; }

/* what is happening at the school (16 Sep): real events, an AI table marked as one */
.activity { margin: 0 0 1.4rem; }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 760px; }
.activity-list li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.activity-what { flex: 1; }
.activity-ai { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; background: #2f6243; color: #fff; border-radius: 999px; padding: 1px 7px; }
.activity-when { font-size: 0.85rem; color: var(--ink-soft, #5a665d); white-space: nowrap; }

/* a site: an organisation above its classes (18 Sep). Printed sheets matter here, so the codes and the report
   both carry their own print rules: a director prints them and hands them round. */
/* Your sites (18 Sep: "the your sites page sucks, no graphics, nothing all text"). A director landing here is
   deciding whether this is worth their Tuesday, so the page shows the three things a site gets. */
.sites { max-width: 72rem; margin: 0 auto; }
.sites section { margin-top: 3rem; }
.sites h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0 0 1.2rem; }
.sites .strip.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin: 0; }
.sites .strip figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; }
.sites .strip img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 700; object-fit: cover;
  object-position: top; border-bottom: 1px solid var(--line); }
.sites .strip figcaption { padding: 1rem 1.1rem 1.2rem; font-size: 0.95rem; color: var(--ink-soft); }
.sites .strip figcaption strong { display: block; font-family: var(--display); font-size: 1.08rem;
  color: var(--ink); margin-bottom: 0.2rem; }
.sites .new-card { background: var(--paper-2, #f4eee1); border-radius: 18px; padding: 1.8rem 2rem; }
.sites .new-card h2 { margin-bottom: 0.4rem; }
.sites .new-card > p { color: var(--ink-soft); margin: 0; }
.sites .site-card h3 { font-size: 1.15rem; margin: 0 0 0.2rem; }
@media (max-width: 62rem) { .sites .strip.three { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

.sites .card-grid, .site .card-grid { margin: 1.2rem 0; }
.site-card { text-decoration: none; color: inherit; display: block; }
.site-card h2 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.site-card .meta, .site .meta { color: var(--ink-soft); font-size: 0.92rem; }
.row-form { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: end; margin: 1rem 0; }
.row-form label, .roster-form label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.95rem; }
.row-form input, .row-form select, .roster-form textarea, .roster-form select {
  font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; min-height: 44px; }
.roster-form { display: grid; gap: 0.8rem; max-width: 34rem; margin: 1rem 0 1.5rem; }
.site-head { display: flex; gap: 1rem; justify-content: space-between; align-items: start; flex-wrap: wrap; margin-top: 1.5rem; }
.site-head .eyebrow a, .report-page .eyebrow a, .codes-page .eyebrow a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.site section, .report-page section { margin-top: 2.4rem; }
.roster-table, .report-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.roster-table th, .report-table th { text-align: left; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; }
.roster-table td, .report-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.report-table tr.quiet td { color: var(--ink-soft); }
code.code, .code-card .code { font: 700 1.1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.summary { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 1.2rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.9rem 0; color: var(--ink-soft); }
.summary strong { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.code-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; margin: 1.5rem 0; }
.code-card { border: 1px dashed var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: #fff; }
.code-card .who { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem; }
.code-card .where { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.code-card .code { font-size: 1.6rem; margin: 0 0 0.4rem; }
/* the page an eighty year old meets on a shared tablet: big type, one box, one button (18 Sep) */
.join-page { max-width: 36rem; margin: 3rem auto; padding: 0 1rem 4rem; text-align: center; }
.join-page h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; margin: 0 0 0.6rem; }
.join-page .hello-eyebrow { color: var(--felt); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 0.85rem; margin: 0 0 0.4rem; }
.join-page .lead { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.join-page .big-actions { display: grid; gap: 0.8rem; justify-content: center; }
.button.big { font-size: 1.15rem; padding: 0.9rem 1.6rem; min-height: 52px; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.hero .text-link { font-weight: 600; color: #fff; }
.hero .more-ways { margin-top: 0.4rem; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.hero .more-ways a { color: #fff; }
.invite { border: 1px dashed var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1rem 0; max-width: 42rem; background: var(--paper, transparent); }
.invite h3 { margin: 0 0 0.35rem; }
.invite p { margin: 0 0 0.8rem; color: var(--ink-soft); }
.code-form { display: grid; gap: 0.8rem; justify-items: center; margin: 1.6rem 0 1rem; }
.code-form label { font-weight: 700; }
.code-form input { font: 700 2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.25em;
  text-align: center; text-transform: uppercase; padding: 0.7rem 0.9rem; width: min(100%, 15ch);
  border: 2px solid var(--line); border-radius: 12px; background: #fff; min-height: 60px; }
.code-form input:focus-visible { outline: 3px solid var(--felt); outline-offset: 2px; }
.join-page .hint { color: var(--ink-soft); }
.sites .empty, .site .empty, .report-page .empty { color: var(--ink-soft); }
.site .hint, .sites .fine, .report-page .fine { color: var(--ink-soft); font-size: 0.92rem; }

@media print {
  .no-print, header.site, footer.site, .feedback-tab { display: none !important; }
  .code-cards { grid-template-columns: repeat(2, 1fr); }
  .code-card { break-inside: avoid; border-color: #999; }
  .report-table { font-size: 0.85rem; }
  a[href]::after { content: ""; }
}

/* the six week course a site runs (18 Sep): read on a screen, printed for the person taking the session */
.class-plan { max-width: 58rem; margin: 0 auto; padding: 0 1rem 4rem; }
.class-plan .lead { color: var(--ink-soft); font-size: 1.1rem; max-width: 44rem; }
.class-plan .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.2rem 0 2rem; }
.sessions { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.session { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; break-inside: avoid; }
.session-n { font: 700 0.8rem var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt); }
.session h2 { font-size: 1.25rem; margin: 0.2rem 0 0.3rem; }
.session .aim { color: var(--ink-soft); margin: 0 0 1rem; }
.session .minutes { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--paper-2, #f4eee1); font-size: 0.85rem; }
.session-body { display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.session-body h3 { font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4rem; }
.session-body ul { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.session .note { font-size: 0.9rem; color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: 0.7rem; margin: 0; }
.class-plan .after { margin-top: 2.5rem; }

/* one page a director prints or forwards (18 Sep) */
.leaflet { max-width: 58rem; margin: 0 auto; padding: 0 1rem 3rem; }
.leaflet .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.leaflet .sheet { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2rem 2.2rem; }
.leaflet .brand { font: 700 0.85rem var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--felt); margin: 0 0 0.4rem; }
.leaflet h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.6rem; }
.leaflet .lead { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 1.5rem; }
.leaflet .columns { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.leaflet h2 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  margin: 1.2rem 0 0.5rem; }
.leaflet h2:first-child { margin-top: 0; }
.leaflet ul, .leaflet ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.leaflet p { font-size: 0.95rem; margin: 0 0 0.5rem; }
.leaflet .price-line strong { font-size: 1.05rem; }
.leaflet footer { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; }

@media print {
  .leaflet { padding: 0; max-width: none; }
  .leaflet .sheet { border: 0; padding: 0; }
  .leaflet h1 { font-size: 1.6rem; }
}
.ask-invoice { margin: 1rem 0; }
.ask-invoice summary { cursor: pointer; font-weight: 700; padding: 0.6rem 0; }
.ask-invoice .roster-form .two { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.ask-invoice input[type="number"] { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; min-height: 44px; }

/* the licence, the data statement and the accessibility promise (18 Sep): a purchasing office reads the four
   answers at the top and stops; the detail below is one line a point, never a paragraph of clauses */
.site-terms { max-width: 54rem; margin: 0 auto; padding: 0 1rem 4rem; }
.terms-head { padding-top: 2rem; max-width: 40rem; }
.site-terms h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 0.6rem; text-wrap: balance; }
.site-terms .lead { color: var(--ink-soft); font-size: 1.08rem; }
.site-terms .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
.small-title { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.8rem; }
.short-version { margin-top: 2.4rem; }
.answers { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.answer { display: flex; gap: 0.6rem; background: var(--paper-2, #f4eee1); border-radius: 12px; padding: 0.9rem 1rem; }
.answer .tick { color: var(--felt); font-weight: 700; }
.answer p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.answer strong { color: var(--ink); display: block; }
.jump { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0 0; }
.jump a { font-size: 0.88rem; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.8rem; }
.jump a:hover { border-color: var(--felt); }
.site-terms .block { margin-top: 2.2rem; scroll-margin-top: 1.5rem; }
.site-terms h2 { font-size: 1.2rem; margin: 0 0 0.9rem; }
.points { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.6rem 1.4rem; margin: 0; }
.points dt { font-weight: 700; }
.points dd { margin: 0; color: var(--ink-soft); max-width: 42rem; }
.site-terms .one-line { color: var(--ink-soft); max-width: 42rem; margin: 0; }
.ask-again { margin-top: 2.5rem; }

@media (max-width: 34rem) {
  .points { grid-template-columns: 1fr; gap: 0.2rem; }
  .points dd { margin-bottom: 0.7rem; }
}
@media print {
  .site-terms { max-width: none; }
  .answer { background: transparent; border: 1px solid #ccc; }
}

/* The pricing page (18 Sep: "all white boxes.. come on"). Four equal cards make the reader compare four things
   and choose none, so the page chooses: Free is a flat column with no card, Member is filled felt and the only
   thing lifted off the paper, Club and Teacher are an ivory pair. The table under them is the part a person
   actually reads before paying, so it is a table. */
.pricing { max-width: 72rem; margin: 0 auto; padding: 0 1rem 4rem; }
.pricing-head { padding-top: 3rem; }
.pricing-head .words { max-width: 46rem; }
.pricing h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 0.8rem; text-wrap: balance; }
.pricing-head .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 40ch; }
.pricing-head .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.beta-note { margin: 1.4rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--paper-2, #f4eee1);
  color: var(--ink-soft); font-size: 0.95rem; max-width: 46rem; }

/* the three weights: a column, a raised card, and a pair */
.plans { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 1.6rem; align-items: start; margin: 2.8rem 0 0; }
.plans h2 { font-family: var(--display); margin: 0 0 0.2rem; }
/* align-content matters here: the list is a grid that grows to fill the column, and without this its rows
   stretch to fill the space, so the shortest column's bullets drift apart while another's sit tight (22 Sep) */
.plans ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.55rem; font-size: 0.95rem;
  align-content: start; }
.plans li { padding-left: 1.3rem; position: relative; }
.plans li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.plans .for-who { font-size: 0.95rem; margin: 0 0 1.1rem; }
.plans .price { margin: 0 0 0.1rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.plans .price .fig { font: 800 2.9rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plans .price .per { font-size: 0.95rem; }
.plans .price .soon { font-size: 1rem; font-style: italic; }
.after-beta { margin: -0.7rem 0 1rem; font-size: 0.86rem; opacity: 0.75; }
.plans .do { margin: 0; }
.plan-free, .plan-member, .plan-card { display: flex; flex-direction: column; }
.plans .do .button, .plans .do form, .plans .do button { width: 100%; }

/* Free: the same card as Club and Teacher, quieter than Member and no longer the odd one out */
.plan-free { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.3rem; }
.plan-free h2 { font-size: 1.15rem; color: var(--ink-soft); }
.plan-free .price .fig { font-size: 2.4rem; color: var(--ink); }
.plan-free .for-who, .plan-free ul { color: var(--ink-soft); }
.plan-free li::before { color: var(--ink-soft); }

/* Member: the one thing raised, on felt, white type */
.plan-member { position: relative; background: linear-gradient(170deg, var(--felt) 0%, var(--felt-deep) 100%);
  color: #fff; border-radius: 18px; padding: 1.9rem 1.6rem 1.6rem; box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,0.35)); }
.plan-member h2 { color: #fff; font-size: 1.6rem; }
.plan-member .price .fig { color: #fff; }
.plan-member .price .per, .plan-member .for-who { color: rgba(255, 255, 255, 0.82); }
.plan-member ul { color: rgba(255, 255, 255, 0.92); }
.plan-member li::before { color: var(--accent); }
.plan-member .flag { position: absolute; top: -0.8rem; left: 1.6rem; margin: 0; background: var(--accent);
  color: var(--accent-ink, #fff); font: 700 0.8rem var(--font); padding: 0.3rem 0.8rem; border-radius: 999px;
  box-shadow: 0 2px 0 var(--accent-deep); }
.plan-member s { color: rgba(255, 255, 255, 0.6); }
.plan-member .free-beta { color: #fff; font-weight: 700; }

/* Club and Teacher: a pair, ivory, quieter than Member and plainer than a feature card */
.plan-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem;
  align-items: start; }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.3rem; }
.plan-card h2 { font-size: 1.15rem; }
.plan-card .price .fig { font-size: 2rem; }
.plan-card .for-who, .plan-card ul { color: var(--ink-soft); }
.plan-card li::before { color: var(--felt); }

/* the comparison: the part somebody reads twice before paying */
.compare { margin: 3.5rem 0 0; }
.compare h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.compare table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--display); font-size: 1rem; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 400; color: var(--ink); }
.compare td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.compare .lead-col { background: rgba(53, 105, 63, 0.09); }
.compare thead .lead-col { color: var(--felt); }
.compare td.yes { color: var(--felt); font-weight: 700; }
.compare td.no { color: var(--ink-soft); opacity: 0.6; }
@media (max-width: 52rem) {
  .compare { overflow-x: auto; }
  .compare table { min-width: 34rem; }
}

/* the site band: words beside a picture of the thing being sold */
.for-sites { margin: 3.5rem 0 0; background: var(--walnut); color: #fff; border-radius: 18px;
  padding: 2rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.for-sites h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 0.6rem; color: #fff; max-width: 20ch; }
.for-sites p { color: rgba(255, 255, 255, 0.82); margin: 0 0 1.2rem; }
.for-sites .actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0; }
.for-sites figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
.for-sites img { display: block; width: 100%; height: auto; }
.site-price { color: rgba(255, 255, 255, 0.85); font-weight: 700; }

.pricing .questions { margin-top: 3.5rem; }
.pricing .questions h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.pricing .fine { margin-top: 2.5rem; color: var(--ink-soft); font-size: 0.9rem; }

@media (max-width: 62rem) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .pricing-head { grid-template-columns: minmax(0, 1fr); }
    .plan-free { order: 3; }
  .for-sites { grid-template-columns: minmax(0, 1fr); padding: 1.4rem; }
}

/* the move of the day (18 Sep): two throws from yesterday, the tiles first and the words under them */
.moments-page { max-width: 60rem; margin: 0 auto; padding: 0 1rem 4rem; }
.moments-page h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 2rem 0 0.6rem; }
.moments-page .lead { color: var(--ink-soft); font-size: 1.08rem; max-width: 44rem; }
.moment-cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin: 2rem 0; }
.moment { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.5rem; }
.moment.good { border-top: 4px solid var(--good, #3fa34d); }
.moment.bad { border-top: 4px solid var(--warn, #b3261e); }
.moment-kind { font: 700 0.85rem var(--font); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1rem;
  display: flex; justify-content: space-between; gap: 1rem; }
.moment.good .moment-kind { color: var(--good, #3fa34d); }
.moment.bad .moment-kind { color: var(--warn, #b3261e); }
.moment-kind .when { color: var(--ink-soft); font-weight: 500; letter-spacing: 0; text-transform: none; }
.moment .thrown { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.moment .label { display: block; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem; }
.moment .what { margin: 0 0 1.2rem; font-size: 1.02rem; line-height: 1.55; }
.moment .rack { margin-top: 0.9rem; }
.moments-page .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0; }
.moments-page .day-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.moments-page .day-links a { font-size: 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.7rem; text-decoration: none; color: var(--ink); }
.moments-page .empty { color: var(--ink-soft); font-size: 1.05rem; margin: 2rem 0; }
.moments-page .fine { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2rem; }
/* the tiles themselves come down a size on a phone in cardlines.css; this is only the space around them */
@media (max-width: 34rem) { .moment .thrown { gap: 1.2rem; } }

/* the header's menus (18 Sep): four things at the top, everything else one click inside one of them */
header.site details.menu { position: relative; }
header.site details.menu > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex;
  align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 700; color: var(--ink); }
header.site details.menu > summary::-webkit-details-marker { display: none; }
header.site details.menu > summary::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.6; }
header.site details.menu > summary:hover { background: var(--paper-2); }
header.site details.menu[open] > summary { background: var(--paper-2); }
header.site details.menu[data-here="1"] > summary { box-shadow: inset 0 -3px 0 var(--felt); border-radius: 12px 12px 4px 4px; }
header.site .menu-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 30; min-width: 14rem;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); display: grid; gap: 0.1rem; }
header.site .menu-panel a { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; font-weight: 600;
  font-size: 0.97rem; white-space: nowrap; }
header.site .menu-panel a:hover { background: var(--paper-2); }

@media (max-width: 52rem) {
  header.site { gap: 0.5rem; padding: 0.6rem 0.9rem; }
  header.site .feedback-tab { display: none; }
  header.site .menu-panel { position: static; box-shadow: none; border: 0; padding: 0.2rem 0 0.2rem 0.8rem;
    background: transparent; min-width: 0; }
  header.site nav.pages { width: 100%; justify-content: flex-start; }
}

/* finding anything (18 Sep): a button in the header, the slash key anywhere, one box in the middle */
.find-open { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.35rem 0.8rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card, #fff); color: var(--ink-soft);
  font: 600 0.92rem var(--font); cursor: pointer; }
.find-open:hover { background: var(--paper-2); color: var(--ink); }
.find-open kbd { border: 1px solid var(--line); border-radius: 5px; padding: 0 0.3rem; font: 600 0.78rem ui-monospace, Menlo, monospace; }
.find-box { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 10, 0.45); display: flex;
  justify-content: center; align-items: flex-start; padding: 8vh 1rem 1rem; }
.find-box[hidden] { display: none; }
body.finding { overflow: hidden; }
.find-inner { width: min(40rem, 100%); background: var(--card, #fff); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.find-inner input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 1.2rem;
  font: 500 1.15rem var(--font); background: transparent; color: var(--ink); }
.find-inner input:focus { outline: none; }
.find-results { max-height: 50vh; overflow-y: auto; }
.find-results a { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.2rem 0.8rem; padding: 0.7rem 1.2rem;
  text-decoration: none; color: var(--ink); align-items: baseline; }
.find-results a .title { font-weight: 700; }
.find-results a .words { grid-column: 2; color: var(--ink-soft); font-size: 0.9rem; }
.find-results a.on, .find-results a:hover { background: var(--paper-2); }
.find-none { padding: 1rem 1.2rem; color: var(--ink-soft); margin: 0; }
.find-foot { margin: 0; padding: 0.7rem 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft);
  font-size: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; }
.kind { font: 700 0.7rem var(--font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem; text-align: center; }
.kind.lesson, .kind.rule { color: var(--felt); border-color: var(--felt); }
.kind.club, .kind.teacher, .kind.tournament { color: var(--accent); border-color: var(--accent); }

/* the whole-page answers */
.search-page { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.search-form { display: grid; gap: 0.5rem; margin: 1.2rem 0 2rem; }
.search-form label { font-weight: 700; }
.search-form input { font: 500 1.1rem var(--font); padding: 0.8rem 0.9rem; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; min-height: 52px; }
.search-page .count { color: var(--ink-soft); }
.found { list-style: none; padding: 0; display: grid; gap: 0.2rem; }
.found li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.found a { display: flex; gap: 0.7rem; align-items: baseline; text-decoration: none; color: var(--ink); }
.found .title { font-weight: 700; font-size: 1.05rem; }
.found .words { margin: 0.2rem 0 0 6.2rem; color: var(--ink-soft); font-size: 0.92rem; }
.suggestions { list-style: none; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.suggestions a { border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; text-decoration: none;
  color: var(--ink); font-size: 0.92rem; }

/* the lobby, live on the front page (18 Sep): three real tables, small, with a way in */
.live-lobby-band { margin: 3rem auto; max-width: 68rem; padding: 1.6rem 1.4rem; background: var(--paper-2, #f4eee1);
  border-radius: 18px; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem; }
.live-head h2 { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.live-head p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.live-tables { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.live-table { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
/* the table itself, drawn small (21 Sep: "i kind of wanted it to be the actual tables, just that size, really
   small, so that people can see things playing"). Four seats round the felt, the discards on the floor between
   them. No concealed hand is drawn, because none is sent. */
.mini-table { position: relative; display: grid; gap: 4px; padding: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: ".  north ." "west floor east" ".  south .";
  background: linear-gradient(170deg, var(--felt) 0%, var(--felt-deep) 100%);
  border-radius: 12px; min-height: 12.5rem; }
.mini-seat { min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.mini-seat.north { grid-area: north; align-items: center; }
.mini-seat.south { grid-area: south; align-items: center; }
.mini-seat.west { grid-area: west; align-items: flex-start; }
.mini-seat.east { grid-area: east; align-items: flex-end; }
.mini-who { margin: 0; font: 700 0.76rem var(--font); color: rgba(255, 255, 255, 0.82); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-seat.now .mini-who { color: #fff; background: rgba(255, 255, 255, 0.16); border-radius: 999px;
  padding: 0 0.45rem; }
.mini-seat.person .mini-who { box-shadow: inset 0 -2px 0 var(--accent); }
.mini-threw { margin: 0; display: flex; align-items: center; gap: 3px; font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6); }
.mini-floor { grid-area: floor; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-width: 0; }
.mini-tiles { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; }
.mini-tiles.floor { --tile-scale: 0.2; max-width: 100%; }
.mini-tiles.exposed { --tile-scale: 0.16; max-width: 100%; }
.mini-tiles.one { --tile-scale: 0.16; }
.mini-wall { margin: 0; font-size: 0.66rem; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.mini-waiting { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.live-none { color: var(--ink-soft); margin: 0; }
.live-do { display: flex; gap: 0.5rem; margin: 0.9rem 0 0; flex-wrap: wrap; }
.live-do .button { font-size: 0.92rem; padding: 0.5rem 0.9rem; min-height: 40px; }
.live-none { color: var(--ink-soft); margin: 0; }
.live-more { margin: 1rem 0 0; }

/* Who you are playing against (18 Sep: the page "is not accurate, we have 3 levels of players now"). The roster
   is a ladder, weakest to strongest, so it is drawn as a ladder: numbered rows that get heavier as they go, not
   a row of equal cards. The strongest row is on felt because it is the one you are given by default. */
.opponents { max-width: 72rem; margin: 0 auto; padding: 0 1rem 4rem; }
.opponents h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.4rem; }
.opponents section { margin-top: 3.5rem; }

.opp-head { padding: 3rem 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem; align-items: center; }
.opp-head h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 0.9rem; text-wrap: balance; }
.opp-head .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.opp-head .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.opp-head figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.opp-head figure img { display: block; width: 100%; height: auto; }

.players { list-style: none; counter-reset: rung; padding: 0; margin: 0; display: grid; gap: 0; }
.player { counter-increment: rung; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr) minmax(0, 0.9fr);
  gap: 2rem; align-items: start; padding: 1.6rem 1.4rem; border-top: 1px solid var(--line); }
.player:last-child { border-bottom: 1px solid var(--line); }
.player .who .name { font: 700 1.6rem/1.1 var(--display); margin: 0 0 0.2rem; }
.player .who .title { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.player .who .badge { display: inline-block; margin: 0.6rem 0 0; font: 700 0.8rem var(--font);
  background: var(--accent); color: var(--accent-ink, #fff); border-radius: 999px; padding: 0.22rem 0.7rem; }
.player .what p { margin: 0 0 0.6rem; }
.player .plays { font-size: 1.02rem; line-height: 1.55; }
.player .suits { color: var(--ink-soft); font-size: 0.97rem; }
.player .k { font-weight: 700; color: var(--ink); }
.player .sit { text-align: right; }
.player .sit .when { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.9rem;
  font-variant-numeric: tabular-nums; }
.player .sit .button { width: 100%; }

/* the one a table seats by default: felt, and heavier than the rungs under it */
.player.current { background: linear-gradient(170deg, var(--felt) 0%, var(--felt-deep) 100%); color: #fff;
  border: 0; border-radius: 18px; padding: 2rem 1.6rem; margin: 0.8rem 0;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.35)); }
.player.current + .player { border-top: 0; }
.player.current .who .name, .player.current .k { color: #fff; }
.player.current .who .title,
.player.current .suits { color: rgba(255, 255, 255, 0.86); }
.player.current .sit .button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }

.opponents .warn { margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.mixing p { max-width: 62ch; color: var(--ink-soft); line-height: 1.6; }
.how-grid { display: grid; gap: 1.8rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.how-grid h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.how-grid p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.opponents .fine { margin-top: 3rem; color: var(--ink-soft); font-size: 0.9rem; max-width: 70ch; }

@media (max-width: 62rem) {
  .opp-head { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .player { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .player .sit { text-align: left; }
  .player .sit .button { width: auto; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The affiliate program (19 Sep: "i see a 'Bring a friend' in my settings but that is not a referal or affiliate
   program"). The page anybody can read, and the panel that tells an affiliate where their money is. */
.affiliates { max-width: 72rem; margin: 0 auto; padding: 0 1rem 4rem; }
.affiliates h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.4rem; }
.affiliates section { margin-top: 3.5rem; }
.aff-head { padding: 3rem 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem; align-items: center; }
.aff-head h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 0.9rem; text-wrap: balance; }
.aff-head .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.aff-head .actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.aff-head figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.aff-head figure img { display: block; width: 100%; height: auto; max-height: 17rem; object-fit: cover; object-position: top; }

.aff-facts { list-style: none; padding: 1.2rem 0 0; margin: 2.5rem 0 0; display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 1px solid var(--line); }
.aff-facts li { font-size: 0.95rem; color: var(--ink-soft); }
.aff-facts strong { display: block; font: 700 1.6rem var(--display); color: var(--ink);
  font-variant-numeric: tabular-nums; margin-bottom: 0.1rem; }

.affiliates .link-row code, .panel .link-row code { display: inline-block; background: var(--paper-2, #f4eee1);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 1.02rem;
  overflow-wrap: anywhere; }
.affiliates .paste p { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 0 0.9rem; color: var(--ink-soft); line-height: 1.6; max-width: 60ch; }
.affiliates .paste strong { color: var(--ink); }
.affiliates .who .card-grid { display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.affiliates .who .card { background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 1.1rem 0 0; }
.affiliates .fine { color: var(--ink-soft); font-size: 0.9rem; }

/* the panel: the funnel, then where the money is */
.aff-funnel { list-style: none; counter-reset: none; padding: 0; margin: 1.4rem 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.aff-funnel li { background: var(--paper-2, #f4eee1); border-radius: 12px; padding: 0.9rem 1rem; }
.aff-funnel strong { display: block; font: 700 1.7rem var(--display); font-variant-numeric: tabular-nums; }
.aff-funnel span { color: var(--ink-soft); font-size: 0.92rem; }
.aff-money { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.aff-money th, .aff-money td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.aff-money th { font-weight: 700; width: 11rem; }
.aff-money td:nth-child(2) { font: 700 1.1rem var(--display); width: 7rem; }

@media (max-width: 62rem) {
  .aff-head { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .affiliates .who .card-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .aff-funnel { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* A look inside (21 Sep). Six pictures that were not links, under a heading that promised a sequence its own
   contents did not follow. Every one is a link now, the caption says where it goes, and the picture lifts on
   hover so it reads as something to press rather than decoration. */
.strip.looks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.strip.looks .shot { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform 150ms, box-shadow 150ms; }
.strip.looks .shot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.strip.looks .shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.strip.looks img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 700; object-fit: cover;
  object-position: top; border-bottom: 1px solid var(--line); }
.strip.looks .says { display: block; padding: 1rem 1.2rem 1.2rem; font-size: 0.97rem; color: var(--ink-soft); }
.strip.looks .says strong { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--ink);
  margin-bottom: 0.2rem; }
.strip.looks .go { display: block; margin-top: 0.5rem; color: var(--accent-deep); font-weight: 700; }
.strip.looks .shot:hover .go { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .strip.looks .shot { transition: none; } .strip.looks .shot:hover { transform: none; } }
@media (max-width: 62rem) { .strip.looks { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

/* At the table (23 Sep): the habits a screen never asks for. Long prose, so the sections need air above their
   headings or every one of them runs into the paragraph before it. */
.table-manners { max-width: 44rem; }
.table-manners header { padding-top: 2.5rem; }
.table-manners .lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1rem; }
.table-manners section { margin-top: 2.8rem; }
.table-manners h2 { margin: 0 0 0.8rem; }
.table-manners p { line-height: 1.7; margin: 0 0 1rem; }
.table-manners ul { line-height: 1.7; margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.table-manners .after { border-top: 1px solid var(--line); padding-top: 2rem; }

/* The questions a page answers, printed and repeated as FAQPage data (23 Sep). The two must say the same
   words: schema that does not match the visible page is what gets a site penalised. */
.faq dl { display: grid; gap: 0; margin: 1rem 0 0; border-top: 1px solid var(--line); }
.faq dl > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.faq dt { font-weight: 700; margin-bottom: 0.4rem; }
.faq dd { margin: 0; line-height: 1.65; color: var(--ink-soft); }

/* The report card (Jeff, 2 Oct: "its a wall of text.. the styling is a joke"). The answer first: how the hand went, as
   one number and four counts. Then the few moves worth a second look, as cards with the tiles drawn. Every decision
   is folded away under that, with filters, for whoever wants the whole record. */
article.rc { max-width: 60rem; }
.rc-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; }
.rc-head h1 { margin-bottom: 0.25em; }
.rc-result { font: 700 1.25rem/1.3 var(--display); margin: 0 0 0.25rem; }
.rc-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rc section { margin-bottom: 2rem; }
.rc h2 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.rc-summary { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); }
.rc-big { font: 800 4rem/1 var(--display); color: var(--felt-deep); font-variant-numeric: tabular-nums; }
.rc-big span { font-size: 0.5em; margin-left: 0.05em; }
.rc-big-says { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.35; margin-top: 0.35rem; }
.rc-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.rc-count { border-radius: 10px; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
.rc-count strong { font: 800 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
.rc-count span { font-size: 0.85rem; font-weight: 700; }
.rc .grade-agreed.rc-count, .rc .rc-bar .grade-agreed { background: #dff3e2; color: #1f6a35; }
.rc .grade-fine.rc-count, .rc .rc-bar .grade-fine { background: #ebe6da; color: #4a4437; }
.rc .grade-mistake.rc-count, .rc .rc-bar .grade-mistake { background: #ffe9c7; color: #7a4e00; }
.rc .grade-blunder.rc-count, .rc .rc-bar .grade-blunder { background: #ffd9d9; color: #94161a; }
.rc-bar { grid-column: 1 / -1; display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.rc .rc-bar .grade-agreed { background: #3f9a55; } .rc .rc-bar .grade-fine { background: #b9b09c; }
.rc .rc-bar .grade-mistake { background: #e0a020; } .rc .rc-bar .grade-blunder { background: #c8383c; }
.rc-key { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; }
.rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; }
.rc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.6rem; }
.rc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rc-when { color: var(--ink-soft); font-size: 0.85rem; }
.rc-versus { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.rc-versus > div { display: flex; flex-direction: column; gap: 0.25rem; }
.rc-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.rc-hand { display: inline-flex; gap: 3px; --tile-scale: 0.62; }
.rc-said { margin: 0; font-size: 0.98rem; line-height: 1.45; }
.rc .inline-tile { display: inline-flex; vertical-align: -0.4em; --tile-scale: 0.42; }
.rc-hand .inline-tile { --tile-scale: 0.62; vertical-align: 0; }
.rc-tile { white-space: nowrap; font-weight: 700; }
.rc-tile .inline-tile { margin-right: 0.2em; }
.rc .on-board { font-size: 0.9rem; font-weight: 700; align-self: flex-start; }
.rc .badge { margin-right: 0; padding: 2px 10px; font-size: 0.8rem; }
.rc-clean { background: #dff3e2; color: #1f6a35; border-radius: var(--radius); padding: 0.9rem 1.1rem; font-weight: 700; margin: 0; }
.rc-empty { color: var(--ink-soft); }
.rc-all { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.rc-all summary { cursor: pointer; padding: 0.9rem 1.1rem; display: flex; align-items: baseline; gap: 0.8rem; list-style: none; }
.rc-all summary::-webkit-details-marker { display: none; }
.rc-all summary::before { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg); align-self: center; transition: transform 150ms; }
.rc-all[open] summary::before { transform: rotate(45deg); }
.rc-all summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.rc-all-title { font: 700 1.35rem var(--display); }
.rc-all-count { color: var(--ink-soft); font-size: 0.95rem; }
.rc-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.1rem 0.8rem; }
.rc-filter { font: 700 0.88rem var(--font); padding: 0.4rem 0.9rem; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); cursor: pointer; }
.rc-filter[aria-pressed="true"] { background: var(--felt-deep); color: #fff; border-color: var(--felt-deep); }
.rc-filter:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rc-rows { list-style: none; margin: 0; padding: 0; }
.rc-row { display: grid; grid-template-columns: 2.2rem 5.2rem 5.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.7rem; align-items: center; padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--line); font-size: 0.95rem; }
.rc-row[hidden] { display: none; }
.rc-n { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.rc-kind { color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; }
.rc-row-said { line-height: 1.45; }
.rc-cands { grid-column: 4 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rc-cand { display: inline-flex; align-items: center; gap: 0.25rem; padding: 1px 7px 1px 3px; border-radius: 6px; border: 1px solid transparent; }
.rc-cand .inline-tile { --tile-scale: 0.34; vertical-align: 0; }
.rc-cand.top { border-color: var(--line); background: var(--paper); }
.rc-cand.mine { border-color: currentColor; color: var(--ink); font-weight: 700; }
.rc-foot { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.rc-foot form { margin: 0; }
@media (max-width: 760px) {
  .rc-summary { grid-template-columns: 1fr; }
  .rc-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-row { grid-template-columns: 2rem auto auto 1fr; }
  .rc-row-said, .rc-row .on-board, .rc-cands { grid-column: 1 / -1; }
  .rc-actions .button { flex: 1 1 100%; text-align: center; }
}

/* the move of the day (3 Oct: "its not clear what is happening"): the hand the tile came from, with the thrown tile
   and the Expert's choice marked in it, and a way into the game itself */
.mo-rack { margin: 0.9rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mo-rack .label { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.mo-tiles { display: flex; flex-wrap: wrap; gap: 4px 3px; align-items: flex-start; }
.mo-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; border-radius: 8px; }
.mo-cell .inline-tile { --tile-scale: 0.62; margin: 0; vertical-align: 0; }
.moment.good .mo-cell.thrown { background: #dff3e2; box-shadow: inset 0 0 0 2px #3f9a55; }
.moment.bad .mo-cell.thrown { background: #ffd9d9; box-shadow: inset 0 0 0 2px #c8383c; }
.mo-cell.judge { background: #fff1c9; box-shadow: inset 0 0 0 2px #e0a020; }
.mo-tag { font-size: 0.72rem; font-weight: 800; line-height: 1.15; text-align: center; max-width: 5.5em; }
.mo-pile { --tile-scale: 0.44; }
.mo-watch { margin: 1rem 0 0; }

/* a real screenshot inside an article (9 Oct, the page for mahjong solitaire players) */
.table-manners figure.shot { margin: 1.4rem 0 1.8rem; }
.table-manners figure.shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-md); }
.table-manners .actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }

/* A guide to our table (11 Oct, item 25): marked pictures of every part. The three things a hand needs sit in their
   own box, so the reader sees how little is required before the features begin. */
.guide figure.shot figcaption { margin-top: .6rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.guide figure.shot.narrow { max-width: 26rem; }
.guide .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.guide .pair figure.shot { margin: 0; }
.guide .need { background: var(--paper-2); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.guide .need ol { line-height: 1.7; margin: 0 0 1rem; padding-left: 1.4rem; display: grid; gap: .5rem; }
.guide-contents { margin-top: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.guide-contents h2 { font-size: 1rem; margin: 0 0 .5rem; }
.guide-contents ul { display: block; list-style: none; padding: 0; margin: 0; columns: 2 14rem; column-gap: 2rem; line-height: 1.5; }
.guide-contents li { padding: .2rem 0; break-inside: avoid; }
.guide section { scroll-margin-top: 5rem; }

/* the home page's three steps and its short list of help for later (11 Oct: one button, then how little a hand asks) */
.want-more { margin: 2.6rem 0; }
.want-more ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0 2.4rem; }
.want-more li { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-top: 1px solid var(--line, rgba(0, 0, 0, 0.1)); }
.want-more li a { font-weight: 700; font-size: 1.1rem; }
.want-more li span { color: var(--ink-soft); }

/* the Coach picture on the home page (12 Oct), in place of the three steps */
.coach-shot { max-width: 1100px; margin: 0 auto; padding: 48px 16px 24px; text-align: center; }
.coach-shot h2 { margin: 0 0 8px; text-wrap: balance; }
.coach-shot > p { margin: 0 auto 20px; max-width: 46ch; }
.coach-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25); }
.coach-shot .steps-more { margin-top: 14px; }
/* Learn and Play, side by side where there is room */
.want-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 40px; }

/* the first-game certificate (13 Oct): the name form and the keep form under the sheet */
.first-game-name, .first-game-keep { max-width: 30rem; margin: 1.2rem auto; display: grid; gap: 0.5rem; }
.first-game-keep { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.first-game-keep h2 { margin: 0; font-size: 1.3rem; }
.first-game-keep p { margin: 0; }
.first-game-kept { text-align: center; }
#fgShared { display: block; margin-top: 0.5rem; }

/* A lesson on its own page (14 Oct, Jeff: "these lessons need to be independent"): one column, one step at a time.
   Tiles are sized by the row they sit in, never wider than a tile's own size, so a rack of 14 fits a phone and
   nothing scrolls sideways; the clip is as wide as the column. */
.lesson-page { max-width: 1240px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.lesson-page .lead { max-width: 62ch; }
.lesson-player { --lp-tile: 84px; --lp-gap: 16px;
  /* the tile colours for every tile on the page, the tray's too (14 Oct: the tray drew black and white) */
  --tile-base-w: 58px; --tile-base-h: 81px; --tile-face: #fdfbf5; --tile-edge: #d9d2c2;
  --pip-bam: #1a7a44; --pip-crak: #b02a2f; --pip-dot: #1e5391; --pip-wind: #6b5636;
  --pip-flower: #2f8a52; --pip-flower-heart: #c8892a; --pip-joker: #7a3d8f; --tile-ink: #232019;
  display: grid; gap: 1rem; margin-top: 1.2rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-sm); }
.lp-head { display: grid; gap: 0.2rem; }
.lp-count { color: var(--ink-soft); font-size: 0.9rem; }
.lp-title { margin: 0; font-size: 1.5rem; }
.lp-body { display: grid; gap: 1rem; justify-items: center; }
.lp-words { margin: 0; max-width: 62ch; justify-self: start; font-size: 1.2rem; }
.lp-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; display: block; }
.lp-video::cue { font-size: 1.1em; line-height: 1.35; background: rgba(20, 28, 24, 0.86); color: #fff; }
.lp-rack, .lp-line { display: grid; width: 100%; column-gap: 3px; margin: 0 auto;
  --tile-base-w: 58px; --tile-base-h: 81px; --tile-face: #fdfbf5; --tile-edge: #d9d2c2;
  --pip-bam: #1a7a44; --pip-crak: #b02a2f; --pip-dot: #1e5391; --pip-wind: #6b5636;
  --pip-flower: #2f8a52; --pip-flower-heart: #c8892a; --pip-joker: #7a3d8f; --tile-ink: #232019; }
.lesson-player .tile { display: block; width: 100%; aspect-ratio: 58 / 81; border: 0; padding: 0; border-radius: 6px; position: relative;
  overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 16%),
    linear-gradient(0deg, rgba(88, 66, 36, 0.30), rgba(88, 66, 36, 0) 11%),
    radial-gradient(130% 95% at 50% 18%, #fffdf7 0%, var(--tile) 55%, var(--tile-edge) 135%);
  box-shadow: 0 2px 0 var(--tile-shadow), 0 4px 8px rgba(30, 24, 12, 0.22); }
.lesson-player .tile .face { width: 100%; height: 100%; display: block; }
.lp-parts { display: grid; gap: 1rem; width: 100%; }
.lp-part { margin: 0; display: grid; gap: 0.35rem; }
.lp-part figcaption { text-align: center; font-weight: 700; color: var(--ink-soft); }
.lp-line { row-gap: 6px; background: var(--paper); border-radius: 10px; padding: 0.8rem 1rem; box-sizing: border-box; }
.lp-print { text-align: center; font: 800 clamp(1.2rem, 3.2vw, 2.3rem)/1 var(--font); letter-spacing: 0.06em; }
.lp-spot { aspect-ratio: 58 / 81; border-radius: 6px; border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); box-sizing: border-box; }
.lp-spot.filled { border: 0; }
.lp-cap { margin: 0; font-weight: 700; justify-self: center; }
.lp-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-tray .tile { width: clamp(52px, 8vw, 88px); cursor: pointer; }
.lp-tray .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lp-tray .tile.nudge { animation: lp-nudge 0.25s ease-in-out 3; }
@keyframes lp-nudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .lp-tray .tile.nudge { animation: none; } }
.lp-said { margin: 0; min-height: 1.4em; max-width: 62ch; text-align: center; }
.lp-said.right { color: var(--bam); font-weight: 700; }
.lp-said.wrong { color: var(--crak); }
.lp-choose { width: 100%; display: grid; gap: 0.6rem; }
.lp-ask { margin: 0; font-weight: 700; font-size: 1.1rem; }
.lp-choices { display: grid; gap: 0.6rem; }
.lp-choice { display: grid; gap: 0.5rem; text-align: left; padding: 0.7rem; border-radius: 10px; border: 2px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; min-height: 44px; }
.lp-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lp-choice-line { font-weight: 800; letter-spacing: 0.04em; }
.lp-choice.right { border-color: var(--bam); background: color-mix(in srgb, var(--bam) 10%, var(--paper)); }
.lp-choice.wrong { border-color: var(--crak); }
.lp-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.lp-nav .button.disabled, .lp-nav button:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 34rem) {
  .lesson-player { padding: 0.8rem; --lp-gap: 7px; }
  .lp-rack, .lp-line { column-gap: 2px; }
  .lp-line { padding: 0.6rem; }
  .lp-nav { justify-content: stretch; }
  .lp-nav > * { flex: 1 1 auto; text-align: center; }
}
/* on a phone (14 Oct): racks in rows of 7, a card line group by group; the tiles keep a readable size */
.lp-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; width: 100%; }
.lp-group { display: flex; gap: 2px; }
.lp-wrap .tile { width: 42px; }
.lp-line.lp-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.lp-block { display: grid; gap: 4px; justify-items: center; }
.lp-block-spots { display: flex; gap: 4px; }
.lp-block .lp-spot, .lp-block .tile { width: 40px; }
.lp-block .lp-print { font-size: 1.1rem; }
/* the lesson sits on green felt, as the tiles do at a table (14 Oct, Jeff: "why is the background not green"); the
   words and the printed card line stay on paper, so they read as easily as before */
.lesson-player { background: radial-gradient(130% 120% at 50% 0%, var(--felt) 0%, var(--felt-deep) 100%); border-color: var(--felt-deep);
  color: #fff; box-shadow: var(--shadow-md); }
.lp-count { color: rgba(255, 255, 255, 0.82); }
.lp-lesson { color: #ffd98a; font-weight: 700; font-size: 1rem; }
.lp-title { color: #fff; }
.lp-words { background: var(--paper); color: var(--ink); padding: 0.7rem 1rem; border-radius: 10px; }
.lp-cap { color: #fff; }
.lp-said:not(:empty) { background: var(--paper); border-radius: 10px; padding: 0.45rem 0.9rem; }
.lp-ask { color: #fff; }
.lp-part figcaption { color: #fff; }
.lp-nav { border-top-color: rgba(255, 255, 255, 0.22); }
.lp-nav .button.secondary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* everything stays inside the felt on a phone (14 Oct: the words and the racks ran past its right edge) */
.lesson-player, .lesson-player * { box-sizing: border-box; }
.lesson-player, .lp-body { grid-template-columns: minmax(0, 1fr); }
.lp-body > * { max-width: 100%; }
.lp-words { max-width: min(62ch, 100%); }
/* a row of 7 always fits inside the felt on a phone: the tile is sized from the screen, never above 42 px */
.lp-wrap .tile { width: min(42px, calc((100vw - 120px) / 7)); }
.lp-group { flex-wrap: wrap; justify-content: center; }
.lp-choose, .lp-choices, .lp-choice, .lp-parts, .lp-part { min-width: 0; max-width: 100%; }

/* the clip, its captions strip under it and the captions button (14 Oct: the captions covered the table) */
.lp-clip { width: 100%; display: grid; gap: 0.5rem; }
.lp-captions { margin: 0; min-height: 3.2em; background: rgba(12, 22, 15, 0.82); color: #fff; border-radius: 10px;
  padding: 0.6rem 1rem; font: 600 1.35rem/1.4 var(--font); text-align: center; text-wrap: balance; }
.lp-clip-bar { display: flex; justify-content: flex-end; }
.lp-cc { font: 700 0.95rem var(--font); background: var(--paper); color: var(--ink); border: 0; border-radius: 999px;
  padding: 0.45rem 1rem; cursor: pointer; }
.lp-cc:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* every rack on the page at one tile size, lined up on the left (14 Oct: the 13 rack had bigger tiles than the 14) */
.lp-rack { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; width: auto; max-width: 100%; margin: 0; }
.lp-rack .lp-group { display: flex; gap: 3px; flex-wrap: nowrap; }
.lp-rack .tile { width: 62px; flex: none; }
.lp-choice .lp-rack, .lp-part .lp-rack { justify-content: flex-start; }
.lp-part { justify-items: start; }
.lp-part figcaption { text-align: left; }
/* the clip, its captions and Next in one screen: lessonplay.js sets the clip's height from what the window leaves */
.lp-video { max-height: 50vh; width: auto; max-width: 100%; justify-self: center; }
.lp-clip { justify-items: center; }
.lp-captions { width: 100%; }

/* The printed quick reference (15 Oct): three US Letter sheets. On screen each sheet is drawn as a sheet of paper
   at its printed size, so what is seen is what prints; in print a sheet is exactly one page. */
.quickref { --qr-ink: #232019; --qr-soft: #5c5445; --qr-line: #d9cfb8; --qr-felt: #35693f; --qr-wash: #f4efe3;
  display: grid; justify-content: center; gap: 1.5rem; }
.qr-screen { width: 8.5in; }
.qr-screen .qr-intro { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 0.8rem; }
.qr-screen .actions { display: flex; gap: 0.7rem; margin: 0; }
.qr-sheet { width: 8.5in; height: 11in; padding: 0.45in 0.55in 0.4in; background: #fff; color: var(--qr-ink);
  box-shadow: var(--shadow-md); border: 1px solid var(--qr-line); display: flex; flex-direction: column;
  font-size: 10.5pt; line-height: 1.38; overflow: hidden; }
.qr-sheet p { margin: 0 0 0.35em; }
.qr-top { display: flex; justify-content: space-between; font-size: 8pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--qr-soft); border-bottom: 2px solid var(--qr-felt); padding-bottom: 0.35em; margin: 0 0 0.9em !important; }
.qr-brand { font-weight: 700; color: var(--qr-felt); }
.qr-sheet h1 { font-size: 22pt; margin: 0 0 0.35em; }
.qr-sheet h2 { font-size: 15pt; margin: 0.5em 0 0.35em; display: flex; align-items: center; gap: 0.45em; }
.qr-sheet h2:first-of-type { margin-top: 0; }
.qr-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--qr-felt);
  color: #fff; font-size: 0.75em; flex: none; }
.qr-sheet h3 { font-size: 11pt; margin: 0 0 0.2em; }
.qr-lead { color: var(--qr-soft); margin-bottom: 0.7em !important; }
.qr-sheet .fine { font-size: 8.5pt; color: var(--qr-soft); }
.qr-sheet .figure { gap: 6px; }
.qr-sheet .figure .tile { box-shadow: 0 1px 0 var(--tile-shadow), 0 1px 3px rgba(30, 24, 12, 0.22); border-radius: 4px; }
.qr-sheet .figure.rows { flex-direction: column; align-items: flex-start; gap: 3px; }
.qr-sheet .qr-grid { --tile-scale: 0.45; }
.qr-sheet .qr-grid .figure-group { gap: 2px; }
.qr-sheet .qr-small { --tile-scale: 0.4; }
.qr-groups .qr-small { --tile-scale: 0.44; }
.qr-sheet .qr-mid { --tile-scale: 0.6; }

/* page 1 */
.qr-suit { display: grid; grid-template-columns: 1.45in auto 1fr; gap: 0.2in; align-items: center;
  padding: 0.1in 0; border-bottom: 1px solid var(--qr-line); }
.qr-suit-name p { margin: 0 0 0.15em; font-size: 9.5pt; color: var(--qr-soft); }
.qr-suit-name p strong { color: var(--qr-ink); }
.qr-dragon { display: flex; align-items: center; gap: 0.12in; padding-left: 0.15in; border-left: 1px dashed var(--qr-line); }
.qr-dragon p { font-size: 9.5pt; margin: 0; }
.qr-others { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 0.2in; padding-top: 0.14in; }
.qr-others p { font-size: 9.5pt; margin-top: 0.3em; }
.qr-sum { margin-top: 0.14in !important; padding: 0.08in 0.14in; background: var(--qr-wash); border-radius: 8px; text-align: center; }

/* page 2 */
.qr-groups { width: 100%; border-collapse: collapse; font-size: 10pt; }
.qr-groups th, .qr-groups td { border-bottom: 1px solid var(--qr-line); padding: 0.09in 0.08in; text-align: left; vertical-align: middle; }
.qr-groups thead th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qr-soft);
  background: var(--qr-wash); border-bottom: 2px solid var(--qr-line); }
.qr-groups tbody th span { display: block; font-weight: 400; color: var(--qr-soft); font-size: 9pt; }
.qr-groups td:nth-child(n+3), .qr-groups thead th:nth-child(n+3) { text-align: center; width: 1.05in; }
.qr-yes { color: #1a7a44; font-weight: 700; white-space: nowrap; }
.qr-no { color: #b02a2f; font-weight: 700; white-space: nowrap; }
.qr-notes { margin: 0.1in 0 0; padding-left: 1.1em; display: grid; gap: 0.25em; font-size: 9.8pt; }
.qr-rule { margin-top: 0.16in; border: 2px solid var(--qr-felt); border-radius: 10px; padding: 0.14in 0.2in; }
.qr-rule-words { font: 700 14pt var(--display); margin-bottom: 0.1in !important; }
.qr-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2in; }
.qr-example { display: grid; grid-template-columns: auto auto 1fr; gap: 0.12in; align-items: center; padding: 0.08in 0.12in; border-radius: 8px; }
.qr-example.ok { background: #e9f3ec; }
.qr-example.bad { background: #f8e9e9; }
.qr-example p { margin: 0; font-size: 9.8pt; color: var(--qr-ink); font-weight: 400; }
.qr-mark { font-size: 22pt; font-weight: 700; line-height: 1; }
.qr-example.ok .qr-mark { color: #1a7a44; }
.qr-example.bad .qr-mark { color: #b02a2f; }
.qr-sub { margin-top: 0.18in !important; }
.qr-two { display: grid; grid-template-columns: 1fr 2fr; gap: 0.25in; }
.qr-two p { font-size: 9.8pt; }
.qr-swap-pic { display: flex; align-items: center; flex-wrap: wrap; gap: 0.08in; margin-top: 0.06in; }
.qr-plus { font-size: 9.5pt; color: var(--qr-soft); }

/* page 3 */
.qr-cols { display: grid; grid-template-columns: 3.55in 1fr; gap: 0.3in; }
.qr-table { width: 100%; height: auto; display: block; margin-bottom: 0.06in; }
.qr-svg-small { font: 600 10px var(--font); fill: #7b5530; }
.qr-svg-label { font: 700 15px var(--display); fill: #35693f; }
.qr-svg-seat { font: 700 12px var(--font); fill: #5c5445; letter-spacing: 0.06em; text-transform: uppercase; }
.qr-svg-dot { fill: #232019; }
.qr-svg-num { font: 700 10px var(--font); fill: #fff; text-anchor: middle; }
.qr-steps { margin: 0; padding-left: 1.3em; font-size: 9.6pt; display: grid; gap: 0.2em; }
.qr-steps li::marker { font-weight: 700; }
.qr-charleston { border: 1px solid var(--qr-line); border-radius: 8px; padding: 0.08in 0.12in; margin-bottom: 0.09in; }
.qr-charleston h3 span { font: 400 9pt var(--font); color: var(--qr-soft); margin-left: 0.3em; }
.qr-charleston p { font-size: 9.8pt; margin: 0; display: flex; align-items: center; gap: 0.1in; }
.qr-passes { list-style: none; margin: 0.04in 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.08in;
  counter-reset: pass; }
.qr-passes li { display: flex; flex-direction: column; align-items: center; font-weight: 700; font-size: 11pt; text-align: center; }
.qr-passes li::before { counter-increment: pass; content: counter(pass); font-size: 8pt; color: var(--qr-soft); font-weight: 400; }
.pass-arrow { width: 0.42in; height: 0.42in; color: var(--qr-felt); flex: none; }
.qr-blind { font: 400 8pt var(--font); color: var(--qr-soft); }
.qr-turn { margin: 0; padding-left: 1.3em; display: grid; gap: 0.08in; font-size: 10.2pt; }
.qr-card-note { margin-top: 0.1in !important; }
.qr-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 0.2in;
  border-top: 1px solid var(--qr-line); padding-top: 0.08in; font-size: 9pt; color: var(--qr-soft); }
.qr-foot p { margin: 0; }
.qr-foot strong { color: var(--qr-ink); }
.qr-foot-last { align-items: center; }
.qr-foot-last > div { flex: 1; }
.qr-foot-big { font-size: 12pt; }
.qr-code { width: 0.9in; height: 0.9in; display: block; }

@media print {
  @page { size: Letter; margin: 0; }
  main:has(.quickref) { padding: 0; max-width: none; }
  .quickref { display: block; }
  .qr-sheet { box-shadow: none; border: 0; break-after: page; }
  .qr-sheet:last-child { break-after: auto; }
}

/* one quiet ad, labelled (15 Oct): below a lesson's player or after an article's text, never inside a step */
.ad-slot { margin: 1.5rem auto; max-width: 970px; display: grid; gap: 0.25rem; }
.ad-label { font-size: 0.75rem; color: var(--ink-soft, #6b6150); letter-spacing: 0.04em; }

/* the five coached practice games (16 Oct): one row per game, in order, ticked off once played */
.practice-list { list-style: none; max-width: 52rem; margin: 2rem auto; padding: 0 1rem; display: flex; flex-direction: column; gap: 1rem; }
.practice-game { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; display: grid; gap: 0.5rem; }
.practice-game p { margin: 0; color: var(--ink-soft); max-width: 40em; }
.practice-game .button { justify-self: start; margin-top: 0.3rem; }
.practice-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.practice-head h2 { margin: 0; font-size: 1.35rem; }
.practice-n { font: 700 0.95rem var(--display); color: var(--accent-deep); }
.practice-tick { margin-left: auto; font-weight: 700; color: var(--felt); }
.practice-game.done { border-color: var(--felt); }
.practice-who { font-size: 0.95rem; }
.practice-after { max-width: 52rem; margin: 0 auto 2rem; padding: 0 1rem; }

/* the card collection on My progress (16 Oct): lines won out of all the lines, per card */
.collection-card { display: grid; gap: 0.4rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.collection-card:first-of-type { border-top: 0; }
.collection-head { margin: 0; display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.collection-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.collection-bar span { display: block; height: 100%; background: var(--felt); border-radius: 999px; }
.collection-lines { list-style: none; padding: 0; margin: 0.5rem 0 0; columns: 2 14rem; font-size: 0.95rem; color: var(--ink-soft); }
.collection-lines li { break-inside: avoid; padding: 0.1rem 0; }
.collection-lines li.won { color: var(--ink); font-weight: 700; }
.collection-lines .tick { color: var(--felt); font-size: 0.85em; }

/* quick reference page 4 (16 Oct): a printed line with its tiles under it, the symbols, and the payments */
.qr-line { display: grid; gap: 0.25em; margin: 0 0 0.7em; }
.qr-line p { margin: 0 !important; font-size: 10pt; color: var(--qr-soft); }
.qr-printed { font: 700 15pt/1.2 var(--display); letter-spacing: 0.04em; color: var(--qr-ink) !important; }
.qr-ink-g { color: #1a7a44; } .qr-ink-r { color: #b02a2f; }
.qr-xc { font-size: 10pt; color: var(--qr-soft); margin-left: 0.6em; letter-spacing: 0; }
.qr-symbols, .qr-pay { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin: 0.2em 0 0.6em; }
.qr-symbols th, .qr-symbols td, .qr-pay th, .qr-pay td { text-align: left; padding: 0.22em 0.5em; border-bottom: 1px solid var(--qr-line); vertical-align: middle; }
.qr-symbols th, .qr-pay th { font-size: 8.5pt; color: var(--qr-soft); font-weight: 700; }
.qr-symbols td:first-child { font: 700 11pt var(--display); white-space: nowrap; width: 5.5em; }
.qr-symbols .figure { margin: 0; }

/* an article's video (16 Oct): a still with a play mark; pressing it puts the player in its place */
.article-video { margin: 1rem 0 1.5rem; }
.article-video .yt-still, .article-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; background: var(--felt-deep); padding: 0; cursor: pointer; position: relative; }
.article-video .yt-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-video .yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(176, 42, 47, 0.92); }
.article-video .yt-play::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.article-video .yt-still:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.article-video figcaption { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.4rem; }