/* ==========================================================================
   NNP RAISINS — /meet/, v2 THE BADGE (2026-09-22). Loaded by meet/index.php
   only, after site.css.

   THE BADGE IS THE VISUAL. Every page its own idea, in the dark family
   (Products the bench, Certification the desk, News the map, Production the
   film, Tracking the journey, Contact the sample box). Every buyer at SIAL
   wears a badge on a lanyard, so the page hangs one from the top of the
   screen, over a photograph of the real stand: it prints the day and the
   time the moment they are picked, and the name and company as they are
   typed. The calendar and the free times are in view from the first pixel
   on the right (his brief of 2026-08-24, Calendly as the reference); the
   details open under them once a time is picked (his brief of 2026-09-07).

   v1 (paper: band, Calendly-shaped card) is
   archives/meet-index-v1-2026-09-22.php.

   ⚠ HIS LAPTOP IS 1270×680: headline, calendar AND the times fit one screen.
   ⚠ FIELD NAMES ARE book.php's. `slot` is the one radio group across all
     five days. Do not rename one here.
   ⚠ HIS MACHINE REPORTS hover:none. Nothing here needs a hover.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.mt { --mt-bg: #08060e; --mt-line: rgba(242,237,248,.14); --mt-glass: rgba(14,10,22,.55); --mt-r: 16px;
      --mt-paper: #f6f4ee; --mt-ink: #1b1622; --mt-dim: #6b6478;
      background: var(--mt-bg); color: var(--chalk); overflow-x: clip; }
.mt-dark-page, .mt-dark-page body { background: #08060e; }
.mt-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ---- */
.mt-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.mt-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mt-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.mt-dark-page .masthead .brand { color: #fff; }
.mt-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .mt-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .mt-dark-page .masthead .mainnav a:not(.btn):hover,
  .mt-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .mt-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .mt-dark-page .masthead .btn-primary::before { background: #fff; }
  .mt-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.mt-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 14px; }
.mt-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(38px, 7.6vh, 76px); line-height: .92; letter-spacing: -.045em; margin: 0 0 12px; text-shadow: 0 12px 50px rgba(0,0,0,.6); }
.mt-h1 .accent { color: var(--violet-lt); }
.mt-lead { margin: 0 0 clamp(18px, 3vh, 28px); font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.5; color: var(--chalk-dim); max-width: 52ch; }
.mt-glass { background: var(--mt-glass); border: 1px solid var(--mt-line); border-radius: var(--mt-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.mt-step { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 12px; }
.mt-step b { font-weight: 400; color: #fff; }

/* ============================================================== HALL ====
   The first screen. The stand photograph, dimmed, behind everything; the
   badge hanging on the left; the headline and the diary on the right. */
/* ⚠ overflow: clip, NEVER hidden. `hidden` makes the section a scroll
   container, and the badge column's `position: sticky` then sticks to a
   box that never scrolls, so the badge was left behind above the form
   (his note, 2026-09-22). `clip` clips without creating one. */
.mt-hall { position: relative; padding: 0 0 clamp(24px, 4vh, 48px); overflow: clip;
  background: radial-gradient(ellipse at 18% 40%, #1a1230 0%, #0c0816 45%, #08060e 100%); }
/* inset 0 and no scale: the responsive probe flags any image wider than
   the viewport, and the blur's soft edge disappears under the veil anyway */
.mt-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* blurred: the roll-up banner's own type sat sharp behind the badge and
   competed with it */
.mt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .3; filter: saturate(.8) blur(3px); }
.mt-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,6,14,.55) 0%, rgba(8,6,14,.72) 40%, rgba(8,6,14,.9) 100%),
              linear-gradient(180deg, rgba(8,6,14,.2) 0%, rgba(8,6,14,0) 30%, rgba(8,6,14,.92) 100%); }
.mt-hall > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
/* ⚠ THE ROOM UNDER THE FORM IS HERE, NOT ON THE SECTION. The badge column's
   sticky range is the grid row, which ends where this column ends; padding
   on `.mt-hall` sits outside it and buys the badge nothing. 120px here is
   what keeps the badge unpushed while the form is in view. */
.mt-right { padding-top: calc(var(--mast-h) + 14px); padding-bottom: 120px; min-height: 100vh; display: grid; align-content: start; }

/* ============================================================= BADGE ====
   Hangs from the top of the screen on two straps, and stays in view while
   the details are filled in below (sticky). The whole assembly swings on
   its pivot: meet.js integrates a damped pendulum from scroll and pointer. */
/* ⚠ THE COLUMN IS AS TALL AS THE BADGE, NOT THE SCREEN. A sticky element
   is pushed up once its own bottom meets the end of its container; at
   100vh that happened well before the form was reached and the badge
   "stopped early" (his note, 2026-09-22). 720 = the card's bottom plus
   its shadow at full size; the short-screen query sets its own. */
/* top: 0 — the whole badge holds in view. A "bottom edge at 250px" version
   (top: -416px / -293px short) was tried on 2026-09-22 and undone the same
   minute: it hid most of the badge. */
.mt-hangcol { position: sticky; top: 0; height: 720px; perspective: 1400px; }
/* hung 12px left of the column's centre: at full swing the card's corner
   was touching the diary card's edge at 1270 */
.mt-hang { position: absolute; left: 50%; top: -30px; width: 300px; margin-left: -162px; transform-origin: 50% 0; will-change: transform;
  transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)); }
/* ⚠ NO IDLE SWAY ANIMATION ON .mt-hang. There was one, and a keyframe that
   sets `transform` replaces the whole transform, including the scale(.86)
   the short-screen query applies: the badge grew to full size a few
   seconds after settling (his note, 2026-09-22, "badge gets bigger"). The
   badge rests still; only the cursor moves it (meet.js). */
/* A fixed-past-the-section version (the badge going `position: fixed` once
   the sticky column was pushed, fading before the footer) was built and
   undone on 2026-09-22 on his "undo". Sticky only; at the foot of the page
   the badge rides up with the section, and that is accepted. */
.mt-strap { position: absolute; top: 0; left: 50%; width: 22px; height: 236px; margin-left: -11px; transform-origin: 50% 0;
  background: linear-gradient(90deg, #3a1560, #5b2794 50%, #3a1560); box-shadow: 0 6px 18px rgba(0,0,0,.45), 1px 0 0 rgba(255,255,255,.08) inset; }
.mt-strap-l { transform: rotate(7deg); }
.mt-strap-r { transform: rotate(-7deg); }
.mt-strap span { position: absolute; left: 0; top: 14px; width: 100%; height: calc(100% - 22px); overflow: hidden;
  writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--mono); font-size: 7.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 22px; white-space: nowrap; }
.mt-clip { position: absolute; top: 224px; left: 50%; width: 46px; height: 22px; margin-left: -23px; border-radius: 4px;
  background: linear-gradient(180deg, #d9d6dd, #8d8896 55%, #b9b5c1); box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.6) inset; z-index: 2; }
.mt-clip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 16px; margin-left: -5px;
  background: linear-gradient(180deg, #b9b5c1, #8d8896); border-radius: 0 0 3px 3px; }
.mt-card { position: absolute; top: 254px; left: 0; width: 300px; height: 412px; border-radius: 14px; overflow: hidden;
  background: var(--mt-paper); color: var(--mt-ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 rgba(255,255,255,.5) inset; }
/* the hole punch */
.mt-card::before { content: ''; position: absolute; top: 11px; left: 50%; width: 46px; height: 9px; margin-left: -23px; border-radius: 5px;
  background: #0f0b16; box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 2px rgba(0,0,0,.35) inset; z-index: 3; }
/* the plastic sleeve: the sheen moves with the swing */
.mt-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 44%, rgba(226,183,255,.22) 50%, rgba(255,255,255,0) 64%);
  background-size: 220% 100%; background-position: var(--sx, 60%) 0; }
.mt-head { height: 84px; padding: 30px 20px 0; background: linear-gradient(160deg, #5a2590 0%, var(--violet) 50%, var(--violet-dp) 100%); color: #fff;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mt-head svg { width: 78px; height: auto; display: block; color: #fff; }
.mt-head span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); text-align: right; line-height: 1.6; margin-top: 2px; }
.mt-body { padding: 18px 20px 0; display: grid; gap: 12px; }
.mt-row { display: grid; gap: 2px; }
.mt-row span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mt-dim); }
.mt-row b { display: block; min-height: 26px; font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; color: var(--mt-ink);
  border-bottom: 1px dotted rgba(27,22,34,.35); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-row.is-co b { font-size: 15px; font-family: var(--body); font-weight: 600; min-height: 22px; }
.mt-row b:empty::before { content: '\00a0'; }
.mt-row b.is-set { border-bottom-color: transparent; }
/* the stamp panel: the day and time print here */
.mt-stamp { margin: 4px 0 0; border: 1.5px dashed rgba(75,30,120,.45); border-radius: 8px; padding: 10px 12px 11px; display: grid; gap: 3px; min-height: 74px; position: relative; }
.mt-stamp span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); }
.mt-stamp b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.03em; color: var(--violet-dp); display: block; }
.mt-stamp b.is-empty { color: rgba(27,22,34,.28); font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-top: 3px; }
@keyframes mt-stamp { 0% { transform: scale(1.5) rotate(-5deg); opacity: 0; } 55% { transform: scale(.96) rotate(1deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.js .mt-stamp b.is-hit { animation: mt-stamp .42s cubic-bezier(.2,.9,.3,1.2) both; transform-origin: 20% 60%; }
.mt-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(27,22,34,.12); background: #efece4; }
.mt-foot span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mt-dim); line-height: 1.6; }
.mt-bars { width: 92px; height: 26px; background: repeating-linear-gradient(90deg, #1b1622 0 2px, transparent 2px 4px, #1b1622 4px 5px, transparent 5px 8px, #1b1622 8px 11px, transparent 11px 13px); opacity: .8; }
/* the badge's shadow on the stand */
.mt-hangcol::after { content: ''; position: absolute; left: 50%; top: 690px; width: 240px; height: 30px; margin-left: -120px; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(14px); }

/* ============================================================= DIARY ====
   Step 1: the month on the left, the free times on the right, one card. */
.mt-diary { padding: clamp(18px, 2.4vh, 26px) clamp(18px, 2.2vw, 28px); display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 10px clamp(18px, 2.6vw, 40px); }
.mt-diary .mt-step { grid-column: 1 / -1; margin-bottom: 4px; }
.mt-facts { grid-column: 1 / -1; margin: -4px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-dim); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mt-facts i { font-style: normal; color: var(--violet-lt); }
.mt-cal-title { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #fff; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-dim); font-weight: 400; padding-bottom: 6px; }
.cal td { text-align: center; padding: 2px; }
.cd { display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%; max-width: 40px; margin: 0 auto; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--chalk-dim); }
/* ⚠ AVAILABLE DAYS ARE THE ONLY ONES THAT LOOK CLICKABLE, and they are the
   only ones that are: everything else is a <span>. A plate, a light number
   and a dot under it; colour is never the only signal. */
a.cd { color: #fff; background: rgba(226,183,255,.14); border: 1px solid rgba(226,183,255,.35); font-weight: 700; text-decoration: none; position: relative;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
a.cd::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
a.cd:focus-visible { outline: 2px solid var(--violet-lt); outline-offset: 2px; }
a.cd[aria-current="date"] { background: var(--violet-lt); border-color: var(--violet-lt); color: var(--violet-dp); }
.cd.is-full { text-decoration: line-through; opacity: .45; }
.cd.is-off { opacity: .28; }

.mt-times-head { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.mt-times-head span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-dim); margin-top: 3px; font-weight: 400; }
/* Four across: 16 half-hours make four rows, and all of them are in view
   with nothing to scroll, which is what keeps Lenis and the list from
   fighting over the wheel. */
.timelist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.tslot { position: relative; display: block; }
.tslot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* 44px: the touch-target floor, exactly. */
.tslot span { display: grid; place-items: center; height: 44px; padding: 0 4px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: #fff;
  background: rgba(8,6,14,.5); border: 1px solid rgba(242,237,248,.18); border-radius: 9px;
  transition: border-color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
.tslot input:focus-visible + span { outline: 2px solid var(--violet-lt); outline-offset: 2px; }
.tslot input:checked + span { background: var(--violet-lt); border-color: var(--violet-lt); color: var(--violet-dp); font-weight: 700; }
.mt-times-none { margin: 0; font-size: 14px; color: var(--chalk-dim); line-height: 1.5; }

/* ------------------------------------------------------------ notice ---- */
.mt-notice { margin: 0 0 16px; padding: 14px 18px; border-left: 3px solid var(--violet-lt); border-radius: 0 10px 10px 0;
  background: rgba(226,183,255,.1); color: #fff; font-size: 15px; line-height: 1.5; }
.mt-notice a { color: var(--violet-lt); }

/* ============================================================== STEP 2 ====
   The details. Hidden until a time is picked (JavaScript on, and only when
   there is something to pick); the empty state stands where it will open. */
html.js .is-stepped .mt-who { display: none; }
html.js .is-stepped .mt-who.is-open { display: grid; }
.mt-pickfirst { display: none; margin: 14px 0 0; padding: 16px 20px; border: 1px dashed var(--mt-line); border-radius: 12px; color: var(--chalk-dim); font-size: 14.5px; line-height: 1.5; }
.mt-pickfirst b { color: #fff; font-weight: 600; }
html.js .is-stepped .mt-pickfirst { display: block; }
html.js .is-stepped .mt-pickfirst.is-done { display: none; }

.mt-who { margin-top: 14px; padding: clamp(18px, 2.4vh, 26px) clamp(18px, 2.2vw, 28px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.mt-who .mt-step { grid-column: 1 / -1; margin-bottom: 0; }
.mt-who h2 { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(24px, 4.2vh, 34px); line-height: .96; letter-spacing: -.04em; }
.mt-who h2:focus { outline: none; }
.mt-who .mt-sub { grid-column: 1 / -1; margin: -2px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--chalk-dim); }
.mt-field { display: grid; gap: 5px; min-width: 0; }
.mt-field.is-full { grid-column: 1 / -1; }
.mt-field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.mt-field label i { font-style: normal; color: var(--violet-lt); margin-left: 3px; }
.mt-field input, .mt-field textarea { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(242,237,248,.16);
  background: rgba(8,6,14,.55); color: #fff; font: inherit; font-size: 14.5px; transition: border-color .2s ease, background-color .2s ease; }
.mt-field textarea { height: auto; min-height: 66px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.mt-field input::placeholder, .mt-field textarea::placeholder { color: rgba(242,237,248,.3); }
.mt-field input:focus, .mt-field textarea:focus { outline: 2px solid var(--violet-lt); outline-offset: 1px; border-color: var(--violet-lt); background: rgba(8,6,14,.8); }
.mt-field.is-missing input { border-color: #ff8a8a; background: rgba(120,20,30,.25); }
.mt-field .mt-hint { font-size: 11.5px; line-height: 1.35; color: var(--chalk-dim); }
.mt-foot-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.mt-foot-row .btn-light { height: 46px; padding-inline: 26px; }
.mt-picked { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.mt-picked b { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 600; }
html:not(.js) .mt-picked { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ closed ---- */
.mt-closed { max-width: 54ch; display: grid; gap: 14px; }
.mt-closed p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--chalk-dim); }
.mt-closed .after { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* ----------------------------------------------------------- short ----
   His laptop: 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .mt-right { padding-top: 78px; }
  .mt-h1 { font-size: 46px; margin-bottom: 8px; }
  .mt-lead { font-size: 13.5px; margin-bottom: 14px; }
  .mt-diary { gap: 8px 24px; }
  .mt-facts { display: none; }
  .cd { max-width: 36px; }
  .tslot span { height: 40px; }
  .mt-hangcol { height: 620px; }   /* the card's bottom at scale .86, plus its shadow */
  .mt-hang { transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)) scale(.86); }
  .mt-hangcol::after { top: 600px; }
}
/* -------------------------------------------------------------- mid ---- */
@media (max-width: 1100px) and (min-width: 901px) {
  .mt-hall > .wrap { grid-template-columns: 260px minmax(0, 1fr); }
  .mt-hang { transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)) scale(.82); }
  .mt-diary { grid-template-columns: minmax(0, 1fr); }
  .timelist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------ phone ----
   The headline, then the badge (small, hanging from under the masthead),
   then the calendar and the times, then the details. */
@media (max-width: 900px) {
  .mt-hall > .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mt-right { padding-top: 0; padding-bottom: 8px; min-height: 0; order: 2; }   /* nothing sticks on a phone */
  .mt-hangcol { position: relative; top: auto; height: 300px; min-height: 0; order: 1; margin-top: var(--mast-h); overflow: visible; }
  .mt-hang { top: -120px; transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)) scale(.62); transform-origin: 50% 0; }
  .mt-hangcol::after { display: none; }
  .mt-h1 { font-size: clamp(34px, 9.6vw, 46px); }
  .mt-facts { display: none; }   /* three wrapped lines on a phone; the badge carries the same facts */
  .mt-diary { grid-template-columns: minmax(0, 1fr); }
  .timelist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-who { grid-template-columns: minmax(0, 1fr); }
  .mt-foot-row { flex-direction: column; align-items: stretch; }
  .mt-foot-row .btn { text-align: center; }
  /* ⚠ SEVEN DAY CELLS AT THE 44px TOUCH FLOOR, and it is arithmetic: 390
     wide, 20 a side for the wrap, 18 a side for the card leaves 314, and
     314 / 7 minus the cell padding is 43. The table steps 6px past the
     card's padding on each side to clear it. Re-run the probe at 390
     before touching any of these numbers. */
  .cd { max-width: none; aspect-ratio: auto; min-height: 44px; }
  .cal td { padding: 1px; }
  .mt-cal { margin-inline: -6px; }
  .mt-kick, .cal th, .mt-times-head span, .mt-step, .mt-step b, .mt-facts, .mt-picked, .mt-field label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mt-stamp b.is-hit { animation: none; }
}