/* ============================================================
   PHESTI LOOK "E" (v1.49, 2026-10-09)
   Everett picked option E (product/design-options/2026-10-09-main-screen/e-cards.html): the same
   layout and cards, redrawn with cleaner shapes, readable sizes and plain status words.
   v1.49.1 (Everett: "make sure we have their look still"): Phesti gives the shapes; the CLIENT
   gives the colours, fonts and logo. Every accent below is the client's ramp (--brand-*,
   --golden-yellow = its accent), every face is the client's (--sans text, --serif display);
   brand.js sets them per client, styles.css holds Shoreline's. Neutrals and status colours
   are shared. Loads last: it only restyles, nothing moves.
   Card colour: "Split" (v1.50.0, below the Clean rules, which it overrides).
   ============================================================ */

:root {
  --bg-0: #FFFFFF; --bg-1: #F5F7FA; --bg-2: #FFFFFF; --bg-3: #EEF1F5; --bg-4: #E9EDF2;
  --line: #DCE0E7; --line-2: #C5CBD6; --line-strong: #778193;
  --txt-1: #16202E; --txt-2: #4E5B6E; --txt-3: #5F6B7E;
  --card-txt-1: var(--txt-1); --card-txt-2: var(--txt-2); --card-track: var(--bg-4);
  --ok: #077649; --warn: #A65003; --bad: #AE2D2F; --info: #1D5D9F;
  --rent-bar: #1F6B48; --coll-bar: #5A45AE; --dept-bar: #1D5D9F; --other-bar: #4E5B75;
  --rf-canvas: var(--bg-1);
  --lk-ink: var(--brand-600);          /* the client's colour as text and marks */
  --lk-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 12px 28px -14px rgb(16 24 40 / .28);
  --lk-ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  --txt-1: #EEF0F3; --txt-2: #B6BDC8; --txt-3: #9AA2AF;
  --ok: #5FD39A; --warn: #F0A35A; --bad: #EF7A80; --info: #7FB4EE;
  --rent-bar: #5FBF8A; --coll-bar: #A08CF0; --dept-bar: #6FA8E8; --other-bar: #9AA4B6;
  --lk-ink: var(--brand-300);
  --lk-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 32px -14px rgb(0 0 0 / .7);
}

/* ============ the frame: a plain page, no glow ============ */
.app, .main { background: var(--bg-1); }
:root[data-theme="dark"] .main { background: var(--bg-1); }
.btn--primary { box-shadow: none; }

/* ============ sidebar: the client's colour, flat, with words you can read ============ */
.sidebar { background: var(--brand-600); }
:root[data-theme="dark"] .sidebar { background: color-mix(in srgb, var(--brand-900) 70%, #080B10); border-right: 1px solid var(--line); }
@media (min-width: 861px) {
  .sidebar { margin: 0; height: 100dvh; border-radius: 0; box-shadow: none; }
}
.sidebar__wordmark strong { font-size: 18px; }
.sidebar__wordmark span { font-size: 14px; color: rgb(255 255 255 / .75); }
.navitem { min-height: 42px; font-size: 15px; color: rgb(255 255 255 / .85); }
.navitem.is-active { background: rgb(255 255 255 / .16); box-shadow: inset 3px 0 0 var(--golden-yellow); }
.navitem__count { font-size: 13px; color: rgb(255 255 255 / .7); }
.sidebar__h { font-family: var(--sans); font-size: 14px; font-weight: 650; color: #fff; }
.monthnav__label { font-size: 16px; }
.filter { min-height: 36px; font-size: 15px; color: rgb(255 255 255 / .78); }
.filter:has(input:checked) { color: #fff; }
.filter__n, .filter:has(input:checked) .filter__n { font-size: 13px; color: rgb(255 255 255 / .72); }
.sidebar__whoname b { font-family: var(--sans); font-size: 15px; font-weight: 650; }
.sidebar__whoname span { font-size: 13px; color: rgb(255 255 255 / .72); }

/* ============ top bar ============ */
.topbar { background: var(--bg-1); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .topbar { padding: 14px 28px; } }
.topbar__input { border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: none; font-size: 15px; }
.segs { background: var(--bg-4); border: 0; box-shadow: none; }
.topbar .btn--primary { border-radius: 10px; font-weight: 650; }

/* ============ day headings: the client's display face ============ */
.dayhead { margin: 28px 0 12px; }
.dayhead__d { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.012em; color: var(--txt-1); }
.dayhead.is-today .dayhead__d, :root[data-theme="dark"] .dayhead.is-today .dayhead__d { color: var(--txt-1); }
.view .dayhead__n { padding: 0; border: 0; background: none; font: 500 14px/1.2 var(--sans); color: var(--txt-3); }
.view .dayhead__n:last-child { padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13px; }
.dayhead.is-today .dayhead__n:not(:last-child) { color: var(--lk-ink); font-weight: 700; }

/* ============ the event card ("Clean") ============ */
.card.bk--rental  { --bk-bar: var(--rent-bar); }
.card.bk--college { --bk-bar: var(--coll-bar); }
.card.bk--dept    { --bk-bar: var(--dept-bar); }
.card.bk--other   { --bk-bar: var(--other-bar); }
.card.bk--work    { --bk-bar: var(--work-bar); }
.card.is-cancelled { --bk-bar: var(--bad); }

.cards .card, .card {
  position: relative; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 20px; padding: 16px 20px 0 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: none;
  transition: transform .18s var(--lk-ease), box-shadow .18s var(--lk-ease);
}
.cards .card, .card, .card.is-cancelled, .card.is-pending { border-left-color: var(--line) !important; }
.cards .card::before, .card::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--bk-bar, var(--line-2)); }
.cards .card:hover, .card:hover { background: var(--bg-2); box-shadow: var(--lk-shadow); transform: translateY(-2px); }
.card.is-open, .cards .card.is-open { box-shadow: 0 0 0 2px var(--brand-600), var(--lk-shadow); }
:root[data-theme="dark"] .card.is-open { box-shadow: 0 0 0 2px var(--brand-300), var(--lk-shadow); }

.card .card__date, .card.is-today .card__date { align-self: stretch; justify-content: center; margin-bottom: 16px; padding: 10px 0;
  border-radius: 12px; background: var(--bg-4); }
.card .card__mon, .card.is-today .card__mon { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--lk-ink); }
.card .card__day, .card.is-today .card__day { font-family: var(--serif); font-size: 40px; font-weight: 500; letter-spacing: -.02em; margin: 4px 0 3px; color: var(--txt-1); }
.card .card__dow, .card.is-today .card__dow { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--txt-2); }
.card.is-today .card__date { background: var(--brand-600); }
.card.is-today .card__day, .card.is-today .card__dow { color: #fff; }
.card.is-today .card__mon { color: rgb(255 255 255 / .85); }

.card__kicker { font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--txt-2); }
.card__kind { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-2); }
.card__kind::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bk-bar, var(--line-2)); }
.card .card__pend { color: var(--warn); }
.card .card__name { margin-top: 3px; font-family: var(--sans); font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--txt-1); }
.card.is-cancelled .card__name { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; color: var(--txt-3); }
.card__facts { gap: 6px 18px; margin-top: 10px; font-size: 15px; color: var(--txt-2); }
.fact .ico { width: 16px; height: 16px; opacity: 1; color: var(--txt-3); }
.fact--time, .fact--time b { color: var(--txt-1); font-weight: 650; }
.fact--time .ico { color: var(--lk-ink); }

.card__side { gap: 12px; padding-top: 2px; }
.cards .card .crewstack .av, .cards .card:hover .crewstack .av { width: 32px; height: 32px; font-size: 11px; border-color: var(--bg-2); }
.card .notech { font-size: 14px; color: var(--txt-3); }
.card .card__bars { width: 200px; gap: 8px; }
.card .mini, .card .mini--empty { grid-template-columns: 60px 1fr 34px; gap: 8px; font-size: 13px; }
.card .mini__l { color: var(--txt-2); }
.card .mini__n { font-family: var(--sans); font-size: 13px; font-weight: 650; color: var(--txt-1); }
.card .mini__track { height: 6px; border-radius: 99px; background: var(--bg-4); }
.card .mini__fill { border-radius: 99px; background: var(--brand-500); }
.card .mini__fill.is-done { background: var(--ok); }

.card__foot { gap: 8px; margin-top: 14px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.state { font-size: 15px; margin-right: 8px; }
.state__g { width: 18px; height: 18px; }
.state b { font-weight: 700; }
.state__more { font-size: 14px; color: var(--txt-2); }
.card .card__flags { gap: 8px; padding: 0; border-left: 0; }
.card .flag { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--txt-3); }
.card .flag:not(.is-on) { opacity: 1; }
.card .flag.is-on, .card .flag.is-on.flag--ok, .card .flag.is-on.flag--info, .card .flag.is-on.flag--warn { color: var(--txt-1); background: var(--bg-4); border-color: transparent; }
.card__avail { font-size: 14px; }

/* ============ v1.50.0: "Split" (Everett picked option 7, 2026-10-10) ============
   The top of the card (date, kind, name, times, crew, jobs) is solid in the booking colour with
   white words; the status row underneath stays white, so the status and the pills read easily.
   The solid colour is the same deep shade in light and dark mode. Today's date block turns white. */
/* v1.51.0: the colour is the organization's own booking type (inline --bk / --bk-deep, a shade
   app.js checks is dark enough for white words). Status colours are fixed and never a booking type. */
.card { --bk-solid: var(--bk-flat, color-mix(in srgb, var(--bk-deep, #4E5B75) 88%, #000)); }
.card.bk--work { --bk-solid: #4F5C67; }
.card.is-cancelled { --bk-solid: #9B2C2C; }
.cards .card, .card { grid-template-areas: "date main side" "foot foot foot"; background: var(--bk-solid); border: 0; overflow: hidden; color: #fff; }
.cards .card:hover, .card:hover { background-color: var(--bk-solid); }
.cards .card::before, .card::before { content: none; }
.card .card__date, .card.is-today .card__date { margin-bottom: 16px; background: rgb(255 255 255 / .16); }
.card .card__mon, .card .card__dow { color: rgb(255 255 255 / .85); }
.card .card__day { color: #fff; }
.card.is-today .card__date { background: #fff; }
.card.is-today .card__day, .card.is-today .card__dow { color: var(--bk-solid); }
.card.is-today .card__mon { color: var(--bk-solid); }
.card__kicker, .card__kind, .card .card__pend { color: rgb(255 255 255 / .88); }
.card__kicker > span + span::before { background: #fff; }
.card__kind::before { background: #fff; }
.card .card__name { color: #fff; }
.card.is-cancelled { opacity: 1; }
.card.is-cancelled .card__name, .card.is-cancelled .card__name span { color: rgb(255 255 255 / .8); text-decoration-color: #fff; }
.card__facts, .fact .ico, .fact--time .ico { color: rgb(255 255 255 / .85); }
.fact--time, .fact--time b { color: #fff; }
.card .notech, .card .mini__l { color: rgb(255 255 255 / .85); }
.card .mini__n { color: #fff; }
.card .mini__track { background: rgb(255 255 255 / .22); }
.card .mini__fill, .card .mini__fill.is-done { background: #fff; }
.cards .card .crewstack .av, .cards .card:hover .crewstack .av { border-color: var(--bk-solid); }
.card__foot { margin: 14px -20px 0 -16px; padding: 12px 20px 14px 16px; border-top: 0; background: var(--bg-2); color: var(--txt-1); }
@media (max-width: 860px) { .card__foot { margin: 12px -14px 0 -12px; padding: 12px 14px 14px 12px; } }
@media (max-width: 620px) { .cards .card, .card { grid-template-areas: "date main" "side side" "foot foot"; } .card .card__date { margin-bottom: 0; } }
:root[data-theme="dark"] .card__foot { background: var(--bg-2); }
body.cards-ticket .card { background: var(--bk-solid); }

/* ---- status: fixed colours, the same for every organization ---- */
:root { --st-ok: #0B7A4B; --st-pend: #B85C00; --st-canc: #B3261E; }
.spill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; margin-right: 6px; }
.spill .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.spill--ok { background: var(--st-ok); } .spill--pend { background: var(--st-pend); } .spill--canc { background: var(--st-canc); }
/* pending: the colour stays, striped, so it reads "not settled yet" at a glance */
.card.is-pending { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .14) 0 12px, transparent 12px 24px); }
.card .card__pend, .card .card__kicker .card__pend { display: none; }
.card__facts--cf { margin-top: 6px; }
.filter__dot[data-s=confirmed] { background: var(--st-ok); }
.filter__dot[data-s=tentative] { background: var(--st-pend); }
.filter__dot[data-s=cancelled] { background: var(--st-canc); }

/* the compact list: plain rows, the booking colour on the edge */
.erow, .erow:hover { background: var(--bg-2); }
.erow { border: 1px solid var(--line); border-left-width: 4px; }
.erow[style] { border-left-color: var(--bk); }
.erow.is-cancelled[style] { border-left-color: var(--st-canc); }
.cal .cal__ev[style]:not(.is-cancelled) { background: color-mix(in srgb, var(--bk) 16%, var(--bg-2)); border-left-color: var(--bk); }
.panel__head[style]:not([data-bk=cancelled]):not([data-bk=pending]) { --ph-bar: var(--bk); --ph-wash: color-mix(in srgb, var(--bk) 10%, var(--bg-2)); }
.erow__n { font-family: var(--sans); font-weight: 650; }

@media (max-width: 860px) {
  .cards .card, .card { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 14px 0 12px; }
  .card .card__day, .card.is-today .card__day { font-size: 32px; }
  .card .card__name { font-size: 19px; }
}
@media (max-width: 620px) {
  .cards .card, .card { grid-template-columns: 60px minmax(0, 1fr); }
  .card .card__date { margin-bottom: 0; }
  .card .card__bars { width: 100%; }
  .card__facts { font-size: 14px; }
}

/* ============ the event window ============ */
.panel__title h2, .panel__name { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.016em; }
.tab { font-size: 14px; }
.tab.is-active { color: var(--txt-1); }
.tab__n { background: var(--bg-4); }

/* ============ other views keep their layout ============ */
.cal__cell:nth-child(7n+1), .cal__cell:nth-child(7n) { background: var(--bg-1); }
.cal__cell:hover { background: var(--bg-3); }

/* ============ "Ticket": the date as a coloured stub along a dotted tear line ============ */
body.cards-ticket .card { --stub: 92px; border: 0;
  -webkit-mask: radial-gradient(circle 10px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 10px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  padding-left: 0; grid-template-columns: var(--stub) minmax(0, 1fr) auto; }
body.cards-ticket .card::before { left: var(--stub); top: 14px; bottom: 14px; width: 0; border-left: 2px dotted var(--line-strong); opacity: .5; background: none; }
body.cards-ticket .card:hover { box-shadow: none; }
body.cards-ticket .card .card__date { margin: -16px 0 0; border-radius: 14px 0 0 14px; background: var(--bk-bar); }
body.cards-ticket .card .card__day, body.cards-ticket .card .card__dow { color: #fff; }
body.cards-ticket .card .card__mon { color: rgb(255 255 255 / .85); }

@media (prefers-reduced-motion: reduce) {
  .card, .cards .card { transition: none; }
  .card:hover, .cards .card:hover { transform: none; }
}

/* ============ Settings (managers): booking types and event fields ============ */
.settings .section { margin-bottom: 28px; }
.settings .section__h .btn { margin-left: auto; }
.setlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.setrow.is-gone { opacity: .7; }
.setrow__sw { width: 22px; height: 22px; border-radius: 7px; background: var(--sw); flex: none; }
.setrow__n { font-size: 15px; font-weight: 650; color: var(--txt-1); min-width: 0; overflow-wrap: anywhere; }
.setrow__meta { font-size: 13px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.setrow__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.setrow__acts { margin-left: auto; display: flex; gap: 2px; }
.setrow .roles__move .iconbtn, .setrow__acts .iconbtn { width: 32px; height: 32px; }
.setrow .iconbtn:disabled { opacity: .3; cursor: default; }
.setsec { margin: 16px 0 8px; font: 600 15px/1.2 var(--serif); color: var(--txt-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; cursor: pointer; }
.swatch input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; width: 34px; height: 34px; border-radius: 10px; background: var(--sw); transition: transform .15s var(--lk-ease), box-shadow .15s var(--lk-ease); }
.swatch:hover span { transform: translateY(-1px); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--txt-1); }
.swatch input:focus-visible + span { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.swatch--any { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px dashed var(--line-strong); }
.swatch--any input[type=color] { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.swatch--any:has(input[type=radio]:checked) { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--txt-1); border-style: solid; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check { font-size: 14.5px; }
.check__sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sw); margin-right: 7px; vertical-align: 0; }
.check__n { font-style: normal; color: var(--txt-3); font-size: 13px; }
#bt-form, #cf-form, #dup-form { display: grid; gap: 16px; }
#bt-form .field, #cf-form .field, #dup-form .field { display: grid; gap: 6px; margin: 0; }

/* ============ v1.52.0 (Everett's notes, 2026-10-10) ============ */
/* the arrow everywhere; a click is what opens a value for editing */
.def__v, .def--edit .def__v:not(.is-locked), .panel__name:not(.is-locked), .row__t { cursor: default; }
/* the four time tiles look alike */
.deftiles .def, .deftiles .def[data-field=event_time] { background: var(--bg-2); border-color: var(--line); box-shadow: none; }
.deftiles .def[data-field=event_time] dt { color: var(--txt-3); }
/* crew see the status, they can't press it */
.statbar.is-static { pointer-events: none; }
.statbar.is-static .statbar__b:active { transform: none; }

/* compact rows wear the cards' colours */
.erows .erow, .erow { --bk-solid: var(--bk-flat, color-mix(in srgb, var(--bk-deep, #4E5B75) 88%, #000));
  background: var(--bk-solid); color: #fff; border: 0; box-shadow: none; }
.erow:hover { background-color: var(--bk-solid); filter: brightness(1.06); }
.erow.is-cancelled { --bk-solid: #9B2C2C; }
.erow.bk--work { --bk-solid: #4F5C67; }
.erow.is-pending { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .14) 0 12px, transparent 12px 24px); }
.erow .erow__date, .erow.is-today .erow__date { background: rgb(255 255 255 / .16); color: #fff; }
.erow .erow__mon, .erow .erow__day { color: #fff; }
.erow.is-today .erow__date { background: #fff; }
.erow.is-today .erow__mon, .erow.is-today .erow__day { color: var(--bk-solid); }
.erow .erow__w { color: rgb(255 255 255 / .82); }
.erow .erow__n { color: #fff; }
.erow.is-cancelled .erow__n { text-decoration: line-through; text-decoration-color: #fff; color: rgb(255 255 255 / .82); }
.erow .erow__end { gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--bg-2); color: var(--txt-1); }
.erow .erow__end .spill { margin-right: 0; height: 24px; font-size: 12.5px; }
.erow.is-open { box-shadow: 0 0 0 2px var(--brand-600); }

/* crew: the same coloured ticks; plain choices in white */
#crew-filter .filter, #filter-attention .filter { --fc: #fff; }
/* crew: Available / Maybe / Can't always showing on every card they can answer */
.card .avail { opacity: 1 !important; background: var(--bg-2); border-color: transparent; }
.card .avail .avail__b:not(.is-on) { display: inline-flex !important; }
.card .avail .avail__b:not(.is-on) { color: var(--txt-2); }

/* account settings */
.acct__info { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.acct__info div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 12px; }
.acct__info div + div { border-top: 1px solid var(--line); }
.acct__info dt { font-size: 13px; color: var(--txt-3); }
.acct__info dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--txt-1); overflow-wrap: anywhere; }
.acct__swatch span { color: #fff; font: 700 12px/1 var(--sans); }
.acct__pwrow { display: flex; align-items: center; gap: 10px; }
.acct__pwrow .iconbtn { margin-left: auto; }

/* settings: templates */
.ptag.is-off { text-decoration: line-through; opacity: .75; }
.checks--col { display: grid; gap: 8px; }
#tp-form, #ne-form { display: grid; gap: 16px; }
#tp-form .field, #ne-form .field { display: grid; gap: 6px; margin: 0; }

/* supervisor notes, like crew notes */
.note--sup { align-items: flex-start; }
.note--sup .note__body { white-space: pre-wrap; }

/* hours: what was worked against what was booked */
.hdiff { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.hdiff.is-up { color: #fff; background: var(--st-pend); }
.hdiff.is-down { color: var(--txt-1); background: var(--bg-4); }
.shift__add { width: 30px; height: 30px; flex: none; }
.crewsum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; color: var(--txt-2); }
.crewsum b { color: var(--txt-1); }

/* crew passing a shift */
.shift__offer { padding: 0 12px 10px 56px; }
.offer { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--txt-2); }
.offer .ico { width: 15px; height: 15px; }
.offer--in { color: var(--txt-1); }
.offers { display: grid; gap: 8px; margin: 14px 0 6px; }
.offers__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--st-pend); }
.offers__t { flex: 1; min-width: 0; font-size: 15px; color: var(--txt-1); }
.offers__t small { display: block; color: var(--txt-3); font-size: 13px; }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--txt-1); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.erow.is-cancelled, .erows .erow.is-cancelled { opacity: 1; }

/* ============ v1.53.0 (Everett's third round, 2026-10-10) ============ */
/* the event window's header: no coloured line, no wash; plain like the rest */
.panel__head, .panel__head[data-bk], .panel__head[style] { border-top: 0 !important; background: var(--bg-2) !important; }
/* colour circles are just colours */
.acct__swatch span { font-size: 0; }
/* roles: drag to order, rename with the pencil */
.rolelist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.rolelist__row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 6px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-2); cursor: grab; transition: box-shadow .15s var(--lk-ease), opacity .15s; }
.rolelist__row:hover { box-shadow: var(--lk-shadow); }
.rolelist__row.is-drag { opacity: .5; cursor: grabbing; }
.rolelist__grip { display: grid; place-items: center; width: 24px; color: var(--txt-3); flex: none; }
.rolelist__grip .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.rolelist__n { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; color: var(--txt-1); overflow-wrap: anywhere; }
.rolelist__in { flex: 1; min-width: 0; height: 36px; }
.rolelist__c { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; color: var(--txt-3); padding: 2px 8px; border-radius: 99px; background: var(--bg-4); }
.rolelist__row .iconbtn { width: 32px; height: 32px; flex: none; }
.rolelist__add { display: flex; gap: 8px; }
.rolelist__add .input { flex: 1; }
/* export */
.topbar__exp { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt-2); }
.topbar__exp:hover { background: var(--bg-3); color: var(--txt-1); }
#ex-form, #ask-form { display: grid; gap: 16px; }
#ex-form .field { display: grid; gap: 6px; margin: 0; }
/* client profile: a field switched on or off */
.setrow .iconbtn.is-on { color: var(--st-ok); }
.sidebar .filter input:checked { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .75); }

/* ============ v1.54.0: light booking colours (a clear yellow) wear dark writing ============
   app.js bkStyle() sets --bk-flat (the colour as it is) and --bk-on (dark) only for colours too light
   for white words; every other colour keeps white words on its deep shade, exactly as before. */
.card, .erow { --on-bk: var(--bk-on, #fff); }
.card.is-cancelled, .card.bk--work, .erow.is-cancelled, .erow.bk--work { --on-bk: #fff; }
.cards .card, .card, .erows .erow, .erow { color: var(--on-bk); }
.card .card__date, .card.is-today .card__date { background: color-mix(in srgb, var(--on-bk) 16%, transparent); }
.card .card__mon, .card .card__dow { color: color-mix(in srgb, var(--on-bk) 85%, transparent); }
.card .card__day, .card .card__name, .fact--time, .fact--time b, .card .mini__n { color: var(--on-bk); }
.card.is-today .card__date { background: var(--on-bk); }
.card__kicker, .card__kind, .card .card__pend { color: color-mix(in srgb, var(--on-bk) 88%, transparent); }
.card__kicker > span + span::before, .card__kind::before, .card .mini__fill, .card .mini__fill.is-done { background: var(--on-bk); }
.card__facts, .fact .ico, .fact--time .ico, .card .notech, .card .mini__l { color: color-mix(in srgb, var(--on-bk) 85%, transparent); }
.card .mini__track { background: color-mix(in srgb, var(--on-bk) 22%, transparent); }
.card.is-cancelled .card__name, .card.is-cancelled .card__name span { color: rgb(255 255 255 / .8); }
.erow .erow__date, .erow.is-today .erow__date { background: color-mix(in srgb, var(--on-bk) 16%, transparent); color: var(--on-bk); }
.erow .erow__mon, .erow .erow__day, .erow .erow__n { color: var(--on-bk); }
.erow.is-today .erow__date { background: var(--on-bk); }
.erow .erow__w { color: color-mix(in srgb, var(--on-bk) 82%, transparent); }
.erow.is-cancelled .erow__n { color: rgb(255 255 255 / .82); }

/* v1.54.0: our own dropdown (crew window role) */
.ddpick { position: relative; min-width: 0; }
.ddpick__b { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.ddpick__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddpick__b .ico { flex: none; width: 16px; height: 16px; color: var(--txt-3); transition: transform .15s var(--ease, ease); }
.ddpick__b[aria-expanded="true"] .ico { transform: rotate(180deg); }
.ddlist { position: fixed; z-index: 95; max-height: min(320px, 60vh); overflow-y: auto; padding: 5px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--sh-3); animation: pop .14s var(--ease, ease) both; }
.ddlist__o { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px;
  border-radius: 8px; font-size: 14px; color: var(--txt-1); text-align: left; }
.ddlist__o:hover, .ddlist__o:focus-visible { background: var(--bg-4); outline: none; }
.ddlist__o.is-on { font-weight: 650; color: var(--brand-700); }
.ddlist__o .ico { width: 16px; height: 16px; color: var(--brand-600); }
:root[data-theme="dark"] .ddlist__o.is-on { color: var(--brand-300); }
.techform .formrow { align-items: end; }

/* v1.54.0: sections that open and close (Crew tab) */
.foldbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.foldbtn__chev { width: 14px; height: 14px; transition: transform .15s var(--ease, ease); }
.foldbtn[aria-expanded="false"] .foldbtn__chev { transform: rotate(-90deg); }
.foldbtn--btn .foldbtn__chev { margin-left: 2px; margin-right: -2px; }
.foldbtn--btn[aria-expanded="false"] .foldbtn__chev { transform: rotate(-90deg); }
.section.is-folded > .section__h { margin-bottom: 0; }

/* v1.54.0: crew can't tick administrative jobs */
.row__box:disabled { cursor: default; }

/* v1.54.0: a week, month or year picked in the calendar shows as one band, like booking a flight */
.cal2__grid.is-range { column-gap: 0; }
.cal2__d.is-in { border-radius: 0; background: color-mix(in srgb, var(--brand-600) 14%, transparent); color: var(--txt-1); }
.cal2__d.is-in:nth-child(7n+1) { border-radius: 8px 0 0 8px; }
.cal2__d.is-in:nth-child(7n) { border-radius: 0 8px 8px 0; }
.cal2__d.is-in.is-start, .cal2__d.is-in.is-end { background: var(--brand-600); color: #fff; font-weight: 650; box-shadow: none; }
.cal2__d.is-in.is-start { border-radius: 8px 0 0 8px; }
.cal2__d.is-in.is-end { border-radius: 0 8px 8px 0; }
.cal2__d.is-in.is-start.is-end { border-radius: 8px; }
.cal2__d.is-in.is-out { opacity: .7; }
.cal2__grid.is-range .cal2__d.is-sel:not(.is-in) { background: none; color: var(--txt-1); }

/* v1.55.0: Download picks a month or a year straight away */
.cal2__grid--pick { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 2px; }
.cal2__grid--pick .cal2__d { height: 44px; font-size: 13.5px; }