/* event-summary.css — the admin entry drawer, piece 2a.
 * SPEC-event-summary-entry-drawer-2026-08-09.md, mockup v1 approved 2026-08-09.
 *
 * Selectors are scoped to esr- so nothing here can reach the rest of the admin
 * portal, the same discipline review-screen.css follows with rs-.
 *
 * THE MOCKUP FIXED LAYOUT, COPY AND HIERARCHY. It did NOT fix chrome. Every
 * colour, border, radius, weight and spacing value below is lifted from
 * review-screen.css so the drawer reads as a sibling of the review panel rather
 * than as a transplant from a different design. The token values are duplicated
 * rather than shared because the rs- tokens are declared on rs- scopes only, and
 * reaching into another file's custom properties would couple two panels that
 * are meant to be independently removable.
 *
 * NO MEANING IS CARRIED BY COLOUR ANYWHERE IN THIS FILE. The status pill, the
 * split note, the cross-check line and the error region all state their meaning
 * in text. Colour is decoration on top of a sentence that already says it. */

.esr-scope,#esrDrawerHost,#esrCard,#esrVolCard{
  --esr-ink:#16202E;--esr-muted:#6B7686;--esr-line:#E3E8EF;--esr-line-strong:#C9D2DE;
  --esr-navy:#1B3A6B;--esr-navy-soft:#EAF1FB;--esr-red:#B3261E;--esr-red-soft:#FDECEA;
  --esr-shade:#FAFBFD}

/* ── shell ───────────────────────────────────────────────────────────────── */
.esr-card{background:#fff;border:1px solid var(--esr-line);border-radius:10px;
  overflow:hidden;margin-bottom:18px;color:var(--esr-ink)}

/* ── header: name, then date and venue, then the status pill ─────────────── */
.esr-head{padding:15px 20px;border-bottom:1px solid var(--esr-line);
  display:flex;align-items:flex-start;gap:12px}
.esr-headtext{flex:1;min-width:0}
.esr-head h2{margin:0;font-size:15.5px;font-weight:700;color:var(--esr-ink)}
.esr-sub{display:block;font-size:12.5px;color:var(--esr-muted);font-weight:400;margin-top:2px}
/* The pill is a NOUN, not a colour. "Not entered" and a date both read without it.
 *
 * MEASURED AGAINST THE PORTAL, 2026-08-09, headless Chrome at 1440px. This was
 * first written as a sibling of .rs-owner (review-screen.css:36) — uppercase,
 * 10.5px, letter-spacing .05em, radius 11px. That was the wrong family, and the
 * render proved it rather than an opinion doing so.
 *
 * .rs-owner is a PROVENANCE tag: it says "LEVY" or "NPO", who owns a block. This
 * pill says "Not entered" or a date, which is a STATUS. The portal already has a
 * status vocabulary — .badge at hok-styles.css:481, used on event rows at
 * admin-js-1.js:3441-3470 for "Draft", "Needs review", "Event Open", "Roles
 * Assigned". The drawer opens on the events screen, so its pill sits inches from
 * those. Two visual grammars for the same kind of thing on one screen reads as a
 * mistake, and the smaller uppercase form made this one look like a different
 * product's component.
 *
 * Now matched to .badge exactly: 0.72rem, padding 3px 10px, radius 10px, sentence
 * case, no tracking, and the same translucent navy so it sits on any surface
 * rather than only on white. Deliberately NOT reusing the .badge class itself —
 * this file stays independently removable, the same reason the tokens above are
 * duplicated rather than imported from review-screen.css. */
.esr-pill{flex:0 0 auto;display:inline-flex;align-items:center;font-size:0.72rem;
  font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap;
  background:rgba(27,58,107,0.10);color:var(--esr-navy)}

/* ── split note, rendered only on a shared date ──────────────────────────── */
.esr-splitnote{margin:0;padding:11px 20px;font-size:13px;line-height:1.55;
  background:var(--esr-shade);border-bottom:1px solid var(--esr-line);color:var(--esr-ink)}

/* ── body blocks ─────────────────────────────────────────────────────────── */
.esr-block{padding:20px 22px;border-bottom:1px solid var(--esr-line)}
.esr-block:last-of-type{border-bottom:none}
.esr-block h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--esr-muted)}

/* ── the two headline fields, side by side ───────────────────────────────── */
/* THE MEASURE. Headless render at 1440px, 2026-08-09, showed the failure: the
   admin content column caps at 1150 (admin.html:168) and the card at 1110, so an
   unconstrained two-column grid gave each headline field 519px. An input 519px
   wide for a value of two to four digits does not read as a field, it reads as a
   mistake, and in the same render the stand table's numeric columns were flung
   roughly 1000px from the stand name they belong to.
   The portal's own convention is width:100% inputs inside a CONSTRAINED card
   (.fg input at admin.html:301 sits in the width-capped wizard). So the fix is to
   cap the measure and leave the inputs filling it, rather than to cap each input
   and leave them floating in an over-wide cell. One shared value for the field row
   and the stand table, so the two align down the card. */
.esr-frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px;max-width:720px}
.esr-fld label{display:block;font-size:13px;font-weight:650;margin-bottom:4px}
.esr-in{width:100%;box-sizing:border-box;height:40px;border:1px solid var(--esr-line-strong);
  border-radius:6px;padding:0 11px;font-size:14.5px;font-family:inherit;
  color:var(--esr-ink);background:#fff}
.esr-in:focus{outline:2px solid var(--esr-navy);outline-offset:1px}
.esr-hint{font-size:12px;color:var(--esr-muted);margin:4px 0 0}

/* ── stand breakdown table ───────────────────────────────────────────────── */
.esr-stands{margin:0;width:100%;max-width:720px;border-collapse:collapse}
.esr-stands th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--esr-muted);padding:7px 0;
  border-bottom:1px solid var(--esr-line)}
.esr-stands td{padding:9px 0;border-bottom:1px solid var(--esr-line);font-size:14px;
  vertical-align:middle}
.esr-stands tr:last-child td{border-bottom:none}
.esr-stands th.esr-num,.esr-stands td.esr-num{text-align:right;
  font-variant-numeric:tabular-nums}
/* A cell input sits inside a 9px-padded td, so it is shorter than .esr-in by design. */
.esr-cellin{width:110px;box-sizing:border-box;height:34px;border:1px solid var(--esr-line-strong);
  border-radius:6px;padding:0 9px;font-size:14px;font-family:inherit;text-align:right;
  color:var(--esr-ink);background:#fff;font-variant-numeric:tabular-nums}
.esr-cellin:focus{outline:2px solid var(--esr-navy);outline-offset:1px}
.esr-standname{font-weight:600}
.esr-tableempty{margin:0;padding:14px 0;font-size:13.5px;color:var(--esr-muted)}
/* Visually hidden, still announced. Every cell input in the stand table carries a
   real <label for> naming its stand and its column, because "12" in a grid is
   meaningless to a screen reader without one. Clipped rather than display:none,
   which would remove it from the accessibility tree entirely. */
.esr-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── cross-check, prose beneath the table ────────────────────────────────── */
/* Deliberately plain. Spec section 7: no colour, no icon, no badge. One figure
   is the reported number and the other is a cross-check, so they are not peers
   and must not be styled as though they were. */
.esr-crosscheck{margin:14px 0 0;max-width:720px;font-size:13px;line-height:1.55;color:var(--esr-muted)}

/* ── inline error region ─────────────────────────────────────────────────── */
/* Present in the DOM at all times so role="alert" is announced on fill rather
   than on insertion, which some screen readers miss. Empty means invisible and
   occupying no space, NOT removed. Step 4 fills it. */
.esr-errbox{margin:0;border:1px solid var(--esr-red);background:var(--esr-red-soft);
  border-radius:8px;padding:13px 15px;color:var(--esr-red);font-size:13.5px;font-weight:600}
.esr-errbox:empty{display:none;padding:0;border:0;margin:0}
.esr-errbox ul{margin:6px 0 0;padding-left:18px;font-weight:400}
.esr-errbox li{margin-bottom:4px}
.esr-errbox li:last-child{margin-bottom:0}
/* Horizontal padding only, so an empty (display:none) errbox inside contributes
   no height and the wrapper collapses on its own. Deliberately not written with
   :has(), which would be a browser-support question for no gain here. */
.esr-errwrap{padding:0 22px}

/* ── footer ──────────────────────────────────────────────────────────────── */
.esr-foot{padding:16px 22px;border-top:1px solid var(--esr-line);display:flex;gap:10px;
  justify-content:flex-end;align-items:center;background:var(--esr-shade);flex-wrap:wrap}
.esr-footnote{margin-right:auto;font-size:12.5px;color:var(--esr-muted)}
.esr-btn{border:1px solid var(--esr-navy);background:var(--esr-navy);color:#fff;
  border-radius:6px;padding:8px 14px;font-size:13.5px;font-weight:650;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.esr-btn.esr-secondary{background:#fff;color:var(--esr-navy)}
.esr-btn:focus-visible{outline:2px solid var(--esr-navy);outline-offset:2px}
.esr-btn[disabled]{background:#E6E9EF;border-color:var(--esr-line-strong);
  color:#98A0AE;cursor:not-allowed}

/* ── narrow viewports ────────────────────────────────────────────────────── */
@media (max-width:760px){
  .esr-frow{grid-template-columns:1fr}
  .esr-cellin{width:88px}
  .esr-footnote{margin-right:0;flex:1 1 100%;margin-bottom:8px}
}


/* ══════════════════════════════════════════════════════════════════════════
   REPORT CARD, piece 2b (2026-08-10). Mockup v9 step 2.

   Same discipline as the drawer above: scoped to esr-, tokens duplicated rather
   than reached for, and NO MEANING CARRIED BY COLOUR. Every state that matters
   says so in words — "Amount not entered" is a sentence, not an amber pill.

   ON THE TOKEN VALUES. The mockup's hex values are eyeballed from a screenshot
   and the mockup itself says so, so they are NOT used. --esr-navy above is
   #1B3A6B, which is admin.html's real --blue. Money green and the waiting amber
   come from admin.html's real --green (#27ae60) and --amber (#f39c12).

   ONE DELIBERATE DEPARTURE, for accessibility. The real --amber #f39c12 as TEXT
   on a light background measures about 2.2:1, which fails WCAG AA's 4.5:1 for
   body text. It is used here for the tag's border accent only; the tag's text
   uses --esr-amber-ink, a darkened amber that passes AA on --esr-amber-soft.
   Recorded rather than done quietly: the instruction was to read the real
   tokens, and the real token is not legible as text at this size.
   ══════════════════════════════════════════════════════════════════════════ */

#esrCard{
  --esr-green:#27ae60;          /* admin.html --green, money only */
  --esr-money-ink:#1B7A43;      /* AA-safe green for money text on white */
  --esr-amber:#f39c12;          /* admin.html --amber, accent only */
  --esr-amber-soft:#FDF3E2;
  --esr-amber-ink:#8A5200;      /* AA-safe on --esr-amber-soft */
}

/* filter row */
#esrCard .esr-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  padding:13px 20px;border-bottom:1px solid var(--esr-line);background:var(--esr-shade)}
#esrCard .esr-f{display:flex;flex-direction:column;gap:4px}
#esrCard .esr-f label{font-size:0.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--esr-muted)}
#esrCard .esr-ctl{height:36px;line-height:1.2;padding:0 10px;border:1px solid var(--esr-line-strong);
  border-radius:6px;background:#fff;font-size:0.85rem;color:var(--esr-ink);min-width:148px;
  font-family:inherit}
#esrCard .esr-ctl:focus-visible{outline:2px solid var(--esr-navy);outline-offset:1px}

/* table */
#esrCard table,#esrVolCard table{width:100%;border-collapse:collapse}
#esrCard th,#esrVolCard th{text-align:left;font-size:0.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--esr-muted);padding:10px 20px;
  border-bottom:1px solid var(--esr-line);background:var(--esr-shade)}
#esrCard th.num,#esrCard td.num,#esrVolCard th.num,#esrVolCard td.num{text-align:right;
  font-variant-numeric:tabular-nums}
#esrCard td,#esrVolCard td{padding:12px 20px;border-bottom:1px solid var(--esr-line);font-size:0.87rem;
  vertical-align:top;color:var(--esr-ink)}
#esrCard tr:last-child td,#esrVolCard tr:last-child td{border-bottom:none}
#esrCard .esr-daterow td,#esrVolCard .esr-daterow td{background:var(--esr-navy-soft);
  font-weight:700;font-size:0.74rem;
  padding:7px 20px;letter-spacing:.03em;color:var(--esr-navy);text-transform:uppercase}
#esrCard .esr-evname,#esrVolCard .esr-evname{font-weight:700;display:block}
#esrCard .esr-evsub,#esrVolCard .esr-evsub{display:block;font-size:0.75rem;
  color:var(--esr-muted);font-weight:400;margin-top:2px}
#esrCard .esr-amt,#esrVolCard .esr-amt{font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--esr-money-ink)}
#esrCard .esr-standrow td,#esrVolCard .esr-standrow td{background:var(--esr-shade);
  font-size:0.81rem;color:var(--esr-muted)}
#esrCard .esr-standrow td:nth-child(2){padding-left:42px}
/* THE ONE RULE THAT CANNOT BE SHARED. The admin table indents the SECOND cell because
   SEND is leftmost there. The volunteer table has no SEND column, so its stand name is
   the FIRST cell. Same intent, different cell, so the selectors have to differ. */
#esrVolCard .esr-standrow td:first-child{padding-left:42px}
#esrCard .esr-standname,#esrVolCard .esr-standname{color:var(--esr-ink)}
#esrCard .esr-totalrow td{background:var(--esr-navy-soft);font-weight:700;
  border-top:2px solid var(--esr-line-strong)}

/* THE SEND COLUMN (2026-08-10). Narrow, because it holds a 20px control or two short
   words. width on a table cell is a hint rather than a rule, so the checkbox carries its
   own size and the column simply refuses to grow. */
#esrCard th.esr-sendcol,#esrCard td.esr-sendcol{width:1%;white-space:nowrap;
  padding-right:8px}
#esrCard .esr-pick{width:20px;height:20px;margin:0;accent-color:var(--esr-navy);
  vertical-align:middle;cursor:pointer}
#esrCard .esr-pick:disabled{cursor:default}
/* The two WORD states of that cell. They are words on purpose: a blank cell would leave a
   reader guessing whether the control failed to render, and these read the same with every
   colour stripped out. */
#esrCard .esr-sendstate{font-size:0.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--esr-muted)}
/* THE ALREADY SENT BAND. A heading row, not a status badge: it separates work that can
   still be acted on from work that is finished. Reads as a heading with no colour at all. */
#esrCard .esr-sentband td{background:var(--esr-shade);color:var(--esr-ink);font-weight:800;
  font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;
  border-top:2px solid var(--esr-line-strong);border-bottom:1px solid var(--esr-line)}

/* the waiting tag. The WORDS carry the state; the colour is decoration. */
#esrCard .esr-tag{display:inline-block;font-size:0.66rem;font-weight:700;padding:2px 8px;
  border-radius:12px;margin-left:8px;letter-spacing:.02em;
  background:var(--esr-amber-soft);color:var(--esr-amber-ink);
  border:1px solid var(--esr-amber)}

/* the inline link controls, real buttons so they are keyboard reachable */
#esrCard .esr-link{background:none;border:none;color:var(--esr-navy);font-size:0.81rem;
  font-weight:700;cursor:pointer;padding:2px 2px;font-family:inherit;text-decoration:underline}
#esrCard .esr-link:focus-visible{outline:2px solid var(--esr-navy);outline-offset:2px;border-radius:3px}

@media (max-width:720px){
  #esrCard th,#esrCard td{padding-left:14px;padding-right:14px}
  #esrCard .esr-standrow td:nth-child(2){padding-left:28px}
  #esrVolCard .esr-standrow td:first-child{padding-left:28px}
}

/* ══════════════════════════════════════════════════════════════════════════
   DRAWER, pieces 3 and 4 (2026-08-10): readback, prefill labels, balance,
   history. Mockup v9 step 1 and step 2b.

   NO MEANING BY COLOUR, still. The balance box states in words whether the save
   is blocked, by how much, and what to do; --esr-green and --esr-red only tint a
   sentence that already says it. Remove this whole file and the drawer still
   tells you why Save is off.
   ══════════════════════════════════════════════════════════════════════════ */

.esr-scope{
  --esr-green:#1B7A43;        /* AA-safe on --esr-green-soft and on white */
  --esr-green-soft:#E9F6EE;
}

/* readback — three derived figures, step 1's .readback */
.esr-readback{margin:18px 22px 0;background:var(--esr-shade);border:1px solid var(--esr-line);
  border-radius:8px;padding:13px 16px}
.esr-readback dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px}
.esr-readback dt{color:var(--esr-muted);font-weight:650}
.esr-readback dd{margin:0;font-variant-numeric:tabular-nums;color:var(--esr-ink);font-weight:650}

/* the prefill provenance line under a stand name */
.esr-prefill{display:block;font-size:12px;color:var(--esr-muted);font-weight:400;margin-top:2px}

/* balance box. Empty renders nothing at all rather than an empty bordered box. */
.esr-balance{margin:14px 22px 0;border:1px solid var(--esr-red);background:var(--esr-red-soft);
  border-radius:8px;padding:11px 14px;font-size:13.5px;line-height:1.5;color:var(--esr-red)}
.esr-balance:empty{display:none;border:none;padding:0;margin:0}
.esr-balance-ok{border-color:var(--esr-green);background:var(--esr-green-soft);color:var(--esr-green)}

/* history list, step 2b */
.esr-history{margin:0;padding-left:18px}
.esr-history li{font-size:13.5px;margin-bottom:9px;color:var(--esr-muted);line-height:1.55}
.esr-history li b{color:var(--esr-ink);font-weight:650;font-variant-numeric:tabular-nums}

/* Disabled Save must not read as merely "greyish". It carries aria-disabled too,
   and the balance box says why in words. */
.esr-btn[disabled]{background:#E6E9EF;border-color:var(--esr-line-strong);color:#767F8C;
  cursor:not-allowed}

/* The Edited tag on the report card is a BUTTON; strip the button chrome but keep
   a focus ring, because it is keyboard reachable and opens the history. */
#esrCard .esr-tag-edited{background:var(--esr-navy-soft);color:var(--esr-navy);
  border:1px solid rgba(27,58,107,0.35);cursor:pointer;font-family:inherit}
#esrCard .esr-tag-edited:focus-visible{outline:2px solid var(--esr-navy);outline-offset:2px}


/* ══════════════════════════════════════════════════════════════════════════
   STEP 4 — the volunteer view, and STEP 3 — the export sheet.

   TOKENS COME FROM THE REAL PORTAL, not the mockup. --esr-navy is #1B3A6B,
   admin.html's real --blue; the volunteer portal's own green is #1A4731
   (volunteer.html), used here for money on that surface so the card reads as
   part of the app it sits in rather than as a transplant from the admin portal.
   The mockup's #16A34A and #1C3B6E are eyeballed from a screenshot and unused.

   NO MEANING BY COLOUR. "Not entered yet" and "headcount not recorded" are
   sentences. Strip this file and the volunteer view still says which events have
   an amount and which do not.
   ══════════════════════════════════════════════════════════════════════════ */

#esrVolCard{
  --esr-vgreen:#1A4731;         /* volunteer.html's own brand green, money only */
  background:#fff;border:1px solid var(--esr-line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(26,71,49,0.06)}
#esrVolCard .esr-vol-bar{background:var(--esr-vgreen);color:#fff;padding:14px 18px}
#esrVolCard .esr-vol-bar h2{margin:0 0 2px;font-size:0.95rem;font-weight:800;
  letter-spacing:0.03em;text-transform:uppercase}

/* THE STACKED-DIV LAYOUT IS GONE (2026-08-10, ruled by Chris). It carried its own flex
   rules for a two-value meta line and a stand list, and every one of them existed to fake
   the alignment a table gives for nothing. .esr-vgroup, .esr-vdate, .esr-vname, .esr-vmeta,
   .esr-vk, .esr-vv and .esr-vstands were removed with the markup that used them, rather
   than left behind to be puzzled over. What the volunteer table needs now comes from the
   admin table's own rules, whose selectors were widened rather than copied. */
/* Not a colour cue: it is the words, in the muted voice used for absent values. */
#esrVolCard .esr-vnotyet{font-size:0.78rem;font-weight:600;color:var(--esr-muted)}
/* The money cell keeps the volunteer portal's own green rather than the admin's ink, which
   is the one deliberate visual difference between the two tables. */
#esrVolCard td.esr-amt{color:var(--esr-vgreen)}
#esrVolCard .esr-vnostands{margin:8px 0 10px;font-size:0.78rem;color:var(--esr-muted)}
#esrVolCard .esr-vol-empty{margin:0;padding:18px;font-size:0.85rem;color:var(--esr-muted)}
#esrVolCard .esr-vol-foot{padding:13px 18px;background:var(--esr-shade);
  border-top:1px solid var(--esr-line);font-size:0.76rem;color:var(--esr-muted);line-height:1.5}

/* ── PUBLISH STATE LINE (2026-08-10) ─────────────────────────────────────────
   The step-3 sheet styles and the whole @media print block were REMOVED with the
   export. This one line replaces them. It carries no colour coding: published and
   not-published read as different sentences, not as different hues. */
#esrCard .esr-pubstate{margin:0;padding:11px 20px;font-size:0.8rem;line-height:1.5;
  color:var(--esr-ink);background:var(--esr-shade);
  border-bottom:1px solid var(--esr-line)}

/* ── THE RESPONSE LINE, #esrPublishMsg (2026-08-10) ──────────────────────────
   Sits directly beneath the state line, so an answer to a Publish click appears within a
   few pixels of the control that was pressed — no scrolling, nothing below the fold.
   STILL NO MEANING BY COLOUR. The sentence itself says "Publish was refused" and names how
   many events are missing an amount; the tint and the left rule only draw the eye to text
   that has just appeared. Strip every colour out and the line still says everything. The
   red is --esr-red on --esr-red-soft, the same AA-safe pair the drawer's blocked balance
   box uses, so a refusal reads the same way in both places. */
#esrCard .esr-pubmsg{margin:0;padding:11px 20px;font-size:0.8rem;line-height:1.5;
  font-weight:600;color:var(--esr-red);background:var(--esr-red-soft);
  border-left:3px solid var(--esr-red);border-bottom:1px solid var(--esr-line)}
/* The step-3 export sheet styles and the @media print block that isolated them were
   REMOVED 2026-08-10 with the export itself. Publish replaced them; see #esrCard
   .esr-pubstate above. Nothing here prints. */


/* Published-period heading in the volunteer view (2026-08-10). One per publication.
   It is a heading, not a status badge: the volunteer only ever sees published periods,
   so there is no unpublished state to distinguish here. */
#esrVolCard .esr-vperiod-head{padding:9px 18px;background:var(--esr-navy-soft);
  color:var(--esr-navy);font-size:0.72rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;border-bottom:1px solid var(--esr-line)}

/* The drawer's wrapper row (2026-08-10). A full-width cell inside the events table, so
   the drawer sits directly beneath the clicked event. The cell carries no padding of its
   own — the drawer card inside it brings its own — and no border, so it reads as an
   extension of the row above rather than as a row in its own right. */
#esrCard tr.esr-drawer-row > td{padding:0;border-bottom:1px solid var(--esr-line);
  background:var(--esr-shade)}