/* ============================================================================
   mh-eventsheet.css - the MH DEFAULT FIELD standard, landed on the Planner's
   "+ New Event" sheet (EventCreateSheet.razor).
   Aug 12 2026, at the CEO's request: the Planner was still on the old mock.

   SCOPED TO #ecsWiz, and that is the whole safety story. Every rule here hangs
   off that one id, which lives only on this sheet's card. The rest of the
   Planner - the grid, the agenda, the detail popup, the older .pl-field forms -
   is untouched by design, because "only the + New Event mock" was the
   instruction.

   WHY CSS RATHER THAN 250 LINES OF NEW MARKUP. The kit's canonical shape is a
   .field wrapper holding a label and an .icf shell around the raw control. This
   sheet's markup is .pl-field holding a label and the control directly. Rebuilding
   every one of its four tabs into .icf wrappers would touch ~20 selects, 6 date
   pickers and the whole repeat-pattern block - a large edit across working,
   bound, draft-saving code for a change the CEO asked to be visual. So the
   CONTROL ITSELF takes the shell here: same tokens, same 50px, same inset rest
   and lift-to-white focus, same radius. Measured against a plain text field, not
   eyeballed - which is the standard's own test.

   The tokens are copied from program-wizards.css deliberately, value for value.
   They are not re-derived and not "close enough": one design in two places.
   ============================================================================ */

/* THE SURFACE, which I got wrong first time round: this card was left on
   var(--mh-surface) = WHITE while every other wizard sits on the app's cool grey.
   Measured on the Program wizard rather than assumed - its modal computes to
   rgb(232,235,240), and its fields sit at #DFE4EA on top of that. Two different
   greys, one darker than the other, is what makes the inset field read as
   recessed at all; a #DFE4EA field on a white card has the contrast backwards
   and is why this sheet looked flat next to #pgWiz.
   --mh-cream is that colour's token name in mh-theme.css - a legacy name from
   before the de-cream sweep; its VALUE is the cool grey #E8EBF0. */
#ecsWiz,
#ecsWiz .ecs-body { background: var(--mh-cream, #E8EBF0); }

#ecsWiz {
  --f-rest-bg: #DFE4EA;
  --f-rest-bd: rgba(40, 60, 80, .10);
  --f-rest-sh: inset 0 1px 2px rgba(40, 60, 80, .10);
  --f-hover-bg: #E4E8ED;
  --f-focus-bg: #FFFFFF;
  --f-focus-bd: rgba(40, 60, 80, .16);
  --f-focus-sh: 0 10px 28px rgba(40, 60, 80, .14);

  --ink-1: #1F2A33;
  --ink-2: #3C4A55;
  --ink-3: #6B7A85;
  --ink-4: #98A5AE;

  --danger: #C0473F;
  --danger-bg: rgba(192, 71, 63, .07);
  --danger-ink: #B0312F;

  --r-md: 12px;
  --ease: cubic-bezier(.2, .7, .25, 1);
  --t: .2s var(--ease);
}

/* ---- the label ---------------------------------------------------------- */
#ecsWiz .pl-field { margin-bottom: 15px; }
#ecsWiz .pl-field > label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 7px;
}

/* ---- THE FIELD ITSELF ---------------------------------------------------
   50px min-height, inset at rest, lifts to white on focus. Every control in
   this sheet resolves to these exact numbers so a select, a time input and a
   text box are indistinguishable in size - the standard's hard requirement. */
/* DIRECT CHILDREN ONLY, and the select through its wrapper. Written as a blanket
   `.pl-field input` this rule also caught the masked input INSIDE the date
   picker: that input went to 50px, the picker's shell added its 1px borders on
   top, and the date field measured 52 against every neighbour's 50. Two pixels
   is exactly the sort of "nearly right" the standard's measure-don't-eyeball
   rule exists to catch. */
#ecsWiz .pl-field > input,
#ecsWiz .pl-field > textarea,
#ecsWiz .pl-field .mh-selwrap > select {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: var(--mh-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  background: var(--f-rest-bg);
  border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh);
  border-radius: var(--r-md);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .pl-field > textarea {
  min-height: 104px;
  padding: 13px 15px;
  line-height: 1.55;
  resize: none;
}
#ecsWiz .pl-field > input:hover:not(:focus),
#ecsWiz .pl-field .mh-selwrap > select:hover:not(:focus),
#ecsWiz .pl-field > textarea:hover:not(:focus) { background: var(--f-hover-bg); }

#ecsWiz .pl-field > input:focus,
#ecsWiz .pl-field .mh-selwrap > select:focus,
#ecsWiz .pl-field > textarea:focus {
  outline: none;
  background: var(--f-focus-bg);
  border-color: var(--f-focus-bd);
  box-shadow: var(--f-focus-sh);
}
#ecsWiz .pl-field > input::placeholder,
#ecsWiz .pl-field > textarea::placeholder { color: var(--ink-4); font-weight: 400; }

/* The native caret is suppressed because .mh-selwrap paints its own chevron on
   top; leaving both draws two arrows. */
#ecsWiz .pl-field .mh-selwrap > select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: none;
}
#ecsWiz .mh-selwrap { position: relative; display: block; width: 100%; }
#ecsWiz .mh-selwrap .selchev {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  pointer-events: none;
  transition: transform var(--t), color var(--t);
}
#ecsWiz .mh-selwrap > select:focus ~ .selchev { color: var(--mh-ctrl-selected, #4E7C72); }

/* ---- the date picker, brought onto the same shell -----------------------
   MhDatePicker renders .dp > .dp-field. Left alone it keeps its own control
   look and sits a few pixels off every neighbour, which is exactly the kind of
   "nearly right" the standard exists to stop. */
#ecsWiz .pl-field .dp { width: 100%; }
#ecsWiz .pl-field .dp .dp-field {
  min-height: 50px;
  padding: 0 15px;
  gap: 11px;
  box-sizing: border-box;
  background: var(--f-rest-bg);
  border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .pl-field .dp .dp-field:hover { background: var(--f-hover-bg); }
#ecsWiz .pl-field .dp.open .dp-field,
#ecsWiz .pl-field .dp .dp-field:focus-within {
  background: var(--f-focus-bg);
  border-color: var(--f-focus-bd);
  box-shadow: var(--f-focus-sh);
}
/* The masked date is typed, so it needs a real text cursor and tabular digits -
   without tabular-nums the slashes drift as the digits change width. */
#ecsWiz .pl-field .dp .dp-field input {
  /* height:auto is the load-bearing one. An older rule in this sheet's own CSS -
     `.mh-app .ecs-body .pl-field input { height: 50px }` - also matches the
     masked input INSIDE the picker. Clearing min-height was not enough: the
     fixed HEIGHT still stood the input at 50, the shell's 1px borders sat on top
     of that, and the date field measured 52 while every neighbour measured 50.
     The shell owns the height here; the input just fills it. */
  height: auto;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

/* ---- time inputs -------------------------------------------------------
   type=time draws a browser clock button; it is kept (it is the affordance in
   the mock) but sized and coloured to the kit rather than left at UA default. */
#ecsWiz .pl-field input[type=time] { font-variant-numeric: tabular-nums; }
#ecsWiz .pl-field input[type=time]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  transition: opacity var(--t);
}
#ecsWiz .pl-field input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* ---- the participant search ("Search client, household, or add an outside
   contact...") ------------------------------------------------------------
   The typing caret was a stub: the input carries height:auto and a 14px font, so
   its line box - and therefore the blinking caret, whose height IS the line box -
   came out around 16px inside a 50px field. Giving the line box a normal height
   restores an ordinary caret. Nothing can set a caret's WIDTH in CSS; height is
   the only lever, and it was the problem. */
/* THE SEARCH FIELD MUST BEHAVE LIKE EVERY OTHER FIELD: recessed grey at rest,
   lifting to white only when you are in it. It was painted white at rest, which
   made it read as permanently focused - the one field on the form that never
   changed when you clicked it. Same three tokens as Notes, Type and Location. */
#ecsWiz .pl-field .pp-field {
  min-height: 50px;
  padding: 0 15px;
  gap: 11px;
  box-sizing: border-box;
  background: var(--f-rest-bg);
  border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh);
  border-radius: var(--r-md);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .pl-field .pp-field:hover:not(:focus-within) { background: var(--f-hover-bg); }
#ecsWiz .pl-field .pp-field:focus-within {
  background: var(--f-focus-bg);
  border-color: var(--f-focus-bd);
  box-shadow: var(--f-focus-sh);
}

/* THE CARET. A caret's height is the input's LINE BOX, and nothing in CSS sets
   its width - so a 14px font in a height:auto input gave the thin stub. An
   explicit line box at the field's own text size makes it an ordinary caret. */
#ecsWiz .pl-field .pp-input {
  font-size: 15px;
  line-height: 24px;
  height: 24px;
  caret-color: var(--ink-1);
}

/* The staff combo - same shell, same lift, so Type and Staff are twins. */
#ecsWiz .pl-field .mhcombo-trigger {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  background: var(--f-rest-bg);
  border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .pl-field .mhcombo-trigger:hover:not(.open) { background: var(--f-hover-bg); }
#ecsWiz .pl-field .mhcombo-trigger.open,
#ecsWiz .pl-field .mhcombo-trigger:focus-visible {
  background: var(--f-focus-bg);
  border-color: var(--f-focus-bd);
  box-shadow: var(--f-focus-sh);
  outline: none;
}
#ecsWiz .pl-field .mhcombo-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ecsWiz .pl-field .mhcombo-val.ph { color: var(--ink-4); font-weight: 400; }
#ecsWiz .pl-field .mhcombo-chev { width: 19px; height: 19px; flex: none; color: var(--ink-3); transition: transform var(--t); }
#ecsWiz .pl-field .mhcombo-trigger.open .mhcombo-chev { transform: rotate(180deg); }

/* ---- two-up row --------------------------------------------------------- */
#ecsWiz .pl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* min-width:0 or a long option string blows the grid column out and the two
   fields stop being equal halves. */
#ecsWiz .pl-row2 > * { min-width: 0; }

/* ---- REQUIRED / ERROR - the same warning design as every other surface ---
   The error outranks hover AND focus: pointing at a red field or typing in it
   is not a fix, only a value is. transition:none so it snaps rather than fades. */
#ecsWiz .pl-field.err > label { color: var(--danger-ink); }
#ecsWiz .pl-field.err input,
#ecsWiz .pl-field.err select,
#ecsWiz .pl-field.err textarea,
#ecsWiz .pl-field.err input:hover,
#ecsWiz .pl-field.err select:hover,
#ecsWiz .pl-field.err textarea:hover,
#ecsWiz .pl-field.err input:focus,
#ecsWiz .pl-field.err select:focus,
#ecsWiz .pl-field.err textarea:focus,
#ecsWiz .pl-field.err .dp .dp-field {
  border-color: var(--danger);
  background: var(--danger-bg);
  transition: none;
}
#ecsWiz .pl-field.err input:focus,
#ecsWiz .pl-field.err select:focus,
#ecsWiz .pl-field.err textarea:focus { box-shadow: 0 0 0 3px rgba(192, 71, 63, .24); }
#ecsWiz .pl-fielderr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-ink);
}
#ecsWiz .shake { animation: ecsShk .34s cubic-bezier(.36, .07, .19, .97); }
@keyframes ecsShk {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ---- dark parity, through the same tokens ------------------------------- */
body.dark #ecsWiz {
  --f-rest-bg: var(--mh-ctrl-fill);
  --f-rest-bd: var(--mh-line);
  --f-rest-sh: inset 0 1px 2px rgba(0, 0, 0, .22);
  --f-hover-bg: var(--mh-surface);
  --f-focus-bg: var(--mh-surface);
  --f-focus-bd: var(--mh-ctrl-focus-border);
  --f-focus-sh: var(--mh-ctrl-focus-ring);
  --ink-1: #E6ECEA;
  --ink-2: #C6D2CE;
  --ink-3: #9FB0AA;
  --ink-4: #7B8C86;
}

/* NO CHEVRON ON A DATE FIELD - part 2 of the standard, in as many words. A date
   here is TYPED into a mask; a chevron advertises a list to pick from and there
   is none. The calendar opens from the field or its icon. */
#ecsWiz .pl-field .dp .dp-field .dpf-chev { display: none; }

/* ---- the staff panel, floating -----------------------------------------
   position:fixed and placed by JS (window.MHpop via mhComboPlace). Fixed is
   what lets it escape the sheet's own scroller - the reason the panel used to
   render in-flow and shove every field below it down the form.

   No height is set here: MHpop clamps max-height to whichever side it opened
   on, so a panel near the bottom of the screen scrolls inside itself instead of
   running off. Setting a height here would fight that and win, wrongly. */
.mh-app .mhcombo-back { position: fixed; inset: 0; z-index: 1400; background: transparent; }
.mh-app .mhcombo-panel--float {
  position: fixed;
  z-index: 1401;
  overflow: auto;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line-cool, var(--mh-line));
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(28, 39, 51, .22);
  padding: 6px;
}
body.dark .mh-app .mhcombo-panel--float {
  background: var(--mh-surface);
  border-color: var(--mh-line);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

/* ============================================================================
   THE STAFF PANEL, WEARING THE COUNTRY FILTER'S CLOTHES.

   The CEO named the All Countries dropdown as the cleaner one and asked for its
   STYLE - the menu and the tick marks - not its contents. So the values below are
   lifted from CountryFilter.razor.css rather than re-invented: same 7px padding,
   same 14px radius, same 18px/40px shadow, same 9px/12px rows on an 8px radius,
   the same #E8EBF0 hover wash, and the same 20px checkbox that fills with pine
   and pops a white tick.

   The panel keeps its OWN content - every user, the Organizer badge, the
   lock-first rule on an existing appointment. Only the clothes are shared.

   Scoped to #ecsWiz so the pickers on other screens are untouched.
   ============================================================================ */
#ecsWiz ~ .mhcombo-panel--float,
.mh-app .mhcombo-panel--float {
  background: #FFFFFF;
  border: 1px solid rgba(40, 60, 80, .16);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(40, 60, 80, .18);
  padding: 7px;
  /* --mh-vh, never bare vh: the app-wide zoom inflates the bare unit. Same cap
     the country menu learned to carry when 17 options ran off the screen. */
  max-height: min(calc(44 * var(--mh-vh)), 440px);
}
.mh-app .mhcombo-panel--float .mhpick { display: flex; flex-direction: column; min-height: 0; }

/* ---- rows ---- */
.mh-app .mhcombo-panel--float .mhpick-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; border: none; background: none;
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: #1C2733; text-align: left;
  transition: background .18s cubic-bezier(.2, .7, .25, 1);
}
.mh-app .mhcombo-panel--float .mhpick-row:hover { background: #E8EBF0; }
.mh-app .mhcombo-panel--float .mhpick-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.mh-app .mhcombo-panel--float .mhpick-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-app .mhcombo-panel--float .mhpick-badge {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #4E7C72; background: rgba(78, 124, 114, .12); border-radius: 999px; padding: 2px 8px;
}

/* ---- the tick, exactly the country checkbox ---- */
.mh-app .mhcombo-panel--float .mhpick-box {
  width: 20px; height: 20px; flex: none; border-radius: 6px; margin-left: auto;
  background: #DFE4EA; border: 1px solid rgba(40, 60, 80, .10);
  box-shadow: inset 0 1px 2px rgba(40, 60, 80, .10);
  display: grid; place-items: center;
  transition: background .18s cubic-bezier(.2, .7, .25, 1), border-color .18s cubic-bezier(.2, .7, .25, 1);
}
.mh-app .mhcombo-panel--float .mhpick-row:hover .mhpick-box { background: #E4E8ED; }
.mh-app .mhcombo-panel--float .mhpick-box svg {
  width: 12px; height: 12px; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none;
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s;
}
.mh-app .mhcombo-panel--float .mhpick-box.on {
  background: #4E7C72; border-color: #4E7C72; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14);
}
.mh-app .mhcombo-panel--float .mhpick-box.on svg { opacity: 1; transform: scale(1); }

body.dark .mh-app .mhcombo-panel--float { background: var(--mh-surface); border-color: var(--mh-line); }
body.dark .mh-app .mhcombo-panel--float .mhpick-row { color: #E6ECEA; }
body.dark .mh-app .mhcombo-panel--float .mhpick-row:hover { background: rgba(255, 255, 255, .07); }
body.dark .mh-app .mhcombo-panel--float .mhpick-box { background: var(--mh-ctrl-fill); border-color: var(--mh-line); }

/* ============================================================================
   DOUBLE WIDTH - THE CENTRED POPUP ONLY.

   The sheet was 478px, which is why the wider rows (From / To / Duration on the
   appointment tab) were cramped. It is now 956px - exactly double.

   THE ANCHORED CARD IS DELIBERATELY EXCLUDED. When a Planner cell is clicked,
   this same component is pinned BESIDE that cell as the quick-create bubble and
   carries .mh-arrowcard. A 956px bubble would not fit beside a day column and
   would cover the calendar it is pointing at - so :not(.mh-arrowcard) keeps that
   one at the width it was designed for. One component, two placements, two
   widths.

   --mh-vw, never bare vw: the app-wide zoom inflates the bare unit, so a card
   sized in vw paints wider than the window at anything above 100%.
   ============================================================================ */
#ecsWiz:not(.mh-arrowcard) {
  width: min(956px, calc(96 * var(--mh-vw)));
  max-width: 96vw;
}

/* With the extra room the two-up row can breathe; the appointment tab's
   From / To / Duration trio stops wrapping its labels. */
#ecsWiz:not(.mh-arrowcard) .pl-row2 { gap: 18px; }

/* ============================================================================
   THE HEADER, ON THE CLIENT DETAIL GRADIENT.

   Lifted verbatim from #clDetail .c-side: the deep pine-sage ramp with the soft
   sage bloom in the top-right corner. It was the brighter --mh-green radial,
   which read as a different green from the one the detail panes use.

   Same two layers, same stops, same tokens - so the sheet and the client rail
   are one surface family rather than two greens that nearly match.
   ============================================================================ */
#ecsWiz .ecs-band {
  background:
    radial-gradient(420px 260px at 110% -6%, rgba(110, 156, 144, .3), transparent 60%),
    linear-gradient(165deg, var(--mh-sidebar), var(--mh-sidebar-2) 55%, #16261F);
}

/* ============================================================================
   THE ALL-DAY TOGGLE, WHEN IT IS OFF.

   Off, the track was --mh-ctrl-fill-2 - light enough that on the new #E8EBF0
   surface it disappeared, leaving the white knob floating like a stray dot with
   nothing to sit in. It now takes the SAME three tokens as every field on this
   sheet: recessed fill, hairline border, inset shadow. So "off" is a real
   groove the knob rests in, and "on" is still the pine fill.
   ============================================================================ */
#ecsWiz .ecs-body .ecs-track {
  width: 44px;
  height: 26px;
  box-sizing: border-box;
  background: var(--f-rest-bg);
  border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .ecs-body .ecs-knob {
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  box-shadow: 0 1px 3px rgba(33, 50, 58, .3), 0 0 0 1px rgba(40, 60, 80, .06);
}
#ecsWiz .ecs-body .ecs-switch:hover .ecs-track { background: var(--f-hover-bg); }
#ecsWiz .ecs-body .ecs-switch input:checked + .ecs-track {
  background: var(--mh-green);
  border-color: var(--mh-green);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16);
}
#ecsWiz .ecs-body .ecs-switch input:checked + .ecs-track .ecs-knob { left: 21px; }

/* ============================================================================
   THE CUSTOM-DATES CALENDAR - compact, like the Planner's rail calendar.

   The cells carried `aspect-ratio: 1/1`. That was fine in a 478px card, where a
   seventh of the width is ~60px. Doubling the sheet to 956px doubled the column
   width too, and a square cell followed it - ~130px per day, a calendar taller
   than the sheet. The width change is what exposed it; the ratio was always the
   fragile part.

   It now copies the Planner rail's mini-calendar instead: a FIXED 34px round
   day, centred in its column, with the month capped to a sensible width so it
   reads as a compact month picker rather than stretching across the whole card.
   Fixed beats ratio here precisely because this surface changes width.
   ============================================================================ */
/* Centred: at 340px inside a 956px card it would otherwise sit hard against
   the left edge with 600px of empty space beside it. */
/* WIDTH, not max-width. Once the panel around it shrink-wraps, a max-width
   gives the grid nothing to fill: its 1fr columns collapse to the widest
   number and the month shrinks to 238px. An explicit width is what the
   panel then hugs. */
#ecsWiz .ecs-body .ecs-mini { width: 340px; max-width: 100%; margin-inline: auto; }
#ecsWiz .ecs-body .ecs-mini-grid { gap: 6px 0; }

#ecsWiz .ecs-body .ecs-mini-cell {
  aspect-ratio: auto;
  width: 34px;
  height: 34px;
  margin: 0 auto;              /* centre the circle in its column */
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  transition: background .12s, color .12s;
}
#ecsWiz .ecs-body .ecs-mini-cell:hover { background: var(--f-rest-bg); border-color: transparent; }
#ecsWiz .ecs-body .ecs-mini-cell.empty,
#ecsWiz .ecs-body .ecs-mini-cell.empty:hover { background: transparent; }

/* Selected = the rail's filled pine circle, shadow and all. */
#ecsWiz .ecs-body .ecs-mini-cell.on {
  background: var(--mh-green);
  border-color: var(--mh-green);
  color: #fff;
  box-shadow: 0 4px 10px rgba(78, 124, 114, .4);
}
#ecsWiz .ecs-body .ecs-mini-dow { font-size: 10.5px; padding-bottom: 3px; }

/* THE PANEL HUGS THE CALENDAR.
   Centring the month inside a full-width panel left the calendar floating in a
   ~900px box with 275px of empty background either side - the calendar was
   centred, the BACKGROUND was not fitted. The panel now shrinks to its content
   and centres as one block, so the card reads as a month picker rather than a
   small calendar adrift in a large empty field. max-width keeps it honest on a
   narrow window. */
/* ONLY THE CALENDAR HUGS. :has(.ecs-mini) is what separates the two panels that
   share this class - the custom-dates month, which should shrink to the calendar
   and centre, and the repeat-pattern block, whose four fields belong at the SAME
   width as the Repeats select above them. Shrink-wrapping that one left it
   floating narrow and off-centre under a full-width field. */
#ecsWiz .ecs-body .ecs-repeat:has(.ecs-mini) {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
#ecsWiz .ecs-body .ecs-repeat:not(:has(.ecs-mini)) {
  width: auto;
  margin-inline: 0;
}

/* A field that is switched off stays in place, dimmed, with its reason under it -
   the app's standard is that a locked field is never HIDDEN. */
#ecsWiz .pl-field.is-off > label { opacity: .55; }
#ecsWiz .pl-field.is-off > input,
#ecsWiz .pl-field.is-off .mh-selwrap > select,
#ecsWiz .pl-field.is-off .dp .dp-field {
  opacity: .55;
  pointer-events: none;
}
#ecsWiz .pl-fieldnote {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---- "Repeat on" weekday row (Google's S M T W T F S) -------------------
   Round 38px targets on the same 50px line as every other field, so the row
   sits in the form rather than beside it. Lit = the pine circle the calendar's
   selected day already uses, so "chosen" means one thing on this sheet. */
#ecsWiz .ecs-dow { display: flex; align-items: center; gap: 8px; min-height: 50px; }
#ecsWiz .ecs-dowbtn {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--f-rest-bd);
  background: var(--f-rest-bg);
  box-shadow: var(--f-rest-sh);
  color: var(--ink-2);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
#ecsWiz .ecs-dowbtn:hover { background: var(--f-hover-bg); }
#ecsWiz .ecs-dowbtn.on {
  background: var(--mh-green); border-color: var(--mh-green); color: #fff;
  box-shadow: 0 4px 10px rgba(78, 124, 114, .4);
}

/* ---- the double-booking refusal ----------------------------------------
   Red, because it is a refusal and not a hint - the save did not happen. It
   names every clash rather than saying "there is a conflict", so the person can
   fix it without leaving the sheet to go and look. */
#ecsWiz .ecs-clash {
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid var(--danger); border-radius: var(--r-md);
  background: var(--danger-bg);
}
#ecsWiz .ecs-clash-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--danger-ink); margin-bottom: 7px;
}
#ecsWiz .ecs-clash-row {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  padding: 2px 0 2px 24px;
}
#ecsWiz .ecs-clash-ft {
  margin-top: 7px; padding-left: 24px;
  font-size: 12px; color: var(--ink-3);
}