/* 2026-07-20 — per-form sticky pinning REMOVED from the step head and page picker.
   It existed because .wizard-stage was the scroller: the head would scroll out of its
   own private scroll box, so it was pinned at top:0 of THAT box. With the document
   scrolling and the portal nav itself sticky, top:0 now resolves to the viewport top —
   i.e. BEHIND the nav — so the pin no longer put anything anywhere useful.
   The rule was always 'every page opens with its title on the same baseline', not
   'the title occupies viewport space forever'. The baseline is set by the step's top
   padding and is unchanged (99.39px); the head now simply scrolls away under the opaque
   nav like normal page content. Padding/background are kept so the box model — and
   therefore the baseline and the header→content buffer — do not move. */
/* ============================================================
   Field Portal — meeting-minutes.css
   PAGE LAYOUT ONLY. All components (.field/.input/.btn/.chip/.repeat-*/
   .page-title/.section-h/.tt-sig-*/.date-field/.time-field/.portal-nav/
   .wizard…) come from assets/css/portal.css, which sits on assets/css/base.css
   (brand tokens + reset). Those files are SHARED and untouched.

   Meeting Minutes is the Site Orientation archetype cloned: a no-scroll
   View-Transitions crossfade
   WIZARD (portal.css §9C) whose attendee step reuses the shared roster pool + the
   full-screen drawn Signature sheet. This file owns ONLY what's specific to
   Meeting Minutes: the intro/step headers, the meta + info grids, the discussion
   & action repeatable lists, the attendee pool + walk-on popup, the approval note,
   the signature-gate notice, and the @media print stylesheet that renders the
   assembled record (built in meeting-minutes.js into #mm-print-doc).

   The shared top nav (portal.css §9B), the wizard layout + crossfade (§9C), the
   no-focus-ring rule (§6), the required-asterisk (§4), the repeatable control
   (§8B) and the date/time picker affordances (§5) are ALL inherited — never
   re-declared here. Square corners everywhere (inherited). Structure mirrors
   site-orientation.css so the forms stay identical; the `mm-` classes are its
   `so-` equivalents.
   ============================================================ */


/* ============================================================
   1. INTRO STEP (step 1) — title + meta grid + gate
   Boxed to the yellow guide lines (--gr-logo-x), pinned title + nav, no
   scrollbar — IDENTICAL to weekly + toolbox + site-orientation.
   ============================================================ */
.mm-intro-head { margin-bottom: var(--s7); }
.mm-record-id { display: none; }   /* print-only */

.mm-form .wizard-nav { z-index: 6; background: var(--white); }

.mm-form .wizard-stage {
    /* 2026-07-20 — was calc(100vw - …). 100vw INCLUDES the vertical scrollbar; the
     document scrolls now, so on desktop that made the stage wider than its own
     container and produced a horizontal page scroll. 100% is the same width
     measured against the content box, which is what was always meant. */
  width: calc(100% - 2 * var(--gr-logo-x));
  max-width: none;
  /* Safe-area, not 0 (2026-07-25) — these pages ship viewport-fit=cover, and zeroing
     dropped the shared max(gutter, env(safe-area-inset-*)). On a notched iPhone in
     LANDSCAPE the content column and the Back button sat under the sensor housing:
     --gr-logo-x computes to ~51.8px against a 59px inset. Carried over from
     toolbox-talk.css, which got this on the same day. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* clip, NOT hidden: `overflow-x:hidden` forces the other axis to compute to `auto`,
     which would make this stage a vertical scroll container again — exactly the nested
     scroller the rebuild removed. `clip` suppresses horizontal paint with no such
     side effect, which is all this ever wanted. (2026-07-20) */
  overflow-x: clip;
}
/* The page picker is absolute on laptop+ (portal.css §11b) and sticky on mobile
   (the pin block below) — either way anchor it to the yellow lines. (2026-07-20) */
.mm-form .wizard-pagepick {
/* 2026-07-20 — `left`/`right`/`transform:none` dropped from this rule. They existed to
     undo the shared bar's absolute centring (left:50% + translateX(-50%)); the bar is in
     normal flow now, so all three were inert. width/max-width/padding-0 are KEPT and are
     doing real work: the bar sits inside .wizard-stage, which already carries the
     --gr-logo-x gutter, so the bar should fill its parent exactly rather than re-inset
     itself and end up double-guttered. */
  width: auto; max-width: none;
  /* Safe-area, not 0 (2026-07-25) — these pages ship viewport-fit=cover, and zeroing
     dropped the shared max(gutter, env(safe-area-inset-*)). On a notched iPhone in
     LANDSCAPE the content column and the Back button sat under the sensor housing:
     --gr-logo-x computes to ~51.8px against a 59px inset. Carried over from
     toolbox-talk.css, which got this on the same day. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* The pinned nav is boxed to the yellow guide lines (--gr-logo-x) at EVERY width
   now — it is a pinned bar on mobile too (unified in portal.css §9C), so this is
   no longer laptop-only. Matches the boxed stage; ≥20px top/bottom padding is
   inherited from the shared base, only the side padding is zeroed here. */
.mm-form .wizard-nav {
/* 2026-07-20 — `left`/`right`/`transform:none` dropped from this rule. They existed to
     undo the shared bar's absolute centring (left:50% + translateX(-50%)); the bar is in
     normal flow now, so all three were inert. width/max-width/padding-0 are KEPT and are
     doing real work: the bar sits inside .wizard-stage, which already carries the
     --gr-logo-x gutter, so the bar should fill its parent exactly rather than re-inset
     itself and end up double-guttered. */
  width: auto; max-width: none;
  /* Safe-area, not 0 (2026-07-25) — these pages ship viewport-fit=cover, and zeroing
     dropped the shared max(gutter, env(safe-area-inset-*)). On a notched iPhone in
     LANDSCAPE the content column and the Back button sat under the sensor housing:
     --gr-logo-x computes to ~51.8px against a 59px inset. Carried over from
     toolbox-talk.css, which got this on the same day. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Top nav boxed to the yellow lines: logo on the LEFT line. Scoped to .mm-nav. */
.mm-nav .portal-nav-inner {
  width: calc(100% - 2 * var(--gr-logo-x));
  max-width: none;
  /* Safe-area, not 0 (2026-07-25) — these pages ship viewport-fit=cover, and zeroing
     dropped the shared max(gutter, env(safe-area-inset-*)). On a notched iPhone in
     LANDSCAPE the content column and the Back button sat under the sensor housing:
     --gr-logo-x computes to ~51.8px against a 59px inset. Carried over from
     toolbox-talk.css, which got this on the same day. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.mm-nav .portal-nav-logo { margin-left: 0; }

/* PINNED TITLES + NO SCROLLBAR (parity with the siblings). */
/* (2026-07-20 — the .wizard-stage scrollbar-hiding pair was removed here: the stage
   stopped being a scroller when the document took over scrolling, so there is no
   scrollbar left to hide. The horizontal rails keep their own.) */
.mm-form .wizard-stage > .mm-intro-head,
.mm-form .wizard-stage > .mm-step-head {
  background: var(--white);
  margin-bottom: 0;
  padding-bottom: var(--s5);
}
.mm-form .wizard-stage > .mm-intro-head + *,
.mm-form .wizard-stage > .mm-step-head + * { margin-top: var(--s2); }

/* PIN THE PAGE PICKER ON MOBILE too (2026-07-18). On laptop+ the picker is
   absolute against .wizard-step (portal.css §11b) so it never moves; on mobile it
   is an in-flow first child of the stage, so it scrolled away and let the title
   slide up before it stuck. Make the picker sticky and drop the title's stick line
   to just below it, so neither the picker, title, nor subtext move on the very
   first pixel of scroll — content scrolls under all three. (2026-07-20) */
@media (max-width: 640px) {
  .mm-form .wizard-stage > .wizard-pagepick {
    background: var(--white);
    margin-bottom: 0;
    padding-bottom: var(--pick-trail);   /* white buffer replaces the margin, so scrolling content cannot bleed between the pinned picker and the pinned title */
  }
  /* (The head's sticky `top:` offset rule was removed here with the sticky itself — the
     whole rule went, selectors included: a selector list with no declaration block is
     invalid CSS and the parser discards it, taking the next brace with it.) */
}

/* Continue lands on the RIGHT yellow line on EVERY step — MOBILE too. */
@media (max-width: 640px) {
  .mm-form .wizard-nav { justify-content: space-between; }
  .mm-form .wizard-nav [data-wizard-next],
  .mm-form .wizard-nav button[type="submit"] { order: 2; }
}


/* ============================================================
   2. META GRID (step 1) — all cells MATCHED
   Project · Location · Meeting type · Meeting no. · Recorded by · Date.
   ⚠ Updated 2026-08-27: Location MOVED here when the "Meeting information" step was deleted
   (it auto-fills from the project). "Time" left on 2026-07-28 — it is stamped at export now,
   not typed — and this list had never been corrected for it.
   ============================================================ */
.mm-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s4) var(--gr-gutter);
  margin-top: var(--s2);
}
.mm-meta-grid .field { margin: 0; display: flex; flex-direction: column; }
.mm-meta-grid .field > .input,
.mm-meta-grid .field > .date-field,
.mm-meta-grid .field > .time-field { margin-top: auto; }


/* ============================================================
   3. INTERIOR STEP HEADERS (every step after the first)
   ============================================================ */
.mm-step-head { margin-bottom: var(--s6); }
.mm-step-head .section-sub { margin-top: var(--s2); }

.mm-subhead {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: var(--s3);
}


/* ============================================================
   4. (RETIRED 2026-08-27 — the Meeting information step and its grid)
   ============================================================ */
/* SWEPT 2026-08-27 — `.mm-info-grid`, `.mm-info-grid .field` and `.mm-info-full` styled the
   "Meeting information" step, which the owner deleted on 2026-08-14. Verified orphaned before
   removal: 0 references in index.html and 0 in meeting-minutes.js. */


/* --- TOPIC CHECKLIST (2026-08-27) -------------------------------------------
   Eight preset topics, all visible at once, each opening its own point list.
   Spacing reuses the same step tokens the rest of this file uses; the toggle row
   itself is the SHARED `toggle-row`/`toggle-box` component from portal.css, so it
   matches Toolbox Talk's checklist rather than being a second look-alike. */
.mm-topics { display: flex; flex-direction: column; }
.mm-topic { border-top: 1px solid var(--divider); }
.mm-topic:last-child { border-bottom: 1px solid var(--divider); }
.mm-topic-row { width: 100%; }
/* the body is indented so a point reads as belonging to the topic above it */
.mm-topic-body { padding: var(--s3) 0 var(--s5) var(--s5); }
@media (max-width: 640px) { .mm-topic-body { padding-left: var(--s3); } }

/* ============================================================
   5. DISCUSSION & NOTES — repeatable: topic · point · action-by. Since 2026-08-27 this
      step also carries Action items and Next meeting (owner: "one page, one form").
   The row is a grid (topic | note | action | remove); a small column-label
   row sits above it. Mobile stacks the controls full-width.
   ============================================================ */
.mm-notes { margin-top: var(--s2); }
/* 2026-08-27: the leading TOPIC column is gone — topic is now the block a row sits in, not a
   per-row <select>. Three columns: point | action-by | remove. The old four-column value is kept
   here in the comment because the grid is the only place that width lived: was
   `minmax(150px,200px) 1fr minmax(120px,160px) 32px`. */
.mm-note-heads,
.mm-note-inner {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 160px) 32px;
  gap: 10px;
  align-items: flex-start;   /* top-align so the trash + siblings stay put as the discussion-point textarea grows (Task 1) */
}
.mm-note-heads {
  margin-bottom: var(--s2);
  padding-right: 0;
}
.mm-note-heads span {
  font-size: var(--t-hint);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
}

/* ============================================================
   6. ACTION ITEMS (step 4) — repeatable: item · owner · due · status + next
   ============================================================ */
.mm-actions { margin-top: var(--s2); }
.mm-action-heads,
.mm-action-inner {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 150px) minmax(130px, 160px) minmax(110px, 130px) 32px;
  gap: 10px;
  align-items: flex-start;   /* top-align so the trash + siblings stay put as the action-item textarea grows (Task 1) */
}
.mm-action-heads {
  margin-bottom: var(--s2);
}
.mm-action-heads span {
  font-size: var(--t-hint);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
}

/* Next meeting — a small block under the action register. */
/* `.mm-substep` added 2026-08-27: the Action-items block merged into the notes step and needed
   the same "new sub-block inside a step" treatment "Next meeting" already had. Grouped onto the
   SAME rule rather than given its own copy, so the two can never drift apart. */
.mm-next,
.mm-substep {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--divider);
}
.mm-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s4) var(--gr-gutter);
}
.mm-next-grid .field { margin: 0; }


/* ============================================================
   7. ATTENDEES & SIGN-OFF (step 5) — approval note + roster pool + walk-ons
   ============================================================ */
/* Approval statement — a calm neutral note (NOT an error box). Prints too.
   It lives INSIDE the sticky .mm-step-head (§1), so the step title + sub + this
   note PIN together as one block while only the roster scrolls beneath. Plain
   in-flow block here; the 15px gap under it is the step-head's padding-bottom. */
.mm-ack {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--fill);
  box-shadow: inset 3px 0 0 var(--divider);
  font-size: var(--t-hint);
  line-height: 1.5;
  color: var(--text-2);
}
.mm-ack p { margin: 0; }

/* Attendees step: the sticky step-head now carries the note, so its padding-bottom
   IS the 15px gap under the gray note (opaque + pinned, roster scrolls under it).
   Zero the roster's own top margin so the landed gap is exactly 15px, not 15+20. */
.mm-form .mm-attend-step .wizard-stage > .mm-step-head { padding-bottom: 15px; }
.mm-attend-step .mm-attend { margin-top: 0; }

/* REMOVED 2026-07-27 — `.mm-attend-section` and `.mm-attend-head` laid out the two
   inline name grids this step no longer has. It is now one Add button, a present
   list and a roster popup, styled from portal.css § SIGN-OFF BLOCK.
   Verified dead: zero references left in index.html/meeting-minutes.js. */
.mm-attend-count { font-size: var(--t-hint); font-weight: 600; color: var(--text-2); white-space: nowrap; }

.mm-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s2);
}

/* Two-target chip: main region toggles PRESENT; the pen adds an optional signature. */
.mm-att-chip {
  display: flex;
  align-items: stretch;
  min-height: 66px;              /* matches .so-pool-chip / .tt-pool-chip so the tap-to-sign name buttons are one consistent height across forms (was 50) */
  min-width: 0;                  /* grid item must shrink so the 1fr/1fr mobile columns fit — else the right column (+ its sign pen) clipped off-screen at 390. (2026-07-08) */
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.mm-att-chip:hover { box-shadow: inset 0 0 0 1px var(--border-hover); }
.mm-att-chip.is-present { background: var(--fill); box-shadow: inset 0 0 0 1px var(--border-hover); }

.mm-att-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.mm-att-main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); }
.mm-att-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-att-name {
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-att-sub {
  font-size: 10px; font-weight: 400; color: var(--text-3); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-att-star { color: var(--accent); font-weight: 800; margin-left: 2px; }
.mm-recorder-star { color: var(--accent); font-weight: 800; }
/* Green present-check to the right of the name. */
.mm-att-check { flex: 0 0 auto; display: inline-flex; line-height: 0; color: transparent; }
.mm-att-chip.is-present .mm-att-check { color: #16A34A; }

/* The pen / signed slot. */
.mm-att-sign {
  flex: 0 0 auto;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--divider);
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.mm-att-sign:hover { color: var(--accent); background: var(--fill); }
.mm-att-sign:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); }
.mm-att-chip.is-signed .mm-att-sign { color: #16A34A; }

/* Recorder — red * (above) + a red ring until they sign (needs-sign, only after
   an export attempt), mirroring the site-orientation conductor. */
.mm-att-chip.is-recorder.needs-sign { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* "Add attendee" chip — quiet, dashed, muted. */
.mm-walkon-add-chip {
  display: inline-flex;
  align-items: center;
  min-height: 66px;              /* matches .mm-att-chip / .so-pool-chip (was 50) */
  padding: 6px 14px;
  background: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  font-family: inherit;
}
.mm-walkon-add-chip:hover { box-shadow: inset 0 0 0 1px var(--border-hover); background: var(--fill); }
.mm-walkon-add-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px var(--accent-ring); }
.mm-walkon-add-chip .mm-att-name { color: var(--text-2); }

/* ---- Walk-on popup: name + company + role → Add ---- */
/* Geometry is `.vv-overlay`'s (portal.css) since 2026-07-27 — its own `position:
   fixed; inset: 0` measured the LAYOUT viewport, which is what put this panel behind
   the iOS keyboard. Matches site-orientation.css:378 and toolbox-talk.css:982. */
/* ⚠ THE TINT LIVES ON THE MODAL, NOT THE SCRIM CHILD (2026-07-28).
   This modal is a `.vv-overlay`, and .vv-overlay gained safe-area PADDING the same day. An
   absolutely-positioned child resolves `inset: 0` against its parent's PADDING box — so the
   scrim stopped covering the inset band and, in an installed PWA, the page showed through
   behind the notch and the home indicator while a modal was open.
   A background painted on the padded element itself covers its padding, which is why
   `.so-modal` and `.dr-note-modal` never had this problem — both already tint the overlay
   element directly. This brings the walk-on popups in line with them.
   The scrim child STAYS (it is the click-outside dismiss target, wired in the controller);
   it is simply transparent now and contributes no paint. */
.mm-walkon-modal { z-index: 50; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; background: rgba(16, 24, 32, 0.55); }
.mm-walkon-scrim { position: absolute; inset: 0; }
.mm-walkon-panel {
  position: relative;
  width: min(360px, 90vw);
  background: var(--white);
  padding: var(--s5);
  box-shadow: 0 12px 40px rgba(16, 24, 32, 0.25);
}
.mm-walkon-panel .mm-subhead { margin-bottom: var(--s4); }
.mm-walkon-panel .field + .field { margin-top: var(--s3); }
.mm-walkon-modal-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }
/* Add button — faded until a name is typed, then solid brand red. */
.mm-walkon-add-btn {
  white-space: nowrap;
  background: var(--danger-tint);
  border: 1px solid transparent;
  color: var(--white);
}
.mm-walkon-add-btn:disabled { opacity: 1; cursor: not-allowed; }
.mm-walkon-add-btn.is-ready,
.mm-walkon-add-btn.is-ready:hover { background: var(--accent); border-color: var(--accent); color: var(--white); cursor: pointer; }


/* ============================================================
   8. SIGNATURE GATE — needs-sign highlight + calm gap notice
   (recorder's drawn approval signature mandatory). Only shown after an export
   attempt. Mirrors site-orientation.
   ============================================================ */
.mm-sign-gap {
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--fill);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--text);
}
.mm-sign-gap:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--accent-ring); }
/* Half the height, one accent — matches toolbox-talk.css (owner 2026-07-26). Heading
   + sub-line + red underlined links collapsed to a lead and plain-text gaps. */
.mm-sign-gap .mm-sign-gap-lead { font-size: var(--t-hint); font-weight: 700; color: var(--text); line-height: 1.4; }
.mm-sign-gap ul { list-style: none; margin: 0; padding: 0; }
.mm-sign-gap li { margin-top: var(--s1); font-size: var(--t-hint); color: var(--text-2); line-height: 1.4; }

.needs-sign { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Done page shows ONLY the exported filename as light subtext under the title. */
.mm-done-file { word-break: break-word; }


/* ============================================================
   9. RESPONSIVE — laptop primary, mobile pleasant (640 / 1024 breakpoints).
   ============================================================ */
@media (max-width: 640px) {
  .mm-meta-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--s5);
  }
  .mm-meta-grid .field > .input,
  .mm-meta-grid .field > .date-field,
  .mm-meta-grid .field > .time-field { margin-top: 0; }
  /* the `.mm-info-grid` mobile override was swept 2026-08-27 with its step */
  .mm-next-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .mm-pool-grid { grid-template-columns: 1fr 1fr; }

  /* Repeatable rows: stack every control full-width, remove at the end. */
  .mm-note-heads,
  .mm-action-heads { display: none; }
  .mm-note-inner,
  .mm-action-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
  }
  /* `position: static` is what makes the align-self below actually do anything, and it is
     load-bearing (2026-07-25). The shared `.repeat-remove` is `position:absolute; top:50%;
     transform:translateY(-50%); right:12px`, and an element with both `top` and `right`
     set is fully positioned — `align-self` has no effect on it. This rule has therefore
     been inert since it was written.
     It became a DATA-LOSS bug the same day the ✕ was made permanently visible on touch:
     these `--cols` rows STACK into a column here, so the vertically-centred ✕ landed in the
     middle of the stack, on top of the discussion textarea — and the trailing-padding
     reserve that keeps it clear of text explicitly excludes .mm-note-inner/.mm-action-inner.
     Tapping the right-hand end of a line to place the caret deleted the line instead.
     Putting it back in flow drops it to the end of the stack, right-aligned, over nothing.

     ⚠ `relative`, NOT `static` — and the difference is another data-loss bug, not a style
     preference. `.repeat-remove::before` is the ABSOLUTE 44px tap overlay (portal.css). It
     needs the button to be its containing block. Under `static` the button is not a
     containing block, so the overlay resolved against the nearest positioned ancestor —
     `.repeat-row-inner` — and MEASURED 313×216px at 360px wide: one invisible tap-catcher
     covering the ENTIRE stacked row, topic input, discussion textarea and action field
     included. Every tap in the row would have hit the ✕. That is the same line-deleting
     failure this rule was written to fix, moved from the visible button to its pseudo-element.
     `relative` keeps the button IN FLOW (so `align-self` still applies — align-self is only
     ignored on ABSOLUTELY positioned elements, never on relative ones) while restoring it as
     the overlay's containing block. Verified: overlay back to 34×48 on the button itself. */
  .mm-note-inner .repeat-remove,
  .mm-action-inner .repeat-remove {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    align-self: flex-end;
  }
}

/* Attendee chips go single-column on the narrowest phones (2026-07-25) — the
   identical rule Toolbox already carries for `.tt-pool-grid`.
   MEASURED at 360px: two columns give each chip ~143px, of which the pen button
   and padding take ~84, leaving ~59px for the name at 12.5px ≈ 8 characters.
   The attendance list is the SIGNED COMPLIANCE RECORD — truncating the names on
   it is not a cosmetic loss. One column gives the full 328px. */
@media (max-width: 380px) {
  .mm-pool-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   10. PRINT — ⚠ CORRECTED 2026-08-27. This used to say the whole record is "assembled by
   meeting-minutes.js into #mm-print-doc". NEITHER half is true any more: the assembling
   function had no caller and was deleted, and #mm-print-doc went with it. What remains is the
   letterhead. THE RECORD IS THE PDF EXPORT (assets/js/pdf-minutes.js); browser print is not a
   supported output of this form. Rules below still hide the live wizard
   entirely and show the letterhead + assembled doc. @page letter 0.5in,
   10.5pt body — IDENTICAL scale to the sibling forms.
   ============================================================ */
.mm-print-only { display: none; }

@media print {

  @page { size: letter; margin: 0.5in; }
  @page { @bottom-right { content: "Page " counter(page) " of " counter(pages); } }

  html, body { background: #fff; color: #191A1C; width: 7.5in; }
  .portal { font-size: 11pt; line-height: 1.6; }

  /* Hide ALL screen chrome + the live wizard — the printed doc is #mm-print-doc. */
  .portal-nav,
  .wizard,
  [data-print-hide] {
    display: none !important;
  }

  /* Reveal the print-only letterhead + assembled record. */
  .mm-print-only { display: block; }

  /* The on-screen approval note never prints (the wizard is hidden), but keep it
     explicitly static so it can never be sticky in the PDF. */
  .mm-ack { position: static !important; }

  /* --- Letterhead (matches site-orientation) --- */
  .mm-print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24pt;
    padding-bottom: 10pt;
    margin-bottom: 16pt;
    border-bottom: 1px solid #DADADA;
  }
  .mm-print-logo svg { width: 109px; height: auto; display: block; }
  .mm-print-id { display: flex; flex-direction: column; align-items: flex-end; gap: 5pt; text-align: right; }
  .mm-print-doctitle { white-space: nowrap; font-size: 15pt; font-weight: 800; letter-spacing: -0.01em; color: #191A1C; }
  .mm-print-rec { font-size: 8.5pt; font-weight: 700; color: #646464; letter-spacing: 0.4px; }
  .mm-print-gen { font-size: 8.5pt; font-weight: 500; color: #8A8A8A; }

  /* --- PRINT-BODY RULES REMOVED 2026-08-27 -------------------------------------
     ~130 lines of `.mm-doc-*` styled the assembled browser-print record: section
     headings, the meta grid, note groups, tables, photos and the footer. They were
     orphaned the moment `buildPrintDoc()` went, because that function was the only
     thing that ever created an element carrying one of these classes — and it had no
     caller, so they had in practice never painted anything.
     Verified before removal: 0 `mm-doc-` occurrences remain in index.html and
     meeting-minutes.js. The `.mm-print-*` LETTERHEAD rules above are NOT part of this
     and stay — that markup is real and still prints. --- */
}