/* Page layout on top of the CI files (tokens / base / components). */
[hidden] { display: none !important; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-bottom: var(--bw-thin) solid var(--ink);
}
.logo { height: 16px; width: auto; display: block; }
.bar-nav { display: flex; align-items: center; gap: var(--s-6); margin-right: auto; margin-left: var(--s-7); }
.bar-nav a, .sub-nav a {
  white-space: nowrap;
  font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--slate); text-decoration: none; transition: color var(--d-base) var(--ease-out);
}
.bar-nav a:hover, .bar-nav a[aria-current="page"], .sub-nav a:hover, .sub-nav a[aria-current="page"] { color: var(--ink); }
/* Tabs of the open area, in a row under the bar */
.sub-nav {
  display: flex; gap: var(--s-6); padding: 0 var(--s-6);
  border-bottom: var(--bw-thin) solid var(--fog);
}
.sub-nav a { padding: var(--s-4) 0 calc(var(--s-4) - 2px); border-bottom: 2px solid transparent; }
.sub-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
/* Account menu: initial in the bar, name, email and Sign out in the panel */
.acct { position: relative; }
.acct summary {
  list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--chalk);
  font-size: var(--t-micro); font-weight: 500;
}
.acct summary::-webkit-details-marker { display: none; }
.acct-panel {
  position: absolute; right: 0; top: calc(100% + var(--s-3)); z-index: 20; min-width: 220px;
  background: var(--snow); border: var(--bw-thin) solid var(--ink); padding: var(--s-4);
  display: grid; gap: var(--s-3); justify-items: stretch;
}
#logout { justify-self: start; }
.who { font-size: var(--t-sm); color: var(--slate); margin: 0; overflow-wrap: anywhere; display: grid; gap: 2px; }
.who-name { color: var(--ink); font-weight: 500; }
.who-name:empty { display: none; }
.theme-pick { display: flex; border: var(--bw-thin) solid var(--mist); }
.theme-pick button {
  flex: 1; padding: 6px 10px; border: 0; background: none; cursor: pointer; color: var(--slate);
  font: inherit; font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
}
.theme-pick button + button { border-left: var(--bw-thin) solid var(--mist); }
.theme-pick button[aria-pressed="true"] { background: var(--ink); color: var(--snow); }
.wrap { max-width: 880px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); }
/* Dashboards (Season, Finance, Rentals, Tickets: WIDE in app.js) get the brand book's page width;
   notes keep a readable line length */
.wrap--wide { max-width: 1280px; }
.wrap--wide p.muted.small { max-width: 88ch; }
.view > h1 { font-size: clamp(30px, 5vw, var(--t-2xl)); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1.1; }
.eyebrow {
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--slate); margin-bottom: var(--s-3);
}
.lead { font-size: var(--t-md); color: var(--graphite); margin: var(--s-4) 0 var(--s-7); max-width: 560px; }
.h-sec {
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  margin: var(--s-9) 0 var(--s-4);
}
.muted { color: var(--slate); }
.small { font-size: var(--t-sm); margin-bottom: var(--s-4); }
.stack { display: grid; gap: var(--s-5); max-width: 420px; }
.msg { font-size: var(--t-sm); color: var(--graphite); min-height: 1.4em; }
.msg.is-error { color: var(--negative); }
.msg.is-ok { color: var(--positive); }

.gen { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--s-4); align-items: end; }
.gen .btn { height: 42px; }

.progress { margin-top: var(--s-5); }
.progress-bar { height: 2px; background: var(--fog); overflow: hidden; }
.progress-bar span {
  display: block; height: 100%; width: 30%; background: var(--ink);
  animation: slide 1.4s var(--ease-io) infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.progress .msg { margin-top: var(--s-3); }

.tbl td a { color: var(--ink); }
.tbl td.act { text-align: right; white-space: nowrap; }
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm);
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { opacity: .85; }
.link-btn--neg { color: var(--negative); }
.status-failed { color: var(--negative); }
.status-running { color: var(--slate); }

.card-form { display: grid; gap: var(--s-5); padding: var(--s-6); background: var(--chalk); margin-bottom: var(--s-7); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.brand-pick { display: grid; gap: var(--s-3); }
.brand-pick[hidden] { display: none; }
.input--sm { padding-top: 8px; padding-bottom: 8px; max-width: 280px; }
.brand-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2) var(--s-4);
  max-height: 260px; overflow: auto; padding: var(--s-3); background: var(--snow);
  border: var(--bw-thin) solid var(--mist);
}
.label-input { width: 100%; max-width: 240px; padding: 6px 10px; }

/* Check-in */
.ci-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4); margin: var(--s-6) 0 var(--s-6); }
.ci-bar .field { min-width: 200px; }
.ci-bar .small { margin: 0 0 12px; }
.ci-bar .btn-row { margin-left: auto; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
  border-top: var(--bw-thin) solid var(--ink); border-bottom: var(--bw-thin) solid var(--ink); }
/* KPI row as in the CI (no fill, no box): a Mist hairline left of and above every figure; the -1px
   pulls the lines of the first column and the first row under the edge, so any column count works */
.kpi { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); align-content: start; }
.kpis .kpi { border-right: 0; border-left: var(--bw-hair) solid var(--mist); border-top: var(--bw-hair) solid var(--mist); margin: -1px 0 0 -1px; }
.kpi-n { font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1.1; }
/* Graphite, not Slate: 10 px labels need the contrast (Slate on Snow is about 3:1) */
.kpi-l { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--graphite); }
.ci-voucher { display: flex; gap: var(--s-3); max-width: 480px; }
.ci-voucher .input { flex: 1; min-width: 0; }
.ci-card {
  display: flex; justify-content: space-between; gap: var(--s-5); align-items: center;
  margin-top: var(--s-4); padding: var(--s-5); border: var(--bw-thin) solid var(--ink);
}
.ci-card p { margin: 0 0 var(--s-1); }
.badge--golden { color: #3A2A06; background: linear-gradient(135deg, #C9A043, #F3E3AE 55%, #C9A043); }
.gold-text { color: #9A7420; font-weight: 500; }
.ci-card.is-golden { border-color: #C9A043; box-shadow: 0 0 0 1px #C9A043, 0 0 24px rgba(201,160,67,.35); }
.ci-name { font-size: var(--t-md); font-weight: 500; }
.ci-gift { display: grid; justify-items: end; gap: var(--s-2); text-align: right; }
.ci-brands { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ci-brand { background: var(--chalk); padding: 6px 10px; font-size: var(--t-sm); color: var(--ink); }
.ci-brand em { font-style: normal; color: var(--caution); font-size: var(--t-xs); }
.ci-brand b { font-weight: 500; margin-left: 4px; }
.ci-admin { display: none; }
.is-admin .ci-admin { display: table-cell; }
.tbl-wrap { overflow-x: auto; }
.tbl td { vertical-align: top; }
.ci-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.ci-page { background: var(--chalk); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.ci-page p { margin: 0; }
.ci-page-name { font-weight: 500; }
.ci-page-url { overflow-wrap: anywhere; }
.ci-page .btn-row { gap: var(--s-2) var(--s-3); }
.ci-room { border: var(--bw-thin) solid var(--mist); padding: var(--s-4); margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); background: var(--snow); }
.ci-room legend { font-weight: 500; padding: 0 var(--s-2); }
.ci-room legend .link-btn { margin-left: var(--s-3); font-size: var(--t-xs); }
.steps { margin: 0; padding-left: 20px; display: grid; gap: var(--s-1); }
.steps code { font-size: var(--t-xs); background: var(--bone); padding: 1px 4px; }
.steps a { color: var(--ink); }

/* Push */
.push-box { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  background: var(--chalk); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-6); }
.push-box p { margin: 0; }
.push-title { font-weight: 500; display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1) !important; }
.push-box > div:first-child { flex: 1 1 320px; }

/* Booking notifications */
.notif { border-top: var(--bw-thin) solid var(--ink); padding-top: var(--s-5); }
.notif .h-sec { margin-top: 0; }
.notif-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.notif-rule { background: var(--chalk); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.notif-rule header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.notif-name { margin: 0; font-weight: 500; }
.notif-rule dl { margin: 0; display: grid; gap: var(--s-2); }
.notif-rule dl div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); }
.notif-rule dt { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); padding-top: 3px; }
.notif-rule dd { margin: 0; font-size: var(--t-sm); line-height: 1.45; }
.notif-stats { margin: 0; color: var(--graphite); border-top: var(--bw-thin) solid var(--fog); padding-top: var(--s-2); }
.notif-stats b { font-weight: 500; color: var(--ink); }
.notif-general { margin: 0 0 var(--s-6); padding-left: 18px; color: var(--graphite); display: grid; gap: var(--s-1); }
.notif-h { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); margin: var(--s-7) 0 var(--s-3); }
.notif-filter { align-items: center; margin-bottom: var(--s-3); }
.notif-filter .select { max-width: 260px; }
.notif + .notif { margin-top: var(--s-7); }
.arr-msg summary { cursor: pointer; color: var(--graphite); font-size: var(--t-sm); }
.arr-msg { margin-top: var(--s-1); }
.arr-setup { margin: var(--s-4) 0 0; color: var(--graphite); }
.arr-setup summary { cursor: pointer; color: var(--ink); }
.arr-setup ol { padding-left: 18px; display: grid; gap: var(--s-2); }
.arr-setup code { font-size: var(--t-xs); word-break: break-all; }
#arrivals .push-box { margin-top: var(--s-4); }
.neg { color: var(--negative); }
.arr-msg p { margin: var(--s-2) 0 0; max-width: 46ch; white-space: normal; }

/* Status */
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: calc(-1 * var(--s-4)) 0 var(--s-6); }
.status-bar .small { margin: 0; }
.sys { border-top: var(--bw-thin) solid var(--ink); padding: var(--s-5) 0 var(--s-6); }
.sys-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.sys-head .small { margin: var(--s-1) 0 0; }
.sys-name { font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--ls-tight); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.chk { display: grid; grid-template-columns: 10px 1fr; gap: var(--s-3); align-items: start; }
.chk p { margin: 0; }
.chk-label { font-size: var(--t-sm); font-weight: 500; }
.chk-detail { font-size: var(--t-sm); color: var(--graphite); overflow-wrap: anywhere; }
.chk-detail a { color: var(--ink); }
.chk-hint { font-size: var(--t-xs); color: var(--slate); margin-top: 2px !important; max-width: 640px; }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--mist); }
.dot--ok { background: var(--positive); }
.dot--warn { background: var(--caution); }
.dot--fail { background: var(--negative); }


@media (max-width: 720px) {
  /* Logo + account on top, the areas in their own row below; both nav rows swipe if they don't fit */
  .bar { padding: var(--s-4) var(--s-4) 0; flex-wrap: wrap; row-gap: var(--s-3); }
  .bar-nav {
    order: 3; width: calc(100% + 2 * var(--s-4)); margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4);
    gap: var(--s-5); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .bar-nav a { padding: var(--s-3) 0; border-bottom: 2px solid transparent; }
  .bar-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
  .sub-nav { padding: 0 var(--s-4); gap: var(--s-5); overflow-x: auto; scrollbar-width: none; }
  .bar-nav::-webkit-scrollbar, .sub-nav::-webkit-scrollbar { display: none; }
  /* the rows fade out at the edges, so it's visible that they go on; the spacer lets the last item
     scroll clear of the fade */
  .bar-nav, .sub-nav {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s-4), #000 calc(100% - var(--s-6)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--s-4), #000 calc(100% - var(--s-6)), transparent);
  }
  .bar-nav::after, .sub-nav::after { content: ""; flex: 0 0 var(--s-4); }
  .kpi { padding: var(--s-3) var(--s-4); }
  .wrap { padding: var(--s-7) var(--s-4) var(--s-8); }
  .gen, .grid-2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .ci-card { flex-direction: column; align-items: flex-start; }
  .ci-gift { justify-items: start; text-align: left; }
  .ci-bar .btn-row { margin-left: 0; }
  .col-by { display: none; }
  .tbl { font-size: var(--t-xs); }
  /* words break between words, never inside one ("Sportal m"); a table that doesn't fit swipes
     sideways in its .tbl-wrap. Only email addresses may break anywhere. */
  .tbl td { overflow-wrap: break-word; }
  .tbl td.mail, .tbl td a[href^="mailto:"] { overflow-wrap: anywhere; }
  /* iPhone zooms into fields with text under 16 px when tapped and stays zoomed */
  .input, .select, .textarea { font-size: 16px; }
  /* 7 columns don't fit a phone: the table swipes sideways on its own */
  .tk-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tk-tbl td { overflow-wrap: normal; }
}

/* Status dot next to "System" in the navigation */
.nav-dot { display: inline-block; vertical-align: middle; margin: -2px 0 0 6px; }
/* Overdue tickets next to "Back office" */
.nav-count { margin-left: 6px; color: var(--negative); letter-spacing: 0; }
.nav-count[hidden] { display: none; }
/* Keyboard focus in the navigation in ink, not the browser's blue */
.bar-nav a:focus-visible, .sub-nav a:focus-visible { outline: var(--bw-thin) solid var(--ink); outline-offset: 4px; }

/* Access: tabs per person */
.tab-pick { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.tab-pick[hidden] { display: none; }
.tab-pick legend { margin-bottom: var(--s-2); }
body:not(.is-admin) .adm-only { display: none !important; }

/* Season */
.kpi-s { font-size: var(--t-xs); color: var(--graphite); min-height: 1em; }
.pos { color: var(--positive); }
.se-note { margin: var(--s-3) 0 0; }
.se-tbl .num { text-align: right; white-space: nowrap; }
.se-bar { display: block; height: 3px; background: var(--ink); margin-top: 4px; min-width: 1px; }
.se-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; overflow-x: auto; padding-bottom: var(--s-1); }
.se-day { flex: 1 0 22px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; font-size: var(--t-micro); color: var(--slate); }
.se-day-col { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.se-day-col span { display: block; width: 100%; }
.se-day-col .b { background: var(--mist); }
.se-day-col .c { background: var(--ink); }
.se-day.is-today { color: var(--ink); font-weight: 500; }
.se-split { margin-top: var(--s-2); align-items: start; }

/* Season: who hasn't ordered yet */
.se-ret-bar { align-items: flex-end; margin-top: 0; }
.se-ret-bar p { flex: 1 1 320px; margin: 0 0 12px; }
.se-ret-filter { margin: var(--s-4) 0 var(--s-3); }
.se-ret details { border-top: var(--bw-thin) solid var(--fog); }
.se-ret details:last-child { border-bottom: var(--bw-thin) solid var(--fog); }
.se-ret summary { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; list-style: none; }
.se-ret summary::-webkit-details-marker { display: none; }
.se-ret summary b { font-weight: 500; }
.se-ret summary b::before { content: "+ "; color: var(--slate); }
.se-ret details[open] summary b::before { content: "− "; }
.se-ret .tbl { margin-bottom: var(--s-4); }

#view-season .kpis + .tbl-wrap, #view-season .kpis + .grid-2 { margin-top: var(--s-5); }

.se-ret details p { margin: 0 0 var(--s-3); line-height: 1.6; }
.se-ret details p a { color: var(--ink); }

/* Season: only mine, pace chart */
/* Filter bar: Season · Drop · Only my brands | Account search, meta line below */
.se-filters { display: grid; grid-template-columns: minmax(160px, 220px) minmax(140px, 180px) auto minmax(220px, 1fr); gap: var(--s-4);
  align-items: end; margin: var(--s-6) 0 var(--s-2); }
.se-filters .field { min-width: 0; }
.se-filters .select, .se-filters .input { width: 100%; }
/* Same frame as the fields next to it (class "input"), so the heights match */
.se-toggle.input { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; white-space: nowrap; width: auto; }
.se-toggle:has(input:checked) { border-color: var(--ink); }
.se-toggle input { margin: 0; accent-color: var(--ink); }
.se-find { justify-self: end; width: 100%; max-width: 320px; }
.se-meta { margin: 0 0 var(--s-5); }
.se-meta .link-btn { font-size: inherit; }
@media (max-width: 720px) {
  .se-filters { grid-template-columns: 1fr 1fr; }
  .se-mine, .se-find { grid-column: 1 / -1; max-width: none; }
}
.se-chart { margin-top: var(--s-5); }
.se-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.se-chart .cur { stroke: var(--ink); stroke-width: 2; fill: none; }
.se-chart .ly { stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.se-chart .grid { stroke: var(--fog); stroke-width: 1; }
.se-chart .today { stroke: var(--caution); stroke-width: 1; }
.se-chart text { fill: var(--slate); font-size: 11px; }
.se-legend { display: flex; gap: var(--s-4); font-size: var(--t-xs); color: var(--graphite); margin-top: var(--s-2); }
.se-legend span::before { content: ""; display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--ink); }
.se-legend span.ly::before { border-top: 1.5px dashed var(--slate); }

/* Season: to do */
.se-todo { margin: var(--s-8) 0 var(--s-7); }
/* Season: jump bar under the filters, on top while scrolling (seSpy in app.js marks the section in view) */
.se-jump { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-6); padding: var(--s-4) 0 var(--s-3); background: var(--snow); border-bottom: var(--bw-hair) solid var(--mist); }
.se-jump:empty { display: none; }
.se-jump a { padding: var(--s-1) 0; border-bottom: 1px solid transparent; white-space: nowrap; text-decoration: none;
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--graphite); }
.se-jump a:hover, .se-jump a[aria-current] { color: var(--ink); }
.se-jump a[aria-current] { border-bottom-color: var(--ink); }
#view-season [data-jump] { scroll-margin-top: 72px; }
.se-todo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.se-todo-head .h-sec { margin: 0; }
.se-todo-head .row { align-items: center; gap: var(--s-4); }
.se-todo .tbl { background: transparent; }
/* To do on phones: each row a card, no squeezed columns
   Account ················ at stake
   Brand · why
   Owner · last activity ···· Open in CRM */
@media (max-width: 720px) {
  .se-todo-head .row, .se-todo-head .select { width: 100%; max-width: none; }
  /* one row that swipes, like the navigation, with the same fade at the edges */
  .se-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4));
    padding: var(--s-2) var(--s-4) 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s-4), #000 calc(100% - var(--s-6)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--s-4), #000 calc(100% - var(--s-6)), transparent); }
  .se-jump::-webkit-scrollbar { display: none; }
  .se-jump::after { content: ""; flex: 0 0 var(--s-4); }
  .se-jump a { padding: var(--s-3) 0; }
  .se-todo .tbl-wrap { overflow: visible; }
  .se-todo .tbl, .se-todo .tbl tbody { display: block; width: 100%; }
  .se-todo .tbl thead { display: none; }
  /* Lines by flex-wrap: account + amount fill line 1, brand + why line 2, owner + last activity + CRM line 3 */
  .se-todo tr.td-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); row-gap: 2px;
    padding: var(--s-3) 0; border-bottom: var(--bw-thin) solid var(--fog); }
  .se-todo tr.td-row td { display: block; padding: 0; border: 0; margin-bottom: 0; font-size: var(--t-sm); line-height: 1.45; }
  .se-todo .td-acc { order: 1; flex: 1 1 calc(100% - 8em - var(--s-2)); font-weight: 500; min-width: 0; }
  .se-todo .td-val { order: 2; flex: 0 0 8em; font-weight: 500; text-align: right; }
  .se-todo .td-brand { order: 3; flex: 0 0 auto; color: var(--graphite); }
  .se-todo .td-why { order: 4; flex: 1 1 0; min-width: 40%; color: var(--graphite); }
  .se-todo .td-why::before { content: "· "; }
  /* line break after "why": owner, last activity and CRM always start line 3 */
  .se-todo tr.td-row::after { content: ""; order: 4; flex: 0 0 100%; }
  .se-todo .td-own { order: 5; flex: 0 0 auto; color: var(--slate); margin-top: var(--s-1); }
  .se-todo .td-last { order: 6; flex: 1 1 auto; color: var(--slate); margin-top: var(--s-1); }
  .se-todo .td-last::before { content: "· "; }
  .se-todo .td-crm { order: 7; flex: 0 0 auto; text-align: right; white-space: nowrap; margin-top: var(--s-1); }
  .se-todo tr.more-row, .se-todo tr.more-row td { display: block; }
}

.se-how { margin: var(--s-2) 0 var(--s-3); }
.se-how summary { cursor: pointer; }
.se-how p { margin: var(--s-2) 0 0; max-width: 80ch; }

/* Season: account search and account window */
.se-find { position: relative; }
.se-find-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 320px; max-width: 90vw; max-height: 320px; overflow: auto;
  background: var(--snow); border: var(--bw-thin) solid var(--ink); display: grid; }
.se-find-list button { text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--ink); font: inherit; font-size: var(--t-sm); }
.se-find-list button:hover, .se-find-list button:focus { background: var(--chalk); }
.se-find-list .muted { padding: 8px 12px; }
button.acc-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
button.acc-link:hover { text-decoration-color: var(--ink); }
.se-acc { margin: auto; width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: var(--s-6); border: var(--bw-thin) solid var(--ink);
  background: var(--snow); color: var(--ink); }
.se-acc::backdrop { background: rgba(0, 0, 0, .45); }
.se-acc-close { position: sticky; top: calc(-1 * var(--s-6)); float: right; z-index: 2; background: var(--snow);
  padding: var(--s-2) var(--s-3); margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-3)) 0 0; border: var(--bw-thin) solid var(--mist); }
.se-acc a { color: var(--ink); }
.se-acc [data-more-seasons] { margin-top: var(--s-2); }
.se-acc h2 { font-size: var(--t-xl); margin: 0 0 var(--s-1); letter-spacing: var(--ls-tight); }
.se-acc .h-sec { margin-top: var(--s-6); }
.se-acc .kpis { margin-top: var(--s-4); }
.se-fb { border-top: var(--bw-thin) solid var(--fog); padding: var(--s-3) 0; }
.se-fb p { margin: 0 0 var(--s-1); }
@media (max-width: 720px) { .se-acc { padding: var(--s-4); } }

/* Season: loss reasons */
.se-reasons { display: grid; gap: var(--s-3); align-content: start; }
.se-reason { display: grid; gap: 4px; font-size: var(--t-sm); }
.se-reason div { display: flex; justify-content: space-between; gap: var(--s-3); }
.se-reason .se-bar { margin-top: 0; }

/* "Show more" row under long lists */
.more-row td { text-align: center; border-bottom: 0; padding-top: 16px; }

/* Rentals */
.kpis--5 { grid-template-columns: repeat(5, 1fr); }
.re-sources { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.re-sources li { display: flex; align-items: flex-start; gap: var(--s-2); max-width: 100%; }
.re-sources .dot { flex: none; margin-top: 6px; }
.re-sources .neg { overflow-wrap: anywhere; }
.re-money { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-sm); color: var(--graphite); }
.re-money b { color: var(--ink); font-weight: 500; }
.re-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.re-step { display: grid; gap: var(--s-1); text-align: left; background: var(--chalk); border: var(--bw-thin) solid transparent;
  padding: var(--s-4) var(--s-5); font: inherit; color: var(--ink); cursor: pointer; }
.re-step.is-on { border-color: var(--ink); }
.re-step-n { font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1.1; }
.re-step-l { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); }
.re-step-bar { display: block; height: 3px; background: var(--fog); }
.re-step-bar span { display: block; height: 100%; background: var(--ink); }
.re-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-height: 420px; overflow: auto; font-size: var(--t-sm); }
.re-todo b { font-weight: 500; }
.re-filter { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-3); }
.re-filter .link-btn { text-decoration: none; color: var(--slate); }
.re-filter .link-btn.is-on { color: var(--ink); text-decoration: underline; }
.re-tbl .num { text-align: right; white-space: nowrap; }
.re-tbl b { font-weight: 500; }
.re-src, .re-inv { font-size: var(--t-xs); }
.re-src a { color: inherit; }
.re-tbl .badge { white-space: nowrap; }
.re-tbl tr.is-cur td { background: var(--chalk); }
.re-link { align-items: end; margin-bottom: var(--s-3); }
.re-link .field { min-width: 220px; }
.re-links { margin: 0 0 var(--s-5); padding-left: 18px; font-size: var(--t-sm); display: grid; gap: var(--s-1); }
@media (max-width: 1000px) { .kpis--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .re-funnel { grid-template-columns: 1fr 1fr; }
  .kpis--5 { grid-template-columns: 1fr 1fr; }
}

/* ── Tickets ─────────────────────────────────────────────── */
.tk-tbl .num { text-align: right; white-space: nowrap; }
.tk-tbl .nowrap { white-space: nowrap; }
.tk-tbl .badge { white-space: nowrap; }
.tk-tbl td a { text-decoration: none; }
.tk-tbl td a b { font-weight: 500; text-decoration: underline; }
.tk-late td:first-child { box-shadow: inset 3px 0 0 var(--negative); }
.tk-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
.tk-weeks { height: 160px; }
.tk-week-cols { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.tk-week-cols span { flex: 1; min-height: 1px; }
.tk-week-cols .c { background: var(--mist); }
.tk-week-cols .r { background: var(--ink); }
.tk-key { display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin: 0 4px 0 var(--s-2); }
.tk-key--c { background: var(--mist); margin-left: 0; }
.tk-key--r { background: var(--ink); }
@media (max-width: 800px) { .tk-split { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.tk-tbl .link-btn { text-align: left; }
.tk-tbl td a b, .tk-tbl .link-btn { white-space: nowrap; }

/* Briefing */
.bf-actions { margin: var(--s-6) 0 var(--s-2); }
.bf-frame { width: 100%; height: 720px; border: var(--bw-hair) solid var(--mist); background: var(--bone); margin-bottom: var(--s-6); }
.bf-card { padding: var(--s-5) 0; border-top: var(--bw-hair) solid var(--mist); }
.bf-when { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); margin: 0 0 var(--s-2); }
.bf-name { font-size: var(--t-lg); font-weight: 500; margin: 0 0 var(--s-2); }
.bf-facts { list-style: none; padding: 0; margin: var(--s-3) 0; font-size: var(--t-sm); color: var(--graphite); }
.bf-facts li { margin: 0 0 2px; }
.bf-note { margin: var(--s-3) 0 var(--s-2); max-width: 680px; }
.bf-points { margin: 0 0 var(--s-3); padding-left: 1.2em; max-width: 680px; }
.bf-line { font-size: var(--t-sm); margin: var(--s-2) 0 0; max-width: 720px; }
.bf-tag { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); margin-right: var(--s-2); }
.bf-team { white-space: pre-wrap; font-size: var(--t-sm); background: var(--chalk); padding: var(--s-5); margin: 0; }

/* Forms: the enquiry text stays narrow, handled rows step back, details below the row */
.fo-msg { max-width: 38ch; }
.tbl tr.is-done td { color: var(--slate); }
.fo-more td { background: var(--chalk); }
.fo-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3) var(--s-5); }

/* Overlays: preview left, controls right; stacked on phones */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.ov-stage { position: relative; position: sticky; top: var(--s-5); background: var(--bone); }
.ov-stage.is-over { outline: var(--bw-thick) solid var(--ink); outline-offset: 4px; }
#ov-canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 2 * var(--s-5)); object-fit: contain; cursor: grab; touch-action: none; }
#ov-canvas:active { cursor: grabbing; }
.ov-empty {
  position: absolute; inset: 0; display: grid; place-content: start center; padding-top: var(--s-7); gap: var(--s-2); text-align: center;
  border: var(--bw-thin) dashed var(--snow); margin: var(--s-4); background: none; cursor: pointer; font: inherit; color: var(--snow);
}
.ov-empty .muted { color: var(--fog); margin: 0; }
.ov-empty-t { font-size: var(--t-md); font-weight: 500; }
.ov-controls { display: grid; gap: var(--s-5); }
.ov-controls > .field-label { margin: 0 0 calc(-1 * var(--s-3)); }
.ov-row { display: flex; gap: var(--s-4); align-items: end; flex-wrap: wrap; }
.ov-row .field { flex: 1; min-width: 180px; }
/* same height as the format select next to it; filled until a photo is in, then outlined */
.ov-file { font-size: var(--t-sm); line-height: 1.3; padding: 10px 20px; border-radius: var(--r-md); cursor: pointer; white-space: nowrap; }
.ov-controls .msg:empty { display: none; }
.ov-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
.ov-templates button {
  display: grid; gap: var(--s-2); padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
}
.ov-templates canvas { width: 100%; height: auto; display: block; outline: var(--bw-thin) solid var(--mist); transition: outline-color var(--d-base) var(--ease-out); }
.ov-templates button:hover canvas { outline-color: var(--graphite); }
.ov-templates button[aria-pressed="true"] canvas { outline: var(--bw-thick) solid var(--ink); }
.ov-templates span { font-size: var(--t-xs); font-weight: 500; display: grid; line-height: 1.3; }
.ov-templates small { font-size: var(--t-micro); font-weight: 400; color: var(--slate); }
.ov-adjust summary { cursor: pointer; }
.ov-sliders { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
.ov-sliders label:not(.check) { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1); font-size: var(--t-sm); }
.ov-sliders output { color: var(--slate); font-variant-numeric: tabular-nums; }
.ov-sliders input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--ink); }
.ov-sliders .link-btn { justify-self: start; }
.ov-downloads { display: grid; gap: var(--s-3); justify-items: start; }
.ov-downloads .small { margin: 0; }
.ov-row .ov-season { flex: 0 1 160px; min-width: 140px; }
.ov-tpl-hint { margin: calc(-1 * var(--s-2)) 0 0; min-height: 2.6em; }
.ov-words { margin: calc(-1 * var(--s-3)) 0 0; }
.ov-file-sm { cursor: pointer; }
.ov-signet { align-items: center; }
/* Guideline marks: an "i" in a circle; the rule shows on hover, focus or tap */
.ov-label { display: inline-flex; align-items: center; gap: var(--s-2); }
.ov-tip {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%; border: var(--bw-thin) solid var(--slate);
  font-size: 10px; font-weight: 500; line-height: 1; color: var(--slate); cursor: help;
  text-transform: none; letter-spacing: 0;
}
.ov-tip--inline { vertical-align: 2px; cursor: default; }
.ov-tip:hover, .ov-tip:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.ov-tip::after {
  content: attr(data-tip); position: absolute; left: -8px; top: calc(100% + 8px); z-index: 30;
  width: min(300px, 80vw); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--snow);
  font-size: var(--t-xs); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  display: none; pointer-events: none; /* not rendered while hidden: an invisible bubble still widens the page */
}
.ov-tip--inline::after { display: none !important; }
.ov-tip:hover::after, .ov-tip:focus::after { display: block; }
/* phones: the rule shows as a bar at the bottom of the screen instead of next to the mark */
@media (max-width: 720px) {
  .ov-tip::after { position: fixed; left: var(--s-4); right: var(--s-4); top: auto; bottom: var(--s-4); width: auto; }
}
.ov-pos { display: grid; gap: var(--s-2); }
.ov-seg { display: inline-flex; border: var(--bw-thin) solid var(--mist); justify-self: start; }
.ov-seg button {
  padding: 8px 16px; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; font-size: var(--t-sm);
  transition: background var(--d-base) var(--ease-out);
}
.ov-seg button + button { border-left: var(--bw-thin) solid var(--mist); }
.ov-seg button:hover { background: var(--chalk); }
@media (max-width: 720px) {
  .ov { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .ov-stage { position: relative; top: 0; }
}

/* ── Brand book (Marketing) ─────────────────────────────── */
/* The book is laid out for 1120px, the OS column is 880px: the frame breaks out of
   .wrap and centres on the page. It stays light in dark mode on purpose — a brand
   book has to show the real CI colours, so it loads its own tokens, not dark.css. */
#view-ci .lead a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
#view-ci .lead a:hover { text-decoration-color: var(--ink); }
.bb-frame {
  display: block; width: min(1280px, calc(100vw - 96px)); height: calc(100vh - 260px); min-height: 520px;
  margin: var(--s-5) 0 0 50%; transform: translateX(-50%);
  border: var(--bw-hair) solid var(--mist); background: var(--snow);
}
@media (max-width: 720px) { .bb-frame { width: calc(100vw - 32px); height: calc(100vh - 200px); min-height: 420px; } }

/* ── Finance ─────────────────────────────────────────────── */
.fi-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); }
.fi-chip { font-size: var(--t-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--r-sm); background: var(--bone); }
.fi-chip--neg { color: var(--negative); background: var(--negative-tint); }
.fi-chip--cau { color: var(--caution); background: var(--caution-tint); }
.fi-chip--pos { color: var(--positive); background: var(--positive-tint); }
.fi-chart { border: var(--bw-thin) solid var(--mist); padding: var(--s-4); overflow-x: auto; }
.fi-chart svg { display: block; min-width: 560px; }
.fi-grid { stroke: var(--fog); stroke-width: 1; }
.fi-zero { stroke: var(--ink); stroke-width: 1; }
.fi-min { stroke: var(--negative); stroke-width: 1; stroke-dasharray: 2 3; }
.fi-ax { font-size: 11px; fill: var(--slate); font-family: var(--font-body); }
.fi-line { fill: none; stroke-linejoin: round; }
.fi-line--real { stroke: var(--ink); stroke-width: 2.5; }
.fi-line--plan { stroke: var(--positive); stroke-width: 2; }
.fi-line--safe { stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fi-dot.fi-line--real { fill: var(--ink); }
.fi-dot.fi-line--plan { fill: var(--positive); }
.fi-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); margin: var(--s-2) 0 0; }
/* key and its text as one unit, so a line never ends up at the end of a row and its text on the next */
.fi-li { display: flex; align-items: center; gap: var(--s-2); }
.fi-li .fi-key { flex: none; }
.fi-key { display: inline-block; width: 18px; border-top: 2px solid var(--ink); vertical-align: middle; }
.fi-key--plan { border-color: var(--positive); }
.fi-key--safe { border-top: 2px dashed var(--slate); }
.fi-key--min { border-top: 1px dashed var(--negative); }
.fi-weeks td, .fi-weeks th { white-space: nowrap; }
.fi-low { background: var(--negative-tint); }
.fi-sum td { font-weight: 500; border-top: var(--bw-thin) solid var(--ink); }
.fi-dq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); }
.fi-dq-i { font-size: var(--t-sm); display: flex; gap: var(--s-2); align-items: baseline; }
@media (max-width: 800px) { .fi-dq { grid-template-columns: minmax(0, 1fr); } }

.ov-last { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.ov-last .small { margin: 0; }

/* What's new: dot on the account initial, list in a dialog */
.acct summary { position: relative; }
.acct-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--snow); }
.wn-open {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border: 0; background: none;
  font: inherit; font-size: var(--t-sm); color: var(--ink); cursor: pointer; text-align: left;
}
.wn-open:hover { opacity: .85; }
.wn-count { min-width: 18px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--snow); font-size: var(--t-micro); font-weight: 500; text-align: center; }
.wn {
  margin: auto; width: min(560px, calc(100vw - 2 * var(--s-4))); max-height: min(80vh, 720px); padding: 0; border: var(--bw-thin) solid var(--ink);
  background: var(--snow); color: var(--ink); box-shadow: var(--shadow-2);
}
.wn::backdrop { background: rgba(10, 10, 10, .45); }
.wn-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-4); border-bottom: var(--bw-thin) solid var(--fog); position: sticky; top: 0; background: var(--snow); }
.wn-head h2 { margin: 0; font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--ls-tight); }
.wn-body { padding: var(--s-4) var(--s-6) var(--s-6); }
.wn-day { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); margin: var(--s-5) 0 var(--s-2); }
.wn-day:first-child { margin-top: 0; }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.wn-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.45; }
.wn-tab { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); padding-top: 3px; }
.wn-item.is-new .wn-tab { color: var(--accent); }
@media (max-width: 720px) {
  .wn-head, .wn-body { padding-left: var(--s-4); padding-right: var(--s-4); }
  .wn-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Brand pages (guest brands autopilot) */
.select--sm { padding: 6px 28px 6px 10px; font-size: var(--t-sm); width: auto; margin-bottom: var(--s-2); }
.re-preview { margin-top: var(--s-5); padding: var(--s-5); background: var(--chalk); display: grid; gap: var(--s-3); }
.re-preview-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.re-preview-head .link-btn { margin-left: auto; }
.re-preview-logo { height: 32px; width: auto; }
.re-preview-main { width: 100%; max-height: 360px; object-fit: cover; }
.re-preview-about { font-size: var(--t-sm); line-height: 1.55; max-width: 64ch; }
.re-preview-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); }
.re-preview-imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.re-golive { background: var(--caution-tint); color: var(--ink); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); font-size: var(--t-sm); }
.re-golive p { margin: 0 0 var(--s-2); }
.re-guest-open { background: var(--negative-tint); color: var(--ink); padding: var(--s-3) var(--s-5); margin: 0 0 var(--s-4); font-size: var(--t-sm); }
.re-guest-actions { gap: var(--s-2); flex-wrap: wrap; }
.re-guest-team { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); background: var(--caution-tint); color: var(--ink); font-size: var(--t-xs); line-height: 1.45; max-width: 46ch; }
/* Finance · Controlling */
.fi-ist { fill: var(--ink); }
.fi-bud { fill: var(--mist); }
.fi-key--bar { border-top: 8px solid var(--ink); width: 12px; }
.fi-key--bud { border-top: 8px solid var(--mist); width: 12px; }
.fi-ctl td, .fi-ctl th { white-space: nowrap; }
.fi-sec td { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate); border-bottom: 0; padding-top: var(--s-4); }
.fi-res td { font-weight: 500; background: var(--chalk); }

/* Sell-through (public/sellthrough.js) */
.st-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4); }
.st-head h1 { font-size: clamp(30px, 5vw, var(--t-2xl)); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1.1; margin: 0; }
.st-filters { margin-top: var(--s-6); grid-template-columns: minmax(160px, 200px) minmax(160px, 240px) auto minmax(220px, 1fr); }
.st-pct { display: inline-block; min-width: 3.2em; }
.st-bar { display: block; height: 3px; background: var(--fog); margin-top: 4px; position: relative; min-width: 72px; }
.st-bar span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.st-bar--value span { background: var(--graphite); }
.st-bar--est span { background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px); }
.st-tag { font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate); margin-left: 4px; }
.st-q { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
.st-q--est { color: var(--caution); }
.st-late { color: var(--negative); }
.st-spark { display: block; overflow: visible; }
.st-spark polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.st-spark circle { fill: var(--ink); }
.st-course { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.st-tbl td.st-acc { font-weight: 500; }
.st-tbl tr.st-group td { border-top: var(--bw-thin) solid var(--fog); }
.st-tbl tbody tr[data-st-pair] { cursor: pointer; }
.st-sub { display: block; font-size: var(--t-xs); color: var(--slate); font-weight: 400; }
.st-todo { margin: var(--s-8) 0 var(--s-7); }
.st-todo h3 { font-size: var(--t-sm); font-weight: 500; margin: var(--s-6) 0 var(--s-2); }
.st-todo h3 .muted { font-weight: 400; }
.st-never { margin-top: var(--s-4); }
.st-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.st-toolbar .h-sec { margin: 0; }
.st-toolbar .row { align-items: center; gap: var(--s-3); flex-wrap: nowrap; }
.st-toolbar .select { width: auto; }
.st-toolbar label.row { margin: 0; white-space: nowrap; }
.st-sec { margin-top: var(--s-9); }
.st-sec .st-toolbar, .st-toolbar.st-sec { margin-bottom: var(--s-4); }
.st-back { font-size: var(--t-sm); color: var(--graphite); text-decoration: none; display: inline-block; margin-bottom: var(--s-5); }
.st-back:hover { color: var(--ink); }
/* Upload */
.st-drop { margin-top: var(--s-6); border: 1px dashed var(--graphite); border-radius: var(--r-md); padding: var(--s-8) var(--s-6); cursor: pointer;
  display: grid; justify-items: start; gap: var(--s-3); transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.st-drop:hover, .st-drop.is-over { background: var(--bone); border-color: var(--ink); }
.st-drop-h { font-size: var(--t-lg); font-weight: 500; display: flex; align-items: center; gap: var(--s-3); }
.st-drop-p { color: var(--graphite); font-size: var(--t-sm); }
.st-drop svg, .st-file svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-or { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); margin-top: var(--s-6); align-items: start; }
.st-or > * { min-width: 0; }
.st-or .textarea { min-height: 132px; width: 100%; }
.st-hints { display: grid; gap: var(--s-4); }
.st-hints .select { width: 100%; }
.st-file { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: var(--bw-hair) solid var(--mist); }
.st-file:first-child { border-top: var(--bw-thin) solid var(--ink); }
.st-file b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-file .small { margin: 0; color: var(--slate); }
.st-skel { display: inline-block; width: 120px; height: 8px; background: linear-gradient(90deg, var(--bone), var(--fog), var(--bone)); background-size: 200% 100%;
  animation: st-sk 1.4s var(--ease-io) infinite; border-radius: 2px; vertical-align: middle; }
@keyframes st-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .st-skel { animation: none; } }
/* Check */
.st-pager { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; border-bottom: var(--bw-hair) solid var(--mist); }
.st-pager:empty { display: none; }
.st-pager button { background: none; border: 0; font: inherit; font-size: var(--t-sm); color: var(--slate); padding: var(--s-3) 0 calc(var(--s-3) - 2px); border-bottom: 2px solid transparent; cursor: pointer; }
.st-pager button:hover, .st-pager button[aria-current] { color: var(--ink); }
.st-pager button[aria-current] { border-bottom-color: var(--ink); }
.st-check { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); margin-top: var(--s-6); align-items: start; }
.st-check > * { min-width: 0; }
.st-found > .h-sec:first-child { margin-top: 0; }
.st-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.st-fields .select, .st-fields .input { width: 100%; }
.st-why { font-size: var(--t-xs); color: var(--slate); margin-top: 6px; line-height: 1.45; }
.st-why b { font-weight: 500; color: var(--graphite); }
.st-sure { font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; margin-left: 6px; }
.st-sure--ok { color: var(--positive); }
.st-sure--check { color: var(--caution); }
.st-map .select, .st-map .input { padding-top: 6px; padding-bottom: 6px; font-size: var(--t-sm); min-width: 190px; }
.st-map td:first-child { font-weight: 500; }
.st-map tr.is-off td { color: var(--slate); }
.st-checks { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.st-checks li { display: grid; grid-template-columns: 8px 1fr; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.5; }
.st-checks .dot { margin-top: 7px; }
.st-est, .st-basis { margin-top: var(--s-4); max-width: 280px; }
.st-sheetname { margin: var(--s-4) 0 0; color: var(--graphite); font-weight: 500; }
.st-note { margin-top: var(--s-6); }
.st-note .textarea { min-height: 64px; width: 100%; }
.st-quality { max-width: 360px; }
.st-quality .select { width: 100%; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--bw-thin) solid var(--ink); }
.st-actions .small { margin: 0 0 0 auto; color: var(--slate); }
.st-opts { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.st-mini { grid-template-columns: repeat(4, 1fr); }
.st-mini .kpi-n { font-size: var(--t-lg); }
.st-orig { position: sticky; top: var(--s-4); }
.st-orig-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: var(--bw-thin) solid var(--ink); padding-bottom: var(--s-2); }
.st-orig-head .h-sec { margin: 0; }
.st-sheet { overflow-x: auto; margin-top: var(--s-3); border: var(--bw-hair) solid var(--mist); }
.st-sheet table { border-collapse: collapse; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.st-sheet td, .st-sheet th { border: var(--bw-hair) solid var(--fog); padding: 3px 5px; text-align: left; font-weight: 400; }
.st-sheet th { background: var(--bone); color: var(--graphite); }
.st-sheet td.n { text-align: right; }
.st-sheet tr.is-total td { color: var(--slate); text-decoration: line-through; text-decoration-color: var(--mist); }
.st-sheet .map { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--snow); font-weight: 500; }
.st-sheet .map.off { color: var(--slate); }
.st-mail { margin-top: var(--s-3); padding: var(--s-5); border-left: 1px solid var(--ink); font-size: var(--t-sm); line-height: 1.6; color: var(--graphite); overflow-wrap: anywhere; }
.st-mail p { margin: 0 0 var(--s-3); }
.st-mail .meta { font-size: var(--t-xs); color: var(--slate); }
.st-pdf { display: block; width: 100%; height: min(78vh, 900px); margin-top: var(--s-3); border: var(--bw-hair) solid var(--mist); }
.st-img { display: block; max-width: 100%; height: auto; margin-top: var(--s-3); }
/* Account × brand */
.st-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--t-sm); color: var(--graphite); margin: var(--s-3) 0 var(--s-6); }
.st-meta a { color: var(--ink); }
.st-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.st-chart .cur { stroke: var(--ink); stroke-width: 2; fill: none; }
.st-chart .ly { stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.st-chart .grid { stroke: var(--fog); stroke-width: 1; }
.st-chart text { font-size: 11px; fill: var(--slate); font-family: inherit; }
.st-chart .lbl { fill: var(--ink); font-weight: 500; }
.st-chart .pt { fill: var(--ink); }
.st-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-xs); color: var(--graphite); margin-top: var(--s-3); }
.st-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--ink); vertical-align: middle; margin-right: 6px; }
.st-legend i.ly { border-top: 1.5px dashed var(--slate); }
.st-arts { margin-top: var(--s-8); gap: var(--s-7); }
.st-arts > * { min-width: 0; }
.st-h-flush { margin-top: 0; }
.st-notetext { max-width: 64ch; font-size: var(--t-sm); line-height: 1.6; }
@media (max-width: 900px) {
  .st-check, .st-or { grid-template-columns: 1fr; }
  .st-orig { position: static; }
  .st-fields { grid-template-columns: 1fr; }
  .st-filters { grid-template-columns: 1fr 1fr; }
  .st-mini { grid-template-columns: 1fr 1fr; }
  .st-arts { grid-template-columns: minmax(0, 1fr); }
  .st-toolbar .row { flex-wrap: wrap; }
  .st-toolbar .select { max-width: 100%; }
  .st-actions .small { margin-left: 0; flex-basis: 100%; }
}
.st-colsum { font-size: var(--t-sm); line-height: 1.6; margin: 0 0 var(--s-2); }
.st-colsum b { font-weight: 500; }
.st-h3 { font-size: var(--t-sm); font-weight: 500; margin: var(--s-5) 0 var(--s-2); }
.st-allcols { margin-top: var(--s-4); }
.st-allcols .tbl-wrap { margin: var(--s-3) 0; }
.st-levels { margin: var(--s-3) 0; max-width: 420px; }
.st-h3note { margin: 0 0 var(--s-2); max-width: 88ch; }

/* Lists under a status check (e.g. brand pages ↔ bookable dates) */
.chk-list-h { font-size: var(--t-xs); color: var(--graphite); margin: var(--s-3) 0 2px; }
.chk-list { margin: 0; padding-left: 1.2em; font-size: var(--t-sm); overflow-wrap: anywhere; }