/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE SCREENS (6 November 2026 redesign)

   Jermaine: "for the booking system, i want to change up the design, i like the left menu but … i want
   to completely change this up and make it look better, use the brick feed admin and app for
   inspiration, also use airbnb and look on /refero for inspiration".

   Every screen is rebuilt on a reference composition (REDESIGN-NOTES.md has the map):
     Today            Airbnb host Today · Brickfeed today(): greeting, the next event, reservation pills
                      over a row of cards, "At a glance"
     lists            Brickfeed Deals and Enquiries: search field, pills with counts, a quiet list or cards
     record pages     Brickfeed request(): tags, title, the facts grid, the card on the right with a
                      step track (IKEA a7993c03)
     Packages         Airbnb Listings (photo grid, status on the cover) and the listing editor (a545345c)
     Calendar         Airbnb host calendar (1fcc2d32): rounded day cells, today circled, an agenda beside
     Mail             Apple Mail (9 November 2026): mailboxes, the message list, the conversation; MAIL-NOTES.md
   The signature: EVERY EVENT IS A TICKET, a date stub in the look's accent fill with a perforated edge.

   ⛔ This file speaks the HOUSE tokens (--fog, --glass, --stroke, --volt …) so Midnight Glass draws it
      as it stands and every flat look draws it through looks/flat.css, which re-points those tokens.
      Geometry the house has no token for reads a look token with a house fallback: var(--lk-r-card, var(--r)).
   ⛔ The accent is a FILL here (the date stub, counts, today): it always carries --lk-acc-ink (never
      white) and is never used as words on the page.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root { --ease: cubic-bezier(.2, .8, .2, 1); --tk-ph: 158px; --sc-gap: 28px; }

/* ───────────────── motion: heading → lead → body, 60ms apart (reduced motion: ui.css stops it) ───────────────── */
.rise { animation: sc-rise .42s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes sc-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }
@keyframes sc-slide-l { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sc-slide-r { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ───────────────── the page ───────────────── */
.pg { display: flex; flex-direction: column; gap: var(--sc-gap); min-width: 0; }
.pg > * { min-width: 0; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pg-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.pg-kick { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--fog-50); }
.pg-title { margin: 0; font-family: var(--font-d); font-size: var(--lk-title-size, 34px); font-weight: var(--lk-title-weight, 700);
  letter-spacing: var(--lk-title-track, -0.03em); line-height: 1.08; color: var(--fog); text-wrap: balance; overflow-wrap: anywhere; }
.pg-sub { margin: 10px 0 0; max-width: 760px; font-size: 15.5px; line-height: 1.5; color: var(--fog-50); }
.pg-sub b { color: var(--fog); font-weight: 600; }
.pg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; margin-bottom: -12px;
  color: var(--fog); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.pg-back svg { width: 18px; height: 18px; }
@media (hover: hover) { .pg-back:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-family: var(--font-d); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fog); }
.sec-h .sec-sub { margin: 4px 0 0; color: var(--fog-50); font-size: 14px; }
.sec-more { color: var(--fog); font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.count-line { margin: 0; color: var(--fog-50); font-size: 14px; }
.sc-note { margin: 0; color: var(--fog-50); font-size: 13.5px; line-height: 1.55; }
.sc-note b { color: var(--fog); }

/* icons drawn by views.js */
svg.i { width: 20px; height: 20px; flex: none; stroke-width: 1.8; }

/* ───────────────── a card ───────────────── */
.cd { position: relative; min-width: 0; padding: 22px 24px; color: var(--fog);
  background: var(--lk-card, var(--glass)); border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, var(--r));
  box-shadow: var(--lk-shadow-card, none); }
html:not([data-look]) .cd { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.cd-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.cd-h h2, .cd-h h3 { margin: 0; font-family: var(--font-b); font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--fog); }
.cd-h .sec-more { font-size: 14px; }
.cd + .cd { margin-top: 0; }
.cd.flush { padding: 0; overflow: hidden; }
.side-card { box-shadow: var(--lk-shadow-lift, var(--shadow-sm)); }
html[data-look][data-theme="light"] .side-card { box-shadow: 0 6px 20px rgba(0, 0, 0, .09); border-color: var(--lk-line-2, var(--stroke)); }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ───────────────── buttons the screens add ───────────────── */
.ibtn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
  border: 1px solid var(--lk-line-2, var(--stroke-2)); background: var(--lk-card, transparent); color: var(--fog);
  transition: background .18s, border-color .18s, transform .12s; text-decoration: none; }
.ibtn svg { width: 18px; height: 18px; }
@media (hover: hover) { .ibtn:hover { border-color: var(--fog); } }
.ibtn:active { transform: scale(.96); }
.ibtn.on { background: var(--lk-sel, var(--fog)); border-color: var(--lk-sel, var(--fog)); color: var(--lk-sel-ink, var(--ink)); }
.ibtn:disabled { opacity: .35; cursor: default; }
.vt { display: inline-flex; gap: 8px; }
.btn.full { width: 100%; }
.lnk { background: none; border: 0; padding: 6px 0; min-height: 36px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--fog);
  text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.lnk.bad { color: var(--bad); }
.lnk svg { width: 16px; height: 16px; }

/* ───────────────── pills with counts (Brickfeed's status filters) ───────────────── */
.pillrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pillrow .fpill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 9px 17px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pillrow .fpill .n { font-weight: 500; }
.pillrow .lbl2 { font-size: 14px; font-weight: 600; color: var(--fog); margin-right: 6px; }
@media (max-width: 760px) {
  .pillrow.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .pillrow.scroll::-webkit-scrollbar { display: none; }
}

/* ───────────────── tags (status words that are not the status pill) ───────────────── */
.tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: var(--glass-2); color: var(--fog); white-space: nowrap; }
.tg svg { width: 14px; height: 14px; }
.tg.gold { background: var(--lk-acc-soft, var(--volt-soft)); color: var(--lk-acc-text, var(--volt)); }
.tg.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.tg.sample { background: var(--fog); color: var(--ink); }

/* the status on a photograph: always a white pill (it sits on a picture, in every look) */
.cv-pill { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px);
  padding: 5px 11px 5px 10px; border-radius: 999px; background: #ffffff; color: #222222; font: 600 12.5px/1.25 var(--font-b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot, #a87b04); }
.cv-pill.r { left: auto; right: 12px; }
.cv-pill.b { top: auto; bottom: 12px; }
.d-new { --dot: #a87b04; } .d-quoted { --dot: #2f55c4; } .d-deposit { --dot: #a15c00; } .d-confirmed { --dot: #16794a; }
.d-completed { --dot: #6a4bc4; } .d-cancelled { --dot: #c2362f; } .d-off { --dot: #6a6a6a; }

/* money with the pence raised (Mercury's signature, LOOKS-NOTES request 4) */
.pence { font-size: .6em; vertical-align: .62em; margin-left: .04em; letter-spacing: 0; }
.big-money { font-family: var(--font-d); font-weight: 700; letter-spacing: -0.03em; color: var(--fog); font-variant-numeric: tabular-nums; }

/* avatars */
.av-c { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px/1 var(--font-b);
  background: var(--glass-2); color: var(--fog); }
.av-c.lg { width: 56px; height: 56px; font-size: 19px; }
.av-c.ink { background: var(--fog); color: var(--ink); }
.av-stack { display: inline-flex; align-items: center; }
.av-stack .av-c { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px var(--lk-card, #15171d); }
.av-stack .av-c + .av-c { margin-left: -8px; }

/* ───────────────── floating-label fields (Airbnb's boxed fields) ───────────────── */
.ffield { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 58px; padding: 8px 14px 9px;
  border: 1px solid var(--lk-field, var(--stroke-2)); border-radius: var(--lk-r-field, 12px); background: var(--lk-sunk, rgba(255, 255, 255, .04));
  cursor: text; transition: border-color .15s, box-shadow .15s; }
.ffield > span { font-size: 12.5px; line-height: 1.2; color: var(--fog-50); font-weight: 500; }
.ffield > span .req { color: var(--bad); }
.ffield input, .ffield select, .ffield textarea { width: 100%; min-width: 0; margin: 0; padding: 3px 0 0; border: 0; outline: 0; background: transparent;
  color: var(--fog); font: 500 15.5px/1.35 var(--font-b); box-shadow: none; }
.ffield textarea { resize: vertical; min-height: 84px; }
.ffield input::placeholder, .ffield textarea::placeholder { color: var(--fog-50); opacity: 1; font-weight: 400; }
.ffield:focus-within { border-color: var(--lk-focus, var(--volt)); box-shadow: 0 0 0 1px var(--lk-focus, var(--volt)); }
.ffield.sel select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; }
.ffield.sel::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -2px; pointer-events: none;
  border-right: 2px solid var(--fog); border-bottom: 2px solid var(--fog); transform: translateY(-50%) rotate(45deg); }
.ffield select option { background: var(--lk-pop, #12151d); color: var(--fog); }
.ffield.mono textarea { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fgrid .full { grid-column: 1 / -1; }
.fsec { margin: 26px 0 12px; font-family: var(--font-b); font-size: 16px; font-weight: 650; color: var(--fog); }
.fsec:first-child { margin-top: 0; }
.form-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.toolbar.three { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto; }
.toolbar .seg { align-self: center; }

/* ═══════════════════════════════ THE TICKET (the signature) ═══════════════════════════════
   A card with a photograph, a perforated edge and a date stub. The notches are cut with a mask at the
   photograph's foot (--tk-ph), so they show the page through in every look. */
.tk { --tk-bg: var(--lk-card, rgba(17, 19, 26, .84)); position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--tk-bg); border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, var(--r)); color: var(--fog);
  overflow: hidden; text-decoration: none; isolation: isolate;
  -webkit-mask: radial-gradient(circle 9px at 0 var(--tk-ph), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--tk-ph), #0000 97%, #000 100%) top right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--tk-ph), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--tk-ph), #0000 97%, #000 100%) top right / 51% 100% no-repeat; }
html:not([data-look]) .tk { backdrop-filter: none; }
.tk-wrap { min-width: 0; transition: filter .25s var(--ease), transform .25s var(--ease); }
@media (hover: hover) {
  .tk-wrap:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .14)); }
  .tk-wrap:hover .tk-photo::before { transform: scale(1.045); }
}
.tk-photo { position: relative; flex: none; height: var(--tk-ph); overflow: hidden; background: var(--glass-2); }
.tk-photo::before { content: ''; position: absolute; inset: 0; background: var(--tk-img, none) center / cover no-repeat; transition: transform .6s var(--ease); }
.tk-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 38%); pointer-events: none; }
.tk-perf { position: relative; flex: none; height: 0; margin: 0 14px; border-top: 1.5px dashed var(--lk-line-2, var(--stroke-2)); }
.tk-main { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 4px; min-width: 0; }
.tk-date { flex: none; width: 54px; padding: 7px 0 8px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1;
  background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); text-align: center; }
.tk-date small { font: 700 10.5px/1 var(--font-b); letter-spacing: .06em; text-transform: uppercase; }
.tk-date b { font: 800 23px/1 var(--font-d); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tk-date span { font: 700 11px/1 var(--font-b); letter-spacing: .04em; text-transform: uppercase; }
.tk-date.tbc { background: var(--glass-2); color: var(--fog); }
.tk-date.tbc b { font-size: 15px; padding: 6px 0 4px; }
.tk-info { min-width: 0; flex: 1; }
.tk-name { margin: 0; font: 650 16px/1.3 var(--font-b); letter-spacing: -0.01em; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-name a { color: inherit; text-decoration: none; }
.tk-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tk-name a:focus-visible { outline: none; }
.tk-name a:focus-visible::after { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: -4px; border-radius: inherit; }
.tk-info p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--fog-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 16px; margin-top: auto; min-width: 0; }
.tk-foot .tk-rel { font-size: 13px; font-weight: 600; color: var(--fog-50); white-space: nowrap; }
.tk-foot .tk-next { font-size: 13.5px; font-weight: 600; color: var(--fog); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-foot .btn { position: relative; z-index: 2; pointer-events: none; }

/* the row of tickets on Today (scroll-snap; arrows on a desk) */
.rowcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, calc((100% - 3 * 18px) / 4)); gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 2px; padding: 2px 2px 14px; margin: -2px -2px -10px;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rowcards:hover { scrollbar-color: color-mix(in srgb, var(--fog) 22%, transparent) transparent; }
.rowcards > * { scroll-snap-align: start; }
.rc-nav { display: inline-flex; gap: 8px; }
.rc-nav .ibtn { width: 34px; height: 34px; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 18px; }

/* the hero ticket: the next event, the photograph on the left, the stub on the right */
.tk.hero { --tk-px: 57%; flex-direction: row; min-height: 340px;
  -webkit-mask: radial-gradient(circle 12px at var(--tk-px) 0, #0000 97%, #000 100%) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at var(--tk-px) 100%, #0000 97%, #000 100%) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at var(--tk-px) 0, #0000 97%, #000 100%) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at var(--tk-px) 100%, #0000 97%, #000 100%) bottom / 100% 51% no-repeat; }
.tk.hero .tk-photo { width: var(--tk-px); height: auto; min-height: 100%; }
.tk.hero .tk-photo::before { animation: sc-drift 24s ease-in-out infinite alternate; }
.tk.hero .tk-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .66) 100%); }
.tk.hero .tk-perf { width: 0; height: auto; margin: 18px 0; border-top: 0; border-left: 1.5px dashed var(--lk-line-2, var(--stroke-2)); }
.nx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 24px; }
.nx-kick { position: absolute; z-index: 2; left: 18px; bottom: 16px; color: #ffffff; font: 700 13px/1.2 var(--font-b); letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.nx-kick b { display: block; font: 800 26px/1.1 var(--font-d); letter-spacing: -0.02em; }
.nx-date { display: flex; align-items: center; gap: 16px; }
.nx-date .tk-date { width: 76px; padding: 10px 0 11px; border-radius: 16px; }
.nx-date .tk-date b { font-size: 36px; }
.nx-date .tk-date small, .nx-date .tk-date span { font-size: 12px; }
.nx-when { min-width: 0; }
.nx-when b { display: block; font: 700 19px/1.25 var(--font-d); letter-spacing: -0.02em; color: var(--fog); }
.nx-when span { display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font: 700 12.5px/1.3 var(--font-b);
  background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); }
.nx-name { margin: 2px 0 0; font: 700 26px/1.15 var(--font-d); letter-spacing: -0.025em; color: var(--fog); overflow-wrap: anywhere; }
.nx-name a { color: inherit; text-decoration: none; }
@media (hover: hover) { .nx-name a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.nx-lines { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nx-lines li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--fog-70); min-width: 0; }
.nx-lines li svg { width: 18px; height: 18px; color: var(--fog-50); margin-top: 1px; }
.nx-lines li span { min-width: 0; overflow-wrap: anywhere; }
.nx-money { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 0; border-top: 1px solid var(--stroke); margin-top: auto; }
.nx-money span { font-size: 13.5px; color: var(--fog-50); }
.nx-money b { font-size: 24px; }
.nx-act { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 26px 28px; }

/* ───────────────── Today: reservation pills over the cards, then "At a glance" ───────────────── */
.today-empty { grid-column: 1 / -1; }
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.split { display: flex; gap: 3px; height: 12px; margin: 4px 0 18px; border-radius: 999px; overflow: hidden; background: var(--glass-2); }
.split i { display: block; height: 100%; min-width: 4px; }
.lg-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lg-rows li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14.5px; color: var(--fog); border-top: 1px solid var(--stroke); }
.lg-rows li:first-child { border-top: 0; }
.lg-rows li > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lg-rows li a, .lg-rows li .lab { flex: 1; min-width: 0; color: var(--fog); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-rows li .lab { white-space: normal; overflow: visible; line-height: 1.35; padding: 8px 0; text-wrap: pretty; }
@media (hover: hover) { .lg-rows li a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.lg-rows li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-rows li small { color: var(--fog-50); font-size: 13px; min-width: 38px; text-align: right; }
.gl-big { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.gl-big .big-money { font-size: 34px; line-height: 1.05; }
.gl-big small { color: var(--fog-50); font-size: 13.5px; }
.mini-rows { display: flex; flex-direction: column; }
.mini-r { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; border-top: 1px solid var(--stroke); color: var(--fog); text-decoration: none; }
.mini-r:first-child { border-top: 0; }
.mini-r .t { min-width: 0; flex: 1; }
.mini-r .t b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-r .t small { display: block; color: var(--fog-50); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .mini-r:hover .t b { text-decoration: underline; text-underline-offset: 3px; } }

/* ───────────────── lists (Brickfeed's quiet table; cards on a phone) ───────────────── */
.lst { border-top: 1px solid var(--stroke); min-width: 0; }
.lst-h, .lst-r { display: grid; grid-template-columns: var(--cols, 36px minmax(220px, 2.2fr) 1.2fr 1.3fr 1fr 110px 140px); gap: 16px; align-items: center;
  padding: 12px 10px; border-bottom: 1px solid var(--stroke); min-width: 0; }
.lst-h { padding-top: 11px; padding-bottom: 11px; font-size: 13px; font-weight: 600; color: var(--fog-50); }
.lst-r { position: relative; min-height: 72px; transition: background .15s; }
@media (hover: hover) { .lst-r:hover { background: var(--glass-2); } }
.lst-r > * { min-width: 0; }
.lst-r .z, .lst-r input[type="checkbox"], .lst-r > label.c-cb { position: relative; z-index: 2; }
.lst .r { text-align: right; justify-self: end; }
.c-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.c-main > div { min-width: 0; }
.c-main .thumb { width: 52px; height: 52px; flex: none; border-radius: 12px; object-fit: cover; background: var(--glass-2); display: block; }
.lst-link { color: var(--fog); font-size: 15px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.lst-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lst-link:focus-visible { outline: none; }
.lst-link:focus-visible::after { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) { .lst-r:hover .lst-link { text-decoration: underline; text-underline-offset: 3px; } }
.lst small, .lst .sm { display: block; margin-top: 2px; color: var(--fog-50); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst .c-txt { font-size: 14.5px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst .c-date b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fog); white-space: nowrap; }
.lst .money { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fog); }
.lst .c-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.lst-empty { padding: 8px 0 0; }
@media (max-width: 860px) {
  .lst { border-top: 0; display: flex; flex-direction: column; gap: 12px; }
  .lst-h { display: none; }
  .lst-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; min-height: 0;
    border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, var(--r)); background: var(--lk-card, var(--glass)); }
  .lst-r > .c-main { flex: 1 1 100%; order: 0; }
  .lst-r > .c-opt { display: none; }
  .lst-r > .c-meta { order: 1; font-size: 13.5px; }
  .lst-r > .c-meta b, .lst-r > .c-meta small { display: inline; margin: 0 6px 0 0; }
  .lst-r > .c-end { order: 2; margin-left: auto; text-align: right; }
  .lst-r > .c-cb { order: -1; flex: none; }
  .lst-r:has(> .c-cb) > .c-main { flex: 1 1 calc(100% - 40px); }
  .lst-r:has(> .c-cb) > .c-meta { margin-left: 32px; }
}

/* ───────────────── record pages (Brickfeed's request page) ───────────────── */
.rec-head { display: flex; flex-direction: column; gap: 12px; }
.rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 392px); gap: 32px; align-items: start; }
.rec-main, .rec-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rec-photo { position: relative; margin: 0; height: 280px; border-radius: var(--lk-r-card, var(--r)); overflow: hidden; background: var(--glass-2); }
.rec-photo::before { content: ''; position: absolute; inset: 0; background: var(--tk-img, none) center / cover no-repeat; animation: sc-drift 30s ease-in-out infinite alternate; }
.rec-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .58) 100%); }
.rec-photo figcaption { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-photo figcaption .cv-pill { position: static; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin: 0; }
.fact { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--stroke); min-width: 0; }
.fact > svg { width: 22px; height: 22px; color: var(--fog-70); margin-top: 3px; }
.fact > div { min-width: 0; }
.fact dt { margin: 0; font-size: 13.5px; color: var(--fog-50); }
.fact dd { margin: 3px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--fog); overflow-wrap: anywhere; }
.fact dd a { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; }
.fact dd .tg { margin-left: 6px; vertical-align: 1px; }
.notes-call { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--lk-r-tile, 12px); background: var(--lk-acc-soft, var(--volt-soft)); color: var(--fog); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-call b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--lk-acc-text, var(--volt)); }

/* the ticket on a record page: the date stub, the perforation, the step track */
.side-tk { padding: 0; overflow: hidden;
  -webkit-mask: radial-gradient(circle 10px at 0 104px, #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 104px, #0000 97%, #000 100%) top right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 104px, #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 104px, #0000 97%, #000 100%) top right / 51% 100% no-repeat; }
html:not([data-look]) .side-tk { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(17, 19, 26, .9); }
/* Midnight Glass in daylight: the tickets take its light glass (a solid near-white, so the words keep their contrast over the photo wall) */
html:not([data-look])[data-theme="light"] .tk { --tk-bg: rgba(255, 255, 255, .94); }
html:not([data-look])[data-theme="light"] .side-tk { background: rgba(255, 255, 255, .96); }
html:not([data-look])[data-theme="light"] .av-stack .av-c { box-shadow: 0 0 0 2px #ffffff; }
html:not([data-look])[data-theme="light"] .ffield select option { background: #ffffff; }
/* Midnight's page head sits on its photo wall: a soft halo keeps the words readable over the busy picture */
html:not([data-look])[data-theme="light"] .pg-head :is(.pg-kick, .pg-title, .pg-sub, .cal-h h1) { text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 1px 2px rgba(255, 255, 255, .85); }
html:not([data-look]):not([data-theme="light"]) .pg-head :is(.pg-kick, .pg-title, .pg-sub) { text-shadow: 0 1px 16px rgba(0, 0, 0, .6); }
.sd-head { height: 104px; display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.sd-head .tk-date { width: 62px; }
.sd-head .tk-date b { font-size: 28px; }
.sd-when { min-width: 0; }
.sd-when b { display: block; font: 700 17px/1.25 var(--font-d); letter-spacing: -0.015em; color: var(--fog); text-wrap: balance; }
.sd-when small { display: block; margin-top: 3px; color: var(--fog-50); font-size: 13.5px; }
.side-tk .tk-perf { margin: 0 16px; }
.sd-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.sd-body h3 { margin: 0; font: 650 16px/1.3 var(--font-b); color: var(--fog); }
.sd-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sd-money div { min-width: 0; padding: 10px 12px; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); }
.sd-money small { display: block; font-size: 12.5px; color: var(--fog-50); }
.sd-money b { display: block; margin-top: 3px; font: 700 17px/1.2 var(--font-d); letter-spacing: -0.02em; color: var(--fog); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sd-money .due { background: var(--lk-acc-soft, var(--volt-soft)); }
.sd-money .due small { color: var(--fog-70); }
.sd-foot { display: flex; gap: 6px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--stroke); }

/* the step track (IKEA a7993c03 in Brickfeed): done ticked, the current one filled and its next step under it */
.steps { margin: 0; padding: 0; list-style: none; }
.stp { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.stp:last-child { padding-bottom: 0; }
.stp::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--stroke-2); }
.stp:last-child::before { display: none; }
.stp.done::before { background: var(--fog); }
.stp-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--lk-field, var(--stroke-2)); background: var(--lk-card, transparent); }
.stp-dot svg { width: 15px; height: 15px; stroke-width: 3; }
.stp.done .stp-dot { background: var(--fog); border-color: var(--fog); color: var(--ink); }
.stp.now .stp-dot { background: var(--lk-acc-fill, #f5c542); border-color: var(--lk-acc-fill, #f5c542); animation: sc-pop .52s var(--ease) .25s backwards; }
.stp.now .stp-dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--lk-acc-ink, #1a1407); }
.stp.stop .stp-dot { background: var(--bad); border-color: var(--bad); color: #ffffff; }
/* a quick status change: the steps that just completed pop in turn, their line grows down, the new step's action rises */
.stp.just .stp-dot { animation: sc-pop .5s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 160ms + 80ms); }
.stp.just.done::before { transform-origin: top; animation: sc-grow .45s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 160ms + 180ms); }
.stp.just .stp-do { animation: sc-rise .4s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 160ms + 240ms); }
.stp-t { padding-top: 3px; font-size: 15px; font-weight: 600; color: var(--fog); }
.stp:not(.done):not(.now):not(.stop) .stp-t { font-weight: 500; color: var(--fog-50); }
.stp-s { margin-top: 2px; font-size: 13px; color: var(--fog-50); }
.stp-do { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stp-do p { margin: 0; font-size: 14px; color: var(--fog-70); line-height: 1.5; }

/* a timeline (activity, engagement) */
.tline2 { margin: 0; padding: 0; list-style: none; }
.tline2 li { position: relative; padding: 0 0 16px 22px; font-size: 14px; color: var(--fog-70); }
.tline2 li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--fog-50); }
.tline2 li::after { content: ''; position: absolute; left: 7px; top: 19px; bottom: 2px; width: 2px; background: var(--stroke); }
.tline2 li:last-child::after { display: none; }
.tline2 li b { color: var(--fog); font-weight: 600; }
.tline2 li small { display: block; margin-top: 2px; color: var(--fog-50); font-size: 12.5px; }

/* line items */
.items { margin: 0; padding: 0; list-style: none; }
.items li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--stroke); }
.items li:last-child { border-bottom: 0; }
.items .thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--glass-2); }
.items .t { flex: 1; min-width: 0; }
.items .t b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fog); }
.items .t small { display: block; color: var(--fog-50); font-size: 13px; }
.items .m { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fog); white-space: nowrap; }
.totals { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; font-size: 14.5px; }
.totals dt { color: var(--fog-50); }
.totals dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fog); }
.totals .g { padding-top: 10px; border-top: 1px solid var(--stroke); font-size: 16px; color: var(--fog); font-weight: 650; }

/* ───────────────── Packages: Airbnb's listings grid ───────────────── */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 30px 20px; }
.lcard { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--fog); text-decoration: none; }
.lcard .ph { position: relative; aspect-ratio: 1 / .95; border-radius: var(--lk-r-card, 16px); overflow: hidden; background: var(--glass-2); }
.lcard .ph::before { content: ''; position: absolute; inset: 0; background: var(--tk-img, none) center / cover no-repeat; transition: transform .6s var(--ease); }
@media (hover: hover) { .lcard:hover .ph::before { transform: scale(1.045); } .lcard:hover .lc-t a { text-decoration: underline; text-underline-offset: 3px; } }
.lc-t { margin: 0; font: 650 15.5px/1.3 var(--font-b); color: var(--fog); }
.lc-t a { color: inherit; text-decoration: none; }
.lc-t a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lc-t a:focus-visible { outline: none; }
.lc-t a:focus-visible::after { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 3px; border-radius: 16px; }
.lc-m { margin: -6px 0 0; color: var(--fog-50); font-size: 14px; line-height: 1.45; }
.lc-p { margin: -4px 0 0; font-size: 14.5px; color: var(--fog); }
.lc-p b { font-weight: 650; }
.lcard.new .ph { display: grid; place-items: center; background: transparent; border: 1.5px dashed var(--lk-line-2, var(--stroke-2)); }
.lcard.new .ph::before { display: none; }
.lcard.new .ph span { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fog); font-weight: 600; }
.lcard.new .ph svg { width: 34px; height: 34px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--glass-2); }

/* the listing editor (Airbnb a545345c): the sections on the left, the one being edited on the right */
.ed { display: grid; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); gap: 36px; align-items: start; }
.ed-list { display: flex; flex-direction: column; gap: 12px; }
.ed-sec { position: relative; display: block; width: 100%; text-align: left; padding: 16px 44px 16px 18px; cursor: pointer; font: inherit; color: var(--fog);
  background: var(--lk-card, var(--glass)); border: 1px solid var(--lk-line-2, var(--stroke-2)); border-radius: var(--lk-r-card, 16px);
  box-shadow: var(--lk-shadow-card, none); transition: border-color .15s, box-shadow .15s; }
.ed-sec::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--fog-50); border-top: 2px solid var(--fog-50); transform: rotate(45deg); }
@media (hover: hover) { .ed-sec:hover { border-color: var(--fog); } }
.ed-sec.on { border-color: var(--fog); box-shadow: 0 0 0 1px var(--fog); }
.ed-sec small { display: block; font-size: 13px; color: var(--fog-50); }
.ed-sec b { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 600; color: var(--fog); overflow-wrap: anywhere; }
.ed-sec .ed-v { display: block; margin-top: 4px; font-size: 14px; color: var(--fog-70); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ed-sec .ed-ph { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 12px; background: var(--glass-2); }
.ed-sec .ed-ph img { width: 56px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.ed-sec .ed-ph span { font-size: 13.5px; color: var(--fog-70); }
.ed-pane { position: sticky; top: 92px; min-width: 0; animation: sc-fade .22s var(--ease); }
.ed-pane .cd { padding: 26px 28px; }
.ed-pane h2 { margin: 0 0 6px; font: 700 24px/1.15 var(--font-d); letter-spacing: -0.02em; color: var(--fog); }
.ed-pane .sc-note { margin-bottom: 18px; }
.ed-preview { max-width: 380px; margin: 4px auto 0; }
.ed-preview .lcard { pointer-events: none; }
.ed-incl { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ed-incl li { display: flex; gap: 9px; font-size: 14px; color: var(--fog-70); }
.ed-incl li svg { width: 16px; height: 16px; color: var(--good); margin-top: 2px; }
.ed-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 12px; }
.ed-gallery button { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; border: 2px solid transparent; padding: 0; overflow: hidden; cursor: pointer; background: var(--glass-2); }
.ed-gallery button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-gallery button.on { border-color: var(--fog); }
.ed-gallery button.on::after { content: ''; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--fog); box-shadow: 0 0 0 2px #ffffff; }
.ed-big { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--glass-2); }
.ed-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-saver { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ───────────────── Websites: what both websites show (the catalogue editor, 7 November 2026) ─────────────────
   The list is the Packages grid; a product is the listing editor above. Only house tokens, so every look wears it. */
.cat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cat-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.cat-live.on { border-color: var(--lk-acc, var(--volt)); }
.cat-live-t { min-width: 0; flex: 1 1 360px; }
.cat-live-t h2 { margin: 10px 0 4px; font: 650 19px/1.25 var(--font-b); letter-spacing: -0.01em; color: var(--fog); overflow-wrap: anywhere; }
.cat-live-t h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cat-live-t h2 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.cat-live-t .sc-note, .cat-live-a .sc-note { margin: 0; }
.cat-live-a { flex: none; }
.cat-up { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.cat-up .sc-note { margin: 0; }
.cat-gi { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--glass-2); }
.cat-gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-gx { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.74); color: #ffffff; }
.cat-gx svg { width: 15px; height: 15px; }
.cat-gx:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
.cat-rows { display: flex; flex-direction: column; gap: 10px; }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 14px 16px; color: var(--fog); text-decoration: none;
  border: 1px solid var(--lk-line-2, var(--stroke-2)); border-radius: 14px; background: var(--lk-card, var(--glass)); }
@media (hover: hover) { .cat-row:hover { border-color: var(--fog); } }
.cat-row:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 2px; }
.cat-row-t { min-width: 0; }
.cat-row-t b { display: block; font-weight: 650; overflow-wrap: anywhere; }
.cat-row-t small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--fog-70); }
.cat-row-p { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-site { display: grid; gap: 12px; }
.cat-site-ph { aspect-ratio: 16 / 9; border-radius: 14px; background: var(--tk-img, none) center / cover no-repeat, var(--glass-2); }
.cat-site h3 { margin: 4px 0 0; font: 700 22px/1.2 var(--font-d); letter-spacing: -0.02em; color: var(--fog); }
.cat-site p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fog-70); }
.cat-site .cat-tagl { color: var(--fog); font-weight: 550; }
.cat-site .ed-incl { margin-top: 2px; }
.cat-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.cat-pk { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--lk-line-2, var(--stroke-2)); border-radius: 14px; background: var(--lk-card, var(--glass)); }
.cat-pk h4 { margin: 8px 0 2px; font: 650 15.5px/1.3 var(--font-b); color: var(--fog); }
.cat-pk h4:first-child { margin-top: 0; }
.cat-pk-p { display: block; font: 700 22px/1.2 var(--font-d); color: var(--fog); font-variant-numeric: tabular-nums; }
.cat-pk ul { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--fog-70); }
.cat-chk { display: grid; gap: 12px; max-height: min(56vh, 520px); overflow: auto; padding-right: 4px; margin-top: 6px; }
.cat-chk section { padding: 14px 16px; border: 1px solid var(--lk-line-2, var(--stroke-2)); border-radius: 14px; }
.cat-chk h3 { margin: 0 0 8px; font: 650 15.5px/1.3 var(--font-b); color: var(--fog); }
.cat-chk ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cat-chk li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fog-70); }
.cat-chk li b { color: var(--fog); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-chk-sum { margin: 14px 0 0; font-weight: 600; color: var(--fog); }
.cat-done { padding: 8px 4px; text-align: center; }
.cat-done > svg { width: 44px; height: 44px; padding: 10px; box-sizing: content-box; border-radius: 50%; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.cat-done h2 { margin-top: 14px; }
.cat-done .ed-saver { justify-content: center; }
@media (max-width: 640px) {
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-row .tg { grid-column: 1 / -1; justify-self: start; }
  .cat-live-a { flex: 1 1 100%; }
  .cat-live-a .btn { width: 100%; justify-content: center; }
  /* one scroll on a phone: read every price, then the buttons (no list scrolling inside a scrolling modal) */
  .cat-chk { max-height: none; overflow: visible; padding-right: 0; }
  /* the dialog's buttons stack on a phone, the main one on top: side by side they spilled out and clipped "Back" */
  #cat-flow .ed-saver { flex-direction: column-reverse; align-items: stretch; }
  #cat-flow .ed-saver .btn { justify-content: center; }
}

/* ───────────────── the calendar (Airbnb's month: rounded day cells, today circled) ───────────────── */
.calx { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cal-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cal-h h1 { margin: 0; font-family: var(--font-d); font-size: var(--lk-title-size, 34px); font-weight: var(--lk-title-weight, 700); letter-spacing: var(--lk-title-track, -0.03em); color: var(--fog); }
.cal-h .ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.cal-wd span { text-align: center; font-size: 13px; font-weight: 600; color: var(--fog-50); }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
#cal-grid { touch-action: pan-y; }   /* the page still scrolls; a sideways swipe changes the month */
.cal-g.go-l { animation: sc-slide-l .26s var(--ease); }
.cal-g.go-r { animation: sc-slide-r .26s var(--ease); }
.cal-d { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; min-height: 112px; padding: 8px; text-align: left;
  font: inherit; color: var(--fog); cursor: pointer; background: var(--lk-card, var(--glass)); border: 1px solid var(--lk-line, var(--stroke));
  border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.cal-d.pad { visibility: hidden; pointer-events: none; }
@media (hover: hover) { .cal-d:hover { border-color: var(--fog-50); } }
.cal-d.sel { border-color: var(--fog); box-shadow: 0 0 0 1px var(--fog); }
.cal-d.past { background: var(--glass-2); }
.cal-d.past .n { color: var(--fog-50); }
.cal-d .n { display: inline-grid; place-items: center; align-self: flex-start; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-d.today .n { background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); }
.cal-d.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px); }
.cal-d .blk { font-size: 11.5px; font-weight: 600; color: var(--fog-50); }
.ce { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 7px; border-radius: 7px; background: var(--glass-2); font-size: 12px; font-weight: 600; color: var(--fog); }
.ce i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot, var(--fog-50)); }
.ce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-more { font-size: 11.5px; font-weight: 600; color: var(--fog-50); padding-left: 4px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--fog-50)); }
.agenda { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ag-day { display: flex; flex-direction: column; gap: 8px; }
.ag-day > h3 { margin: 0; font: 650 14.5px/1.3 var(--font-b); color: var(--fog); }
.ag-day > h3 small { color: var(--fog-50); font-weight: 500; margin-left: 6px; }
.ag-r { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--lk-line, var(--stroke)); background: var(--lk-card, var(--glass)); color: var(--fog); text-decoration: none; min-width: 0; }
@media (hover: hover) { .ag-r:hover { border-color: var(--fog-50); } }
.ag-r img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; flex: none; }
.ag-r .t { min-width: 0; flex: 1; }
.ag-r .t b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-r .t small { display: block; color: var(--fog-50); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--fog-70); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ═════ MAIL: the mail client on Apple Mail's compositions (9 November 2026; MAIL-NOTES.md) ═════
   A desk draws Mail on a Mac: mailboxes · the message list · the conversation with its toolbar · the details the
   system adds. A tablet draws Mail on an iPad (the list and the conversation, the mailboxes as a drawer). A phone
   draws Mail on iPhone: Mailboxes → the list → the message, a bar at the foot, swipe actions, the compose sheet
   (Refero 04fb3309). The earlier screen (Missive's layout, .ib3 / .ib4) is gone.

   ⛔ The composition is Apple Mail's; the COLOUR is each look's own tokens (--lk-* with the house token behind it),
      so all seven looks draw it. The type is the system face: SF Pro on a Mac, an iPhone and an iPad; Segoe UI on
      Windows and Roboto on Android stand in, as they do in any app that asks for the system font.
   ⛔ The accent is a FILL here too (the unread dot, the counts, the send button): it carries --lk-acc-ink.
   ⛔ The frame is NOT a .cd, so the 860px ".cd { padding: 18px }" rule cannot pad it (the fault branch ticket-inset
      mends for .ib3). */
.mx, .mx-menu, .cmp-mc, .mx-lb {
  --mx-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mx-ink: var(--lk-ink, var(--fog)); --mx-ink2: var(--lk-ink-2, var(--fog-70)); --mx-mute: var(--lk-mute, var(--fog-50));
  --mx-line: var(--lk-line, var(--stroke)); --mx-line2: var(--lk-line-2, var(--stroke-2));
  --mx-card: var(--lk-card, var(--panel)); --mx-soft: var(--lk-card-2, var(--glass-2)); --mx-pop: var(--lk-pop, var(--ink));
  --mx-sel: var(--lk-sel, var(--fog)); --mx-sel-ink: var(--lk-sel-ink, var(--ink));
  --mx-acc: var(--lk-acc-fill, var(--volt)); --mx-acc-ink: var(--lk-acc-ink, var(--volt-ink)); --mx-acc-soft: var(--lk-acc-soft, var(--volt-soft)); --mx-acc-text: var(--lk-acc-text, var(--volt));
  --mx-act: var(--lk-act, var(--volt)); --mx-act-ink: var(--lk-act-ink, var(--volt-ink));
  font-family: var(--mx-font);
}
.mx-pg { gap: 12px; container-type: inline-size; container-name: mxw; }
.mx { position: relative; display: grid; grid-template-columns: 228px minmax(300px, 372px) minmax(0, 1fr) 300px; height: var(--mx-h, calc(100vh - 150px)); min-height: 480px;
  color: var(--mx-ink); background: var(--mx-card); border: 1px solid var(--mx-line); border-radius: var(--lk-r-card, 16px); overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
html:not([data-look]) .mx { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.mx > .mx-side { grid-column: 1; } .mx > .mx-list { grid-column: 2; } .mx > .mx-read { grid-column: 3; } .mx > .mx-det { grid-column: 4; }
.mx[data-side="0"] { grid-template-columns: 0 minmax(300px, 372px) minmax(0, 1fr) 300px; } .mx[data-side="0"] > .mx-side { display: none; }
.mx[data-det="0"] { grid-template-columns: 228px minmax(300px, 372px) minmax(0, 1fr) 0; } .mx[data-det="0"] > .mx-det { display: none; }
.mx[data-side="0"][data-det="0"] { grid-template-columns: 0 minmax(300px, 392px) minmax(0, 1fr) 0; }
.mx > * { min-width: 0; min-height: 0; }
.mx-pg .mx h1, .mx-pg .mx h2, .mx-pg .mx h3, .modal.cmpwin .cmp-mc h2, .modal .mx-lb b { font-family: var(--mx-font); letter-spacing: -0.01em; color: var(--mx-ink); }
.mx button, .mx input, .mx-menu button, .cmp-mc button, .cmp-mc input, .cmp-mc textarea { font-family: var(--mx-font); }
.mx .sr, .cmp-mc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mx-grow { flex: 1 1 auto; min-width: 0; }
.mx-scrim { display: none; }
.mx-phone, .mx-narrow { display: none !important; }
.mx :focus-visible, .mx-menu :focus-visible, .cmp-mc :focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 2px; }

/* the shared small controls: an icon button, a word button, a pill */
.mx-tb { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--mx-ink2); cursor: pointer; text-decoration: none; }
.mx-tb svg { width: 19px; height: 19px; stroke-width: 1.7; }
@media (hover: hover) { .mx-tb:hover:not(:disabled) { background: var(--mx-soft); color: var(--mx-ink); } }
.mx-tb.on { background: var(--mx-soft); color: var(--mx-ink); box-shadow: inset 0 0 0 1px var(--mx-line2); }
.mx-tb.on[data-act="unflag"] svg { fill: currentColor; }
.mx-tb:disabled { opacity: .32; cursor: default; }
.mx-tb[aria-busy="true"] svg { animation: mx-spin .9s linear infinite; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-txt { min-height: 36px; align-items: center; justify-content: center; padding: 0 8px; border: 0; background: none; color: var(--mx-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; border-radius: 8px; white-space: nowrap; }
@media (hover: hover) { .mx-txt:hover { background: var(--mx-soft); } }
.mx-nav { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -8px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--mx-ink); font-size: 15.5px; font-weight: 500; cursor: pointer; border-radius: 8px; white-space: nowrap; max-width: 46%; }
.mx-nav svg { width: 22px; height: 22px; flex: none; } .mx-nav span { overflow: hidden; text-overflow: ellipsis; }
.mx-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid var(--mx-line2); border-radius: 999px; background: var(--mx-card); color: var(--mx-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.mx-pill svg { width: 15px; height: 15px; flex: none; }
.mx-pill.solid { background: var(--mx-act); border-color: var(--mx-act); color: var(--mx-act-ink); }
@media (hover: hover) { .mx-pill:hover { border-color: var(--mx-ink); } }
.mx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--mx-soft); color: var(--mx-ink2); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none; }
.mx-tag svg { width: 12px; height: 12px; } .mx-tag.acc { background: var(--mx-acc-soft); color: var(--mx-ink); }   /* the look's ink on its accent tint: its accent text falls under 4.5:1 there in Ledger dark */ .mx-tag.bad { color: var(--lk-bad, var(--bad)); } .mx-tag.link { text-decoration: underline; text-underline-offset: 2px; }

/* ── the mailboxes column ── */
.mx-side { display: flex; flex-direction: column; background: var(--mx-soft); border-right: 1px solid var(--mx-line); }
.mx-side-h { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 8px 8px 4px 16px; }
.mx-pg .mx .mx-side-h h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--mx-mute); letter-spacing: 0; }
.mx-side-b { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
/* each column's own scrollbar: thin, in the look's ink, never the browser's grey bar */
.mx-side-b, .mx-rows, .mx-conv, .mx-det, .mx-menu, .mc-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--mx-ink) 24%, transparent) transparent; }
.mx-sec + .mx-sec { margin-top: 10px; }
.mx-sec-h { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 30px; padding: 2px 6px; border: 0; background: none; color: var(--mx-mute); font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 6px; text-align: left; }
.mx-sec-h svg { width: 14px; height: 14px; }
.mx-sec.shut .mx-sec-h svg { transform: rotate(-90deg); } .mx-sec.shut .mx-sec-b { display: none; }
.mx-box { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 5px 10px; border: 0; border-radius: 8px; background: none; color: var(--mx-ink); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.mx-box svg { width: 17px; height: 17px; flex: none; color: var(--mx-acc-text); stroke-width: 1.8; }
.mx-box > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-cnt { flex: none; font-size: 13px; font-weight: 500; color: var(--mx-mute); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .mx-box:hover { background: color-mix(in srgb, var(--mx-ink) 7%, transparent); } }
/* Mail on a Mac: the open mailbox is a quiet grey bar; the one strong fill on the screen is the open conversation's row */
.mx-box.on { background: color-mix(in srgb, var(--mx-ink) 11%, transparent); color: var(--mx-ink); font-weight: 600; }
.mx-box.on .mx-cnt { color: var(--mx-ink); }
.mx-box.mx-new { color: var(--mx-mute); } .mx-box.mx-new svg { color: var(--mx-mute); }
.mx-side-f { padding: 10px 16px 14px; border-top: 1px solid var(--mx-line); font-size: 12.5px; line-height: 1.45; color: var(--mx-mute); }
.mx-side-f p { margin: 0; } .mx-side-f b { color: var(--mx-ink); font-weight: 600; } .mx-side-f a { color: var(--mx-ink); text-decoration: underline; } .mx-side-f .bad b { color: var(--lk-bad, var(--bad)); }

/* ── the message list ── */
.mx-list { display: flex; flex-direction: column; border-right: 1px solid var(--mx-line); background: var(--mx-card); }
.mx-lh { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 8px 8px 4px 10px; }
.mx-lt { flex: 1; min-width: 0; padding: 0 6px; }
.mx-pg .mx .mx-lt h1 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-lt p { margin: 1px 0 0; font-size: 12px; color: var(--mx-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-search { display: flex; align-items: center; gap: 8px; margin: 2px 12px 8px; padding: 0 10px; min-height: 36px; border-radius: 10px; background: var(--mx-soft); border: 1px solid transparent; color: var(--mx-mute); }
.mx-search svg { width: 16px; height: 16px; flex: none; }
.mx-search input { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: none; color: var(--mx-ink); font-size: 14.5px; -webkit-appearance: none; appearance: none; }
.mx-search input::placeholder { color: var(--mx-mute); opacity: 1; }
.mx-search:focus-within { border-color: var(--lk-focus, var(--volt)); background: var(--mx-card); }
.mx .mx-search input:focus-visible { outline: 0; }
.mx-scope { display: flex; gap: 4px; margin: 0 12px 8px; padding: 3px; border-radius: 9px; background: var(--mx-soft); }
.mx-scope[hidden] { display: none; }
.mx-scope button { flex: 1; min-width: 0; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--mx-ink2); font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-scope button.on { background: var(--mx-card); color: var(--mx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.mx-rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.mx-rw { position: relative; overflow: hidden; border-radius: 10px; }
.mx-row { position: relative; display: flex; width: 100%; padding: 0 0 0 26px; border: 0; border-radius: 10px; background: var(--mx-card); color: var(--mx-ink); text-align: left; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.mx-rm { flex: 1; min-width: 0; display: block; padding: 9px 10px 10px 0; border-bottom: 1px solid var(--mx-line); }
.mx-dot { position: absolute; left: 9px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--mx-acc); opacity: 0; }
.mx-row.unread .mx-dot { opacity: 1; }
.mx-tick { display: none; position: absolute; left: 3px; top: 10px; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--mx-mute); place-items: center; color: transparent; }
.mx-tick svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mx.picking .mx-row { padding-left: 34px; } .mx.picking .mx-tick { display: grid; } .mx.picking .mx-dot { left: 26px; top: 6px; width: 7px; height: 7px; }
.mx-r1 { display: flex; align-items: baseline; gap: 6px; }
.mx-r1 b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-r1 time { flex: none; font-size: 13px; color: var(--mx-mute); white-space: nowrap; }
.mx-marks { flex: none; display: inline-flex; gap: 4px; align-self: center; color: var(--mx-mute); }
.mx-marks svg { width: 13px; height: 13px; } .mx-marks .flagged, .mx-mt .flagged { color: var(--lk-warn, var(--warn)); fill: currentColor; }
.mx-draft { font-style: normal; color: var(--lk-bad, var(--bad)); }
.mx-r2 { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.mx-subj { flex: 1; min-width: 0; font-size: 14px; color: var(--mx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row.unread .mx-subj { font-weight: 600; }
.mx-n { flex: none; min-width: 20px; padding: 0 6px; border-radius: 6px; background: var(--mx-soft); color: var(--mx-ink2); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.mx-prev { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 13.5px; line-height: 1.38; color: var(--mx-mute); min-height: 2.76em; overflow-wrap: anywhere; }
.mx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
@media (hover: hover) { .mx-row:hover { background: var(--mx-soft); } }
/* the open conversation and every ticked one: Mail's filled row */
.mx-row.on, .mx:not(.picking) .mx-row.sel { background: var(--mx-sel); color: var(--mx-sel-ink); }
.mx-row.on .mx-rm, .mx:not(.picking) .mx-row.sel .mx-rm { border-bottom-color: transparent; }
.mx-row.on .mx-subj, .mx:not(.picking) .mx-row.sel .mx-subj, .mx-row.on .mx-draft, .mx:not(.picking) .mx-row.sel .mx-draft { color: var(--mx-sel-ink); }
.mx-row.on .mx-r1 time, .mx-row.on .mx-prev, .mx-row.on .mx-marks, .mx:not(.picking) .mx-row.sel .mx-r1 time, .mx:not(.picking) .mx-row.sel .mx-prev, .mx:not(.picking) .mx-row.sel .mx-marks { color: color-mix(in srgb, var(--mx-sel-ink) 84%, var(--mx-sel)); }
.mx-row.on .mx-marks .flagged, .mx:not(.picking) .mx-row.sel .mx-marks .flagged { color: var(--mx-sel-ink); }
.mx-row.on .mx-tag, .mx:not(.picking) .mx-row.sel .mx-tag, .mx-row.on .mx-n, .mx:not(.picking) .mx-row.sel .mx-n { background: color-mix(in srgb, var(--mx-sel-ink) 16%, var(--mx-sel)); color: var(--mx-sel-ink); }
.mx-row.on .mx-dot, .mx:not(.picking) .mx-row.sel .mx-dot { background: var(--mx-sel-ink); }
/* Select (Mail on iPhone): the tick says it is chosen; the row keeps its own colours on a quiet tint */
.mx.picking .mx-row.sel { background: color-mix(in srgb, var(--mx-ink) 5%, transparent); }
.mx-row.sel .mx-tick { background: var(--mx-acc); border-color: var(--mx-acc); color: var(--mx-acc-ink); }
.mx .mx-row:focus-visible { outline-offset: -3px; } .mx .mx-row.on:focus-visible, .mx:not(.picking) .mx-row.sel:focus-visible { outline-color: var(--mx-sel-ink); }
/* what a swipe uncovers (a phone): hidden until a row is pulled, so nothing sits behind a row on a desk */
.mx-sw { position: absolute; top: 0; bottom: 0; display: flex; visibility: hidden; }
.mx-rw.drag .mx-sw, .mx-rw.open .mx-sw { visibility: visible; }
.mx-sw-l { left: 0; width: 104px; align-items: center; justify-content: flex-start; padding-left: 16px; background: var(--mx-act); color: var(--mx-act-ink); border-radius: 10px 0 0 10px; }
.mx-sw-l span, .mx-sw-r button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; }
.mx-sw svg { width: 20px; height: 20px; }
.mx-sw-r { right: 0; border-radius: 0 10px 10px 0; overflow: hidden; }
.mx-sw-r button { width: 56px; border: 0; cursor: pointer; }
.mx-sw-r [data-sw="more"] { background: var(--mx-sel); color: var(--mx-sel-ink); }
.mx-sw-r [data-sw="flag"] { background: var(--mx-acc); color: var(--mx-acc-ink); }
.mx-sw-r [data-sw="bin"] { background: var(--lk-bad-fill, #c2362f); color: #ffffff; }
.mx-rw.far .mx-sw-r [data-sw="bin"] { flex: 1; width: auto; min-width: 150px; }
.mx-rw.far .mx-sw-r [data-sw="more"], .mx-rw.far .mx-sw-r [data-sw="flag"] { display: none; }
.mx-lf { flex: none; border-top: 1px solid var(--mx-line); }
.mx-lf:empty { display: none; }
.mx-filt { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 6px 12px 7px; border: 0; background: none; cursor: pointer; color: var(--mx-ink); line-height: 1.25; }
.mx-filt small { font-size: 11.5px; color: var(--mx-mute); } .mx-filt b { font-size: 12.5px; font-weight: 600; color: var(--mx-acc-text); }
.mx-bulk { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 4px 8px 4px 14px; }
.mx-bulk b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mx-bb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 46px; min-height: 44px; padding: 2px 4px; border: 0; border-radius: 9px; background: none; color: var(--mx-ink); font-size: 10.5px; font-weight: 600; cursor: pointer; }
.mx-bb svg { width: 19px; height: 19px; } .mx-bb:disabled { opacity: .32; cursor: default; }
@media (hover: hover) { .mx-bb:hover:not(:disabled) { background: var(--mx-soft); } }
.mx-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 240px; padding: 36px 24px; text-align: center; }
.mx-pg .mx .mx-none h2 { margin: 0; font-size: 21px; font-weight: 600; color: var(--mx-mute); }
.mx-none p { margin: 0; max-width: 360px; font-size: 14px; color: var(--mx-mute); }
.mx-stack { position: relative; width: 74px; height: 62px; margin-bottom: 10px; }
.mx-stack i { position: absolute; left: 0; right: 0; height: 42px; border-radius: 9px; border: 1px solid var(--mx-line2); background: var(--mx-card); }
.mx-stack i:nth-child(1) { top: 0; transform: scale(.82); opacity: .55; } .mx-stack i:nth-child(2) { top: 9px; transform: scale(.91); opacity: .8; } .mx-stack i:nth-child(3) { top: 19px; }

/* ── the conversation ── */
.mx-read { position: relative; display: flex; flex-direction: column; background: var(--mx-soft); container-type: inline-size; container-name: mxr; }
.mx-tools { flex: none; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 8px 10px; background: var(--mx-card); border-bottom: 1px solid var(--mx-line); }
.mx-tg { display: inline-flex; align-items: center; gap: 1px; } .mx-tg + .mx-tg { margin-left: 10px; }
.mx-own { gap: 6px; }
.mx-conv { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 26px; outline: 0; display: flex; flex-direction: column; }
.mx-ch { padding: 18px 22px 14px; }
.mx-pg .mx .mx-ch h1 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.mx-ctags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .mx-ctags:empty { display: none; }
.mx-call { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--mx-acc-soft); }
.mx-call p { margin: 0; flex: 1 1 250px; font-size: 13.5px; line-height: 1.45; color: var(--mx-ink); } .mx-call-b { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-msg { margin: 0 18px 10px; border: 1px solid var(--mx-line); border-radius: 13px; background: var(--mx-card); }
.mx-mh { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 16px 11px; border: 0; background: none; color: var(--mx-ink); text-align: left; cursor: pointer; border-radius: 13px; }
.mx-mh .av-c { margin-top: 1px; }
.mx-mw { flex: 1; min-width: 0; }
.mx-mw b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-mw small { display: block; margin-top: 1px; font-size: 13px; color: var(--mx-mute); overflow-wrap: anywhere; }
.mx-mw small.one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-mt { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mx-mute); white-space: nowrap; }
.mx-mt svg { width: 14px; height: 14px; } .mx-ts { display: none; }
.mx-mnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 16px 8px 64px; font-size: 12.5px; color: var(--mx-mute); }
.mx-atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 16px 10px 64px; }
.mx-att { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; min-height: 38px; padding: 0 12px; border: 1px solid var(--mx-line2); border-radius: 10px; background: var(--mx-soft); color: var(--mx-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.mx-att svg { width: 16px; height: 16px; flex: none; color: var(--mx-mute); } .mx-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .mx-att:hover { border-color: var(--mx-ink); } }
.mx-mb { padding: 2px 18px 6px 64px; }
.mx-text { font-size: 15px; line-height: 1.6; color: var(--mx-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mx-text a, .mx-links a { color: var(--lk-info, var(--info)); text-decoration: underline; text-underline-offset: 2px; }
.mx-empty { color: var(--mx-mute); font-size: 14px; }
.mx-qbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 10px; padding: 0 10px 0 8px; border: 0; border-radius: 8px; background: var(--mx-soft); color: var(--mx-ink2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mx-qbtn svg { width: 16px; height: 16px; }
.mx-quote { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--mx-line2); color: var(--mx-ink2); font-size: 14px; } .mx-quote[hidden] { display: none; }
.mx-remote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px; background: var(--mx-soft); }
.mx-remote p { margin: 0; flex: 1 1 240px; font-size: 13px; color: var(--mx-ink2); }
.mx-framebox { resize: vertical; overflow: hidden; min-height: 140px; max-height: 2400px; border: 1px solid var(--mx-line2); border-radius: 10px; background: #ffffff; }
.mx-frame { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }
.mx-links { margin-top: 10px; font-size: 13px; color: var(--mx-ink2); }
.mx-links summary { cursor: pointer; font-weight: 600; min-height: 30px; }
.mx-links ul { margin: 6px 0; padding: 0; list-style: none; } .mx-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; overflow-wrap: anywhere; }
.mx-links small { color: var(--mx-mute); } .mx-links p { margin: 6px 0 0; color: var(--mx-mute); }
.mx-mf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px 10px 58px; }
.mx-lnk { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--mx-ink2); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mx-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--mx-ink2); font-size: 13px; font-weight: 600; cursor: pointer; }
.mx-mini svg { width: 15px; height: 15px; }
@media (hover: hover) { .mx-mini:hover { background: var(--mx-soft); color: var(--mx-ink); } }
.mx-msg.shut .mx-mh { padding-bottom: 13px; }
.mx-rbar { display: none; }
.mx-snack { position: absolute; left: 50%; bottom: 18px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100% - 32px)); padding: 10px 16px; border-radius: 12px;
  background: var(--lk-toast, #1c1f26); color: var(--lk-toast-ink, #ffffff); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.mx-snack[hidden] { display: none; }
.mx-snack button { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

/* ── the details the system adds: who it is with and their bookings ── */
.mx-det { display: flex; flex-direction: column; overflow-y: auto; background: var(--mx-card); border-left: 1px solid var(--mx-line); }
.mx-dh { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 8px 4px 18px; }
.mx-pg .mx .mx-dh h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--mx-mute); letter-spacing: 0; }
.mx-db { padding: 12px 18px 16px; border-top: 1px solid var(--mx-line); } .mx-dh + .mx-db { border-top: 0; padding-top: 4px; }
.mx-pg .mx .mx-db h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--mx-mute); letter-spacing: 0; }
.mx-who { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.mx-who b { margin-top: 8px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; } .mx-who small { font-size: 13px; color: var(--mx-mute); overflow-wrap: anywhere; } .mx-who .mx-tag { margin-top: 6px; }
.mx-dacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.mx-dnote { margin: 0; padding: 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--mx-mute); } .mx-db .mx-dnote { padding: 0; }
.mx-bk { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--mx-ink); text-decoration: none; }
.mx-bk img { width: 42px; height: 42px; flex: none; border-radius: 9px; object-fit: cover; }
.mx-bk > span { flex: 1; min-width: 0; } .mx-bk b { display: block; font-size: 14px; font-weight: 600; } .mx-bk small { display: block; font-size: 12.5px; color: var(--mx-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-oth { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 36px; padding: 6px 0; border: 0; border-top: 1px solid var(--mx-line); background: none; color: var(--mx-ink); text-align: left; cursor: pointer; }
.mx-oth:first-of-type { border-top: 0; }
.mx-oth b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx-oth small { flex: none; font-size: 12.5px; color: var(--mx-mute); }
.mx-det-in { display: none; margin: 8px 18px 0; border: 1px solid var(--mx-line); border-radius: 13px; background: var(--mx-card); overflow: hidden; }
.mx-det-in .mx-db:first-child { border-top: 0; padding-top: 16px; }
.mx-lres { margin-top: 10px; }

/* ── menus, the lightbox, the shortcuts list (they sit on the body or in the modal) ── */
.mx-menu { position: fixed; z-index: 140; min-width: 216px; max-width: min(320px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--mx-line);
  background: var(--mx-pop); color: var(--mx-ink); box-shadow: var(--lk-shadow-pop, 0 18px 48px rgba(0, 0, 0, .5)); font-size: 14px; }
.mx-menu-t { margin: 0; padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--mx-mute); }
.mx-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--mx-line); }
.mx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--mx-ink); font-size: 14px; text-align: left; cursor: pointer; }
.mx-menu button svg { width: 16px; height: 16px; flex: none; color: var(--mx-ink2); } .mx-menu button span { flex: 1; min-width: 0; } .mx-menu-sp { width: 16px; flex: none !important; }
.mx-menu button .tick { color: var(--mx-ink); } .mx-menu button:disabled { color: var(--mx-mute); cursor: default; }
@media (hover: hover) { .mx-menu button:hover:not(:disabled) { background: var(--mx-soft); } }
.mx-menu.sheet { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; max-height: 76vh; padding: 8px; border-radius: 16px; box-shadow: 0 -8px 40px rgba(0, 0, 0, .4), 0 0 0 100vmax var(--lk-scrim, rgba(0, 0, 0, .45)); }
.mx-menu.sheet button { min-height: 48px; font-size: 16px; }
.mx-lb-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mx-lb-h b { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-lb img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 10px; }
.mx-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; margin: 0; }
.mx-keys div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px solid var(--lk-line, var(--stroke)); }
.mx-keys dt { order: 2; flex: none; } .mx-keys dd { margin: 0; font-size: 14px; }
.mx-keys kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--lk-line-2, var(--stroke-2)); background: var(--lk-card-2, var(--glass-2)); font: 600 12.5px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; }
.mx-lat { margin: 0 0 12px; } .mx-lat div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--lk-line, var(--stroke)); font-size: 14px; } .mx-lat dt { flex: none; width: 64px; color: var(--lk-mute, var(--fog-50)); } .mx-lat dd { margin: 0; overflow-wrap: anywhere; }
.mx-latb { max-height: 40vh; overflow-y: auto; padding: 12px 14px; border-radius: 10px; background: var(--lk-card-2, var(--glass-2)); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ── the compose window: Mail's ruled rows inside the system's composer (the live email stays beside the words) ── */
.cmp-mc .cmp-form { padding: 0; display: flex; flex-direction: column; }
.mc { flex: 1; display: flex; flex-direction: column; min-height: 100%; padding: 4px 22px 16px; color: var(--mx-ink); }
.mc-head { position: relative; }
.mc-row { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--mx-line); }
.mc-row[hidden] { display: none; }
.mc-row > label, .mc-lab { flex: none; width: 62px; font-size: 14.5px; color: var(--mx-mute); }
/* an address row can run to a second line: its label and "Cc, Bcc" stay level with the first */
.mc-row[data-k] { align-items: flex-start; } .mc-row[data-k] > label { line-height: 44px; } .mc-row[data-k] > .mc-ccb { margin-top: 6px; }
.mc-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 0; cursor: text; }
.mc-set { display: contents; }
/* an address row with someone in it keeps to one line until it is typed in again (typed text becomes a chip when the box loses focus, so an unfocused box is always empty) */
.mc-set:not(:empty) + input:not(:focus) { flex: 0 0 2px; min-width: 2px; width: 2px; } .mc-set:not(:empty) .mc-chip { max-width: calc(100% - 9px); }
.mc-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 28px; padding: 0 2px 0 10px; border-radius: 8px; background: var(--mx-soft); color: var(--mx-ink); font-size: 14px; }
.mc-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chip.bad { box-shadow: inset 0 0 0 1px var(--lk-bad, var(--bad)); color: var(--lk-bad, var(--bad)); }
.mc-chip button { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: inherit; cursor: pointer; }
.mc-chip button svg { width: 12px; height: 12px; stroke-width: 2.4; }
.mc-chips input, .mc-in { flex: 1 1 96px; min-width: 96px; height: 32px; padding: 0; border: 0; outline: 0; background: none; color: var(--mx-ink); font-size: 15px; }
.cmp-mc .mc-chips input:focus-visible, .cmp-mc .mc-in:focus-visible, .cmp-mc .mc-body:focus-visible { outline: 0; }
.mc-row:focus-within { border-bottom-color: var(--lk-focus, var(--volt)); box-shadow: 0 1px 0 var(--lk-focus, var(--volt)); }
.mc-ccb { flex: none; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--mx-mute); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mc-from { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-from small { font-size: 13.5px; color: var(--mx-mute); }
.mc-from .mc-rt { display: block; margin: 1px 0 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .mc-from:has(.mc-rt) { padding-top: 6px; }
.mc-ac { position: absolute; z-index: 5; left: 62px; right: 0; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--mx-line); border-radius: 12px; background: var(--mx-pop); box-shadow: var(--lk-shadow-pop, 0 18px 48px rgba(0, 0, 0, .5)); }
.mc-ac[hidden] { display: none; }
.mc-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: var(--mx-ink); text-align: left; cursor: pointer; }
.mc-opt.on { background: var(--mx-soft); }
.mc-opt .t { flex: 1; min-width: 0; } .mc-opt b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-opt small { display: block; font-size: 13px; color: var(--mx-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-opt em { flex: none; font-style: normal; font-size: 12px; color: var(--mx-mute); }
.mc-tools { display: flex; align-items: center; gap: 6px; min-height: 48px; border-bottom: 1px solid var(--mx-line); }
.mc-saved { font-size: 12.5px; color: var(--mx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; } .mc-files:empty { display: none; }
.mc-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 4px 0 10px; border: 1px solid var(--mx-line2); border-radius: 10px; background: var(--mx-soft); font-size: 13.5px; }
.mc-file svg { width: 16px; height: 16px; flex: none; color: var(--mx-mute); } .mc-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-file small { flex: none; color: var(--mx-mute); }
.mc-file button { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--mx-ink); cursor: pointer; } .mc-file button svg { width: 12px; height: 12px; color: inherit; stroke-width: 2.4; }
.mc-body { flex: 1 1 auto; width: 100%; min-height: 26vh; margin: 0; padding: 14px 0 10px; border: 0; outline: 0; resize: none; background: none; color: var(--mx-ink); font-size: 15.5px; line-height: 1.6; }
.mc-body::placeholder { color: var(--mx-mute); opacity: 1; }
.mc-opts { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--mx-line); font-size: 13.5px; }
.mc-opts .check { margin: 0; min-height: 28px; }
.mc-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mx-mute); }
.mc-warn { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--mx-soft); color: var(--lk-bad, var(--bad)); font-size: 13.5px; }
.mc-top, .mc-big { display: none; }

/* The breakpoints below are the FRAME'S width (a container query), never the window's: the menu beside it is a rail in one
   look and a tab bar in another, so the same window leaves the mail very different room. views.js mxPhone() reads the same width. */
/* a toolbar with less room: the system's two buttons lose their words, then the less used actions move into More */
.mx-cmpct { display: none; }
@container mxr (max-width: 760px) {
  .mx-own .mx-pill { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .mx-own .mx-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container mxr (max-width: 600px) {
  .mx-mh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center; } .mx-mh .av-c { grid-row: 1 / span 2; align-self: start; }
  .mx-mw { display: contents; } .mx-mw b { grid-column: 2; grid-row: 1; } .mx-mt { grid-column: 3; grid-row: 1; } .mx-mw small { grid-column: 2 / 4; grid-row: 2; }
  .mx-tl { display: none; } .mx-ts { display: inline; }
  .mx-tools .mx-full, .mx-tools .mx-own { display: none; } .mx-tools .mx-cmpct { display: inline-grid; } .mx-tg + .mx-tg { margin-left: 4px; }
  .mx-mb, .mx-mf { padding-left: 16px; } .mx-atts, .mx-mnote { margin-left: 16px; } .mx-msg { margin-left: 12px; margin-right: 12px; } .mx-ch { padding-left: 16px; padding-right: 16px; }
}
/* ── a narrower desk: the details move under the conversation ── */
@container mxw (max-width: 1279px) {
  .mx, .mx[data-det="0"] { grid-template-columns: clamp(216px, 22cqw, 232px) minmax(272px, 33cqw) minmax(0, 1fr); }
  .mx[data-side="0"], .mx[data-side="0"][data-det="0"] { grid-template-columns: 0 minmax(288px, 38cqw) minmax(0, 1fr); }
  .mx > .mx-det { display: none; }
  .mx[data-det="1"] .mx-det-in { display: block; }
}
/* ── a tablet (Mail on an iPad): the list and the conversation; the mailboxes slide over ── */
@container mxw (min-width: 640px) and (max-width: 1139px) { .mx-c-long { display: none; } }   /* a narrow list column keeps "3 unread" */
@container mxw (max-width: 899px) {
  .mx, .mx[data-det="0"], .mx[data-side="0"], .mx[data-side="0"][data-det="0"] { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .mx > .mx-list { grid-column: 1; } .mx > .mx-read { grid-column: 2; }
  .mx > .mx-side, .mx[data-side="0"] > .mx-side { display: none; position: absolute; z-index: 8; left: 0; top: 0; bottom: 0; width: min(300px, 86%); box-shadow: 0 0 0 100vmax var(--lk-scrim, rgba(0, 0, 0, .45)), 12px 0 40px rgba(0, 0, 0, .25); background: var(--mx-pop); }
  .mx[data-pane="boxes"] > .mx-side { display: flex; }
  .mx[data-pane="boxes"] > .mx-scrim { display: block; position: absolute; z-index: 7; inset: 0; }
  .mx-narrow { display: inline-flex !important; } .mx-wide { display: none !important; }
  .mx-box { min-height: 44px; font-size: 16px; } .mx-sec-h { min-height: 40px; }
}
/* ── a phone (Mail on iPhone): one screen at a time, a bar at the foot, swipe on the rows ── */
@container mxw (max-width: 639px) {
  .mx, .mx[data-det="0"], .mx[data-side="0"], .mx[data-side="0"][data-det="0"] { display: block; height: auto; min-height: calc(100dvh - 190px); border-radius: 14px; overflow: visible; }
  .mx > .mx-side, .mx > .mx-list, .mx > .mx-read, .mx[data-side="0"] > .mx-side { display: none; position: static; width: auto; box-shadow: none; border: 0; border-radius: 14px; min-height: calc(100dvh - 192px); }
  .mx[data-pane="boxes"] > .mx-side, .mx[data-pane="list"] > .mx-list, .mx[data-pane="read"] > .mx-read { display: flex; }
  .mx > .mx-side { background: var(--mx-card); }
  .mx-phone { display: inline-flex !important; } .mx-desk { display: none !important; }
  .mx[data-pane="boxes"] > .mx-scrim { display: none; }
  .mx-tb { width: 44px; height: 44px; } .mx-tb svg { width: 22px; height: 22px; } .mx-txt { min-height: 44px; font-size: 16px; }
  .mx-side-h { padding: 6px 8px 0 16px; } .mx-pg .mx .mx-side-h h2 { font-size: 28px; font-weight: 700; color: var(--mx-ink); letter-spacing: -0.02em; }
  .mx-side-b { overflow: visible; padding: 8px 10px 12px; } .mx-box { min-height: 48px; font-size: 17px; gap: 12px; } .mx-box svg { width: 22px; height: 22px; } .mx-cnt { font-size: 16px; }
  .mx-sec-h { min-height: 44px; font-size: 13.5px; }
  .mx-lh { flex-wrap: wrap; padding: 2px 6px 0 12px; }
  .mx-lt { order: 5; flex: 1 0 100%; padding: 2px 4px 6px; } .mx-pg .mx .mx-lt h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; white-space: normal; } .mx-lt p { font-size: 13px; }
  .mx-lh .mx-nav { margin-right: auto; }
  .mx-search { margin: 0 12px 8px; min-height: 44px; } .mx-search input { height: 44px; font-size: 16px; }
  .mx-scope button { min-height: 36px; }
  .mx-rows { overflow: visible; padding: 0 0 8px; } .mx-rw, .mx-row { border-radius: 0; }
  .mx-row { padding-left: 30px; } .mx-rm { padding: 11px 14px 12px 0; } .mx-dot { left: 11px; top: 18px; } .mx-r1 b { font-size: 16.5px; } .mx-subj { font-size: 15px; } .mx-prev { font-size: 14.5px; }
  .mx.picking .mx-row { padding-left: 44px; } .mx.picking .mx-tick { left: 12px; top: 14px; width: 23px; height: 23px; } .mx.picking .mx-dot { left: 34px; top: 8px; }
  .mx-sw-l, .mx-sw-r { border-radius: 0; }
  .mx-lf, .mx-rbar { position: sticky; bottom: var(--mx-foot, 0px); z-index: 5; background: var(--mx-card); border-top: 1px solid var(--mx-line); border-radius: 0 0 14px 14px; }
  .mx-lf:empty { display: block; }
  .mx-lbar { width: 100%; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 8px; }
  .mx-lstat { flex: 1; min-width: 0; text-align: center; font-size: 12px; line-height: 1.3; color: var(--mx-mute); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .mx-lstat b { color: var(--mx-ink); font-weight: 600; }
  .mx-bulk { min-height: 56px; padding: 4px 6px 4px 12px; } .mx-bb { min-width: 44px; } .mx-bulk b { font-size: 13px; }
  .mx-read { background: var(--mx-card); }
  .mx-tools { min-height: 48px; padding: 2px 6px 2px 12px; border-radius: 14px 14px 0 0; } .mx-tools .mx-own { display: none; }
  .mx-conv { overflow: visible; padding-bottom: 12px; } .mx-ch { padding: 10px 16px 12px; } .mx-pg .mx .mx-ch h1 { font-size: 22px; }
  .mx-msg { margin: 0 0 0; border-width: 1px 0 0; border-radius: 0; } .mx-mh { padding: 14px 16px 10px; border-radius: 0; min-height: 44px; }
  /* Mail on iPhone's header: the name and a short time on one line, who it went to underneath at full width */
  .mx-mh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center; } .mx-mh .av-c { grid-row: 1 / span 2; align-self: start; }
  .mx-mw { display: contents; } .mx-mw b { grid-column: 2; grid-row: 1; font-size: 16px; } .mx-mt { grid-column: 3; grid-row: 1; } .mx-mw small { grid-column: 2 / 4; grid-row: 2; font-size: 13.5px; }
  .mx-tl { display: none; } .mx-ts { display: inline; }
  .mx-mt time { font-size: 13px; } .mx-mb { padding: 2px 16px 6px; } .mx-atts, .mx-mnote { margin-left: 16px; } .mx-att { min-height: 44px; } .mx-mf { padding: 4px 8px 10px; }
  .mx-mini, .mx-lnk, .mx-qbtn { min-height: 44px; } .mx-links summary { min-height: 44px; display: flex; align-items: center; }
  .mx-rbar { display: flex; align-items: center; justify-content: space-around; min-height: 52px; padding: 4px 6px; } .mx-rbar:empty { display: none; }
  .mx[data-det="1"] .mx-det-in, .mx-det-in { display: block; margin: 12px 12px 0; } .mx-det-in .btn, .mx-call .btn { min-height: 44px; }
  .mx-oth, .mx-bk { min-height: 48px; } .mx-pill { min-height: 44px; }
  .mx-snack { position: sticky; left: auto; bottom: calc(var(--mx-foot, 0px) + 66px); transform: none; width: fit-content; margin: 0 auto; }
}
/* ── the compose sheet on a phone (it is a window over the page, so the window's width decides) ── */
@media (max-width: 759px) {
  .mx-keys { grid-template-columns: minmax(0, 1fr); }
  /* the compose sheet: Cancel, a title that follows the subject, a round send button (the shell's own bars step aside) */
  .cmp-mc > .cmp-h, .cmp-mc > .cmp-foot { display: none; }
  .mc { padding: 0 16px 14px; }
  .mc-top { display: flex; align-items: center; min-height: 52px; margin: 0 -6px; position: sticky; top: 0; z-index: 3; background: var(--mx-pop); }
  .mc-big { display: block; margin: 0 0 8px; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .mc-send { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--mx-acc); color: var(--mx-acc-ink); cursor: pointer; }
  .mc-send svg { width: 22px; height: 22px; stroke-width: 2.4; }
  .mc-row { min-height: 48px; } .mc-row[data-k] > label { line-height: 56px; } .mc-chips input, .mc-in { height: 44px; font-size: 16px; } .mc-chip { min-height: 34px; font-size: 15px; } .mc-chip button { width: 44px; height: 44px; margin: -5px -6px -5px -8px; }
  .mc-ccb, .mc-file button { min-height: 44px; min-width: 44px; } .mc-ac { left: 0; } .mc-body { font-size: 16px; min-height: 34vh; } .mc-opts .check { min-height: 44px; }
  .mc-tools { min-height: 52px; } .mc-saved { display: none; } .cmp-mc .mx-tb { width: 44px; height: 44px; } .cmp-mc .mx-pill, .cmp-mc .mx-txt { min-height: 44px; }
  .overlay:has(> .modal.cmpwin .cmp-mc) { padding-top: calc(2vh + var(--mx-bar, 0px)); } .overlay:has(> .modal.cmpwin .cmp-mc) > .modal.cmpwin { max-height: calc(96vh - var(--mx-bar, 0px)); }
}
@media (pointer: coarse) {
  .mx-tb { width: 44px; height: 44px; } .mx-txt, .mx-box, .mx-att, .mx-mini, .mx-lnk, .mx-qbtn, .mx-pill, .mx-oth, .mx-menu button, .mx-scope button, .mc-ccb, .mx-snack button { min-height: 44px; }
  .mx-sec-h { min-height: 44px; } .mc-chips input, .mc-in { height: 44px; } .mc-chip { min-height: 34px; } .mc-chip button, .mc-file button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mx-row { transition: background-color .12s ease; } .mx-rw:not(.drag) .mx-row { transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .12s ease; }
  .mx-snack:not([hidden]) { animation: mx-up .22s cubic-bezier(.2, .8, .2, 1); } .mx-menu { animation: mx-pop .14s cubic-bezier(.2, .8, .2, 1); } .mx-menu.sheet { animation: mx-sheet .24s cubic-bezier(.2, .8, .2, 1); }
  .mx-msg { animation: sc-fade .2s ease; } .mx-sec-h svg { transition: transform .16s ease; }
  /* Mail on iPhone: the next screen comes in from the right, the one before comes back from the left */
  @container mxw (max-width: 639px) {
    .mx[data-dir="fwd"][data-pane="list"] > .mx-list, .mx[data-dir="fwd"][data-pane="read"] > .mx-read { animation: mx-push .22s cubic-bezier(.2, .8, .2, 1); }
    .mx[data-dir="back"][data-pane="list"] > .mx-list, .mx[data-dir="back"][data-pane="boxes"] > .mx-side { animation: mx-pull .22s cubic-bezier(.2, .8, .2, 1); }
  }
}
@keyframes mx-push { from { opacity: 0; translate: 26px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mx-pull { from { opacity: 0; translate: -26px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mx-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes mx-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mx-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═════ THE COMPOSER WINDOW (7 November 2026): the Maine Couriers layout, big ═════
   The fields on the left, the email exactly as it will arrive on the right, live; Write → Check → Sent. */
.modal.cmpwin { width: min(1480px, 96vw); height: min(940px, calc(91vh - 24px)); max-height: calc(91vh - 24px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.overlay:has(> .modal.cmpwin) { padding-top: 3vh; padding-bottom: 3vh; }
.overlay:has(> .modal.cmpwin) > .modal.cmpwin { height: min(960px, 94vh); max-height: 94vh; }
.cmp { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.cmp-h { display: flex; align-items: center; gap: 16px; padding: 16px 20px 14px 24px; border-bottom: 1px solid var(--lk-line, var(--stroke)); }
.cmp-h > div:first-child { flex: 1; min-width: 0; }
.cmp-h h2 { margin: 0; font: 700 21px/1.25 var(--font-d); letter-spacing: -0.02em; color: var(--lk-ink, var(--fog)); overflow-wrap: anywhere; }
.cmp-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--lk-mute, var(--fog-50)); overflow-wrap: anywhere; }
.cmp-h .sf-steps { margin: 0; flex: none; }
.cmp-x { flex: none; }
.cmp-body { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); min-height: 0; }
.cmp-form { min-height: 0; overflow-y: auto; padding: 20px 24px 24px; border-right: 1px solid var(--lk-line, var(--stroke)); }
.cmp-form .em-body-full, .cmp-form textarea.em-body-full { min-height: 30vh; resize: vertical; }
.cmp-prev { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 20px 14px; background: var(--lk-card-2, rgba(255, 255, 255, .03)); }
.cmp-prev-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmp-live { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 12px; border-radius: 999px; background: var(--lk-card, transparent); border: 1px solid var(--lk-line-2, var(--stroke)); font: 650 12.5px/1.2 var(--font-b); color: var(--lk-ink, var(--fog)); }
.cmp-live i { width: 8px; height: 8px; border-radius: 50%; background: #008300; }
.cmp-live.busy i { background: var(--lk-acc-fill, var(--volt)); animation: cmpPulse 1s ease-in-out infinite; }
@keyframes cmpPulse { 50% { opacity: .35; } }
.cmp-meta { min-width: 0; font-size: 13px; color: var(--lk-mute, var(--fog-50)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-mail { flex: 1; min-height: 0; border: 1px solid var(--lk-line-2, var(--stroke)); border-radius: 12px; overflow: hidden; background: #f4f4f6; }
.cmp-frame { display: block; width: 100%; height: 100%; border: 0; background: #f4f4f6; }
.cmp-note { margin: 0; font-size: 12.5px; color: var(--lk-mute, var(--fog-50)); }
.cmp-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--lk-line, var(--stroke)); }
.cmp-foot .btn { min-height: 44px; }
@media (max-width: 1100px) { .cmp-h .sf-steps { display: none; } }
@media (max-width: 900px) {
  .modal.cmpwin { width: 100%; height: auto; max-height: 96vh; overflow-y: auto; }
  .overlay:has(> .modal.cmpwin) { padding: 2vh 8px; }
  .overlay:has(> .modal.cmpwin) > .modal.cmpwin { height: auto; max-height: 96vh; }
  .cmp { display: block; height: auto; }
  .cmp-body { display: block; }
  .cmp-form { overflow: visible; border-right: 0; padding: 16px; }
  .cmp-prev { padding: 12px 12px 14px; }
  .cmp-mail { height: 70vh; flex: none; }
  .cmp-h { position: sticky; top: 0; z-index: 2; background: var(--lk-pop, var(--panel, #fff)); padding: 12px 12px 12px 16px; }
  .cmp-foot { position: sticky; bottom: 0; z-index: 2; background: var(--lk-pop, var(--panel, #fff)); padding: 12px 16px; flex-direction: column-reverse; }
  .cmp-foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cmp-live.busy i { animation: none; } }

/* ───────────────── settings: the sections down the side ───────────────── */
.setx { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; align-items: start; }
.set-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.set-tab { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 14.5px/1.3 var(--font-b); color: var(--fog-70); }
@media (hover: hover) { .set-tab:hover { background: var(--glass-2); color: var(--fog); } }
.set-tab.on { background: var(--glass-2); color: var(--fog); font-weight: 650; }
.set-tab svg { width: 18px; height: 18px; }
.setx .tabpanel { animation: sc-fade .2s var(--ease); }
.setx .tabpanel[hidden] { display: none !important; }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat3 > div { padding: 12px 14px; border-radius: 12px; background: var(--glass-2); display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fog); }
.stat3 i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.codebox { display: block; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--glass-2); color: var(--fog); font: 12.5px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; }

/* ───────────────── people, templates, analytics ───────────────── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.person { display: flex; flex-direction: column; gap: 14px; }
.person .who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.person .who b { display: block; font: 700 18px/1.2 var(--font-d); letter-spacing: -0.015em; color: var(--fog); }
.person .who small { display: block; color: var(--fog-50); font-size: 13.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-card { display: flex; flex-direction: column; gap: 10px; }
.mail-card .env { padding: 14px 16px; border-radius: 12px; background: var(--glass-2); }
.mail-card .env small { display: block; color: var(--fog-50); font-size: 12.5px; }
.mail-card .env b { display: block; margin-top: 2px; font-size: 14.5px; color: var(--fog); overflow-wrap: anywhere; }
.mail-card .env p { margin: 8px 0 0; color: var(--fog-70); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mail-card h3 { margin: 0; font: 650 16px/1.3 var(--font-b); color: var(--fog); }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.kgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kstat small { display: block; font-size: 13.5px; color: var(--fog-50); }
.kstat b { display: block; margin-top: 6px; font-size: 30px; line-height: 1.05; }
.kstat .sub { display: block; margin-top: 6px; font-size: 13px; color: var(--fog-50); }
.chart { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 10px; align-items: end; height: 236px; padding: 28px 2px 0; margin-top: 8px; border-bottom: 1px solid var(--stroke-2); box-sizing: border-box; }
.chart .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; position: relative; }
.chart .col .bar + .bar { margin-top: 2px; border-radius: 2px; }   /* a month split in two: 2px of surface between what happened and what is still to happen */
.chart .bar { display: block; min-height: 2px; border-radius: 7px 7px 2px 2px; background: var(--lk-acc-fill, var(--volt)); transform-origin: bottom; animation: sc-grow .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.chart .bar.ahead { background: repeating-linear-gradient(135deg, var(--lk-acc-fill, var(--volt)) 0 6px, color-mix(in srgb, var(--lk-acc-fill, #f5c542) 55%, transparent) 6px 12px); }
.chart .col b { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--fog-70); white-space: nowrap; }
.chart-x { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.chart-x span { text-align: center; font-size: 12px; color: var(--fog-50); }
@keyframes sc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hb .lab { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--fog); margin-bottom: 5px; }
.hb .lab b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hb .tr { height: 10px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.hb .tr i { display: block; height: 100%; border-radius: 999px; background: var(--fog); transform-origin: left; animation: sc-growx .6s var(--ease) backwards; }
@keyframes sc-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ───────────────── the empty state (a sentence and the button that does it) ───────────────── */
.void { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 46px 22px; text-align: center; }
.void .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); color: var(--fog); }
.void .ic svg { width: 24px; height: 24px; }
.void h3 { margin: 4px 0 0; font: 700 20px/1.25 var(--font-d); letter-spacing: -0.02em; color: var(--fog); }
.void p { margin: 0; max-width: 420px; color: var(--fog-50); font-size: 14.5px; line-height: 1.55; }
.void .btn { margin-top: 8px; }

/* the booth host keeps its frame */
.booth-host .cd { max-width: 720px; }

/* ───────────────── chart colours: /dataviz's validated steps (scripts/validate_palette.js, 6 November 2026) ─────────────────
   The pipeline (stage order): light ΔE CVD 13.0 adjacent, dark 13.0 on #0f1117 to #1d1d1d; the service dots on the calendar
   carry their words beside them (the relief the validator asks for on the pale light steps). Dark is the default here
   (Midnight Glass and every look's dark); html[data-theme="light"] takes the light steps. */
:root {
  --st-new: #c98500; --st-quoted: #3987e5; --st-deposit: #d55181; --st-confirmed: #008300; --st-completed: #9085e9; --st-cancelled: #e66767;
  --sv-360g: #d95926; --sv-360: #3987e5; --sv-8k: #199e70; --sv-selfie: #9085e9; --sv-led: #d55181; --sv-multi: #c98500; --sv-other: #8a8a8f;
}
html[data-theme="light"] {
  --st-new: #eda100; --st-quoted: #2a78d6; --st-deposit: #e87ba4; --st-confirmed: #008300; --st-completed: #6250d6; --st-cancelled: #e34948;
  --sv-360g: #eb6834; --sv-360: #2a78d6; --sv-8k: #1baf7a; --sv-selfie: #6250d6; --sv-led: #e87ba4; --sv-multi: #eda100; --sv-other: #868e96;
}
.svc-360g { --dot: var(--sv-360g); } .svc-360 { --dot: var(--sv-360); } .svc-8k { --dot: var(--sv-8k); } .svc-selfie { --dot: var(--sv-selfie); }
.svc-led { --dot: var(--sv-led); } .svc-multi { --dot: var(--sv-multi); } .svc-other { --dot: var(--sv-other); }
.legend i { background: var(--dot); }
.cal-dots i.svc-360g, .cal-dots i.svc-360, .cal-dots i.svc-8k, .cal-dots i.svc-selfie, .cal-dots i.svc-led, .cal-dots i.svc-multi, .cal-dots i.svc-other { background: var(--dot); }

/* ───────────────── the pieces the views add ───────────────── */
.ph-only { display: none; }
@media (max-width: 560px) { .ph-only { display: flex; } }
.rowcards.is-empty { display: block; margin: 0; padding: 0; overflow: visible; }
.mini-r .m { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fog); white-space: nowrap; }
.mini-r .av-c svg { width: 17px; height: 17px; }
.mini-r .tk-date { width: 48px; padding: 6px 0 7px; }
.mini-r .tk-date b { font-size: 19px; }
.crew-add { margin-top: 12px; }
.crew-add summary { list-style: none; cursor: pointer; width: max-content; }
.crew-add summary::-webkit-details-marker { display: none; }
.crew-add[open] summary { margin-bottom: 4px; }
.pay-btns { display: flex; flex-direction: column; gap: 8px; }
.pay-btns .btn { width: 100%; justify-content: center; }
.toolbar > .ffield.sel { min-width: 220px; }
.img-pick { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.img-pick .ffield { flex: 1; }
.img-thumb { flex: none; width: 72px; border-radius: var(--lk-r-field, 12px); background: var(--glass-2) center / cover no-repeat; border: 1px solid var(--stroke); }
.tg-x { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -2px -6px -2px 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.tg-x svg { width: 13px; height: 13px; }
@media (hover: hover) { .tg-x:hover { background: color-mix(in srgb, var(--fog) 12%, transparent); } }
.as-table { margin-top: 14px; }
.as-table summary { list-style: none; width: max-content; }
.as-table summary::-webkit-details-marker { display: none; }
.mini-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mini-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--fog-50); padding: 8px 6px; border-bottom: 1px solid var(--stroke); }
.mini-table td { padding: 8px 6px; border-bottom: 1px solid var(--stroke); color: var(--fog); }
.mini-table th:not(:first-child), .mini-table td:not(:first-child) { text-align: right; }
.chart .col:focus-within b, .chart .col:hover b { display: block; }
.booth-load { max-width: 720px; }
.today .pg-head { align-items: flex-end; }
/* the look layer (flat.css) styles the house pills at (0,2,1); the screens' own sizes need one more class to land */
.pg .pillrow .fpill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 9px 17px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pg .lst .chip, .pg .tags .chip { white-space: nowrap; }
@media (pointer: coarse) { .pg .pillrow .fpill { min-height: 44px; } }

/* a boxed field's own control never draws a second box (the look layer styles #nb-paste and #src-new by ID at (1,1,1)) */
html[data-look] .ffield #nb-paste, html[data-look] .ffield #src-new { background: transparent; border: 0; border-radius: 0; padding: 3px 0 0; box-shadow: none; }

/* the ticket opens: its photograph becomes the booking's cover (views.js; never under reduced motion) */
html.vt-open .rec-photo { view-transition-name: tk-cover; }
::view-transition-group(tk-cover) { border-radius: var(--lk-r-card, 16px); overflow: hidden; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(tk-cover), ::view-transition-new(tk-cover) { width: 100%; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ───────────────── tablets and phones ───────────────── */
@media (max-width: 1439px) {
  .calx { grid-template-columns: minmax(0, 1fr); }
  .agenda { position: static; }
  .ag-day { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 12px; }
  .ag-day > h3, .ag-day > p, .ag-day > .cd { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance > :last-child { grid-column: 1 / -1; }
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .rec { grid-template-columns: minmax(0, 1fr); }
  .rec-side { display: contents; }
  .rec-side > .side-first { order: -1; }
  .rec > .rec-main { order: 0; }
  .rec-side > * { order: 1; }
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-pane { position: static; }
  .setx { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-tab { white-space: nowrap; flex: none; }
  .rowcards { grid-auto-columns: minmax(262px, calc((100% - 2 * 18px) / 3)); }
}
@media (max-width: 860px) {
  :root { --sc-gap: 22px; --tk-ph: 150px; }
  .pg-title { font-size: calc(var(--lk-title-size, 34px) * .82); }
  .tk.hero { flex-direction: column; min-height: 0; --tk-hy: 210px;
    -webkit-mask: radial-gradient(circle 11px at 0 var(--tk-hy), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                  radial-gradient(circle 11px at 100% var(--tk-hy), #0000 97%, #000 100%) top right / 51% 100% no-repeat;
            mask: radial-gradient(circle 11px at 0 var(--tk-hy), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                  radial-gradient(circle 11px at 100% var(--tk-hy), #0000 97%, #000 100%) top right / 51% 100% no-repeat; }
  .tk.hero .tk-photo { width: auto; height: var(--tk-hy); min-height: 0; }
  .tk.hero .tk-perf { width: auto; height: 0; margin: 0 16px; border-left: 0; border-top: 1.5px dashed var(--lk-line-2, var(--stroke-2)); }
  .nx { padding: 20px 18px 20px; gap: 12px; }
  .nx-name { font-size: 23px; }
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance > :last-child { grid-column: auto; }
  .rowcards { grid-auto-columns: 80%; margin: -2px -16px -10px; padding: 2px 16px 14px; scroll-padding: 16px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .toolbar, .toolbar.three { grid-template-columns: minmax(0, 1fr); }
  .toolbar .seg { justify-self: start; }
  .rec-photo { height: 210px; }
  .cd { padding: 18px 18px; }
  .ed-pane .cd { padding: 20px 18px; }
  .nx-empty { grid-template-columns: minmax(0, 1fr); }
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kstat b { font-size: 24px; }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  .cd-h { flex-wrap: wrap; row-gap: 8px; }
  .chart { gap: 5px; height: 180px; }
  .chart-x { gap: 5px; }
  .chart .col b { display: none; }
  .stat3 { grid-template-columns: minmax(0, 1fr); }
  .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .lc-t { font-size: 14.5px; }
}
@media (max-width: 760px) {
  .cal-d { min-height: 54px; padding: 5px; border-radius: 10px; align-items: center; }
  .cal-d .n { min-width: 26px; height: 26px; font-size: 13px; align-self: center; }
  .cal-d .ce, .cal-d .ce-more, .cal-d .blk { display: none; }
  .cal-d .cal-dots { display: flex; }
  .cal-g, .cal-wd { gap: 4px; }
  .cal-wd span { font-size: 12px; }
  .sd-money { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sd-money div { padding: 9px 8px; }
  .sd-money b { font-size: 15px; }
}
@media (max-width: 420px) {
  .lgrid { grid-template-columns: minmax(0, 1fr); }
}
/* a finger needs 44px */
@media (pointer: coarse) {
  .ibtn { width: 44px; height: 44px; }
  .rc-nav .ibtn { width: 44px; height: 44px; }
  .pillrow .fpill { min-height: 44px; }
  .lnk, .sec-more { min-height: 44px; display: inline-flex; align-items: center; }
  .sec-more { padding: 0 8px; margin: 0 -8px; }
  #view .btn, .pg-back, #view .seg button { min-height: 44px; }
  .bulkbar .x { min-width: 44px; min-height: 44px; }
  #view a.tg, #view button.tg { min-height: 40px; padding-left: 12px; padding-right: 12px; }
  .lst-r > .c-cb { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px -6px -12px -12px; cursor: pointer; }
  .set-tab { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk.hero .tk-photo::before, .rec-photo::before { animation: none; }
  .tk-wrap, .tk-photo::before, .lcard .ph::before { transition: none; }
}

/* ═══════════════════════ THE MAP AND A BOOKING'S LOCATION (7 November 2026) ═══════════════════════
   #/map: Luma's event map (Refero 67058fb3, 9dd8e688): the list beside the map with pills over it, numbered
   clusters in the accent FILL (counts, the Encore rule), the chosen booking as Airbnb's floating card (d93d32f5).
   The booking page's Location card: Luma's event-page block (84fb7037): an icon box, the place in bold, the map.
   Every pin is a small ticket: a white pill with its status dot (the validated --st-* steps) and the date; a point found
   by its town wears a dashed outline; a booking's page draws such a point as an area (a dashed circle).
   Leaflet's own chrome (zoom, attribution) is re-dressed in the house tokens so every look draws it, and each map
   is its own stacking context (isolation), so Leaflet's z-indexes never rise over the bar, the tab bar or a menu.
   ⛔ Midnight Glass has no --lk-* tokens: every fallback here is its own canvas (--ink) and accent ink (--volt-ink), so the
      map's chrome follows Midnight into daylight (a dark hex fallback failed all 8 Midnight-light states, 7 November 2026). */
.mp-f { grid-area: f; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.mp-tools .mp-svc { flex: 1 1 200px; min-width: 0; }   /* the service box and "Show archived" share a line where they fit */
.mp-arch { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--fog); cursor: pointer; }
.mp-arch input { width: 18px; height: 18px; margin: 0; accent-color: var(--lk-act, var(--volt)); }
.mp-dot { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--pc, var(--st-new)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.mp-dot.approx { width: 14px; height: 14px; background: transparent; box-shadow: none; border: 2px dashed var(--fog-50); }
.mp-dot.cl { width: 14px; height: 14px; background: var(--lk-acc-fill, var(--volt)); box-shadow: 0 0 0 2px var(--lk-card, #fff), 0 0 0 3px var(--lk-line-2, var(--stroke)); }

/* Luma's layout: the filters head the list column, the map stands beside both and stays while the list scrolls */
.mp-split { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-areas: "f m" "l m"; grid-template-rows: auto 1fr;
  gap: 16px 20px; align-items: start; min-width: 0; }
.mp-side { grid-area: l; display: flex; flex-direction: column; min-width: 0; }
.mp-count { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 10px 18px; min-height: 52px; border-bottom: 1px solid var(--stroke); font-size: 14px; color: var(--fog-50); }
.mp-count .lnk { min-height: 44px; padding: 0; font-size: 14px; }
.mp-list { list-style: none; margin: 0; padding: 6px; }
.mp-rowb { display: flex; gap: 14px; align-items: flex-start; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: var(--lk-r-tile, 12px);
  background: none; color: var(--fog); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
@media (hover: hover) { .mp-rowb:hover { background: var(--glass-2); } }
.mp-row.on .mp-rowb { background: var(--glass-2); box-shadow: inset 3px 0 0 var(--lk-sel, var(--fog)); }
.mp-rowb:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: -2px; }
.mp-rowb .tk-date { width: 46px; padding: 6px 0 7px; border-radius: 10px; }
.mp-rowb .tk-date b { font-size: 19px; }
.mp-rt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mp-rt b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mp-rt small { font-size: 13px; line-height: 1.4; color: var(--fog-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rs { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--fog); }
.mp-none { padding: 18px 12px; color: var(--fog-50); font-size: 14px; line-height: 1.5; }
.mp-un { padding: 14px 18px 16px; border-top: 1px solid var(--stroke); }
.mp-un:empty { display: none; }
.mp-un:focus { outline: none; }
.mp-un-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--fog); }
.mp-un-h .n { font-weight: 500; color: var(--fog-50); }
.mp-un ul { list-style: none; margin: 0; padding: 0; }
.mp-un-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stroke); }
.mp-un-r:first-child { border-top: 0; }
.mp-un-r > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-un-n { color: var(--fog); font-size: 14.5px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .mp-un-n:hover { text-decoration: underline; text-underline-offset: 3px; } }
.mp-un-r small { font-size: 13px; line-height: 1.45; color: var(--fog-50); overflow-wrap: anywhere; }
.mp-un-r .btn { flex: none; min-height: 44px; }

.mp-mapw { grid-area: m; position: sticky; top: 84px; height: clamp(460px, calc(100vh - 116px), 940px); display: flex; flex-direction: column; min-width: 0; overflow: hidden; isolation: isolate;
  background: var(--lk-card, var(--ink)); border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, var(--r)); }
.mp-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.mp-map { position: absolute; inset: 0; z-index: 0; }
.mp-key { flex: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--stroke); background: var(--lk-card, var(--ink));
  font-size: 12.5px; line-height: 1.4; color: var(--fog); }
.mp-key span { display: inline-flex; align-items: center; gap: 7px; }
.mp-card { position: absolute; z-index: 2; top: 12px; right: 12px; width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto;
  background: var(--lk-pop, var(--ink)); color: var(--fog); border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, 16px);
  box-shadow: var(--lk-shadow-pop, 0 12px 32px rgba(0, 0, 0, .45)); animation: sc-rise .24s var(--ease) both; }
.mp-card[hidden], .mp-msg[hidden] { display: none; }
.mp-card-ph { position: relative; height: 128px; background: var(--tk-img, none) center / cover no-repeat var(--lk-card-2, color-mix(in srgb, var(--fog) 7%, var(--ink))); }
.mp-card-ph .cv-pill i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.mp-card-x { position: absolute; z-index: 3; top: 10px; right: 10px; width: 44px; height: 44px; background: #ffffff; color: #222222; border-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.mp-card-b { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.mp-card-n { margin: 0 0 2px; font-family: var(--font-d); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.mp-card-n a { color: var(--fog); text-decoration: none; }
@media (hover: hover) { .mp-card-n a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.mp-card-b p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fog-50); }
.mp-card-b .mp-card-loc { display: flex; gap: 6px; align-items: flex-start; color: var(--fog); }
.mp-card-loc svg { width: 16px; height: 16px; margin-top: 2px; }
.mp-card-b .mp-card-note { font-size: 12.5px; }
.mp-card-b .btn { align-self: flex-start; min-height: 44px; margin-top: 10px; }
.mp-msg { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 32px)); padding: 18px 20px; text-align: center;
  background: var(--lk-pop, var(--ink)); color: var(--fog); border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-card, 16px);
  box-shadow: var(--lk-shadow-pop, 0 12px 32px rgba(0, 0, 0, .45)); }
.mp-msg p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.mp-msg p:last-child { margin: 0; }
.mp-msg .btn { min-height: 44px; }

/* the pins and the clusters (Leaflet divIcons: no default box, a white ring that holds on every tile) */
.mp-pinw, .mp-clw { background: none; border: 0; }
.mp-pinw { overflow: visible; }
.mp-pinw:focus, .mp-clw:focus { outline: none; }
/* the pin is a small ticket: a white pill with the status dot and the date, its tail on the point (white on a picture,
   like the cover pills, so it reads on every tile and in every look) */
.mp-pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: #ffffff; color: #222222; font: 700 12.5px/1.2 var(--font-b); letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
  transform: translate(-50%, calc(-100% - 7px)); box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .2); transition: transform .15s var(--ease); }
.mp-pin i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--pc, var(--st-new)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.mp-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #ffffff; }
.mp-pin.approx { outline: 2px dashed rgba(34, 34, 34, .75); outline-offset: 2px; }
.mp-pin.on { background: #222222; color: #ffffff; transform: translate(-50%, calc(-100% - 7px)) scale(1.1); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .3); }
.mp-pin.on::after { border-top-color: #222222; }
.mp-pin.on::before { content: ''; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid var(--pc, var(--st-new)); animation: mp-pulse 1.1s var(--ease) 2 both; pointer-events: none; }
@keyframes mp-pulse { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
.mp-drop .mp-pin { animation: mp-drop .42s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes mp-drop { from { opacity: 0; transform: translate(-50%, calc(-100% - 26px)); } to { opacity: 1; transform: translate(-50%, calc(-100% - 7px)); } }
.mp-drop .mp-cl { animation: sc-pop .45s var(--ease) backwards; }
@media (hover: hover) { .mp-pinw:hover .mp-pin:not(.on) { transform: translate(-50%, calc(-100% - 9px)); } }
.mp-pinw:focus-visible .mp-pin, .mp-clw:focus-visible .mp-cl { box-shadow: 0 0 0 3px var(--lk-focus, #f5c542), 0 4px 12px rgba(0, 0, 0, .4); }
.mp-cl { display: grid; place-items: center; width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; border: 3px solid #ffffff;
  background: var(--lk-acc-fill, var(--volt)); color: var(--lk-acc-ink, var(--volt-ink)); font: 800 15px/1 var(--font-d); font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* Leaflet's chrome in the house tokens */
.mp-map.leaflet-container, .lc-map.leaflet-container { font: 13px/1.4 var(--font-b); background: var(--lk-card-2, color-mix(in srgb, var(--fog) 7%, var(--ink))); }
.leaflet-container .leaflet-bar { border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: 12px; overflow: hidden; box-shadow: var(--lk-shadow-lift, 0 2px 8px rgba(0, 0, 0, .3)); }
.leaflet-container .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font: 600 20px/40px var(--font-b); color: var(--fog);
  background: var(--lk-card, var(--ink)); border-bottom: 1px solid var(--stroke); }
.leaflet-container .leaflet-bar a:last-child { border-bottom: 0; }
@media (hover: hover) { .leaflet-container .leaflet-bar a:hover { background: var(--lk-card-2, color-mix(in srgb, var(--fog) 7%, var(--ink))); color: var(--fog); } }
.leaflet-container .leaflet-bar a.leaflet-disabled { color: var(--fog-50); background: var(--lk-card-2, color-mix(in srgb, var(--fog) 7%, var(--ink))); }
@media (pointer: coarse), (max-width: 560px) { .leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; } }
.leaflet-touch .leaflet-bar { border: var(--lk-card-edge, 1px solid var(--stroke)); }
.leaflet-container .leaflet-control-attribution { padding: 2px 8px; border-top-left-radius: 8px; background: var(--lk-card, var(--ink)); color: var(--fog-50); font: 11px/1.5 var(--font-b); }
.leaflet-container .leaflet-control-attribution a { color: var(--fog); text-decoration: underline; text-underline-offset: 2px; }
/* the dark looks: the same OpenStreetMap tiles, inverted into a night map (the pins and the chrome are not touched) */
html:not([data-theme="light"]) .leaflet-container .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }
html:not([data-theme="light"]) .mp-pin.on { background: #ffffff; color: #222222; box-shadow: 0 0 0 3px var(--pc, var(--st-new)), 0 8px 20px rgba(0, 0, 0, .6); }
html:not([data-theme="light"]) .mp-pin.on::after { border-top-color: #ffffff; }
html:not([data-theme="light"]) .mp-pin.approx { outline-color: rgba(255, 255, 255, .85); }

/* a booking's Location card */
.lc-where { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; margin: 0 0 14px; }
.lc-where > div { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.lc-where b { font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lc-where small { font-size: 13.5px; line-height: 1.45; color: var(--fog-50); }
.lc-where > .btn { flex: none; align-self: center; min-height: 44px; }
.lc-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--lk-line-2, var(--stroke)); color: var(--fog); }
.lc-stage { position: relative; height: 260px; overflow: hidden; isolation: isolate; border-radius: var(--lk-r-tile, 12px); border: 1px solid var(--stroke); background: var(--lk-card-2, var(--glass-2)); }
.lc-map { position: absolute; inset: 0; z-index: 0; }
.lc-map[hidden], .lc-msg[hidden], .lc-extra[hidden] { display: none; }
.lc-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; color: var(--fog); }
.lc-msg svg { width: 26px; height: 26px; color: var(--fog-50); }
.lc-msg p { margin: 0; max-width: 400px; font-size: 14px; line-height: 1.5; }
.lc-msg .btn { min-height: 44px; }
path.lc-area { stroke: var(--pc, #2a78d6); stroke-width: 2.5; stroke-dasharray: 7 6; fill: var(--pc, #2a78d6); fill-opacity: .14; }
.lc-acts { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 16px; }
.lc-grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lc-lbl { font-size: 12.5px; font-weight: 600; color: var(--fog-50); }
.lc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-btns .btn { min-height: 44px; }
.lc-grp .sc-note { min-height: 44px; display: flex; align-items: center; }
.lc-extra { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.lc-x { display: flex; gap: 12px; align-items: flex-start; }
.lc-x > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--fog-70); }
.lc-x > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-x b { font-size: 14.5px; font-weight: 600; }
.lc-x small { font-size: 13px; line-height: 1.45; color: var(--fog-50); }
.lc-same { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-same li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lc-same a { color: var(--fog); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.mp-card-st { display: none; }
@media (max-width: 1100px) { .mp-split { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } }
@media (max-width: 860px) {
  /* a phone: the status pills (the key as well) over the map, the date, service and archived filters under it with the list */
  .mp-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "st" "m" "t" "l"; grid-template-rows: auto; }
  .mp-f { display: contents; }
  .mp-st { grid-area: st; }
  .mp-tools { grid-area: t; }
  .mp-mapw { position: relative; top: 0; height: clamp(340px, 58vh, 540px); }
  .mp-card { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; max-height: 72%; }
  .mp-card-ph { display: none; }
  .mp-card-st { display: flex; align-items: center; gap: 7px; }
  .mp-card-b .mp-card-st { color: var(--fog); font-weight: 600; }
  .mp-card-x { top: 6px; right: 6px; background: var(--lk-card-2, color-mix(in srgb, var(--fog) 7%, var(--ink))); color: var(--fog); box-shadow: none; }
  .mp-card-n { padding-right: 48px; font-size: 17px; }
  .mp-card-b { padding: 12px 14px 14px; }
  .mp-card-b .mp-card-d, .mp-card-b .mp-card-s, .mp-card-b .mp-card-note { display: none; }
  .mp-card-b .btn { margin-top: 6px; }
}
@media (max-width: 560px) {
  .mp-tools .mp-svc { flex: 1 1 100%; }
  .mp-pg .pg-actions { display: none; }   /* the tab bar carries Calendar on a phone */
  .mp-un-r { flex-wrap: wrap; }
  .mp-un-r .btn { width: 100%; }
  .lc-stage { height: 220px; }
  .lc-grp { flex: 1 1 100%; }
  .lc-btns .btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-card { animation: none; }
  .mp-pin, .mp-rowb { transition: none; }
  .mp-drop .mp-pin, .mp-drop .mp-cl, .mp-pin.on::before { animation: none; }
  .mp-pin.on::before { display: none; }
  .mp-map .leaflet-cluster-anim .leaflet-marker-icon, .mp-map .leaflet-cluster-anim .leaflet-marker-shadow { transition: none; }
}   /* closed 8 November 2026: without this brace every rule below applied only on a device set to reduce motion */

/* ═══════════════════════ THE CALENDAR'S VIEWS (7 November 2026: CALENDAR-NOTES.md) ═══════════════════════
   Week Missive 63c25d8d · Day GlossGenius efe0bf70 · List Luma 3c6cf3f9 · Crew and kit Wrike 8bb3f47e · Move Acuity flow 9872.
   Look tokens only (the same ones the month uses), so every look draws it in its own colours. */
.cal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.calx:not(.v-month) { grid-template-columns: minmax(0, 1fr); }
.calx:not(.v-month) > .agenda { display: none; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.cal-views { max-width: 100%; }
.cal-views button { white-space: nowrap; }
.cal-count { margin: 0; }
#cal-legend[hidden] { display: none; }
.cal-filt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cal-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; gap: 10px; align-items: center; justify-content: start; }
.cal-sel .btn { justify-self: start; }
.cal-sel .btn[hidden] { display: none; }

/* dragging: a mouse after 6px, a finger after a short hold; the ghost follows, the day under it lights */
[data-drag] { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-drag] a, [data-drag] img { -webkit-touch-callout: none; -webkit-user-drag: none; }
html.cal-dragging, html.cal-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.lifting { opacity: .4; }
.cal-ghost { position: fixed; left: 0; top: 0; z-index: 120; margin: 0; pointer-events: none; transform-origin: 0 0; opacity: .96;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18); }
.cal-ghost.cc, .cal-ghost.lr, .cal-ghost.cf, .cal-ghost.ag-r, .cal-ghost.ln-bar { position: fixed !important; height: auto !important; max-height: 140px; overflow: hidden; }
.cal-ghost.ce { padding: 6px 10px; border-radius: 10px; background: var(--lk-card, var(--glass)); }
[data-drop].drop-on { outline: 2px solid var(--fog); outline-offset: -2px; background-color: var(--lk-acc-soft, var(--volt-soft)); }

/* a booking card: the status as a stripe and in words, the service by its dot and its name */
.cc { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 7px 8px 7px 10px; border-radius: 10px;
  border: 1px solid var(--lk-line, var(--stroke)); border-left: 3px solid var(--st, var(--fog-50)); background: var(--lk-card, var(--glass)); color: var(--fog); }
@media (hover: hover) { .cc:hover { border-color: var(--fog-50); border-left-color: var(--st, var(--fog-50)); } }
.cc-a { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.cc-a > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-t { font-size: 12px; font-weight: 650; color: var(--lk-acc-text, var(--volt)); }
.cc-n { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.cc-s, .cc-l, .cc-m { font-size: 12px; color: var(--fog-70); }
.cc-s { display: flex; align-items: center; gap: 6px; }
.cc-s i, .cf-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot, var(--fog-50)); }
.cf-dot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.cc-m { color: var(--fog-70); }   /* the 50% grey fell to 4.18:1 on Midnight Glass's dark card: the status words are not decoration */
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cc-crew { display: inline-flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.cc-crew > i { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--glass-2); color: var(--fog); font-size: 10.5px; font-weight: 700; font-style: normal; }
.cc-mv, .ag-mv { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--lk-line-2, var(--stroke)); background: transparent; color: var(--fog); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
@media (hover: hover) { .cc-mv:hover, .ag-mv:hover { border-color: var(--fog); } }
.cc-mv:focus-visible, .ag-mv:focus-visible, .wk-dh:focus-visible, .dv-d:focus-visible, .ln-dh:focus-visible, .wkp-n:focus-visible { outline: 2px solid var(--fog); outline-offset: 2px; }

/* ── WEEK: an all-day row over the hour grid (Missive) ── */
.wk { --hr: 44px; display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); grid-template-rows: auto auto calc(var(--rows) * var(--hr));
  border: 1px solid var(--lk-line, var(--stroke)); border-radius: var(--lk-r-card, 16px); background: var(--lk-card, var(--glass)); overflow: hidden; }
.wk > * { min-width: 0; }
.wk-c, .wk-lab { border-bottom: 1px solid var(--lk-line, var(--stroke)); }
.wk-lab { display: flex; align-items: flex-start; justify-content: flex-end; padding: 10px 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--fog-50); }
.wk-dh { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 10px; border: 0; border-left: 1px solid var(--lk-line, var(--stroke)); border-bottom: 1px solid var(--lk-line, var(--stroke));
  background: transparent; color: var(--fog); font: inherit; cursor: pointer; }
.wk-dh small { font-size: 12px; font-weight: 600; color: var(--fog-50); }
.wk-dh b { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.wk-dh.today b { background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); }
.wk-dh.past b { color: var(--fog-50); }
@media (hover: hover) { .wk-dh:hover b { box-shadow: inset 0 0 0 1px var(--fog-50); } }
.wk-blk { font-size: 11px; font-weight: 650; color: var(--fog-70); }
.wk-ad { display: flex; flex-direction: column; gap: 6px; min-height: 52px; padding: 6px; border-left: 1px solid var(--lk-line, var(--stroke)); border-bottom: 1px solid var(--lk-line, var(--stroke)); }
.wk-ad.past, .wk-col.past { background-color: var(--glass-2); }
.wk-ad.blocked, .wk-col.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px); }
.wk-none { margin: auto 0; font-size: 12.5px; color: var(--fog-50); }
.wk-hrs { position: relative; }
.wk-hrs span { position: absolute; right: 8px; top: calc(var(--h) * var(--hr) + 3px); font-size: 11.5px; font-weight: 500; color: var(--fog-50); font-variant-numeric: tabular-nums; }
.wk-col { position: relative; border-left: 1px solid var(--lk-line, var(--stroke));
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hr) - 1px), var(--lk-line, var(--stroke)) calc(var(--hr) - 1px) var(--hr)); }
.wk-col.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px), repeating-linear-gradient(to bottom, transparent 0 calc(var(--hr) - 1px), var(--lk-line, var(--stroke)) calc(var(--hr) - 1px) var(--hr)); }
.wk-col .cc.timed { position: absolute; top: calc(var(--top) * var(--hr) + 2px); height: calc(var(--len) * var(--hr) - 4px); overflow: hidden;
  left: calc(4px + (100% - 8px) * var(--lane) / var(--lanes)); width: calc((100% - 8px) / var(--lanes) - 3px); padding-top: 5px; z-index: 1; }
.wk-col .cc.timed .cc-foot { position: absolute; right: 5px; bottom: 5px; }
.wk-col .cc.timed .cc-crew { display: none; }
.wk-now { position: absolute; left: 0; right: 0; top: calc(var(--top) * var(--hr)); height: 2px; background: var(--lk-acc-fill, #f5c542); z-index: 2; pointer-events: none; }
.wk-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--lk-acc-fill, #f5c542); }
.wk.one { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto calc(var(--rows) * var(--hr)); --hr: 56px; }
.wk.one .wk-ad { flex-direction: row; flex-wrap: wrap; }
.wk.one .wk-ad .cc { flex: 1 1 220px; }
/* a phone: the week's days stack, each one a place to drop */
.wkp { display: flex; flex-direction: column; gap: 10px; }
.wkp-day { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--lk-line, var(--stroke)); background: var(--lk-card, var(--glass)); }
.wkp-day.past { background-color: var(--glass-2); }
.wkp-day.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px); }
.wkp-day > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 650 15px/1.3 var(--font-b); color: var(--fog); }
.wkp-day > h3 small { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--fog-70); }
.wkp-n { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--lk-line-2, var(--stroke)); background: transparent; color: var(--fog); font: inherit; font-weight: 700; cursor: pointer; }
.wkp-day.today .wkp-n { background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); border-color: transparent; }
.wkp-free { margin: 0; font-size: 13px; color: var(--fog-50); }
.wkp .cc-a > * { white-space: normal; }

/* ── DAY: the week as a strip, the hour grid, each booking in full beside it (GlossGenius) ── */
.dv-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dv-d { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px 9px; border-radius: 14px; border: 1px solid var(--lk-line, var(--stroke));
  background: var(--lk-card, var(--glass)); color: var(--fog); font: inherit; cursor: pointer; }
.dv-d small { font-size: 12px; font-weight: 600; color: var(--fog-50); }
.dv-d b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dv-d.on { border-color: var(--fog); box-shadow: 0 0 0 1px var(--fog); }
.dv-d.today b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); }
.dv-d.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px); }
.dv-dots { display: flex; gap: 3px; min-height: 6px; }
.dv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--fog-50)); }
.dv-sum { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; }
.dv-sum span { padding: 5px 11px; border-radius: 999px; background: var(--glass-2); color: var(--fog); font-size: 13px; font-weight: 600; }
.dv { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.dv-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dv-h { margin: 0; font: 650 15px/1.3 var(--font-b); color: var(--fog); }
.cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 16px 14px 18px; border-radius: var(--lk-r-card, 16px);
  border: 1px solid var(--lk-line, var(--stroke)); border-left: 4px solid var(--st, var(--fog-50)); background: var(--lk-card, var(--glass)); color: var(--fog); }
.cf-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cf-t { margin: 0 auto 0 0; font-size: 13px; font-weight: 650; color: var(--lk-acc-text, var(--volt)); }
.cf h3 { margin: 2px 0 0; font: 700 18px/1.25 var(--font-d); letter-spacing: -0.01em; }
.cf h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cf h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.cf-m { display: flex; align-items: center; gap: 0; margin: 0; font-size: 13.5px; color: var(--fog-70); }
.cf-m svg, .lr-m svg { width: 15px; height: 15px; margin-right: 7px; flex: none; }
.cf-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 6px 0 2px; }
.cf-dl dt { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fog-50); }
.cf-dl dt svg { width: 14px; height: 14px; }
.cf-dl dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fog); }
.cf-dl dd small { color: var(--fog-50); font-size: 12px; }
.cf-none { color: var(--fog-50); }
.cf-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ── LIST: a date column, a dotted line with a dot per day, the cards (Luma) ── */
.ls { display: flex; flex-direction: column; gap: 26px; }
.ls-day { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 34px; border-radius: 16px; }
.ls-day::before { content: ''; position: absolute; left: 148px; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--fog-50); background: var(--lk-page, transparent); }
.ls-day::after { content: ''; position: absolute; left: 153px; top: 22px; bottom: -26px; border-left: 2px dotted var(--lk-line-2, var(--stroke)); }
.ls-day:last-child::after { display: none; }
.ls-day.today::before { border-color: var(--lk-acc-fill, #f5c542); background: var(--lk-acc-fill, #f5c542); }
.ls-when { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.ls-when b { font-size: 15px; font-weight: 650; color: var(--fog); }
.ls-when small { font-size: 13.5px; color: var(--fog-50); }
.ls-rows { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ls-blk { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--glass-2); color: var(--fog); font-size: 13px; font-weight: 600; }
.ls-blk svg { width: 14px; height: 14px; }
.lr { display: flex; gap: 16px; min-width: 0; padding: 16px; border-radius: var(--lk-r-card, 16px); border: 1px solid var(--lk-line, var(--stroke)); border-left: 4px solid var(--st, var(--fog-50)); background: var(--lk-card, var(--glass)); color: var(--fog); }
@media (hover: hover) { .lr:hover { border-color: var(--fog-50); border-left-color: var(--st, var(--fog-50)); } }
.lr-b { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.lr-t { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--lk-acc-text, var(--volt)); }
.lr h3 { margin: 0; font: 700 19px/1.25 var(--font-d); letter-spacing: -0.01em; }
.lr h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .lr h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.lr-m { display: flex; align-items: center; margin: 0; font-size: 13.5px; color: var(--fog-70); min-width: 0; }
.lr-f { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lr-f .btn { margin-left: auto; }
.lr-ph { width: 96px; height: 96px; flex: none; border-radius: 12px; object-fit: cover; }

/* ── CREW AND KIT: a row per person and per piece of kit, the week across (Wrike) ── */
.ln-wrap { overflow-x: auto; border: 1px solid var(--lk-line, var(--stroke)); border-radius: var(--lk-r-card, 16px); background: var(--lk-card, var(--glass)); }
.ln-wrap:focus-visible { outline: 2px solid var(--fog); outline-offset: 2px; }
.ln { display: grid; grid-template-columns: minmax(150px, 190px) repeat(7, minmax(98px, 1fr)); min-width: 840px; }
.ln > * { min-width: 0; border-bottom: 1px solid var(--lk-line, var(--stroke)); }
.ln-c, .ln-n, .ln-sec { position: sticky; left: 0; z-index: 2; background: var(--lk-card, var(--glass)); }
.ln-c { display: flex; align-items: center; padding: 10px 14px; font-size: 12.5px; font-weight: 650; color: var(--fog-70); }
.ln-dh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0; border-left: 1px solid var(--lk-line, var(--stroke)); border-bottom: 1px solid var(--lk-line, var(--stroke)); background: transparent; color: var(--fog); font: inherit; cursor: pointer; }
.ln-dh small { font-size: 12px; font-weight: 600; color: var(--fog-50); }
.ln-dh b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; font-size: 15px; font-weight: 650; }
.ln-dh.today b { background: var(--lk-acc-fill, #f5c542); color: var(--lk-acc-ink, #1a1407); }
.ln-sec { grid-column: 1 / -1; padding: 12px 14px 6px; background: var(--glass-2); }
.ln-sec span { position: sticky; left: 14px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--fog-70); }
.ln-n { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
.ln-n b { display: block; font-size: 14px; font-weight: 650; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-n small { display: block; font-size: 12px; color: var(--fog-50); }
.ln-n > span:last-child { min-width: 0; }
.ln-av { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--glass-2); color: var(--fog); font-size: 12px; font-weight: 700; }
.ln-av svg { width: 16px; height: 16px; }
.ln-cell { display: flex; flex-direction: column; gap: 5px; padding: 6px; min-height: 64px; border-left: 1px solid var(--lk-line, var(--stroke)); }
.ln-cell.today { box-shadow: inset 2px 0 0 var(--lk-acc-fill, #f5c542); }
.ln-cell.past { background-color: var(--glass-2); }
.ln-cell.blocked { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--stroke) 7px 8px); }
.ln-cell.clash { box-shadow: inset 0 0 0 2px var(--bad); }
.ln-x { display: block; padding: 3px 7px; border-radius: 6px; background: var(--lk-card, var(--glass)); border: 1px solid var(--bad); color: var(--fog); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-bar { display: flex; flex-direction: column; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--lk-line, var(--stroke)); border-left: 3px solid var(--st, var(--fog-50)); background: var(--lk-card, var(--glass)); color: var(--fog); text-decoration: none; }
.ln-bar b, .ln-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-bar b { font-size: 12.5px; font-weight: 650; }
.ln-bar small { font-size: 11.5px; color: var(--fog-70); }
@media (hover: hover) { .ln-bar:hover { border-color: var(--fog-50); border-left-color: var(--st, var(--fog-50)); } }
.ln-empty { margin-bottom: 14px; }

/* ── the month's agenda rows carry Move beside their link ── */
.ag-r .ag-a { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ag-r .ag-mv { margin-left: 0; flex: none; }

/* ── MOVE: the dialog (Acuity 9872) and the toast with Undo ── */
.mv h2 { margin-bottom: 6px; }
.mv-pick { margin: 16px 0 12px; max-width: 320px; }
.mv-box { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 14px 16px; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); color: var(--fog); }
.mv-box > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.mv-box.ok > svg { color: var(--good); }
.mv-box.warn { box-shadow: inset 3px 0 0 var(--warn); }
.mv-box.warn > svg { color: var(--fog); }
.mv-box b { display: block; font-size: 14.5px; font-weight: 650; }
.mv-box p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--fog-70); }
.mv-box ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.mv-quiet { display: flex; align-items: center; gap: 8px; }
.mv-quiet svg { width: 16px; height: 16px; flex: none; }
.cal-toast { gap: 14px; }
.cal-undo { padding: 6px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.cal-undo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Settings → Phone calendar (Luma 70a7d9dd, Todoist 27901dc2) ── */
.pf-p { margin: 0 0 14px; }
.pf-state { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--fog); }
.pf-add { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.pf-add .btn svg { width: 17px; height: 17px; margin-right: 8px; }
.pf-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 14px; max-width: 760px; }
.pf-copy input { font: 12.5px/1.5 ui-monospace, Menlo, monospace; }
.pf-steps { margin: 0 0 16px; padding-left: 20px; color: var(--fog); font-size: 14px; line-height: 1.6; }
.pf-steps li + li { margin-top: 6px; }
.pf-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); color: var(--fog); }
.pf-note > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pf-note p { margin: 0; font-size: 14px; line-height: 1.55; }

@media (max-width: 1100px) {
  .dv { grid-template-columns: minmax(0, 1fr); }
  .cal-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-sel .btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cal-bar { flex-direction: column; align-items: stretch; }
  .cal-views { display: flex; width: 100%; }
  .cal-views button { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .cal-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-strip { gap: 4px; }
  .dv-d { padding: 6px 2px 7px; border-radius: 10px; }
  .dv-d small { font-size: 11px; }
  .ls { gap: 18px; }
  .ls-day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 22px; }
  .ls-day::before { left: 0; top: 5px; }
  .ls-day::after { left: 5px; top: 20px; bottom: -18px; }
  .ls-when { flex-direction: row; align-items: baseline; gap: 8px; }
  .lr { gap: 12px; padding: 14px; }
  .lr-ph { width: 64px; height: 64px; border-radius: 10px; }
  .lr h3 { font-size: 17px; }
  .lr-f .btn { margin-left: 0; }
  .cf-dl { grid-template-columns: minmax(0, 1fr); }
  .ln { grid-template-columns: 128px repeat(7, minmax(108px, 1fr)); min-width: 884px; }
  .ln-n { padding: 8px 10px; gap: 8px; }
  .ln-av { width: 28px; height: 28px; }
  .ln-n b { white-space: normal; overflow-wrap: anywhere; }
  .pf-copy { grid-template-columns: minmax(0, 1fr); }
  .pf-copy .btn { justify-self: start; }
  .mv-foot { flex-direction: column-reverse; align-items: stretch; }
}
@media (pointer: coarse) {
  .cc-mv, .ag-mv { min-height: 44px; min-width: 64px; }
  .ln-bar { min-height: 44px; justify-content: center; }
  .wk-dh, .dv-d, .ln-dh { min-height: 44px; }
  .wkp-n { min-width: 44px; height: 44px; }
  .cal-undo { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-ghost { box-shadow: none; }
}   /* closed 8 November 2026 (the same missing brace: money and mail below applied only with reduced motion) */

/* ═══════════════════════ THE BOOKING POP-UP (8 November 2026: CALENDAR-POPOVER-NOTES.md) ═══════════════════════
   Airtable flow 1568 (a tile opens a pop-over anchored to it) · Missive 7779044d (the facts as rows led by icons) ·
   Cron a3719293 and 59b75753 (each row edited where it sits; the phone's bottom sheet). The house ticket: the service
   photograph with its white status pill, the perforation with its notches, the gold date stub. Look tokens only.
   The shadow sits on the wrapper (a filter follows the ticket's notched shape; a box-shadow would be cut by the mask). */
.cpop { --cp-dx: 0px; --cp-dy: 6px; position: fixed; z-index: 75; left: 0; top: 0; display: flex; flex-direction: column;
  width: 392px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); outline: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .22)) drop-shadow(0 2px 6px rgba(0, 0, 0, .12)); animation: cp-in .2s var(--ease) backwards; }
.cpop[data-side="r"] { --cp-dx: -8px; --cp-dy: 0px; transform-origin: left top; }
.cpop[data-side="l"] { --cp-dx: 8px; --cp-dy: 0px; transform-origin: right top; }
.cp-tk { --cp-ph: 84px; position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--lk-pop, rgba(17, 19, 26, .98)); color: var(--fog); border: 1px solid var(--lk-line, var(--stroke-2)); border-radius: var(--lk-r-pop, 20px);
  -webkit-mask: radial-gradient(circle 9px at 0 var(--cp-ph), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--cp-ph), #0000 97%, #000 100%) top right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 var(--cp-ph), #0000 97%, #000 100%) top left / 51% 100% no-repeat,
                radial-gradient(circle 9px at 100% var(--cp-ph), #0000 97%, #000 100%) top right / 51% 100% no-repeat; }
html:not([data-look])[data-theme="light"] .cp-tk, html:not([data-look])[data-theme="light"] .cp-efoot { background: rgba(255, 255, 255, .98); }
.cp-ph { position: relative; flex: none; height: var(--cp-ph); overflow: hidden; background: var(--glass-2); }
.cp-ph::before { content: ''; position: absolute; inset: 0; background: var(--tk-img, none) center 42% / cover no-repeat; }
.cp-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .34) 100%); pointer-events: none; }
.cp-pills { position: absolute; z-index: 2; left: 14px; right: 58px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-pills .cv-pill { position: static; max-width: 100%; }
.cp-x { position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: #ffffff; color: #222222; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); cursor: pointer; }
.cp-x svg.i { width: 18px; height: 18px; }
.cp-x:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cp-tk > .tk-perf { margin: 0 16px; }
.cp-hd { flex: none; display: flex; gap: 14px; align-items: flex-start; padding: 12px 18px 10px; }
.cp-hd .tk-date { width: 56px; }
.cp-who { flex: 1; min-width: 0; padding-top: 2px; }
.cp-who h2 { margin: 0; font: 700 20px/1.2 var(--font-d); letter-spacing: -0.02em; color: var(--fog); overflow-wrap: anywhere; }
.cp-who p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--fog-70); }
.cp-edit { flex: none; }
.cp-edit svg.i { width: 15px; height: 15px; margin-right: 6px; }
.cp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 8px; }
.cp-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--lk-line, var(--stroke));
  animation: cp-row .3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 26ms + 50ms); }
.cp-body > .cp-row:first-child, .cp-msg + .cp-row { border-top: 0; }
.cp-pair { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }
.cp-half { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; min-width: 0; }
.cp-row[hidden], #cp-booth[hidden] { display: none; }
.cp-ic svg.i { width: 18px; height: 18px; margin-top: 1px; color: var(--fog-50); }
.cp-rb { min-width: 0; }
.cp-rt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cp-rb { position: relative; }
.cp-quiet { font-size: 13px; color: var(--fog-70); }
.cp-val { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: calc(100% + 16px); margin: -3px -8px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--fog); font: inherit; font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; }
.cp-v { min-width: 0; overflow-wrap: anywhere; }
.cp-v b { display: block; font-weight: 600; }
.cp-v small { display: block; margin-top: 1px; font-size: 13px; color: var(--fog-70); }
.cp-val svg.cp-pen { width: 15px; height: 15px; margin-top: 3px; color: var(--fog-50); opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .cp-val:hover, button.cp-tile:hover { background: var(--glass-2); } .cp-val:hover svg.cp-pen { opacity: 1; } button.cp-tile:hover { box-shadow: inset 0 0 0 1px var(--fog-50); } }
@media (max-width: 760px) { .cp-dir > span { display: none; } }   /* a phone: the two map buttons share one line */
.cp-val:focus-visible, .cp-tile:focus-visible, .cp-chip:focus-visible, .cp-lnk:focus-visible, .cp-edit:focus-visible { outline: 2px solid var(--fog); outline-offset: 1px; }
.cp-val:focus-visible svg.cp-pen { opacity: 1; }
.cp-dir { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-dir > span { margin-right: 2px; font-size: 12.5px; color: var(--fog-70); }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--lk-line-2, var(--stroke-2));
  color: var(--fog); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cp-chip svg.i { width: 13px; height: 13px; }
@media (hover: hover) { .cp-chip:hover { border-color: var(--fog); } }
.cp-tx { min-width: 0; font-size: 14px; line-height: 1.5; color: var(--fog); overflow-wrap: anywhere; }
.cp-tx b { display: block; font-weight: 600; }
.cp-tx small { display: block; font-size: 13px; color: var(--fog-70); }
.cp-lnk { color: var(--fog); text-decoration: underline; text-decoration-color: var(--lk-line-2, var(--stroke-2)); text-underline-offset: 3px; }
@media (hover: hover) { .cp-lnk:hover { text-decoration-color: currentColor; } }
.cp-tx > .cp-lnk { display: block; width: fit-content; max-width: 100%; }
.cp-tel { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cp-none { color: var(--fog-50); }
.cp-p { display: block; }
.cp-p small { display: inline; color: var(--fog-70); }
.cp-kit { display: block; margin-top: 2px; font-size: 13px; color: var(--fog-70); }
.cp-notes { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.cp-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.cp-tile { min-width: 0; padding: 8px 10px; border: 0; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); color: var(--fog); font: inherit; text-align: left; }
button.cp-tile { cursor: pointer; }
.cp-tile small { display: block; font-size: 12px; color: var(--fog-70); }
.cp-tile b { display: block; margin-top: 2px; font: 700 16px/1.2 var(--font-d); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-tile.due { background: var(--lk-acc-soft, var(--volt-soft)); }
.cp-fine { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fog-70); }
.cp-fine[hidden] { display: none; }
.cp-sk { display: block; height: 14px; margin-top: 6px; border-radius: 6px; }
.cp-money .cp-sk { height: 46px; margin: 0; border-radius: var(--lk-r-tile, 12px); }
.cp-msg { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); color: var(--fog); }
.cp-msg > svg.i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cp-msg b { display: block; font-size: 14px; font-weight: 650; }
.cp-msg p { margin: 3px 0 0; font-size: 13px; color: var(--fog-70); }
.cp-say { flex: none; margin: 0; padding: 2px 18px 8px; font-size: 13px; font-weight: 600; color: var(--fog); }
.cp-say:empty { display: none; }
.cp-undo { margin-left: 8px; padding: 4px 13px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.cp-undo:focus-visible { outline: 2px solid var(--fog); outline-offset: 2px; }

.cp-foot { flex: none; display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--lk-line, var(--stroke)); }
.cp-foot .btn { flex: 1 1 0; justify-content: center; min-width: 0; white-space: nowrap; }
.cp-foot .btn svg.i { width: 15px; height: 15px; margin-right: 6px; }
/* editing in place: the rows become their fields in the same order; Save and Cancel stay in reach at the foot */
.cp-form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 0; }
.cp-form > * { flex-shrink: 0; }   /* the form scrolls; its fields never squeeze (on a phone the Notes label left its box) */
.cp-half.no-ic { grid-template-columns: minmax(0, 1fr); }
.cp-form .ffield { min-height: 54px; }
.cp-form textarea { min-height: 70px; }
.cp-g3, .cp-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-g3 > :first-child { grid-column: 1 / -1; }
.cp-check:empty { display: none; }
.cp-mv { margin: 0; }
.cp-ask { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-err { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); box-shadow: inset 3px 0 0 var(--bad);
  color: var(--fog); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.cp-err[hidden] { display: none; }
.cp-err svg.i { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.cp-efoot { position: sticky; bottom: 0; z-index: 2; margin: 2px -18px 0; padding: 12px 18px 14px; background: var(--lk-pop, rgba(17, 19, 26, .98)); }
/* the booking whose pop-up is open is lit, so the two read as one */
.cp-on { outline: 2px solid var(--fog); outline-offset: 2px; }
.ce.cp-on { outline-offset: 1px; }
.wk-col .cc.timed.cp-on { z-index: 3; }
/* a phone: a bottom sheet with a grabber; a finger pulls it down to close */
.cpop.sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: min(92vh, calc(100dvh - 16px));
  filter: drop-shadow(0 -8px 24px rgba(0, 0, 0, .25)); animation: cp-sheet .28s var(--ease) backwards; }
.cpop.sheet .cp-tk { border-radius: 22px 22px 0 0; border-bottom: 0; }
.cpop.sheet .cp-ph { touch-action: none; cursor: grab; }
.cpop.sheet .cp-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.cpop.sheet .cp-efoot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.cpop.dragging { animation: none; }
.cp-grab { position: absolute; z-index: 3; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.cpop-scrim { position: fixed; inset: 0; z-index: 74; background: var(--lk-scrim, rgba(0, 0, 0, .55)); touch-action: none; animation: cp-fade .2s ease backwards; }
.cpop.out { opacity: 0; transform: translateY(4px) scale(.985); transition: opacity .14s ease-in, transform .14s ease-in; }
.cpop.sheet.out { opacity: 0; transform: translateY(40%); transition: opacity .18s ease-in, transform .18s ease-in; }
.cpop-scrim.out { opacity: 0; transition: opacity .16s; }
.cpop.nudge .cp-tk { animation: cp-nudge .32s ease; }
/* the ticket tears off: the booking grows into its ticket (a View Transition, the house's ticket-opens recipe), the
   photograph leading as it unfolds (views.js turns the pop-up's own rise off when it is built inside the morph) */
::view-transition-group(cp-ticket) { border-radius: var(--lk-r-pop, 20px); overflow: hidden; animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(cp-ticket) { width: 100%; height: 100%; object-fit: cover; animation-duration: .16s; }
::view-transition-new(cp-ticket) { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@keyframes cp-in { from { opacity: 0; transform: translate(var(--cp-dx), var(--cp-dy)) scale(.97); } }
@keyframes cp-sheet { from { transform: translateY(100%); } }
@keyframes cp-fade { from { opacity: 0; } }
@keyframes cp-row { from { opacity: 0; transform: translateY(4px); } }
@keyframes cp-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (pointer: coarse) {
  .cp-chip { min-height: 44px; padding: 6px 14px; }
  .cp-foot .btn, .cp-efoot .btn, .cp-edit { min-height: 44px; }
  .cp-x { width: 44px; height: 44px; top: 8px; right: 8px; }
  /* every other control reaches 44px on a touch screen too (8 November 2026). The facts keep their place: the extra height
     is padding that a negative margin takes back, so only the area a finger can hit grows */
  .cp-val { min-height: 44px; padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; align-items: center; }
  .cp-tx > .cp-lnk { display: flex; align-items: center; min-height: 44px; }
  .cp-tel .cp-lnk, .cpop .tg { display: inline-flex; align-items: center; min-height: 44px; }
  .cp-ask .btn, .cp-undo { min-height: 44px; padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpop, .cpop.sheet, .cp-row, .cpop-scrim, .cpop.nudge .cp-tk { animation: none; }
  .cpop.out, .cpop.sheet.out, .cpop-scrim.out { transition: none; }
}
/* the richer entries (8 November 2026): a month chip carries the status as a stripe, the start time, the customer, the
   service and the venue's town; "+N more" opens that day; the week's cards show the town */
.cal-d .ce { flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 7px 4px 6px; border-left: 3px solid var(--st, var(--fog-50)); line-height: 1.3; }
.ce-1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ce-1 b { flex: none; font-weight: 700; color: var(--lk-acc-text, var(--volt)); }
.ce-2 { font-size: 11px; font-weight: 500; color: var(--fog-70); }
@media (hover: hover) { .cal-d .ce:hover { box-shadow: inset 0 0 0 1px var(--fog-50); } .ce-more:hover { color: var(--fog); text-decoration: underline; text-underline-offset: 2px; } }
.ce-more { cursor: pointer; }
.cc-l svg.i { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* ═══════════════════════ MONEY AND MAIL (7 November 2026) ═══════════════════════
   The invoice ledger, the payments list, statements, chasing and the email log. Built from the shared pieces above
   (the quiet list, the record page, pills with counts); only what they lack is drawn here, in the look's tokens. */
.mm-rowend { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mm-rowend > span { min-width: 0; }
.mm-dup { width: 34px; height: 34px; }
.mm-radios { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; }
.mm-radios legend { font-size: 13px; font-weight: 600; color: var(--fog-50); margin-bottom: 8px; padding: 0; }
.mm-radios label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: var(--lk-r-field, 8px); cursor: pointer; }
.mm-radios label:has(input:checked) { border-color: var(--fog); }
.mm-radios input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--lk-sel, var(--fog)); flex: none; }
.mm-radios b { display: block; font-size: 14.5px; color: var(--fog); }
.mm-radios small { display: block; margin-top: 2px; font-size: 13px; color: var(--fog-50); line-height: 1.45; }
.mm-pays { display: grid; gap: 0; border-top: 1px solid var(--stroke); }
.mm-pay { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--stroke); }
.mm-pay-t { min-width: 0; }
.mm-pay-t b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--fog); }
.mm-pay-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--fog-50); overflow-wrap: anywhere; }
.mm-pay.void .mm-pay-t b { text-decoration: line-through; color: var(--fog-50); }
.mm-pay .mm-why { color: var(--fog-50); font-style: italic; }
.mm-ph { display: none; }
.mm-link { display: flex; gap: 8px; align-items: center; }
.mm-link input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--lk-field, var(--stroke)); border-radius: var(--lk-r-field, 8px);
  background: var(--lk-card-2, var(--glass-2)); color: var(--fog); font: 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mm-evs { margin-top: 14px; border-top: 1px solid var(--stroke); }
.mm-ev { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--stroke); font-size: 14px; color: var(--fog); }
.mm-ev time { color: var(--fog-50); font-size: 13px; white-space: nowrap; }
.pillrow.mm-sub { margin-top: 10px; }
.mm-sum { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 22px 0 16px; }
.mm-sum-n { display: block; font-family: var(--lk-display, inherit); font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--fog); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mm-sum-l { display: block; margin-top: 4px; font-size: 14px; color: var(--fog-50); }
.mm-sum-by { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-tblwrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.mm-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 470px; }
.mm-tbl td:first-child { white-space: nowrap; }
.mm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 6px 0 18px; }
.mm-tile { padding: 14px 16px; border: var(--lk-card-edge, 1px solid var(--stroke)); border-radius: var(--lk-r-tile, 12px); background: var(--lk-card, var(--glass)); min-width: 0; }
.mm-tile b { display: block; font-size: 24px; font-weight: 700; color: var(--fog); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mm-tile span { display: block; margin-top: 4px; font-size: 13px; color: var(--fog-50); }
@media (max-width: 1100px) { .mm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mm-em .c-meta { display: block; }
.mm-em .c-meta small { display: block; margin-top: 2px; }
.mm-em .lst-link { overflow-wrap: normal; word-break: normal; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tbl th { text-align: left; font-size: 13px; font-weight: 600; color: var(--fog-50); padding: 10px 8px; border-bottom: 1px solid var(--stroke); }
.mm-tbl td { padding: 11px 8px; border-bottom: 1px solid var(--stroke); color: var(--fog); vertical-align: top; }
.mm-tbl .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-tbl tr.cr td:nth-child(2) { color: var(--fog-50); }
.mm-tbl tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--fog); }
.mm-tbl a { color: inherit; text-underline-offset: 3px; }
.mm-ev-sub { display: block; font-size: 13px; color: var(--fog-50); margin-top: 2px; overflow-wrap: anywhere; }
.mm-check { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--fog); }
.mm-check input { width: 18px; height: 18px; accent-color: var(--lk-sel, var(--fog)); }
.mm-set-h { font-size: 16px; font-weight: 700; color: var(--fog); margin: 22px 0 12px; }
.mm-set-h:first-child { margin-top: 0; }
.mm-plan { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: var(--lk-r-tile, 12px); }
.mm-plan > p { margin: 0 0 6px; font-size: 14px; color: var(--fog); }
.mm-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fog); }
.mm-open .i { width: 16px; height: 16px; }
.mm-pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--lk-r-tile, 12px);
  background: var(--lk-card-2, var(--glass-2)); color: var(--fog); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 860px) {
  .lst-r > .mm-rowend { flex: 1 1 100%; }
  .lst-r > .mm-owed:not(:empty) .mm-ph { display: inline; font-weight: 500; color: var(--fog-50); }
}

/* ═══════════════════════ TO DO (8 November 2026: TODOS-NOTES.md) ═══════════════════════
   A booking's To do card (Todoist's list 5ff3471c and Aboard's inline editor 8c3cbef1, drawn in the house tokens), the "2 of 5 done"
   chip (Linear's ring 4a094449), Today's "To do this week" (Todoist's Today 8e1cc80d) and Settings → To-do lists.
   Done is INK, as the step track draws a done step (a filled circle with the page colour's mark). Overdue is the danger colour in
   words, always with the word "Overdue". Due today is the gold as WORDS (--lk-acc-text, the deep gold on white). The gold FILL is
   not used here: it stays the date stub's and today's. Every :hover sits in (hover: hover); everything moving stops under reduced motion. */
.td-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── the card's head: "To do", the ring with "2 of 5 done", Use a list ── */
.td-card { scroll-margin-top: 112px; }   /* the ticket's button lands the card below the top bar (and the sample-data banner) */
.td-card .td-head { align-items: flex-start; flex-wrap: nowrap; }
.td-card .cd-h h3:focus { outline: none; }
.td-ttl { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.td-head > .btn { flex: none; }
.td-prog { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--fog); }
.td-prog:empty { display: none; }
.td-card .cd-h .btn[hidden] { display: none; }   /* hidden loses to .btn's display otherwise */
.td-over-n { font-weight: 700; color: var(--bad); }
.td-over-n[hidden] { display: none; }

/* ── the ring: a track, an arc that runs to its new length, and a check when every to-do is done ── */
.td-ring { flex: none; display: block; overflow: visible; }
.td-ring .tr-t { fill: none; stroke: var(--lk-line-2, var(--stroke-2)); stroke-width: 2.4; transition: fill .25s var(--ease), stroke .25s var(--ease); }
.td-ring .tr-p { fill: none; stroke: var(--fog); stroke-width: 2.4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 9px 9px; transition: stroke-dasharray .5s var(--ease), opacity .2s; }
.td-ring .tr-k { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .3s var(--ease) .18s; }
.td-ring.all .tr-t { fill: var(--fog); stroke: var(--fog); }
.td-ring.all .tr-p { opacity: 0; }
.td-ring.all .tr-k { stroke-dashoffset: 0; }
.td-prog.pop .td-ring { animation: sc-pop .55s var(--ease); }

/* ── the list: a round tick, the words with their line under them, the handle ── */
.td-list { margin: 0; padding: 0; list-style: none; }
.td-i { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--stroke);
  background: var(--lk-card, transparent); }
.td-list .td-i:last-child { border-bottom: 0; }
.td-chk { position: relative; width: 32px; height: 32px; margin: -3px 0 0 -4px; padding: 4px; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--fog); }
.td-chk svg { width: 24px; height: 24px; display: block; overflow: visible; }
.td-chk .c { fill: transparent; stroke: var(--lk-field, var(--stroke-2)); stroke-width: 1.8; transition: fill .22s var(--ease), stroke .22s var(--ease); }
.td-chk .k { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .28s var(--ease) .06s; }
.td-chk[aria-checked="true"] .c { fill: var(--fog); stroke: var(--fog); }
.td-chk[aria-checked="true"] .k { stroke: var(--ink); stroke-dashoffset: 0; }
@media (hover: hover) {
  .td-chk:hover .c { stroke: var(--fog); }
  .td-chk[aria-checked="false"]:hover .k { stroke: var(--fog-50); stroke-dashoffset: 0; }   /* Todoist's preview of the mark */
}
.td-chk:disabled { cursor: progress; }
.td-chk:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 0; }
.td-i.just .td-chk svg, .tw-r.just .td-chk svg { animation: sc-pop .44s var(--ease); }
.td-tx { min-width: 0; padding-top: 2px; }
.td-t { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 15px/1.4 var(--font-b); color: var(--fog);
  overflow-wrap: anywhere; text-decoration-line: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease); }
.td-i.done .td-t { color: var(--fog-50); text-decoration-color: currentColor; }
@media (hover: hover) { .td-i:not(.done) .td-t:hover { text-decoration-line: underline; text-decoration-color: var(--fog-50); text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.td-t:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 2px; border-radius: 4px; }
.td-n { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fog-70); white-space: pre-wrap; overflow-wrap: anywhere; }
.td-i.done .td-n { color: var(--fog-50); }
.td-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--fog-50); }
.td-due, .td-who, .td-by { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.td-due svg { width: 14px; height: 14px; flex: none; }
.td-due.over { color: var(--bad); font-weight: 650; }
.td-due.today { color: var(--lk-acc-text, var(--volt)); font-weight: 650; }
/* no word left on a line by itself on a phone ("…at" / "11:05", "…before the" / "event"); Today keeps an event's date whole (8 November 2026) */
.td-t, .td-m, .tw-t, .tw-b, .tl-prev li, .td-empty p, .tw-empty p { text-wrap: pretty; }
.tw-nw { white-space: nowrap; }
.td-who .av-c { width: 20px; height: 20px; font-size: 9.5px; }
.td-drag { width: 32px; height: 32px; margin-top: -3px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fog-50);
  cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.td-drag svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) { .td-drag:hover { color: var(--fog); background: var(--glass-2); } }
.td-drag:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 0; color: var(--fog); }
.td-i.lift, .tl-it.lift { z-index: 3; border-radius: 12px; box-shadow: var(--lk-shadow-lift, 0 10px 24px rgba(0, 0, 0, .18)); cursor: grabbing; }
.td-list.dragging .td-i:not(.lift), .tl-its.dragging .tl-it:not(.lift) { transition: transform .16s var(--ease); }
.td-i.arrive { animation: sc-rise .4s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 55ms); }
.td-i.gone { opacity: 0; transform: translateX(16px); transition: opacity .22s var(--ease), transform .22s var(--ease); pointer-events: none; }   /* a deleted one folds away */

/* ── Add a to-do (Todoist's last row: the plus fills on hover) ── */
.td-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 2px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 500 15px/1.3 var(--font-b); color: var(--fog-70); text-align: left; }
.td-add svg { width: 22px; height: 22px; margin: 0 6px 0 1px; padding: 3px; border-radius: 50%; transition: background .18s, color .18s; }
@media (hover: hover) { .td-add:hover { color: var(--fog); } .td-add:hover svg { background: var(--fog); color: var(--ink); } }
.td-add:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 2px; border-radius: 8px; }
.td-full { margin-top: 10px; }

/* ── the inline editor (Aboard): the words, notes, then When and Who as chips, then Cancel and Save ── */
.td-i.editing { display: block; padding: 6px 0; }
.td-addwrap { margin-top: 8px; }
.td-ed { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; border: 1px solid var(--lk-line-2, var(--stroke-2)); border-radius: var(--lk-r-tile, 12px);
  background: var(--lk-card, var(--glass)); box-shadow: var(--lk-shadow-lift, none); }
.td-ed:focus-within { border-color: var(--fog); box-shadow: 0 0 0 1px var(--fog), var(--lk-shadow-lift, none); }
/* the editor's own edge is the focus mark for its two text boxes (the look's input ring would draw a second box inside it) */
html .td-ed .td-ed-t:focus-visible, html .td-ed .td-ed-n:focus-visible { outline: none; }
.td-ed .td-ed-t, .td-ed .td-ed-n { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; padding: 2px 0; }
.td-ed .td-ed-t { font: 600 15.5px/1.4 var(--font-b); color: var(--fog); }
.td-ed .td-ed-n { min-height: 42px; resize: vertical; font: 400 14px/1.5 var(--font-b); color: var(--fog-70); }
.td-ed-t::placeholder, .td-ed-n::placeholder, .tl-it-t::placeholder, .tl-it-n::placeholder { color: var(--fog-50); opacity: 1; }
.td-ed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--stroke); }
.td-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; padding: 0 12px 0 10px; border: 1px solid var(--lk-field, var(--stroke-2));
  border-radius: 999px; background: var(--lk-card, transparent); color: var(--fog); }
.td-pick svg { width: 15px; height: 15px; flex: none; color: var(--fog-70); }
.td-pick::after { content: ''; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 0; border-right: 1.6px solid var(--fog-70); border-bottom: 1.6px solid var(--fog-70);
  transform: rotate(45deg); pointer-events: none; }   /* says "this opens a menu" (the native arrow is drawn off) */
.td-pick select { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 220px; margin: 0; padding: 6px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 600 13.5px/1.2 var(--font-b); color: var(--fog); cursor: pointer; text-overflow: ellipsis; }
.td-pick select:focus { outline: none; }
.td-pick:focus-within { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 1px; }
html .td-pick select:focus-visible { outline: none; }   /* the chip's own ring is the one focus mark (the look's select ring would draw a second) */
.td-pick select option { background: var(--lk-pop, var(--lk-card, #ffffff)); color: var(--fog); }
.td-ed .td-ed-date, .td-days input { min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--lk-field, var(--stroke-2)); border-radius: 999px; background: var(--lk-card, transparent);
  box-shadow: none; color: var(--fog); font: 600 13.5px/1 var(--font-b); color-scheme: light dark; }
.td-days { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fog-70); }
.td-days input { width: 76px; }
.td-ed-date[hidden], .td-days[hidden], .td-ed-note[hidden], .td-ed-err[hidden] { display: none; }
.td-ed-note { margin: 0; }
.td-ed-err { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--bad); }
.td-ed-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.td-ed-foot .sp { flex: 1 1 auto; }

/* ── nothing yet, or it did not load ── */
.td-empty p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fog-70); }
.td-empty p b { color: var(--fog); }
.td-empty-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ── Use a list: the pop-over ── */
.td-pop { position: absolute; z-index: 40; top: 58px; right: 16px; width: min(340px, calc(100% - 32px)); padding: 12px; border-radius: var(--lk-r-pop, 16px);
  background: var(--lk-pop, var(--lk-card, #15171d)); color: var(--fog); border: 1px solid var(--lk-line-2, var(--stroke-2)); box-shadow: var(--lk-shadow-pop, 0 16px 40px rgba(0, 0, 0, .35));
  animation: sc-fade .16s var(--ease); }
html:not([data-look]) .td-pop { background: rgba(17, 19, 26, .97); }
html:not([data-look])[data-theme="light"] .td-pop { background: #ffffff; }
.td-pop-h { margin: 2px 4px 8px; font-size: 13px; font-weight: 600; color: var(--fog-50); }
.td-pop-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.td-pop-i { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--fog);
  text-align: left; cursor: pointer; font: inherit; }
.td-pop-i b { font-size: 14.5px; font-weight: 650; }
.td-pop-i small { font-size: 12.5px; color: var(--fog-50); line-height: 1.4; }
@media (hover: hover) { .td-pop-i:hover { background: var(--glass-2); } }
.td-pop-i:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: -2px; }
.td-pop-f { margin: 8px 4px 0; padding-top: 6px; border-top: 1px solid var(--stroke); }
.td-pop .sc-note { margin: 4px; }

/* ── the toast with Undo (the calendar's, in this lane's own classes) ── */
.td-toast { display: flex; align-items: center; gap: 14px; }
.td-undo { padding: 6px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.td-undo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── THE CHIP: "2 of 5 done" (a quiet tag in a list; a white pill on a photograph, as the status is) ── */
.td-chip-host { display: inline-flex; max-width: 100%; }
.td-chip-host[hidden], .td-side-host[hidden] { display: none; }
.td-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 5px; border-radius: 999px; font: 600 12.5px/1.3 var(--font-b);
  background: var(--glass-2); color: var(--fog); white-space: nowrap; }
.td-chip > span:not(.td-vh) { overflow: hidden; text-overflow: ellipsis; }
.td-chip-over { margin-left: 2px; font-weight: 700; color: var(--bad); }
.td-chip-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #c2362f; }
.td-chip.on-photo { background: #ffffff; color: #222222; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.td-chip.on-photo .td-ring .tr-t { stroke: #d4d4d4; }
.td-chip.on-photo .td-ring .tr-p { stroke: #222222; }
.td-chip.on-photo .td-ring.all .tr-t { fill: #222222; stroke: #222222; }
.td-chip.on-photo .td-ring .tr-k { stroke: #ffffff; }
.tk-photo .td-chip-host { position: absolute; z-index: 2; right: 12px; bottom: 12px; max-width: calc(100% - 24px); }   /* bottom right: clear of the status pill and of the notches */
.lst .td-chip-host { margin-top: 6px; }
/* in the bookings list the host is a container: where "1 of 3 done · 1 overdue" cannot fit (the table's column at 1280px) the overdue
   words become the red dot, as on a photograph, and stay in the page for a screen reader. They were cut to "1 of 3 …" (8 November 2026) */
.lst .td-chip-host:not([hidden]) { display: flex; width: 100%; container: tdchip / inline-size; }
.lst .td-chip-host > .td-chip { min-width: 0; }
.td-chip-dot.cq { display: none; }
@container tdchip (max-width: 210px) {
  .td-chip.has-over .td-chip-dot.cq { display: block; }
  .td-chip.has-over .td-chip-over { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ── the booking's ticket: the progress, a button that goes to the card ── */
.td-side { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--lk-r-tile, 12px); background: var(--glass-2);
  color: var(--fog); font: 600 14px/1.35 var(--font-b); text-align: left; cursor: pointer; }
.td-side span { flex: 1 1 auto; min-width: 0; }
.td-side b { font-weight: 700; color: var(--bad); }
.td-side > svg.i { width: 16px; height: 16px; color: var(--fog-50); }
.td-side.pop .td-ring { animation: sc-pop .55s var(--ease); }   /* the last tick closes the ticket's ring as well as the card's */
@media (hover: hover) { .td-side:hover span { text-decoration: underline; text-underline-offset: 3px; } }

/* ── Today: "To do this week" (overdue first, then each day; a tick right there) ── */
.tw { padding: 6px 24px 12px; }
.tw-sec .sec-sub .tw-over-n { color: var(--bad); }
.tw-g { padding: 12px 0 2px; }
.tw-g + .tw-g { border-top: 1px solid var(--stroke); }
.tw-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 650 14px/1.3 var(--font-b); color: var(--fog); }
.tw-gh .n { font-weight: 500; color: var(--fog-50); }
.tw-g.over .tw-gh { color: var(--bad); }
.tw-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--bad); }
.tw-l { margin: 0; padding: 0; list-style: none; }
.tw-r { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; min-height: 58px; padding: 8px 0; border-top: 1px solid var(--stroke);
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tw-l .tw-r:first-child { border-top: 0; }
.tw-r .td-chk { margin-top: 0; }
.tw-tx { min-width: 0; }
.tw-t { display: block; font: 500 15px/1.4 var(--font-b); color: var(--fog); overflow-wrap: anywhere; text-decoration-line: line-through; text-decoration-color: transparent;
  text-decoration-thickness: 1.5px; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); }
.tw-r.done .tw-t { color: var(--fog-50); text-decoration-color: currentColor; }
.tw-b { display: inline-block; max-width: 100%; margin-top: 1px; font-size: 13px; color: var(--fog-50); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
@media (hover: hover) { .tw-b:hover { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; } }
.tw-b:focus-visible { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 2px; border-radius: 4px; }
.tw-when { font-size: 13px; font-weight: 600; color: var(--fog-70); white-space: nowrap; }
.tw-when.over { color: var(--bad); }
.tw-av { width: 28px; height: 28px; font-size: 11px; }
.tw-r.gone { opacity: 0; transform: translateX(14px); }
.tw-empty { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0 4px; }
.tw-empty > svg { width: 22px; height: 22px; flex: none; color: var(--fog-70); margin-top: 1px; }
.tw-empty p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fog-70); }
.tw-empty p b { color: var(--fog); }
.tw-more { margin: 8px 0 4px; }
.tw-greet b { color: var(--bad); }

/* ── Settings → To-do lists ── */
.tl-intro { margin-bottom: 14px; }
.tl-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 18px;
  border-radius: var(--lk-r-tile, 12px); background: var(--glass-2); }
.tl-sw .seg button:not(.on) { color: var(--fog-70); }   /* the house .seg's --fog-50 on this box's tint was 4.2:1 in Midnight dark (render gate, 8 November 2026); --fog-70 is 6.7:1 */
.tl-sw-t { min-width: 0; flex: 1 1 300px; }
.tl-sw-t b { font-size: 15px; font-weight: 650; color: var(--fog); }
.tl-sw-t .sc-note { margin-top: 3px; }
.tl-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.tl-card { padding: 16px 18px; border: 1px solid var(--lk-line-2, var(--stroke)); border-radius: var(--lk-r-tile, 12px); background: var(--lk-card, transparent); min-width: 0; }
.tl-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tl-card-h > div { min-width: 0; }
.tl-card-h h3 { margin: 0; font: 650 16px/1.3 var(--font-b); color: var(--fog); overflow-wrap: anywhere; }
.tl-card-h .sc-note { margin-top: 2px; }
.tl-prev { margin: 12px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fog); }
.tl-prev li { padding-left: 2px; overflow-wrap: anywhere; }
.tl-prev li::marker { color: var(--fog-50); font-weight: 600; font-size: 13px; }
.tl-prev small { margin-left: 8px; font-size: 12.5px; color: var(--fog-50); white-space: nowrap; }
.tl-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--fog-70); }
.tl-rules > svg { width: 15px; height: 15px; flex: none; }
.tl-staff { margin-top: 12px; }
.tl-ed-h { margin: 0 0 12px; font: 650 16px/1.3 var(--font-b); color: var(--fog); }
.tl-sub { margin: 20px 0 8px; font: 650 14px/1.3 var(--font-b); color: var(--fog); }
.tl-its { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tl-it { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--stroke);
  background: var(--lk-card, transparent); }
.tl-it .td-drag { margin-top: 4px; }
.tl-it-b { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-ed .tl-it-t, .tl-ed .tl-it-n { width: 100%; min-height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--lk-field, var(--stroke-2)); border-radius: var(--lk-r-field, 8px);
  background: var(--lk-card, transparent); box-shadow: none; color: var(--fog); font: 500 14.5px/1.2 var(--font-b); }
.tl-ed .tl-it-n { font-weight: 400; font-size: 13.5px; }
.tl-it-t:focus, .tl-it-n:focus { outline: 2px solid var(--lk-focus, var(--volt)); outline-offset: 1px; }
.tl-it-w { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-x { width: 40px; height: 40px; margin-top: 0; }
.tl-ed .td-add { margin-top: 6px; }
.tl-rule { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tl-rule .lbl2 { font-size: 13.5px; font-weight: 600; color: var(--fog); }
.tl-ed .td-ed-err { margin-top: 14px; }
.tl-ed .td-ed-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }

/* ── tablets and phones ── */
@media (max-width: 1100px) { .rec-side > .td-card { order: -1; } }   /* the to-do list straight after the ticket, before the details */
@media (max-width: 860px) {
  .tw { padding: 4px 18px 10px; }
  .tw-r { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .tw-r > .tw-when { grid-column: 2; grid-row: 2; white-space: normal; }
  .tw-r > .tw-av { grid-column: 3; grid-row: 1 / span 2; }
  .tw-b { white-space: normal; overflow: visible; }   /* the booking line wraps on a phone, so its event date shows */
  .tl-card { padding: 14px 14px; }
}
@media (max-width: 560px) { .tl-prev small { display: block; margin: 1px 0 0; white-space: normal; } }   /* a phone: the timing under its title, never a title's last word left beside it */
@media (pointer: coarse) {
  .td-chk { width: 44px; height: 44px; margin: -9px -6px -9px -10px; padding: 10px; }
  .td-drag { width: 44px; height: 44px; margin: -9px -6px -9px 0; }
  .td-i { grid-template-columns: 32px minmax(0, 1fr) 38px; }
  .td-t { min-height: 26px; }
  .td-pick, .td-ed .td-ed-date, .td-days input { min-height: 44px; }
  .td-pop-i { min-height: 52px; }
  .td-undo { min-height: 40px; }
  .tl-x { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-ring .tr-t, .td-ring .tr-p, .td-ring .tr-k, .td-chk .c, .td-chk .k, .td-t, .tw-t, .tw-r, .td-add svg { transition: none; }
  .td-list.dragging .td-i:not(.lift), .tl-its.dragging .tl-it:not(.lift) { transition: none; }
  .td-i.just .td-chk svg, .tw-r.just .td-chk svg, .td-prog.pop .td-ring, .td-i.arrive, .td-pop, .td-side.pop .td-ring { animation: none; }
  .td-i.gone { transition: none; }
}