/* Adealia — Events and Continuing education on the modern design. Report 199.

   SOURCE: `planning/design/modern-handoff/` — the Firm file's Events screen
   and its register panel, and the Design system page's 12 rules for every
   page it did not draw (the event form, call-off, and all of CE).

   PAGE RULES ONLY. Loads after design-system.css (base.html), and every rule
   here is scoped to a class only these pages carry: `.evce` on the page root,
   or a class that begins `ev-` / `ce-` / `evp-` (the event in the side
   panel). The shared components (.ui-btn, .ui-pill, .ui-state, .ui-chip,
   .ui-panel…) are used as design-system.css draws them and are not
   redefined here.

   SECTIONS
     1. The head every page in this area shares
     2. Events — the list (month, header row, row)
     3. Events — one event: the page, and the register it shares with the panel
     4. Events — the form (new / edit), as a page and in the panel
     5. Events — call off
     6. Continuing education — every page
     7. Phones (under 760px) */

/* ── 1. The head ──────────────────────────────────────────────────────── */
/* Rule 2: the first line says what the page is for, in the lede's 15px and
   the second ink, not the 13px meta grey the old head used. */
.evce .ui-page-head__sub {
  font-size: var(--fs-body);
  color: var(--ink-3);
  margin-top: 4px;
}
.evce .ui-page-head h1 { letter-spacing: -0.01em; }
.evce .ui-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.evce .ui-back:hover { color: var(--ink-1); }
.evce .ui-back .ms { font-size: 18px; }

/* A card in this area: white, the edge, 14px. */
.evce .ui-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.evce .card-title,
.evce .ev-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: 0;
}

/* ── 2. Events — the list ─────────────────────────────────────────────── */
/* Upcoming / Past are filter chips (the Work queue's shape), not a
   segmented track. */
.evce .ev-switch {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0; margin: 0 0 var(--space-5);
  background: none; border-radius: 0;
}
.evce .ev-list { gap: var(--space-5); }
.evce .ev-month { display: flex; flex-direction: column; gap: var(--space-2); }
.evce .ev-month__head { display: flex; align-items: baseline; gap: 4px; }
.ui-page.evce .ev-month__label {
  margin: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.evce .ev-month__count { font-size: 14px; color: var(--ink-4); }

.evce .ev-card { border-radius: var(--radius-lg); }

/* One grid for the header row and the rows under it. Whoever runs events
   reads Event · For · Registered and an action; a broker reads the event
   and her action. */
.evce .ev-thead,
.evce .ev-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  column-gap: var(--space-4);
  align-items: center;
}
/* The action column has a fixed width so the header row (a grid of its
   own) lines up with the rows under it. 176px holds the widest action,
   "Attendance recorded". */
.ev-index--manage .ev-thead,
.ev-index--manage .ev-row {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 150px 176px;
}
.evce .ev-thead {
  padding: 10px 18px;
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4);
  background: var(--rail-bg);
  border-bottom: 1px solid var(--line-2);
}
.evce .ev-row {
  row-gap: 6px;
  padding: 13px 18px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.evce .ev-thead + .ev-row { border-top: 0; }
.evce .ev-row:hover { background: var(--rail-bg); }
.evce .ev-row__lead { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.evce .ev-date {
  flex: none;
  width: 40px;
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card-bg);
  line-height: 1.15;
}
.evce .ev-date__month { font-size: 11px; font-weight: 400; color: var(--ink-4); text-transform: none; letter-spacing: 0; }
.evce .ev-date__day { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-1); }
.evce .ev-row__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evce .ev-row__title {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-1);
  text-decoration: none; overflow-wrap: anywhere;
}
.evce .ev-row:hover .ev-row__title { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }
.evce .ev-row__when { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.evce .ev-row__for,
.evce .ev-row__places { font-size: 14px; color: var(--ink-2); overflow-wrap: break-word; }
@media (max-width: 1279.98px) {
  .ev-index--manage .ev-thead,
  .ev-index--manage .ev-row {
    grid-template-columns: minmax(0, 2fr) minmax(88px, 1fr) 112px 176px;
  }
}
.evce .ev-row__act {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2); flex-wrap: wrap;
}
.evce .ev-row__act .ui-inline { display: flex; align-items: center; gap: var(--space-2); }
/* The row is one target (the title's ::after, components.css); the pills
   sit above that layer like the buttons. */
.evce .ev-row .ui-pill { position: relative; z-index: 1; }

/* ── 3. Events — one event ────────────────────────────────────────────── */
.evce .ev-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.evce .ev-title__kind {
  display: inline-flex; align-items: center;
  font-size: var(--pill-fs); font-weight: 600; line-height: var(--pill-lh);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--radius-pill);
  background: var(--kind-bg); color: var(--ink-2);
}
.evce .ev-layout--manage { gap: var(--space-5); }
/* A broker's event page is one card; a reading width, not the whole desk. */
.evce .ev-layout:not(.ev-layout--manage) { max-width: 760px; }
.evce .ev-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.evce .ev-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.evce .ev-main > .ui-card,
.evce .ev-side > .ui-card { margin: 0; padding: 18px 20px; }

/* "It has finished. Mark who came." — a notice, not a copper band. */
.ev-marking {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 14px;
}
.ev-marking__line { margin: 0; flex: 1 1 220px; }
.ev-marking .ev-marking__btn {
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-input); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--ink-1);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ev-marking .ev-marking__btn:hover { border-color: var(--ink-4); }

/* THE REGISTER (events/_register.html), the same list on the page and in
   the panel, drawn as the handoff's panel draws it: a card with a tinted
   head "Register · 3", then one row a person — initials, name, how they
   came to be on it, and the attendance pills on the right. */
.evp-register {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
}
.evp-register__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 10px 14px;
  background: var(--rail-bg);
  font-size: 14px;
}
.evp-register__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.evp-register__count { color: var(--ink-4); }
.evp-register__head .ev-register-card__add { margin-left: auto; }
.evp-register__list { list-style: none; margin: 0; padding: 0; }
.evp-person {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.evp-person__ini {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--count-bg); color: var(--ink-1);
  font-size: var(--fs-micro); font-weight: 600;
}
.evp-person__who { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.evp-person__name { font-weight: 500; color: var(--ink-1); overflow-wrap: anywhere; }
.evp-person__meta { font-size: var(--fs-meta); color: var(--ink-4); overflow-wrap: anywhere; }
.evce .evp-person__meta .person-status { display: inline; padding: 0; background: none; font: inherit; color: inherit; }
.evp-person__meta .ev-attendance { display: block; font-size: inherit; color: inherit; }
.evp-person__act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* Attendance, as the handoff draws it: a pill that is a button ("Present"
   to mark), and the answer lit as a pill once it is recorded (green for
   present, grey for didn't come). */
.evp-person .ev-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; border: 0; }
.evp-person .ev-seg__btn,
.evp-person .ev-seg__on {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font: inherit; font-size: var(--fs-meta); font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.evp-person .ev-seg__btn {
  border: 1px solid var(--line-input); background: var(--card-bg); color: var(--ink-1); cursor: pointer;
}
.evp-person .ev-seg__btn:hover { border-color: var(--ink-4); }
.evp-person .ev-seg__on { border: 1px solid var(--chip-bg); background: var(--chip-bg); color: var(--ink-3); }
.evp-person .ev-seg__on--present { border-color: var(--ok-bg); background: var(--ok-bg); color: var(--ok-fg); }
.evp-person .ev-seg--quiet { color: var(--ink-4); font-size: var(--fs-meta); }
.evp-person .ev-row__remove { min-height: 32px; padding: 0 10px; font-size: var(--fs-meta); }
.evp-register__empty { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-4); }
.evp-register .ev-add-person {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2);
  padding: 12px 14px;
  border-top: 1px solid var(--line-2);
}
.evp-register .ev-add-person label {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-1);
}
.evp-register .ev-add-person select { width: 100%; font-size: var(--fs-body); font-weight: 400; }

/* The other cards on the organiser's page. */
.evce .told-list,
.evce .attendees,
.evce .history { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.evce .told-list li,
.evce .attendees li,
.evce .history li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3);
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.evce .told-list .attendee-name,
.evce .attendees .attendee-name { font-weight: 500; flex: 1 1 160px; min-width: 0; }
.evce .history .history-text { flex: 1 1 240px; min-width: 0; }
.evce .history .history-when,
.evce .told-list .prof-note { font-size: var(--fs-meta); color: var(--ink-4); margin: 0; }
/* Status words are pills without the dot (rule 6), in the shared pill's
   geometry: 12/600, 2px 10px. */
.evce .person-status,
.evce .lic-expiry,
.evce .ce-state {
  height: auto;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  font-size: var(--pill-fs); font-weight: 600; line-height: var(--pill-lh);
  letter-spacing: 0; text-transform: none;
}
.evce .person-status::before,
.evce .lic-expiry::before,
.evce .ce-state::before { display: none; }
.evce .ui-card > :first-child { margin-top: 0; }
.evce .ui-card > .card-title + .prof-note { margin-top: 0; }
.evce .prof-note,
.evce .field-note { font-size: 14px; color: var(--ink-3); }

/* Details: a key and its answer, the handoff's "facts" rows. */
.evce .ev-facts { display: flex; flex-direction: column; gap: 0; margin: var(--space-3) 0; padding: 0; }
.evce .ev-facts > div {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3);
  padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 14px;
}
.evce .ev-facts dt { color: var(--ink-4); font-weight: 400; margin: 0; padding: 0; }
.evce .ev-facts dd { margin: 0; padding: 0; overflow-wrap: anywhere; }
.evce .ev-description { font-size: var(--fs-body); color: var(--ink-2); margin: var(--space-2) 0; }
.evce .ev-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.evce .ev-detail-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.evce .ev-going,
.evp .ev-going {
  display: inline-flex; align-items: center;
  font-size: var(--pill-fs); font-weight: 600; line-height: var(--pill-lh);
  padding: var(--pill-pad-y) var(--pill-pad-x); border-radius: var(--radius-pill);
  background: var(--ok-bg); color: var(--ok-fg);
}
.evce .ev-hold { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.evce .ev-hold .ui-page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.evce .ev-series-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* THE EVENT IN THE SIDE PANEL (events/detail.html, block panel). */
.evp { display: flex; flex-direction: column; gap: var(--space-4); }
.evp-note {
  margin: 0; padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--kind-bg); color: var(--ink-2);
  font-size: 14px;
}
.evp-note--alert { background: var(--alert-bg); color: var(--alert-fg); }
.evp-desc { margin: 0; font-size: var(--fs-body); color: var(--ink-2); white-space: pre-wrap; }
.evp-line { margin: 0; font-size: 14px; color: var(--ink-3); }
.evp-line a { font-weight: 500; }
.evp .ev-hold { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.evp .ev-hold__line { margin: 0; font-size: 14px; }
.evp .ev-hold .ui-page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.evp .ev-marking { border-radius: var(--radius-sm); }
.ui-panel__foot .evp-foot-form { display: contents; }
.ui-panel__foot .evp-foot-form .ui-btn--primary { flex: 1 1 200px; }
.ui-panel__foot .evp-foot-note { flex-basis: 100%; margin: 0; font-size: var(--fs-meta); color: var(--ink-4); }

/* ── 4. Events — the form ─────────────────────────────────────────────── */
.evce .ev-form { gap: var(--space-4); }
.evce .ev-form .ev-card,
.evp-form .ev-card {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);
  padding: 20px;
}
.evce .ev-field,
.evp-form .ev-field { font-size: 14px; font-weight: 600; color: var(--ink-1); gap: 6px; }
.evce .ev-field__hint,
.evp-form .ev-field__hint { font-size: var(--fs-meta); color: var(--ink-4); }
.evce .ev-kind span,
.evp-form .ev-kind span { border-radius: var(--radius-pill); }
.evce .ev-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.evce .ev-form__says,
.evp-form .ev-form__says { font-size: var(--fs-meta); color: var(--ink-4); }
.evce .ev-cancel { margin-top: var(--space-4); padding: 20px; }
/* In the panel the four parts are sections of one column, not four cards
   (a card inside a panel is a box inside a box). */
.evp-form .ev-card {
  padding: 0 0 var(--space-5);
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  background: none; box-shadow: none;
}
.evp-form .ev-card:last-child { border-bottom: 0; padding-bottom: 0; }
.evp-form .ev-card__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.evp-form .ev-when { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
.evp-form .ev-when > .ev-when__zone { grid-column: 1 / -1; max-width: none; }
.evp-form .ev-reg { grid-template-columns: minmax(0, 1fr); }
.evp-form .ev-aud { grid-template-columns: minmax(0, 1fr); }
/* `.ui-panel select { font: inherit }` would take the label's 600. */
.evp-form .ev-field input,
.evp-form .ev-field select,
.evp-form .ev-field textarea,
.evp-form .ev-repeat select,
.evp-form .ev-repeat input { font-weight: 400; }
@media (max-width: 759.98px) {
  .evp-form .ev-when { grid-template-columns: minmax(0, 1fr); }
  .evp-form .ev-when__dash { display: none; }
}

/* ── 5. Events — call off ─────────────────────────────────────────────── */
.evce .ev-calloff { padding: 20px; display: flex; flex-direction: column; gap: var(--space-3); }
.evce .ev-calloff .lic-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.ui-panel__body .ev-calloff-list { margin: 0; }

/* ── 6. Continuing education ──────────────────────────────────────────── */
/* Status is a pill with a word (rule 6): Met / Short, and a submission's
   outcome, take the shared pill's geometry — 12/600, 2px 10px, 999 — and
   lose the dot. */
.evce .ce-state,
.evce .ce-status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--pill-fs); font-weight: var(--pill-weight); line-height: var(--pill-lh);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.evce .ce-state::before,
.evce .ce-status-chip::before { display: none; }
.evce .ce-state--met   { background: var(--ok-bg);   color: var(--ok-fg); }
.evce .ce-state--short { background: var(--warn-bg); color: var(--warn-fg); }

/* The bar is progress, and progress is green (the Design system page). */
.evce .ce-bar { height: 6px; border-radius: var(--radius-pill); background: var(--track-bg); }
.evce .ce-bar__fill { background: var(--done-ink); border-radius: var(--radius-pill); }

/* Forms in this area: the label sits over its control, 14/600, with no
   indent (the old grid indented the label 13px from its field). */
.ui-page.evce .prof-grid > label,
.evce .prof-grid label,
.evce .ce-form label {
  padding-left: 0;
  text-indent: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-1);
  display: flex; flex-direction: column; gap: 6px;
}
.evce .prof-grid label > input,
.evce .prof-grid label > select,
.evce .prof-grid label > textarea { font-weight: 400; }
/* The handoff draws a label flush with its control's edge, 14/600 (the
   Onboard form, the panel's fields). components.css §2 indents every label
   13px to line up with the value inside; these pages follow the handoff. */
.ui-page.evce .lic-grid > label,
.ui-page.evce .ev-desc-label,
.ui-page.evce .course-search label,
.evce .ui-field > label {
  text-indent: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-1);
}
.ui-page.evce .prof-readonly dt,
.ui-page.evce .prof-readonly dd { padding-left: 0; }
.evce .ev-desc-label textarea,
.evce .course-search input { font-weight: 400; }

/* The "Early version" line is a note, not a banner. */
.evce .ce-stub {
  background: var(--kind-bg);
  border: 0;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 14px;
}

/* A list of courses (the broker's, and a course's history). */
.evce .lic-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ui-page.evce .lic-list > .lic-item {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: none;
}
.ui-page.evce .lic-list > .lic-item::before { display: none; }
/* A course Licensing sent back: the handoff's sent-back card — the red
   edge and a faint red ground, and its pill says so in red. */
.ui-page.evce .lic-list > .lic-item--sent-back {
  border-color: var(--alert-line);
  background: color-mix(in srgb, var(--alert-bg) 45%, var(--card-bg));
}
.evce .lic-expiry.ce-returned { background: var(--alert-bg); color: var(--alert-fg); }
.evce .lic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-3); }
.evce .lic-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink-1); }
.evce .ce-reason { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.evce .ce-hist-link { margin: var(--space-2) 0 0; font-size: 14px; }
.evce .lic-item .lic-actions { margin: var(--space-3) 0 0; }

.evce .ev-desc-label .field-note,
.evce .ui-field .field-note { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-4); }
.evce .ev-desc-label { display: flex; flex-direction: column; gap: 6px; }

/* The review list: each course a card, the three answers a row. The group
   heading reads like the Events month heading, with its count. */
.ui-page.evce .ce-group__label {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0; text-transform: none;
}
.evce .ce-queue-card + .ce-queue-card { margin-top: var(--space-3); }
.evce .ce-queue-card { padding: 18px 20px; }
.evce .ce-review-actions,
.evce .ce-decide { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* A state's requirements: every named minimum on one grid, so the Hours
   boxes and the Remove ticks line up down the card. Anything else in the
   row (what changed, who added it) takes the full width under it. */
.ui-page.evce .req-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 72px;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: end;
}
.ui-page.evce .req-part > * { grid-column: 1 / -1; }
.ui-page.evce .req-part > .req-part__label { grid-column: 1; grid-row: 1; align-self: center; }
.ui-page.evce .req-part > .req-part__hours { grid-column: 2; grid-row: 1; min-width: 0; }
.ui-page.evce .req-part > [data-part-remove] { grid-column: 3; grid-row: 1; }
.evce .req-field__label,
.evce .req-field > span:first-child { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.evce .req-subhead { font-size: 14px; font-weight: 600; color: var(--ink-1); }

/* The search above a console: a label flush over its field, 14/600. */
.evce .ce-console-search .ui-label {
  padding-left: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-1);
}

/* Tables in this area take the handoff's list-card head: 12/600 in the
   meta ink on the rail tint, a hairline under it. */
.evce .ui-table { border-radius: var(--radius-lg); }
.evce .ui-table thead th {
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4);
  letter-spacing: 0; text-transform: none;
  background: var(--rail-bg);
  border-bottom: 1px solid var(--line-2);
}
.evce .ui-table td { font-size: 14px; }

/* ── 7. Phones ────────────────────────────────────────────────────────── */
@media (max-width: 759.98px) {
  /* The rows stack, and the header row goes (the handoff hides it). */
  .evce .ev-thead { display: none; }
  .evce .ev-row,
  .ev-index--manage .ev-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 14px 16px;
  }
  .evce .ev-row__lead { align-items: flex-start; }
  /* components.css §15 turns the date block into one inline line on a
     phone; the handoff keeps the block. */
  .evce .ev-date {
    flex-direction: column; align-items: center;
    width: 40px; gap: 0; padding: 3px 0;
    border: 1px solid var(--line); background: var(--card-bg);
  }
  .evce .ev-date__day { font-size: 16px; }
  .evce .ev-row__act { justify-content: flex-start; }
  .evce .ev-row__act > form:has(> .ui-btn--primary) { flex: 1 1 auto; }
  .evce .ev-row__act > form > .ui-btn--primary { width: 100%; }
  .evp-person__act { margin-left: 40px; }
  /* A named minimum: its name on a line, then Hours and Remove. */
  .ui-page.evce .req-part { grid-template-columns: minmax(0, 1fr) 72px; }
  .ui-page.evce .req-part > .req-part__label { grid-column: 1 / -1; grid-row: 1; }
  .ui-page.evce .req-part > .req-part__hours { grid-column: 1; grid-row: 2; }
  .ui-page.evce .req-part > [data-part-remove] { grid-column: 2; grid-row: 2; }
  .evce .ev-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* The panel's foot takes the Details card's action row as its own buttons:
   the row's box goes, its buttons and forms join the foot's flex line. */
.ui-panel__foot .ev-detail-actions,
.ui-panel__foot .ev-detail-actions > form { display: contents; }
.ui-panel__foot .ev-detail-actions .ui-btn--quiet { margin-right: auto; }
.evp-details .ev-facts { margin-top: 0; }
.evce .ev-series-list a { font-size: 14px; font-weight: 500; color: var(--ink-1); }
.evce .ev-calendar-clock { font-size: var(--fs-meta); color: var(--ink-4); }
.evp .ev-facts > div:first-child { border-top: 0; }
.evp-details > .prof-note:first-child { margin-top: 0; }