:root {
    color-scheme: light dark;
    --bg: #f4f5f1;
    --surface: #ffffff;
    --ink: #1c2622;
    --muted: #5b6862;
    --line: #d9ded7;
    --accent: #0e5c57;
    --accent-ink: #ffffff;
    --danger: #a3261f;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111715;
      --surface: #19221f;
      --ink: #e5ebe7;
      --muted: #9aa8a1;
      --line: #2b3733;
      --accent: #56b8ad;
      --accent-ink: #0a1411;
      --danger: #f08a82;
    }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); }
  a { color: var(--accent); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  button, input { font: inherit; color: inherit; }

  .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
         padding: .9rem clamp(1rem, 4vw, 2rem); background: var(--surface); border-bottom: 1px solid var(--line); }
  .brand { font-weight: 650; font-size: 1.1rem; }
  .brand small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
  .who { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--muted); }
  .btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: .4rem .9rem; cursor: pointer; }
  .btn:hover { border-color: var(--accent); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  main { max-width: 1120px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2rem) 4rem; }
  h1 { font-size: 1.5rem; margin: 0 0 1rem; }
  .note { color: var(--muted); }
  .error { color: var(--danger); }

  .pipeline { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
  .stage { display: flex; align-items: baseline; gap: .5rem; padding: .45rem .85rem; border-radius: 6px;
           border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
  .stage b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
  .stage b.mailcount { padding: 0 .45rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .8rem; line-height: 1.4; }
  .stage[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: .75rem; }
  .tools input { flex: 1 1 16rem; max-width: 26rem; padding: .5rem .75rem; border: 1px solid var(--line);
                 border-radius: 6px; background: var(--surface); }
  .tools select { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }

  .status { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
  .status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot, #8a948f); }
  .status[data-s="initial_enquiry"] { --dot: #d08a00; }
  .status[data-s="pending_deposit"] { --dot: #e0662a; }
  .status[data-s="upcoming_booked"] { --dot: #3f7fd0; }
  .status[data-s="requested_balance"] { --dot: #8a5cd0; }
  .status[data-s="fully_paid"] { --dot: #2f9e57; }
  .status[data-s="post_event_follow_up"] { --dot: #0e8f86; }
  .status[data-s="done"] { --dot: #7d8781; }
  .statuswrap { display: inline-flex; flex-direction: column; gap: .1rem; }
  .substatus { font-size: .85rem; color: var(--muted); padding-left: 1.05rem; white-space: normal; }
  .pipeline.sub { margin: -.35rem 0 1rem 1rem; }
  .pipeline.sub .stage { padding: .25rem .65rem; font-size: .9rem; }

  .back { display: inline-block; margin-bottom: 1rem; }
  .detail { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; }
  .panel h2 { font-size: 1rem; margin: 0 0 .75rem; }
  dl { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: .6rem 1rem; align-items: start; }
  dt { color: var(--muted); }
  dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
  .meta { margin-top: 1rem; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }

  .panel.wide { grid-column: 1 / -1; }
  .panel.deleted { border-color: var(--danger); margin-bottom: 1rem; }
  .btn.danger { color: var(--danger); border-color: var(--danger); }
  .bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem .9rem; margin-bottom: .75rem;
             background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid var(--accent); border-radius: 8px; }
  .badge { display: inline-block; margin-left: .5rem; padding: 0 .5rem; font-size: .75rem; white-space: nowrap;
           border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
  .badge.warn { color: var(--danger); border-color: var(--danger); }
  .badge.info { color: var(--accent); border-color: var(--accent); }
  .mailbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .75rem; padding: .55rem .85rem; border: 1px solid var(--danger);
    border-left-width: 4px; border-radius: 8px; background: var(--surface); color: inherit; text-decoration: none; }
  .mailbar strong { color: var(--danger); }
  .mailbar .go { margin-left: auto; text-decoration: underline; }
  .paidbar { margin: 0 0 .75rem; padding: .45rem .85rem; border: 1px solid #1e8449; border-left-width: 4px; border-radius: 8px; background: var(--surface); }
  .paidbar ul { list-style: none; margin: 0; padding: 0; }
  .paidbar li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; padding: .2rem 0; }
  .paidbar strong { color: #1e8449; }
  .paidbar .btn { margin-left: auto; }
  .badge.paidonline { color: #1e8449; border-color: #1e8449; }
  .card.hasmail { border-left: 4px solid var(--danger); }
  .card.late, .card.fresh { border-left: 4px solid var(--danger); }
  .latebox { margin: .5rem 0 .75rem; padding: .6rem .85rem; border: 1px solid var(--danger); border-left-width: 4px; border-radius: 8px; background: var(--surface); }
  .badge.newmail { margin-left: .5rem; }
  .scriptbox { margin: .75rem 0 0; }
  .scripthead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .4rem; }
  pre.script { margin: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: auto; max-height: 24rem;
    font: .85rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
  .steps { padding-left: 1.4rem; display: grid; gap: .5rem; }
  .filtergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1rem; margin-bottom: .75rem; }
  .filtergrid label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
  .filtergrid select, .filtergrid input { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .status[data-s="response_received"] { --dot: #d1493f; }
  .status[data-s="awaiting_customer"] { --dot: #7b6fd0; }
  .status[data-s="parked"] { --dot: #b0579a; }             /* Parked: set aside, unlikely to go ahead (a muted plum, unlike any other status) */
  .badge.parked { color: #b0579a; border-color: #b0579a; }
  .caltools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
  .caltools .spacer { flex: 1; }
  .caltitle { min-width: 9rem; text-align: center; font-size: 1.15rem; }
  .caltools .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .callegend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .75rem; font-size: .85rem; }
  .calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .calhead { background: var(--surface); padding: .35rem; text-align: center; font-size: .85rem; color: var(--muted); }
  .calday { background: var(--surface); min-height: 6.5rem; padding: .25rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .calday.out { opacity: .55; }
  .calday.today { outline: 2px solid var(--accent); outline-offset: -2px; }
  .specialday { font-size: .7rem; font-weight: 650; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 0 .3rem; overflow-wrap: anywhere; }
  .calnumrow { display: flex; justify-content: space-between; align-items: center; gap: .2rem; }
  a.calnum { text-decoration: none; }
  a.calnum:hover, a.calnum:focus-visible { text-decoration: underline; color: var(--accent); }
  .availblock { margin-bottom: .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
  .availblock h3 { margin: 0 0 .4rem; font-size: 1rem; }
  ul.availlist { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; gap: .3rem; }
  ul.availlist .availdot { margin-right: .5rem; vertical-align: middle; }
  .availdots { display: inline-flex; gap: 3px; }
  .availdots.clickable { cursor: pointer; padding: 2px; border-radius: 4px; }
  .availdots.clickable:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  button.calnumbtn { background: none; border: 0; padding: 0 .15rem; cursor: pointer; font: inherit; font-size: .8rem; color: var(--muted); border-radius: 4px; }
  button.calnumbtn:hover, button.calnumbtn:focus-visible { color: var(--accent); text-decoration: underline; }
  .calday.pickable { cursor: pointer; }
  .calday.picked { outline: 3px solid var(--accent); outline-offset: -3px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .calhead.pickable { cursor: pointer; }
  .calhead.pickable:hover { color: var(--accent); }
  .calnavbottom { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .75rem 0; }
  .calnavbottom .btn { padding: .7rem 1rem; font-size: 1rem; }
  .pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  dialog.availdialog { width: min(34rem, 94vw); max-height: 92vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; background: var(--surface); color: var(--ink); }
  dialog.availdialog::backdrop { background: rgba(0,0,0,.4); }
  .availdot { display: inline-block; width: 9px; height: 9px; border-radius: 9999px; background: #9ca3af; }
  .availdot[data-avail="GOOD"] { background: #16a34a; }
  .availdot[data-avail="LIMITED"] { background: #d97706; }
  .availdot[data-avail="VERY_LIMITED"] { background: #dc2626; }
  .availdot[data-avail="UNAVAILABLE_ONLINE"] { background: #111827; }
  .availkey .availdot { vertical-align: middle; margin-left: .35rem; }
  .calnum { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .calchip { display: block; padding: .1rem .35rem; border-left: 4px solid var(--dot, var(--muted)); border-radius: 3px; background: color-mix(in srgb, var(--dot, var(--muted)) 14%, var(--surface));
             color: inherit; text-decoration: none; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .calchip:hover, .calchip:focus-visible { text-decoration: underline; }
  .calchip.off { opacity: .5; text-decoration: line-through; }
  .calchip.enq { opacity: .6; border-left-style: dashed; }
  .calchip[data-s="initial_enquiry"] { --dot: #d08a00; }
  .calchip[data-s="response_received"] { --dot: #d1493f; }
  .calchip[data-s="awaiting_customer"] { --dot: #7b6fd0; }
  .calchip[data-s="parked"] { --dot: #b0579a; }
  .calchip[data-s="pending_deposit"] { --dot: #e0662a; }
  .calchip[data-s="upcoming_booked"] { --dot: #3f7fd0; }
  .calchip[data-s="requested_balance"] { --dot: #8a5cd0; }
  .calchip[data-s="fully_paid"] { --dot: #2f9e57; }
  .calchip[data-s="post_event_follow_up"] { --dot: #0e8f86; }
  .calchip[data-s="done"] { --dot: #7d8781; }
  .callist h2 { font-size: 1rem; margin: 1rem 0 .25rem; }
  .callist .calchip { display: inline-block; max-width: 100%; font-size: .9rem; }
  .feedpanel { margin-top: 1.5rem; }
  .feedpanel .warn { color: var(--danger); }
  .feedrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .feedurl { flex: 1 1 22rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  @media (max-width: 700px) { .calday { min-height: 4rem; } .calchip { font-size: .7rem; } }
  /* Phase 6: the Availability screen's own calendar - a separate control layer over the diary, not the diary itself. */
  .availgrid { margin-bottom: 1rem; }
  .availday { background: var(--surface); min-height: 5rem; padding: .3rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0;
              border: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .availday:hover, .availday:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .availday.out { opacity: .5; }
  .availday.selected { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .availbadge { display: inline-block; padding: 0 .3rem; border-radius: 3px; font-size: .72rem; width: fit-content; }
  .availbadge[data-avail="GOOD"] { background: color-mix(in srgb, #2f9e57 18%, var(--surface)); color: #2f9e57; }
  .availbadge[data-avail="VERY_LIMITED"] { background: color-mix(in srgb, #dc2626 18%, var(--surface)); color: #dc2626; }
  .availbadge[data-avail="LIMITED"] { background: color-mix(in srgb, #d08a00 18%, var(--surface)); color: #d08a00; }
  .availbadge[data-avail="UNAVAILABLE_ONLINE"] { background: color-mix(in srgb, #111827 18%, var(--surface)); color: #111827; }
  .availmark { font-size: .68rem; color: var(--muted); }
  .status[data-avail-legend="GOOD"] { --dot: #2f9e57; }
  .status[data-avail-legend="LIMITED"] { --dot: #d08a00; }
  .status[data-avail-legend="VERY_LIMITED"] { --dot: #dc2626; }
  .status[data-avail-legend="UNAVAILABLE_ONLINE"] { --dot: #111827; }
  @media (max-width: 700px) { .availday { min-height: 3.5rem; } .availbadge { font-size: .65rem; } }
  .pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
  .pricerow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .pricerow input { max-width: 12rem; }
  .dupes:empty { display: none; }
  .dupes { padding: .6rem .8rem; border: 1px solid var(--danger); border-radius: 8px; background: var(--surface); display: grid; gap: .3rem; }
  .dupes ul { margin: 0; padding-left: 1.2rem; }
  .btn.big { padding: .7rem 1.4rem; font-size: 1.05rem; }
  .navcount { display: inline-block; margin-left: .35rem; min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
    background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.25rem; }
  .maillist { display: grid; gap: .6rem; margin-top: .75rem; }
  .mailcard { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: .65rem .85rem; background: var(--surface); }
  .mailcard.attention { border-left-color: var(--danger); }
  .mailcard.out { border-left-color: var(--line); }
  .mailtop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .mailwho { font-weight: 600; overflow-wrap: anywhere; }
  .mailwhen { margin-left: auto; }
  .mailsubject { margin-top: .3rem; font-weight: 600; overflow-wrap: anywhere; }
  .mailpreview { margin: .25rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
  .mailmeta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
  .mailactions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
  .linkpick { list-style: none; margin: .5rem 0; padding: 0; max-height: 18rem; overflow: auto; display: grid; gap: .3rem; }
  .linkitem { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
  .linkitem:hover, .linkitem:focus-visible { border-color: var(--accent); }
  .blocklist { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
  .blockrow { display: grid; gap: .25rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); justify-items: start; }
  .refchip { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface); vertical-align: middle; }
  .refchip.big { font-size: .95rem; margin: 0 .25rem; }
  /* On the dashboard card the reference comes first, flush with the card's edge, centred against the name (and company, if there
     is one) beside it — so the gap belongs after it, not before, and the row itself is a flex line, not stacked text. */
  .who-name { display: flex; align-items: center; gap: .5rem; }
  .who-name .refchip { margin: 0; }
  .who-name .namecol { display: flex; flex-direction: column; }
  .sortpick { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); white-space: nowrap; }
  .sortsel { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
  .sortsel:disabled { opacity: .6; }
  .pickrow { display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap; }
  .was { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
  .cards { display: grid; gap: .75rem; }
  .card { position: relative; cursor: pointer; display: grid; grid-template-columns: minmax(16rem, 1.3fr) minmax(13rem, 1.1fr) auto; gap: 1rem 1.75rem; align-items: start;
          padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .card.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .card:has(.pick input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .card a, .card button { cursor: pointer; }
  /* The tick box is still there for keyboard and screen-reader users, just not drawn */
  .pick { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .persons { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-bottom: .3rem; }
  .persons strong { font-size: 1.7rem; font-weight: 700; line-height: 1; margin-right: .15rem; }
  .what { font-weight: 600; overflow-wrap: anywhere; }
  .what-more { color: var(--muted); overflow-wrap: anywhere; }
  .left .statuswrap { margin: .6rem 0 .7rem; }
  /* Red safety flag: always says what it means in words, never colour alone */
  .flag { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .9rem; font-weight: 700; white-space: nowrap;
          color: var(--danger); border: 1.5px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .flag-text { color: var(--danger); font-weight: 700; }
  .facts { display: grid; grid-template-columns: 5.5rem 1fr; gap: .3rem .75rem; margin: 0; }
  .facts dd { font-variant-numeric: tabular-nums; }
  .facts dt { font-size: .85rem; }
  .facts dd { font-variant-numeric: tabular-nums; white-space: normal; }
  .who-name { font-weight: 650; font-size: 1.1rem; overflow-wrap: anywhere; }
  .who-name a { color: inherit; text-decoration: none; }
  .who-name a:hover { text-decoration: underline; }
  .contact { color: var(--muted); overflow-wrap: anywhere; }
  .namecol .contact { font-size: .85rem; }
  .eventline { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
  /* Whichever badge/flag ends up first shouldn't carry its usual lead-in gap, so the row lines up flush with the id above it. */
  .flags > *:first-child { margin-left: 0; }
  .card-actions { display: flex; flex-direction: column; gap: .5rem; min-width: 11.5rem; }
  .btn.big { display: block; padding: .75rem 1.2rem; font-weight: 600; text-align: center; text-decoration: none; }
  .btn.small { font-size: .8rem; padding: .25rem .65rem; align-self: flex-end; }
  .selectall { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--muted); cursor: pointer; }
  dialog.dialog { border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--surface); color: var(--ink);
                  width: min(28rem, calc(100vw - 2rem)); }
  dialog.dialog::backdrop { background: rgb(0 0 0 / .45); }
  dialog.dialog h2 { font-size: 1.1rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
  @media (max-width: 52rem) {
    .card { grid-template-columns: 1fr; }
    .card-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .btn.small { align-self: center; margin-left: auto; }
  }
  .flash { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid var(--accent);
           border-radius: 8px; padding: .6rem 1rem; margin-bottom: 1rem; }
  .form label { display: block; margin-bottom: .75rem; font-size: .9rem; color: var(--muted); }
  .form input, .form select, .form textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem;
           border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
  .form textarea { min-height: 6rem; resize: vertical; }
  .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .5rem; }
  .btn:disabled { opacity: .55; cursor: default; }
  .history { list-style: none; margin: 0; padding: 0; }
  .history li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .history li:last-child { border-bottom: 0; }
  .history .when { font-size: .85rem; color: var(--muted); }
  .history .line { overflow-wrap: anywhere; }
  .center { max-width: 26rem; margin: 4rem auto; text-align: center; }
  .center .btn { margin-top: 1rem; }
  @media (max-width: 30rem) { dl { grid-template-columns: 1fr; gap: 0; } dd { margin-bottom: .6rem; } }

  /* ---- details page ---- */
  .head { margin: 0 0 1rem; }
  .head .line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.25rem; }
  .head h1 { margin: 0; font-size: 2rem; line-height: 1.2; overflow-wrap: anywhere; }
  .head .contactline { margin-top: .2rem; font-size: 1.05rem; overflow-wrap: anywhere; }
  .head .when { margin: .35rem 0 0; font-size: 1.25rem; font-weight: 600; }
  .ribbon { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.25rem; padding: .75rem;
            background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .btn.xl { min-height: 3.25rem; padding: .7rem 1.6rem; font-size: 1.1rem; font-weight: 650; }
  @media (max-width: 40rem) { .ribbon .btn.xl { flex: 1 1 100%; } }
  /* the "Yes" buttons (say yes by email, ask for payment and hold the date), under the big buttons */
  .yesbar { margin: -.5rem 0 1.25rem; padding: .6rem .75rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--surface); }
  .yesbar:empty { display: none; }
  .yesbar .inline { display: flex; flex-wrap: wrap; gap: .6rem; }
  .yesbar p { margin: .45rem 0 0; }
  /* "After the event": what was recorded when the event was wrapped up, and the customer's earlier events */
  .wrapup dl { margin: 0; }
  .wrapup .notes, .prevevents .notes { white-space: pre-wrap; overflow-wrap: anywhere; }
  .prevevents { list-style: none; margin: 0 0 .5rem; padding: 0; }
  .prevevents li { padding: .55rem 0; border-top: 1px solid var(--line); display: grid; gap: .1rem; justify-items: start; }
  .holdbox .btn { margin-left: .4rem; }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .85rem; }
  .panel-head h2 { margin: 0; font-size: 1.1rem; }
  .panel h3 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
  .bignum { font-size: 2.2rem; font-weight: 700; line-height: 1; }
  .warnbox { margin: 0 0 1rem; padding: .6rem .9rem; border: 1.5px solid var(--danger); border-radius: 8px;
             background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-weight: 700; }
  .warnbox span { display: block; margin-top: .15rem; font-weight: 400; color: var(--ink); }
  /* The website-build banner under the header on every admin screen (js/build-banner.js). */
  .buildbanner { max-width: 1120px; margin: 1rem auto 0; width: calc(100% - 2 * clamp(1rem, 4vw, 2rem)); padding: .6rem 1rem; border-radius: 8px;
                 border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
  .buildbanner.busy::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .55rem; border-radius: 50%;
                              border: 2px solid var(--accent); border-right-color: transparent; animation: buildspin .9s linear infinite; vertical-align: -.05rem; }
  .buildbanner.slow, .buildbanner.failed { border: 1.5px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
  .buildbanner.failed strong, .buildbanner.slow strong { color: var(--danger); }
  @keyframes buildspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .buildbanner.busy::before { animation: none; } }
  .toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .toggle button { min-width: 4.5rem; padding: .45rem 1.1rem; border: 0; background: var(--surface); cursor: pointer; }
  .toggle button + button { border-left: 1px solid var(--line); }
  .toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
  .toggle.warn button[aria-pressed="true"] { background: var(--danger); color: var(--accent-ink); }
  .toggle button:disabled { cursor: default; opacity: .6; }
  .inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .mini { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .8rem .9rem;
          background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
  .mini.closed { opacity: .7; }
  .mini strong { overflow-wrap: anywhere; }
  .mini .n { font-size: 1.15rem; }
  .mini .btn { align-self: stretch; margin-top: .4rem; text-align: center; text-decoration: none; }
  .others { list-style: none; margin: 0; padding: 0; }
  .others li { padding: .55rem 0; border-top: 1px solid var(--line); display: grid; gap: .1rem; justify-items: start; }
  .form .check { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: 1rem; color: var(--ink); }
  .form .check input { display: inline-block; width: auto; margin: 0; }
  .form fieldset { border: 0; padding: 0; margin: 0 0 .75rem; }
  .form legend { padding: 0; margin-bottom: .35rem; font-size: .9rem; color: var(--muted); }
  .pays { list-style: none; margin: 0; padding: 0; }
  .pays li { padding: .65rem 0; border-top: 1px solid var(--line); display: grid; gap: .15rem; justify-items: start; }
  .pays .amt { font-size: 1.15rem; }
  .pays .void .amt, .pays .void .what { text-decoration: line-through; }
  .pays .void { color: var(--muted); }
  /* online payment links (payment-links.js) */
  .paylinks h3 { margin-top: 1.1rem; }
  .pays .paylink.closed { color: var(--muted); }
  .badge.ok { color: var(--accent); border-color: var(--accent); }
  .badge.testmode { color: #9a5b00; border-color: #9a5b00; }
  .quoteoption { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .6rem; display: grid; gap: .4rem; }
  .quoteoption legend { font-weight: 600; padding: 0 .3rem; }
  .quoteoptions h3, .extras h3 { margin-top: 1.1rem; }
  .upgradetable input[type=text] { width: 100%; }
  .paylinkmade input[readonly] { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
  .pays .fine { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
  .dialog .form { margin-top: .75rem; }
  .dialog .actions { margin-top: 1rem; }

  /* ---- draft email pop-up ---- */
  .dialog:has(.emailform) { width: min(44rem, 94vw); }
  .emailvalues { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }
  .emailvalues .wide { grid-column: 1 / -1; }
  .emailbody { min-height: 18rem; font: inherit; line-height: 1.45; }
  a.btn { display: inline-block; text-decoration: none; color: inherit; }
  a.btn.primary { color: var(--accent-ink); }
  a.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

  /* ---- rich-text editor, and cleaned HTML shown on the page ---- */
  .fieldlabel { display: block; margin-bottom: .25rem; font-size: .9rem; color: var(--muted); }
  .richbox { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
  .richtools { display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem; border-bottom: 1px solid var(--line); background: var(--surface); }
  .richtools .tool { padding: .2rem .6rem; }
  .richtools .tool.b { font-weight: 700; }
  .richtools .tool.i { font-style: italic; }
  .richtools .tool.u { text-decoration: underline; }
  .richtools .tool[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .richtools .tool:disabled { opacity: .5; cursor: default; }
  .richtools select.tool { font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #fff); color: inherit; }
  .richedit { min-height: 12rem; max-height: 30rem; overflow: auto; padding: .75rem .9rem; outline: none; }
  .richedit:focus { box-shadow: inset 0 0 0 2px var(--accent); }
  .richsource { display: block; width: 100%; min-height: 12rem; border: 0; padding: .75rem .9rem; resize: vertical;
                font: .85rem/1.45 ui-monospace, Consolas, monospace; background: var(--bg); color: var(--ink); }
  .rich p { margin: 0 0 .8rem; }
  .rich h2 { font-size: 1.25rem; margin: .9rem 0 .5rem; }
  .rich h3 { font-size: 1.05rem; margin: .8rem 0 .4rem; }
  .rich ul, .rich ol { margin: 0 0 .8rem; padding-left: 1.5rem; }
  .rich a { color: var(--accent); }
  .rich > :last-child { margin-bottom: 0; }
  .sigbox { margin: .75rem 0; padding: .3rem .9rem; border-left: 3px solid var(--line); }

  /* ---- sending an email ---- */
  .confirmsend { margin: .75rem 0; padding: .75rem 1rem; border: 1.5px solid var(--accent); border-radius: 8px;
                 background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  .confirmsend p { margin: 0 0 .4rem; }
  .sentbody pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: .4rem 0 0; font: inherit; }
  .sentbody summary { cursor: pointer; color: var(--accent); }

  /* ---- email templates screen ---- */
  .tplpage { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  @media (max-width: 52rem) { .tplpage { grid-template-columns: 1fr; } }
  .tpllist ul { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
  .tplitem { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; width: 100%; text-align: left;
             padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
  .tplitem:hover { border-color: var(--accent); }
  .tplitem[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .tplitem.archived { opacity: .65; }
  .tplitem .badge { margin-left: 0; }
  .tplitem[aria-current="true"] .badge { color: var(--accent-ink); border-color: var(--accent-ink); }
  .tplitem .tplstep { flex-basis: 100%; font-size: .78rem; opacity: .75; }      /* which step of an enquiry the template is for */
  .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
  .chip { padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer;
          font: .82rem ui-monospace, Consolas, monospace; }
  .chip:hover { border-color: var(--accent); }
  .preview { margin-top: 1.25rem; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); }
  .previewbody { overflow-wrap: anywhere; margin: .5rem 0 0; }
  .previewsubject { overflow-wrap: anywhere; }
  .history-box { margin-top: .5rem; }

  /* ---- navigation (shared by every screen) ---- */
  .nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .nav a { padding: .35rem .8rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
  .nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
  .navmenu { position: relative; }
  .navmenu summary { list-style: none; cursor: pointer; padding: .35rem .8rem; border-radius: 6px; color: var(--ink); }
  .navmenu summary::-webkit-details-marker { display: none; }
  .navmenu summary::after { content: " \25BE"; }
  .navmenu summary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .navmenu summary[aria-current="true"] { font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
  .navpanel { position: absolute; z-index: 20; top: 100%; right: 0; min-width: 13rem; display: flex; flex-direction: column; gap: .1rem; padding: .4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
  .navpanel.navpanel-left { right: auto; left: 0; }
  .navpanel { max-width: calc(100vw - 2rem); max-height: calc(100vh - 6rem); overflow-y: auto; }
  @media (max-width: 600px) {     /* phones: the panel spans the screen under the menu, whichever button opened it */
    .navmenu { position: static; }
    .nav { position: relative; }
    .navpanel, .navpanel.navpanel-left { left: 0; right: 0; min-width: 0; max-width: none; }
  }
  .navheading { padding: .35rem .8rem .1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); }
  .who { flex-wrap: wrap; }

  /* ---- pricing matrix / band tables (Enquiry Form V2 > Pricing) ---- */
  .pricetable { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
  .pricetable th, .pricetable td { border: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: middle; }
  .pricetable th { background: var(--surface); font-weight: 650; white-space: nowrap; }
  .funnel td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .funnel meter { width: 8rem; vertical-align: middle; }
  .funnel tr.fork td:first-child { padding-left: 1.5rem; color: var(--muted); }
  .pricecell { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .pricecell select { padding: .25rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: inherit; }
  .pricecell input[type="number"] { width: 5.5rem; padding: .25rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: inherit; }
  .pricecell .btn.small { padding: .2rem .55rem; }
  .pricecell[data-status="QUOTE"] { opacity: .75; }
  .pricecell[data-status="NOT_PERMITTED"] { opacity: .55; }
  .rownote { font-size: .85rem; color: var(--muted); }
  /* ---- Website photos (website-photos.html) - "wp-" so nothing collides with the shared names above ---- */
  .wp h1 { margin: 0 0 .25rem; }
  .wp-flash { color: var(--accent); font-weight: 600; }
  .wp-add { margin: 1rem 0; }
  .wp-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
  .wp-queue { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
  .wp-qrow { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
  .wp-qrow img, .wp-qpic { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; flex: none; background: var(--bg); }
  .wp-qbody { flex: 1; min-width: 0; }
  .wp-qname { display: flex; align-items: center; gap: .35rem; margin: .25rem 0; }
  .wp-qname input { flex: 1; min-width: 8rem; max-width: 26rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
  .wp-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
  .wp-tools select, .wp-tools input { padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
  .wp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .wp-thumb { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; display: block; }
  .wp-nothumb { display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; font-size: .8rem; color: var(--muted); background: var(--bg); border: 1px dashed var(--line); }
  .wp-name { font-weight: 600; overflow-wrap: anywhere; }
  .wp-small { font-size: .8rem; }
  .wp-badge { align-self: flex-start; padding: 0 .5rem; border: 1px solid; border-radius: 999px; font-size: .75rem; }
  .wp-badge.wp-live { color: var(--accent); }
  .wp-badge.wp-new { color: #b45309; }
  .wp-code { width: 100%; font: .75rem/1.4 ui-monospace, Consolas, monospace; padding: .2rem .3rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
  /* ---- Website photos: a photo removed while on the live site, waiting for the next publish to take it off ---- */
  .wp-badge.wp-removing { color: var(--danger); }
  .wp-card.wp-removed { border-style: dashed; }
  .wp-card.wp-removed .wp-name { text-decoration: line-through; }

  /* ---- Finance (js/finance.js) ---- */
  .finonly { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
  .finbigs { margin-bottom: 1rem; }
  .finbig .bignum { font-variant-numeric: tabular-nums; }
  .finwarn { margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid var(--line); border-left: 4px solid #d08a00; border-radius: 8px; background: var(--surface); }
  .finwarn p { margin: .15rem 0; }
  .tablewrap { overflow-x: auto; margin: 0 0 1rem; }
  .fintable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
  .fintable caption { text-align: left; padding: 0 0 .35rem; }
  .fintable th, .fintable td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
  .fintable thead th { font-size: .85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .fintable th[scope="row"] { font-weight: 500; }
  .fintable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fintable .nowrap { white-space: nowrap; }
  .fintable tr.sub > * { font-weight: 650; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  .fintable tfoot tr > * { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
  .fintable .refchip { margin-left: .4rem; }
  .fintable .badge { margin-left: 0; }
  .finhead { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
  .finqueue { margin: 0 0 .5rem; }
  .finqueue > summary { cursor: pointer; padding: .5rem .25rem; }
  .finqueue[open] > summary { margin-bottom: .35rem; }

  /* ---- Diary on a phone (js/calendar.js): room for the four availability dots ----
     A day is only about 48px wide at 375px, too narrow for the date and a row of four 9px dots, so the last dots were cut off.
     On narrow screens the dots shrink to 7px in two rows of two (Full day, Morning / Afternoon, Evening), next to the date. */
  @media (max-width: 700px) {
    .calday { padding: .2rem .15rem; }
    .calnumrow { flex-wrap: wrap; gap: 2px; }
    .calday button.calnumbtn { padding: 0 .1rem; }
    .calday .availdots { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
    .calday .availdots.clickable { padding: 1px; }
    .calday .availdot { width: 7px; height: 7px; }
  }

  /* ---- Reading a whole email in a pop-up, several To / Cc addresses, and spell check (js/mail-ui.js, js/email.js, js/richtext.js) ---- */
  dialog.dialog.mailreader { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
  .mailreadlist { display: grid; gap: 1rem; }
  .mailread + .mailread { border-top: 1px solid var(--line); padding-top: 1rem; }
  .mailread h3 { font-size: 1rem; margin: 0 0 .35rem; overflow-wrap: anywhere; }
  .mailreadwho { margin: .35rem 0 .5rem; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
  .mailreadbody { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow-wrap: anywhere; }
  .mailreadbody .rich > :last-child { margin-bottom: 0; }
  button.badge.readmail { font: inherit; font-size: .75rem; line-height: inherit; background: transparent; cursor: pointer; text-decoration: underline; }
  button.badge.readmail:hover, button.badge.readmail:focus-visible { background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .addrfields { display: grid; gap: .6rem; }
  .addrbox { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 8px;
             background: var(--bg); cursor: text; }
  .addrbox input { flex: 1 1 12rem; min-width: 10rem; border: 0; background: transparent; padding: .25rem; font: inherit; color: inherit; outline: none; }
  .addrbox:focus-within { box-shadow: 0 0 0 2px var(--accent); }
  .addrchips { display: contents; list-style: none; margin: 0; padding: 0; }
  .addrchip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .6rem; border: 1px solid var(--accent); border-radius: 999px;
              font-size: .85rem; background: var(--surface); overflow-wrap: anywhere; }
  .addrremove { border: 0; background: transparent; color: inherit; font: inherit; font-size: 1rem; line-height: 1; padding: 0 .3rem; cursor: pointer; border-radius: 999px; }
  .addrremove:hover, .addrremove:focus-visible { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
  .addrnote:empty { display: none; }
  /* the earlier email that goes under a reply (Draft email), and its place in the preview */
  .historybox { margin: .75rem 0; padding: .4rem .9rem; border-left: 3px solid var(--line); }
  .historybox p { margin: 0 0 .35rem; }
  .historybox label { display: flex; align-items: center; gap: .4rem; font-weight: normal; }
  .historybox .emailquote { max-height: 30rem; overflow: auto; }     /* the earlier email, under the signature while writing */
  .emailpreviewbody .emailsig { margin-top: .9rem; }
  /* a "Yes" email: move the enquiry on (and hold the date) when it is sent */
  .movebox { margin: .75rem 0; padding: .4rem .9rem; border-left: 3px solid var(--accent); }
  .paybox { margin: .75rem 0; padding: .4rem .9rem; border-left: 3px solid var(--accent); }
  .paybox .movetext { margin: .2rem 0 .35rem; font-weight: 600; }
  .movebox p { margin: .2rem 0 .35rem; }
  .movebox .movetext { font-weight: 600; }
  /* tick boxes on the email form: big enough to see and hit */
  .emailform input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
  .historybox > label { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 6px; width: fit-content; cursor: pointer; font-weight: 600; }
  .templatenote { margin: -.35rem 0 .6rem; color: var(--muted); }   /* which step's templates the Draft email list is showing */
  .emailquote { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); }
  .richhint { margin: 0; padding: .4rem .9rem; border-top: 1px solid var(--line); font-size: .85rem; }
  /* Finance > Purchases (purchases.js): one card per purchase, made for a phone - photo a receipt and it's filed */
  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: baseline; margin-bottom: .5rem; }
  .toolbar h1 { margin: 0; }
  .pu-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
  .pu-filters .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  #app > input[type=search] { width: 100%; max-width: 30rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; font: inherit; }
  .pu-month { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
  .pu-list { display: grid; gap: .6rem; }
  .pu-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: .7rem .9rem; display: grid; gap: .45rem; }
  .pu-card[data-s="missing"], .pu-card[data-s="lost"] { border-left-color: var(--danger); }
  .pu-card[data-s="filed"] { border-left-color: #2f9e57; }
  .pu-head { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: start; }
  .pu-row { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: center; padding: .15rem .3rem; border: 1px solid var(--line); border-radius: 6px; }
  .pu-who { display: grid; overflow-wrap: anywhere; }
  .pu-amt { display: grid; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
  .pu-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; font-size: .9rem; }
  .status[data-s="p_missing"] { --dot: #dc2626; }
  .status[data-s="p_lost"] { --dot: #7d8781; }
  .status[data-s="p_filed"] { --dot: #2f9e57; }
  .status[data-s="p_not_needed"] { --dot: #b8c0bb; }
  .pu-note { margin: 0; font-size: .9rem; color: var(--muted); }
  .pu-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
  .pu-docs li { display: flex; gap: .75rem; align-items: baseline; overflow-wrap: anywhere; }
  .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; text-align: left; }
  .linkbtn.danger { color: var(--danger); font-size: .85rem; }
  .pu-act { display: flex; flex-wrap: wrap; gap: .5rem; }
  .pu-act .btn { padding: .55rem 1rem; }
  .stack { display: grid; gap: .75rem; }
  .stack label { display: grid; gap: .3rem; }
  .stack textarea, .stack select { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  /* Finance > Sales (sales.js) and VAT quarter (vat-quarter.js) - they reuse the Purchases cards above */
  .status[data-s="s_certain"], .status[data-s="s_decided"] { --dot: #2f9e57; }
  .status[data-s="s_other"] { --dot: #b8c0bb; }
  .status[data-s="s_likely"] { --dot: #d08a00; }
  .status[data-s="s_flagged"] { --dot: #dc2626; }
  .sa-pick { display: grid; gap: .2rem; max-height: 16rem; overflow-y: auto; margin-top: .4rem; padding: .2rem; border: 1px solid var(--line); border-radius: 6px; }
  .sa-opt { display: flex !important; gap: .5rem; align-items: center; padding: .3rem .4rem; border-radius: 4px; cursor: pointer; }
  .sa-opt:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .sa-inline { display: flex !important; gap: .5rem; align-items: center; }
  .stack fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; }
  .stack input[type=search], .stack input[type=text] { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; width: 100%; box-sizing: border-box; }
  .vq-todo { border: 1px solid var(--danger); border-radius: 8px; padding: .5rem 1rem; margin: .75rem 0; }
  .vq-todo h2 { font-size: 1rem; margin: .3rem 0; }
  .vq-open { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
  .vq-open label { display: grid; gap: .3rem; }
  .vq-open input { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; width: 10rem; }
  .vq-ok { color: var(--ok, var(--accent)); font-weight: 600; margin: .5rem 0; }
  .vq-bad { border: 1px solid var(--danger); border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; }
  .vq-bad strong { color: var(--danger); }
  /* Purchases: approval and lost receipts */
  .status[data-s="p_approved"] { --dot: #1d6fd1; }
  .pu-card[data-s="lost"] { border-left-color: #7d8781; }
  .stack label.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; }
  .stack label.check input { margin-top: .2rem; }
  /* Finance > Settings (finance-settings.js) */
  .fs-table td, .fs-table th { padding: .35rem .5rem; }
  .fs-table tr.fs-off > * { color: var(--muted); }
  .fs-table select, .fs-table input[type=text] { font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .fs-table input[type=text]:not(.fs-money) { min-width: 12rem; }
  .fs-money { width: 5.5rem; }
  .fs-band { white-space: nowrap; }
  .fs-add, .fs-test { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
  .fs-add input, .fs-test input, .fs-filter { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .fs-test input:not(.fs-money) { flex: 1 1 18rem; }
  .fs-filter { width: 100%; max-width: 30rem; margin: 0 0 .5rem; }
  .status[data-s="p_novat"] { --dot: #d08a00; }
  .pu-type { background: none; border: 1px dashed var(--line); border-radius: 6px; padding: .15rem .5rem; font: inherit; font-size: .9rem; color: inherit; cursor: pointer; }
  .pu-type:hover { border-color: var(--accent); }
  .pu-types { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 60vh; overflow-y: auto; }
  .pu-always { display: flex; gap: .5rem; align-items: center; margin: .75rem 0 0; font-size: .9rem; }
  .pu-question { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; padding: .5rem .7rem; border-radius: 6px;
    background: color-mix(in srgb, #d08a00 14%, var(--surface)); border: 1px solid #d08a00; font-size: .95rem; }
  .pu-question .btn { padding: .35rem .7rem; }
  .pu-card:has(.pu-question) { border-left-color: #d08a00; }
  .status[data-s="p_novat_ok"] { --dot: #b8c0bb; }
  .pu-novat { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
  .pu-novat .btn { padding: .35rem .7rem; }
  .sa-lines { list-style: none; margin: 0; padding: .35rem .6rem; display: grid; gap: .15rem; font-size: .9rem; border-left: 3px solid var(--line); }
  .sa-lines li { display: flex; justify-content: space-between; gap: 1rem; }
  /* Finance > Year */
  .fy-table tr.fy-section th { background: var(--surface); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); padding-top: .7rem; }
  .fy-table td, .fy-table thead th { white-space: nowrap; }
  .fy-months { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; }
  .fin-period { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; max-width: 100%; }

  /* Marketing > Mailing list */
  .mk-row { cursor: pointer; }
  .mk-row:hover > * { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  .mk-table .badge { margin-left: .4rem; }
  .mk-tools { margin: 0 0 .75rem; }
  .mk-people { margin: .5rem 0 1rem; }
  .mk-people summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
  .mk-people table { display: block; max-height: 26rem; overflow: auto; }
  .mk-people tr.mk-off td:not(:first-child) { opacity: .45; text-decoration: line-through; }
  .mk-tools input[type=search] { min-width: 16rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
  .mk-tools select { font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .panel > .facts { grid-template-columns: 9rem 1fr; margin: 0 0 1rem; }
  /* Marketing > Mail shots / Newsletters */
  .mk-block { display: block; }
  .mk-blocktools { margin: 0 0 .6rem; }
  .mk-thumb { display: block; max-width: 22rem; width: 100%; height: auto; border-radius: 6px; margin: 0 0 .75rem; }
  /* Marketing > Photo library */
  .mk-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; margin: .5rem 0 1rem; }
  .mk-photo { display: grid; gap: .3rem; text-align: left; padding: .4rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
  .mk-photo:hover { border-color: var(--accent); }
  .mk-photo img, .mk-nothumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--bg); }
  .mk-nothumb { display: grid; place-items: center; color: var(--muted); font-size: .85rem; }
  .mk-photo-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
  .mk-photo-meta .badge { margin-left: 0; }
  .mk-stars { color: #b7791f; letter-spacing: 1px; }
  .mk-photo-scene { font-size: .9rem; line-height: 1.35; }
  .mk-photo-dialog { max-width: min(60rem, 95vw); }
  .mk-photo-big { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 .8rem; }
  .mk-photo-facts { grid-template-columns: 8rem 1fr; }
  .mk-photo-facts dd { white-space: pre-line; }
  /* Marketing > Social */
  .mk-report { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin: .5rem 0; }
  .mk-channel { display: grid; gap: .2rem; }
  .mk-gap { border-color: var(--danger); }
  .mk-social-photos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
  .mk-social-photos img { width: 9rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
  .mk-social-channel { margin: .5rem 0; }
  .mk-social-channel textarea { width: 100%; font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .mk-social-rejected { opacity: .75; }
  .mk-audience { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .8rem .2rem; margin: 0 0 .5rem; }
  .mk-audience legend { font-weight: 600; padding: 0 .3rem; }
  .mk-progress { width: 100%; height: 1rem; margin: .5rem 0 1rem; accent-color: var(--accent); }
  /* Finance > Year end */
  .ye-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1rem 0; }
  .ye-block { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; background: var(--surface); }
  .ye-block h2 { font-size: 1.05rem; margin: .2rem 0 .3rem; }
  .ye-figs { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin: .4rem 0 0; font-size: .92rem; }
  .ye-figs dt { color: var(--ink); }
  .ye-figs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ye-figs dd.ye-strong { font-weight: 700; }
  .ye-form { margin: 1.2rem 0; }
  .ye-table input { font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; width: 100%; box-sizing: border-box; }
  .ye-money { max-width: 7rem; text-align: right; }
  .ye-inputs { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: .75rem 0; }
  .ye-inputs label { display: grid; gap: .3rem; font-size: .92rem; }
  .ye-inputs input { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; width: 12rem; }
  .ye-details { margin: .6rem 0; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; background: var(--surface); }
  .ye-details summary { cursor: pointer; font-weight: 600; }
  /* Finance > Overview: event income by event date (event-income.js). Year colours: the validated categorical order, each year
     is coloured by how many years back it is (this year blue, last year orange, then aqua, yellow, ...; next year violet); dark steps chosen for the dark surface. */
  :root { --ei-1: #2a78d6; --ei-2: #eb6834; --ei-3: #1baf7a; --ei-4: #eda100; --ei-5: #e87ba4; --ei-6: #008300; --ei-7: #4a3aa7; --ei-8: #e34948; }
  @media (prefers-color-scheme: dark) {
    :root { --ei-1: #3987e5; --ei-2: #d95926; --ei-3: #199e70; --ei-4: #c98500; --ei-5: #d55181; --ei-6: #008300; --ei-7: #9085e9; --ei-8: #e66767; }
  }
  .ei { margin-top: 2rem; }
  .ei-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0; }
  .ei-toggle { display: inline-flex; gap: .3rem; }
  .ei-toggle .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .ei-figure { margin: 1rem 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .ei-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
  .ei-grid { stroke: var(--line); stroke-width: 1; }
  .ei-base { stroke: var(--muted); stroke-width: 1; }
  .ei-axis { fill: var(--muted); font-size: 11px; }
  .ei-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .ei-future { stroke-dasharray: 5 4; }
  .ei-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
  .ei-today { stroke: var(--muted); stroke-dasharray: 2 3; }
  .ei-cross { stroke: var(--muted); stroke-width: 1; }
  .ei-tipbox { fill: var(--surface); stroke: var(--line); }
  .ei-tip { fill: var(--ink); font-size: 12px; }
  .ei-tiphead { font-weight: 600; }
  .ei-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .2rem 0 .4rem; padding: 0; font-size: .9rem; }
  .ei-year { display: inline-flex; align-items: center; gap: .4rem; font: inherit; color: var(--ink); background: none; border: 1px solid transparent; border-radius: 6px; padding: .15rem .45rem; cursor: pointer; }
  .ei-year[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
  .ei-year[aria-pressed="false"] .ei-key { opacity: .35; }
  .ei-year:hover, .ei-year:focus-visible { border-color: var(--line); }
  .ei-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
  .ei-s1 { stroke: var(--ei-1); } .ei-key.ei-s1 { background: var(--ei-1); }
  .ei-s2 { stroke: var(--ei-2); } .ei-key.ei-s2 { background: var(--ei-2); }
  .ei-s3 { stroke: var(--ei-3); } .ei-key.ei-s3 { background: var(--ei-3); }
  .ei-s4 { stroke: var(--ei-4); } .ei-key.ei-s4 { background: var(--ei-4); }
  .ei-s5 { stroke: var(--ei-5); } .ei-key.ei-s5 { background: var(--ei-5); }
  .ei-s6 { stroke: var(--ei-6); } .ei-key.ei-s6 { background: var(--ei-6); }
  .ei-s7 { stroke: var(--ei-7); } .ei-key.ei-s7 { background: var(--ei-7); }
  .ei-s8 { stroke: var(--ei-8); } .ei-key.ei-s8 { background: var(--ei-8); }
  .ei-table tr.ei-now > * { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  /* Discount codes: each standard (an offer's, the follow-up codes') with its codes under it */
  .card.dc-row { grid-template-columns: 1fr auto; }
  .card.dc-standard { display: block; cursor: default; border-left: 4px solid var(--accent); }
  .dc-group { margin-bottom: 1.5rem; }
  .dc-tools { gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
  @media (max-width: 720px) { .card.dc-row { grid-template-columns: 1fr; } }
  /* Finance > Quarter-end prompt, and the "sent to the accountant" lock */
  .fp-text { width: 100%; font: .92rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; box-sizing: border-box; }
  .fp-old { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .8rem; margin: .5rem 0; background: var(--surface); }
  .fp-old summary { cursor: pointer; }
  .fp-pre { white-space: pre-wrap; font: .85rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; margin: .5rem 0; }
  .fin-locked { border: 1px solid var(--accent); border-radius: 8px; padding: .55rem .9rem; margin: .75rem 0; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .fin-locked .actions { margin: .4rem 0 0; }
  /* Finance > Statements */
  .st-pick { position: relative; overflow: hidden; cursor: pointer; }
  .st-pick.disabled { opacity: .6; pointer-events: none; }
  .st-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .st-missing { color: var(--danger); }
  .st-results { margin: .5rem 0; padding-left: 1.2rem; }
  .st-build ul { margin: .3rem 0; padding-left: 1.2rem; }
  /* Staff (Rota, Instructors, Pay) */
  .staff-monthnav strong { min-width: 9rem; text-align: center; }
  .staff-scroll { overflow-x: auto; margin: .5rem 0 1rem; }
  .staff-rota th, .staff-rota td { padding: .3rem .45rem; vertical-align: top; }
  .staff-rota tr.staff-weekend > * { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
  .staff-events { min-width: 11rem; font-size: .85rem; }
  .staff-cell { min-width: 9rem; }
  .staff-cell select, .staff-cell input { display: block; width: 100%; font: inherit; font-size: .85rem; padding: .2rem .3rem; margin: 0 0 .2rem; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: inherit; }
  .staff-cell.staff-on { background: color-mix(in srgb, var(--ok, #2f855a) 12%, var(--surface)); }
  .staff-cell.staff-locked select, .staff-cell.staff-locked input { opacity: .6; }
  .staff-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem 1rem; margin: 0 0 .6rem; }
  .staff-fields label, .staff-editor > label { display: grid; gap: .2rem; }
  .staff-editor input[type=text], .staff-editor input[type=tel], .staff-editor input[type=email], .staff-editor textarea, .staff-skills select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .staff-fields .staff-check { display: flex; align-items: center; gap: .4rem; align-self: end; }
  .staff-skills { max-width: 32rem; }
  .staff-skillhead { color: var(--muted); font-size: .85rem; }
  .staff-left > * { opacity: .6; }
  .staff-own { list-style: none; padding: 0; display: grid; gap: .4rem; }
  .staff-own li { display: flex; gap: .4rem; align-items: center; }
  .staff-own input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .staff-days { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
  .cal-staff { display: block; font-size: .75rem; color: var(--muted); margin-top: .15rem; }
  .staff-cell.staff-away { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
  .staff-cell.staff-cant { background: color-mix(in srgb, #b7791f 10%, var(--surface)); }
  .staff-flag { display: block; font-size: .75rem; font-weight: 600; margin: 0 0 .15rem; }
  .staff-weekdays { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .8rem; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
  .staff-weekdays legend { padding: 0 .3rem; font-size: .9rem; }
  .staff-awaylist { padding-left: 1.1rem; margin: .3rem 0 .5rem; }
  .staff-awaylist li { margin: 0 0 .3rem; }
  .staff-awayadd { flex-wrap: wrap; gap: .4rem .6rem; }
  .staff-awayadd input { font: inherit; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
  .staff-away-panel { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .3rem; }
  .cal-away { display: block; font-size: .75rem; color: var(--danger); margin-top: .15rem; }
  .staff-askmode { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
  .staff-answer { display: inline-block; font-size: .75rem; font-weight: 600; }
  .staff-answer-asked { color: #b7791f; }
  .staff-answer-yes { color: var(--ok, #2f855a); }
  .staff-answer-no { color: var(--danger); }
  /* staff site: my days */
  .staff-ask { border-top: 1px solid var(--line); padding: .5rem 0; }
  .staff-ask:first-of-type { border-top: 0; }
  .staff-mydays { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
  .staff-mydays li { border-bottom: 1px solid var(--line); padding: 0 0 .5rem; }
  .staff-mydays li:last-child { border-bottom: 0; }
  .pagehead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  main > .panel { margin: 0 0 1rem; }
  .staff-ready { border: 2px solid var(--accent); }
  .btn.big { font-size: 1.1rem; padding: .7rem 1.2rem; }
  .staff-session { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .staff-mine { border-left: 4px solid var(--accent); padding-left: .5rem; }