/* ============================================================================
   BLANK CORE · CR Desk — The Blank Company
   Brand: Lemon #FFFF00 · Black · White · Endless Mist · Outfit (same tokens as KEYCARD / B-PEOPLE).
   Look (Calvin 2026-09-18): soft, rounded, label-first. Sidebar, big number cards, short labels, chips and icons;
   anything longer than a label lives in a hover tip ([data-tip]).
   Shape rule, followed everywhere: cards 20px · tiles, cells and inputs 12-14px · chips, buttons, nav items = pill.
   One accent (lemon). Room colours are data, not accents: they are the leasing sheet's own legend.
   ============================================================================ */

@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --accent: #FFFF00; --on-accent: #0B0B0C; --accent-edge: rgba(11, 11, 12, .16);
  --ink: #0B0B0C;

  /* semantic layer: pages use only these; dark mode swaps only these */
  --bg: #ECF0F1; --card: #FFFFFF; --sunken: #F3F6F6; --track: #E1E7E8; --line: #E3E9EA;
  --text-1: #0B0B0C; --text-2: #465053; --text-3: #667275;
  --inverse: #0B0B0C; --on-inverse: #FFFFFF; --on-inverse-2: #A9B3B5; --inverse-line: #2A2D2F;
  --bad: #C62828; --bad-bg: #FDECEC; --good: #1E7A3C; --good-bg: #E7F5EC; --info-bg: #E6F0FA;
  --shadow: 0 1px 2px rgba(18, 38, 43, .04), 0 14px 32px -22px rgba(18, 38, 43, .22);
  --shadow-pop: 0 2px 6px rgba(18, 38, 43, .08), 0 24px 48px -16px rgba(18, 38, 43, .28);

  /* room status = the leasing sheet's legend, so the board reads like the sheet the team knows */
  --st-vacant: #D9EAD3; --st-occupied: #F4CCCC; --st-booking: #FFF2CC; --st-hold: #D9D9D9; --st-reserved: #CFE2F3; --st-unknown: #F3F6F6;
  --st-vacant-k: #9CCB8B; --st-occupied-k: #E79C9C; --st-booking-k: #EFD36B; --st-hold-k: #B5B5B5; --st-unknown-k: #D5DDDF;

  --r-card: 20px; --r-tile: 14px; --r-ctl: 12px; --r-pill: 999px;
  --font-sans: 'Outfit', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --caps: 0.08em;
  --side-w: 268px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme='dark'] {
  --accent-edge: transparent;
  --bg: #0A0A0B; --card: #151617; --sunken: #1D1F20; --track: #2A2D2F; --line: #26292B;
  --text-1: #F3F5F5; --text-2: #B4BDBF; --text-3: #8E999C;
  --inverse: #232627; --inverse-line: #35393B;
  --bad: #FF8A80; --bad-bg: #3A1616; --good: #7BD69A; --good-bg: #12301D; --info-bg: #14283A;
  --shadow: none; --shadow-pop: 0 24px 48px -12px rgba(0, 0, 0, .7);
  --st-unknown: #1D1F20; --st-unknown-k: #3A3F41;
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 var(--font-sans); color: var(--text-1); background: var(--bg); min-height: 100dvh; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--caps); color: var(--text-3); }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex: none; }
.muted { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- app shell: sidebar + main ------------------------------------------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100dvh; padding: 12px 0 12px 12px; z-index: 30; }
.side-in { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 14px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.brand-link { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.bmark { width: 36px; height: 36px; border-radius: var(--r-ctl); background: #0B0B0C; display: grid; place-items: center; flex: none; }
.brand { display: grid; line-height: 1.1; }
.brand b { font-size: 14px; font-weight: 800; letter-spacing: var(--caps); }
.brand small { font-size: 12px; color: var(--text-3); }
.side-profile { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-tile); background: var(--sunken); min-height: 60px; }
.side-profile .who { display: grid; min-width: 0; line-height: 1.2; }
.side-profile .who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-profile .who span { font-size: 12px; color: var(--text-3); }
.side-profile .tag { margin-left: auto; }
.side-scroll { flex: 1; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
#nav { display: grid; gap: 2px; }
#nav h3 { padding: 14px 12px 6px; }
#nav a, #nav button { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--text-2); text-align: left; transition: background 140ms var(--ease), color 140ms var(--ease); }
#nav a:hover, #nav button:hover { background: var(--sunken); color: var(--text-1); }
#nav a:active, #nav button:active { transform: scale(.985); }
#nav a.active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
#nav .nl { flex: 1; }
.badge { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sunken); color: var(--text-2); }
#nav a.active .badge { background: rgba(11, 11, 12, .12); color: var(--on-accent); }
.badge.hot { background: var(--bad-bg); color: var(--bad); }
.side-mini { display: none; gap: 6px; }

/* search (sidebar on desktop, top bar on phones) */
.search { position: relative; }
.search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: grid; }
.search-ic svg.ic { width: 16px; height: 16px; }
.search input { width: 100%; height: 42px; padding: 0 40px 0 38px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--sunken); color: var(--text-1); font-size: 14px; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: 0; border-color: var(--text-1); background: var(--card); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; font: 600 12px var(--font-sans); color: var(--text-3); background: var(--card); pointer-events: none; }
.search input:focus + kbd { display: none; }
.search-results { position: absolute; top: 50px; left: 0; width: min(440px, calc(100vw - 24px)); max-height: 66vh; overflow: auto; padding: 6px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-pop); border: 1px solid var(--line); z-index: 50; }
.search-results a { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r-ctl); }
.search-results a:hover, .search-results a.on { background: var(--sunken); }
.search-results .sr-t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .sr-empty { padding: 14px; color: var(--text-3); font-size: 14px; }

.main { width: 100%; max-width: 1380px; margin: 0 auto; padding: 28px 32px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .main.enter > * { animation: rise 320ms var(--ease) both; }
  .main.enter > *:nth-child(2) { animation-delay: 40ms; } .main.enter > *:nth-child(3) { animation-delay: 80ms; } .main.enter > *:nth-child(n+4) { animation-delay: 120ms; }
  .main.enter .meter > i, .main.enter .hbar .track > i { animation: grow 600ms var(--ease) both; transform-origin: left; }
  .main.enter .vbar .col { animation: growUp 600ms var(--ease) both; transform-origin: bottom; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes growUp { from { transform: scaleY(0); } }

/* ---- page head ----------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .sub { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--text-2); font-size: 14px; }
.ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--text-2); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: -8px; }
.crumbs a { padding: 2px 8px; border-radius: var(--r-pill); }
.crumbs a:hover { background: var(--card); color: var(--text-1); }
.crumbs svg.ic { width: 14px; height: 14px; color: var(--text-3); }
.crumbs span { padding: 2px 8px; color: var(--text-1); font-weight: 600; }

/* ---- layout helpers ------------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); align-items: start; }
.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
.stack.tight { gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
@media (max-width: 1180px) { .grid.side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .grid.two { grid-template-columns: minmax(0, 1fr); } }

/* ---- cards --------------------------------------------------------------- */
.card { background: var(--card); border-radius: var(--r-card); padding: 20px; display: grid; gap: 16px; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.card.dark { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }
.card.dark .muted, .card.dark h3, .card.dark .card-sub, .card.dark .fact .k { color: var(--on-inverse-2); }
.card.dark .chip.outline { border-color: var(--inverse-line); color: var(--on-inverse); }
.card.flat { box-shadow: none; background: transparent; padding: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.card-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 4px 10px; border-radius: var(--r-pill); }
.more:hover { background: var(--sunken); color: var(--text-1); }
.more svg.ic { width: 14px; height: 14px; }
.note-box { background: var(--sunken); border-radius: var(--r-tile); padding: 12px 14px; font-size: 14px; white-space: pre-wrap; }
.card.dark .note-box { background: rgba(255, 255, 255, .07); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 14px; border: 1px dashed var(--line); border-radius: var(--r-tile); }
.empty .eic { width: 40px; height: 40px; border-radius: var(--r-ctl); background: var(--sunken); display: grid; place-items: center; color: var(--text-2); }
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--text-3); cursor: help; vertical-align: -3px; border: 0; background: transparent; padding: 0; }
.info svg.ic { width: 15px; height: 15px; }

/* ---- KPI cards: small label, very big number, a bar --------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; min-height: 164px; padding: 20px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); min-width: 0; transition: transform 160ms var(--ease); }
a.kpi:hover, button.kpi:hover { transform: translateY(-2px); }
a.kpi:active, button.kpi:active { transform: scale(.985); }
button.kpi { border: 0; text-align: left; font: inherit; color: inherit; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.kpi-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; color: var(--text-1); flex: none; }
.kpi-ic svg.ic { width: 16px; height: 16px; }
.kpi-val { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; align-self: end; }
.kpi-val small { font-size: 24px; font-weight: 700; margin-left: 2px; }
.kpi-val .of { font-size: 20px; font-weight: 600; color: var(--text-3); letter-spacing: -0.01em; margin-left: 2px; }
.kpi-cap { font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 18px; }
.kpi.accent { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge), var(--shadow); }
.kpi.accent .kpi-label, .kpi.accent .kpi-cap, .kpi.accent .kpi-val .of { color: rgba(11, 11, 12, .72); }
.kpi.accent .kpi-ic { background: rgba(11, 11, 12, .1); color: var(--on-accent); }
.kpi.accent .meter { background: rgba(11, 11, 12, .14); } .kpi.accent .meter > i { background: var(--on-accent); }
.kpi.on { box-shadow: inset 0 0 0 2px var(--text-1), var(--shadow); }
.kpi.sm { min-height: 112px; padding: 16px; } .kpi.sm .kpi-val { font-size: 32px; } .kpi.sm .kpi-val small { font-size: 18px; } .kpi.sm .kpi-ic { width: 30px; height: 30px; }
.meter { display: block; height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--text-1); }
.meter.bad > i { background: var(--bad); }
@media (max-width: 1180px) { .kpis, .kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- charts -------------------------------------------------------------- */
.mix { display: flex; height: 14px; gap: 3px; }
.mix > i { flex: var(--n) 1 0; min-width: 6px; border-radius: var(--r-pill); }
.mix.thin { height: 8px; gap: 2px; }
.k-OCCUPIED { background: var(--st-occupied-k); } .k-BOOKING { background: var(--st-booking-k); } .k-VACANT { background: var(--st-vacant-k); } .k-HOLD { background: var(--st-hold-k); } .k-UNKNOWN { background: var(--st-unknown-k); }
.keys { display: flex; gap: 8px; flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--sunken); font-size: 13px; font-weight: 600; border: 0; color: var(--text-1); }
.key > i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.key b { font-variant-numeric: tabular-nums; }
button.key:hover { background: var(--track); }
button.key[aria-pressed='true'] { background: var(--text-1); color: var(--card); }

.vbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 200px; }
.vbar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; text-align: center; border-radius: var(--r-ctl); padding: 4px 2px 2px; }
.vbar:hover { background: var(--sunken); }
.vbar .plot { position: relative; margin-top: 20px; }
.vbar .col { position: absolute; left: 12%; right: 12%; bottom: 0; height: var(--h, 0%); min-height: 5px; border-radius: 10px 10px 5px 5px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.vbar .col b { position: absolute; left: -12px; right: -12px; top: -20px; font-size: 12px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.vbar.now .col { background: var(--text-1); box-shadow: none; }
.vbar.zero .col { background: var(--track); box-shadow: none; }
.vbar .lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.vbar.now .lbl { color: var(--text-1); }

.hbars { display: grid; gap: 2px; }
.hbar { display: grid; grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) 46px auto; gap: 12px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-ctl); border: 0; background: transparent; text-align: left; width: calc(100% + 20px); }
.hbar:hover { background: var(--sunken); }
.hbar .n { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: center; }
.hbar .track { height: 10px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.hbar .track > i { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.hbar .v { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.hbar[aria-pressed='true'] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--text-1); }

/* ---- chips, avatars ------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--sunken); color: var(--text-1); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip svg.ic { width: 13px; height: 13px; }
.chip.caps { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; }
.chip.dark { background: var(--text-1); color: var(--card); }
.chip.lemon { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.chip.outline { background: transparent; border-color: var(--line); color: var(--text-2); }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.st-VACANT, .chip.st-ACTIVE, .chip.st-RENEWAL { background: var(--st-vacant); color: #0B0B0C; }
.chip.st-OCCUPIED { background: var(--st-occupied); color: #0B0B0C; }
.chip.st-BOOKING, .chip.st-TA_PREPARED, .chip.st-NOTICE { background: var(--st-booking); color: #0B0B0C; }
.chip.st-HOLD, .chip.st-MOVED_OUT, .chip.st-CANCELLED, .chip.st-EARLY_TERMINATED, .chip.st-EVICTED { background: var(--st-hold); color: #0B0B0C; }
.chip.st-RESERVED { background: var(--st-reserved); color: #0B0B0C; }
.chip.st-UNKNOWN { background: transparent; border: 1px dashed var(--text-3); color: var(--text-2); }
.chip.cs-NEW, .chip.cs-OPEN { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.chip.cs-IN_PROGRESS, .chip.cs-WAITING_TENANT, .chip.cs-WAITING_OWNER, .chip.cs-WAITING_VENDOR { background: var(--st-reserved); color: #0B0B0C; }
.chip.cs-RESOLVED, .chip.cs-CLOSED { background: var(--st-hold); color: #0B0B0C; }
.chip.pr-URGENT { background: var(--bad); color: #fff; }
:root[data-theme='dark'] .chip.pr-URGENT { color: #0B0B0C; }
.chip.pr-HIGH { background: var(--bad-bg); color: var(--bad); }
.chip.pr-LOW { background: transparent; border-color: var(--line); color: var(--text-3); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.days { display: inline-grid; place-items: center; min-width: 52px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--sunken); color: var(--text-1); }
.days.hot { background: var(--bad-bg); color: var(--bad); }
.days.warm { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--track); color: var(--text-1); }
.avatar.lemon { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.avatar.lg { width: 48px; height: 48px; font-size: 15px; }
.avatar.ghost { background: transparent; border: 1px dashed var(--text-3); color: var(--text-3); }
.tile-ic { width: 38px; height: 38px; border-radius: var(--r-ctl); display: grid; place-items: center; flex: none; background: var(--sunken); color: var(--text-1); }

/* segmented toggle ("Option 1 / Option 2") */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--sunken); }
.seg button, .seg a { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button:hover, .seg a:hover { color: var(--text-1); }
.seg [aria-pressed='true'] { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.seg svg.ic { width: 14px; height: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pill:hover { border-color: var(--text-1); color: var(--text-1); }
.pill[aria-pressed='true'] { background: var(--text-1); border-color: var(--text-1); color: var(--card); }
.pill b { font-variant-numeric: tabular-nums; opacity: .7; }
.pill svg.ic { width: 14px; height: 14px; }
select.pill { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; background-size: 5px 5px; background-repeat: no-repeat; max-width: 220px; }

/* ---- buttons & forms ----------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--text-1); background: var(--text-1); color: var(--card); font-weight: 700; font-size: 13px; white-space: nowrap; transition: transform 120ms var(--ease), background 120ms var(--ease); }
.btn:hover { background: var(--text-2); border-color: var(--text-2); }
.btn:active { transform: scale(.97); }
.btn.accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.btn.accent:hover { background: #F2F200; }
.btn.ghost { background: transparent; color: var(--text-1); border-color: var(--line); }
.btn.ghost:hover { background: var(--card); border-color: var(--text-1); }
.card.dark .btn.ghost { color: var(--on-inverse); border-color: var(--inverse-line); } .card.dark .btn.ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--on-inverse); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { height: 32px; padding: 0 12px; font-size: 12px; }
.btn.icon { width: 40px; padding: 0; } .btn.icon.small { width: 32px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--text-1); }
.field textarea { min-height: 92px; resize: vertical; }
/* every choice is a real dropdown with the same chevron; .pick = a dropdown whose "Other" opens a text box under it */
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667275' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.field select:disabled { opacity: .55; cursor: not-allowed; }
.pick { display: grid; gap: 8px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--text-1); box-shadow: 0 0 0 3px var(--track); }
.field .help { font-size: 12px; color: var(--text-3); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: #0B0B0C; }
.room-picks { display: grid; gap: 8px; }
.room-pick { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--sunken); }
.room-pick input[type='number'] { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); width: 100%; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- rows (lists) -------------------------------------------------------- */
.rows { display: grid; gap: 2px; }
.rowi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; margin: 0 -10px; border-radius: var(--r-tile); border: 0; background: transparent; text-align: left; width: calc(100% + 20px); color: inherit; }
a.rowi:hover, button.rowi:hover { background: var(--sunken); }
.rowi .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowi .m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.rowi .end { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.rows.boxed { gap: 10px; }
.rows.boxed .rowi { margin: 0; width: 100%; padding: 14px 16px; background: var(--card); box-shadow: var(--shadow); border-radius: var(--r-tile); }
.rows.boxed a.rowi:hover { background: var(--card); transform: translateY(-1px); }
.month-h { padding: 14px 4px 4px; }

/* ---- tables (kept where a table is the honest shape) ---------------------- */
.table-wrap { overflow: auto; border-radius: var(--r-tile); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: var(--caps); color: var(--text-3); padding: 8px 10px; white-space: nowrap; font-weight: 700; }
.table td { padding: 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tr.link { cursor: pointer; }
.table tr.link:hover td { background: var(--sunken); }

/* ---- property cards ------------------------------------------------------ */
.props { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.prop { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); transition: transform 160ms var(--ease); min-width: 0; }
.prop:hover { transform: translateY(-2px); }
.prop-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.prop-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-top: 8px; }
.prop-pct { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.prop-pct small { font-size: 16px; }
.prop.blank { background: transparent; box-shadow: none; border: 1px dashed var(--text-3); }

/* ---- property board: the new sheet. EVERY block is the same size: the unit, each room, each empty slot ---- */
.board-wrap { overflow-x: auto; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px; }
.bgrid { --bh: 112px; display: grid; grid-template-columns: repeat(var(--cols), minmax(148px, 1fr)); gap: 8px; min-width: min-content; max-width: calc(var(--cols) * 232px); align-items: stretch; }
.bh { font-size: 11px; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-3); padding: 2px 12px 2px; align-self: end; }
.bgrid > .stick { position: sticky; left: 0; z-index: 2; }
.bh.stick { background: var(--card); box-shadow: 8px 0 0 var(--card); }
.ucell, .cell, .slot { display: block; width: 100%; min-width: 0; height: var(--bh); border-radius: var(--r-ctl); border: 0; text-align: left; overflow: hidden; }
.ucell { display: grid; align-content: space-between; padding: 10px 12px; background: var(--inverse); color: var(--on-inverse); box-shadow: 8px 0 0 var(--card); transition: transform 120ms var(--ease); }
.ucell:hover { background: #1F2223; }
:root[data-theme='dark'] .ucell:hover { background: #2D3133; }
.ucell:active, .cell:active, .slot:active { transform: scale(.98); }
.ucell .u { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucell .m { display: flex; gap: 6px; align-items: center; color: var(--on-inverse-2); font-size: 11px; font-weight: 600; min-width: 0; }
.ucell .m .ut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.ucell .m svg.ic { width: 14px; height: 14px; color: var(--accent); }
.ucell .m .chip { height: 20px; font-size: 10px; border-color: var(--inverse-line); color: var(--on-inverse); }
.ucell.gone { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line), 8px 0 0 var(--card); }
.ucell.gone .m, .ucell.gone .m .chip { color: var(--text-3); border-color: var(--line); }
.cell { padding: 9px 11px; background: var(--st-unknown); color: #0B0B0C; display: grid; grid-template-rows: auto auto 1fr; align-content: start; transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), opacity 160ms; }
.cell:hover { box-shadow: inset 0 0 0 2px #0B0B0C; }
.cell.st-VACANT { background: var(--st-vacant); } .cell.st-OCCUPIED { background: var(--st-occupied); } .cell.st-BOOKING { background: var(--st-booking); } .cell.st-HOLD { background: var(--st-hold); } .cell.st-RESERVED { background: var(--st-reserved); }
.cell.st-UNKNOWN { box-shadow: inset 0 0 0 1px var(--line); color: var(--text-1); }
.cell .r1 { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .75; }
.cell .r2 { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.cell .r3 { display: block; font-size: 11px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; align-self: start; }
/* no room of this kind in this unit: a quiet grey box; people who may edit get a plus */
.slot { display: grid; place-items: center; background: var(--sunken); color: var(--text-3); opacity: .75; border: 1.5px dashed transparent; transition: opacity 140ms, border-color 140ms, color 140ms; }
.slot svg.ic { width: 18px; height: 18px; opacity: .55; }
button.slot:hover, button.slot:focus-visible { opacity: 1; border-color: var(--text-1); color: var(--text-1); }
button.slot:hover svg.ic, button.slot:focus-visible svg.ic { opacity: 1; }
.slot.off { opacity: .45; filter: blur(.4px); }
.addrow { grid-column: 1 / -1; height: 52px; border-radius: var(--r-ctl); border: 1.5px dashed var(--line); background: transparent; color: var(--text-2); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 16px; }
.addrow:hover { border-color: var(--text-1); color: var(--text-1); background: var(--sunken); }
.bgrid[data-only] .cell { opacity: .18; }
.bgrid[data-only='OCCUPIED'] .cell.st-OCCUPIED, .bgrid[data-only='BOOKING'] .cell.st-BOOKING, .bgrid[data-only='VACANT'] .cell.st-VACANT, .bgrid[data-only='HOLD'] .cell.st-HOLD, .bgrid[data-only='UNKNOWN'] .cell.st-UNKNOWN { opacity: 1; }
.prop.exited { opacity: .6; }

/* room tiles on the unit page */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.room { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-tile); border: 0; text-align: left; background: var(--st-unknown); color: #0B0B0C; min-width: 0; transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.room:hover { box-shadow: inset 0 0 0 2px #0B0B0C; }
.room:active { transform: scale(.985); }
.room.st-VACANT { background: var(--st-vacant); } .room.st-OCCUPIED { background: var(--st-occupied); } .room.st-BOOKING { background: var(--st-booking); } .room.st-HOLD { background: var(--st-hold); }
.room.st-UNKNOWN { box-shadow: inset 0 0 0 1px var(--line); color: var(--text-1); }
.room .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.room .who { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; min-height: 24px; }
.room .chip { background: rgba(255, 255, 255, .6); color: #0B0B0C; }

/* ---- timeline: one line per event ---------------------------------------- */
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 58px 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; font-size: 14px; position: relative; }
.tl .d { color: var(--text-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 7px; text-align: right; }
.tl .dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; color: var(--text-1); position: relative; z-index: 1; }
.tl .dot svg.ic { width: 15px; height: 15px; }
.tl .dot.lemon { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.tl .dot.good { background: var(--good-bg); color: var(--good); }
.tl::before { content: ''; position: absolute; left: 83px; top: 0; bottom: 0; width: 2px; background: var(--track); }
.tl:first-child::before { top: 20px; } .tl:last-child::before { bottom: calc(100% - 20px); }
.tl .s { padding-top: 5px; min-width: 0; }
.tl .s .who { margin-left: 6px; }
.tl.month { grid-template-columns: minmax(0, 1fr); padding: 14px 0 4px; }
.tl.month::before { display: none; }

/* ---- facts & masked fields ----------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
.fact { display: grid; gap: 3px; min-width: 0; }
.fact .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--caps); color: var(--text-3); display: flex; gap: 5px; align-items: center; }
.fact .k svg.ic { width: 13px; height: 13px; }
.fact .v { font-weight: 600; font-size: 14px; }
.masked { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.masked .v { font-family: var(--mono); letter-spacing: .14em; }
.masked button { border: 1px solid var(--line); background: transparent; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.masked button:hover { border-color: var(--text-1); }
.masked button svg.ic { width: 13px; height: 13px; }
.card.dark .masked button { border-color: var(--inverse-line); color: var(--on-inverse); }
.person-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.person-head .nm { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; }

/* case progress */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.step { display: grid; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.step::before { content: ''; height: 6px; border-radius: var(--r-pill); background: var(--track); }
.step.done::before { background: var(--text-1); } .step.now::before { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.step.now { color: var(--text-1); }

/* ---- tabs inside cards --------------------------------------------------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { background: transparent; border: 0; height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px; color: var(--text-2); display: inline-flex; gap: 8px; align-items: center; }
.tabs button:hover { background: var(--sunken); }
.tabs button[aria-selected='true'] { background: var(--text-1); color: var(--card); }
.tabs .cnt { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; }

/* ---- "what you can do here" (preview only) -------------------------------- */
.tour { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tour a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-tile); background: var(--sunken); }
.tour a:hover { background: var(--track); }
.tour b { display: block; font-size: 14px; } .tour span.s { font-size: 12px; color: var(--text-3); }
@media (max-width: 1180px) { .tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tour { gap: 8px; } .tour a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; } .tour span.s { display: none; } .tour b { font-size: 13px; } }

/* ---- side sheet (details drawer) ----------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(11, 11, 12, .38); z-index: 40; }
.sheet { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(500px, calc(100vw - 24px)); background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-pop); z-index: 41; overflow: auto; display: grid; grid-template-rows: auto 1fr; }
.sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 12px 20px; background: var(--card); z-index: 1; }
.sheet-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.sheet-head [data-close] { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sunken); display: grid; place-items: center; color: var(--text-1); }
.sheet-head [data-close]:hover { background: var(--track); }
.sheet-body { padding: 4px 20px 24px; display: grid; gap: 16px; align-content: start; }
@media (prefers-reduced-motion: no-preference) { .sheet:not([hidden]) { animation: slideIn 260ms var(--ease) both; } .scrim:not([hidden]) { animation: fade 200ms ease both; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes fade { from { opacity: 0; } }

/* ---- hover tips ---------------------------------------------------------- */
#tip { position: fixed; left: 0; top: 0; z-index: 80; max-width: 280px; padding: 8px 12px; border-radius: 10px; background: #0B0B0C; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: var(--shadow-pop); }
:root[data-theme='dark'] #tip { background: #F3F5F5; color: #0B0B0C; }

/* ---- skeleton (loading) -------------------------------------------------- */
.sk { border-radius: var(--r-card); background: var(--card); min-height: 164px; position: relative; overflow: hidden; }
.sk.line { min-height: 38px; width: 240px; border-radius: var(--r-ctl); }
.sk.tall { min-height: 300px; }
@media (prefers-reduced-motion: no-preference) { .sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--sunken) 50%, transparent 70%); animation: shimmer 1.3s linear infinite; } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* inside a sheet: the panel answers the click at once, these lines hold the place of the form for one round trip */
.sk-rows { display: grid; gap: 14px; }
.sk-rows .sk { display: block; background: var(--sunken); }
.sk-rows .sk.line { min-height: 26px; width: 55%; border-radius: var(--r-pill); }
.sk-rows .sk.field { min-height: 58px; border-radius: var(--r-ctl); }
.sk-rows .sk.field.short { width: 62%; }
@media (prefers-reduced-motion: no-preference) { .sk-rows .sk::after { background: linear-gradient(100deg, transparent 30%, var(--track) 50%, transparent 70%); } }

/* ---- gate (signed out / pending) ----------------------------------------- */
body.gated .side { display: none; } body.gated .app { grid-template-columns: minmax(0, 1fr); } body.gated .tabbar { display: none; }
.gate { min-height: calc(100dvh - 120px); display: grid; place-items: center; }
.gate .box { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); padding: 36px; width: min(460px, 100%); display: grid; gap: 16px; }
.gate .box h1 { font-size: 32px; }
.gate .box p { color: var(--text-2); }
.gate .bmark { width: 48px; height: 48px; border-radius: var(--r-tile); }

/* ---- toast --------------------------------------------------------------- */
#toast-root { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.toast { background: #0B0B0C; color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; max-width: 90vw; box-shadow: var(--shadow-pop); }
.toast b { color: var(--accent); }
.toast.error { background: var(--bad); color: #fff; } .toast.error b { color: #fff; }
body.is-busy { cursor: progress; }

/* ---- tablet and phone: sidebar becomes a top bar, nav moves to the bottom -- */
.tabbar { display: none; }
@media (max-width: 1024px) {
  .app { display: block; }
  .side { position: sticky; height: auto; padding: 8px 10px 0; }
  .side-in { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; }
  .brand, .side-profile, .side-scroll, .search kbd { display: none; }
  .search { flex: 1; min-width: 0; }
  .search-results { width: auto; right: 0; }
  .side-mini { display: flex; }
  .main { padding: 18px 14px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  /* one equal column per tab, however many there are (4 today): a fixed repeat(5) left an empty fifth column and pushed the tabs left */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 22px; background: #0B0B0C; color: #A9B3B5; z-index: 30; box-shadow: var(--shadow-pop); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 7px 2px 5px; border-radius: 16px; font-size: 10px; font-weight: 600; }
  .tabbar a.active { background: var(--accent); color: var(--on-accent); }
  .tabbar .tic svg.ic { width: 20px; height: 20px; }
  .kpis, .kpis.three, .grid, .stack { gap: 14px; }
  .props { gap: 14px; }
  h1 { font-size: 25px; }
  .sheet { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 88dvh; }
}
@media (max-width: 560px) {
  .kpi { min-height: 138px; padding: 16px; } .kpi-val { font-size: 36px; } .kpi-val small { font-size: 18px; } .kpi-val .of { font-size: 15px; }
  .card { padding: 16px; }
  .hbar { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) 40px; } .hbar .x { display: none; }
  .vbars { gap: 4px; height: 170px; } .vbar .lbl { font-size: 10px; letter-spacing: 0; }
  .rowi { grid-template-columns: auto minmax(0, 1fr); } .rowi .end { grid-column: 2; justify-content: flex-start; }
  .tl { grid-template-columns: 46px 32px minmax(0, 1fr); } .tl::before { left: 71px; }
}
@media print { .side, .tabbar, .sheet, .scrim, #tip { display: none !important; } .app { display: block; } body { background: #fff; } .card, .kpi, .prop { box-shadow: none; border: 1px solid #ddd; } }

/* ---- unit block: reno status as a word; locked info sheet (Calvin 2026-09-21) ---- */
.ucell { grid-template-rows: auto auto 1fr; }
.ucell .rn { display: inline-flex; align-items: center; gap: 4px; align-self: end; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0B0B0C; background: var(--st-booking); border-radius: var(--r-pill); padding: 2px 8px; justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucell .rn.done { background: var(--st-vacant); }
.ucell .rn svg.ic { width: 11px; height: 11px; color: #0B0B0C; }
.ucell.gone .rn { opacity: .6; }
fieldset.lockable { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
/* locked = the same layout read as plain facts: no boxes to suggest typing, full-strength text */
fieldset.lockable:disabled input, fieldset.lockable:disabled select, fieldset.lockable:disabled textarea { border-color: transparent; background: var(--sunken); color: var(--text-1); opacity: 1; -webkit-text-fill-color: var(--text-1); cursor: default; background-image: none; resize: none; }
fieldset.lockable:disabled .check { opacity: .9; }
fieldset.lockable:disabled .info { display: none; }

/* ---- labels, a person's record, "has been here before" (Calvin 2026-09-21) ----
   A label is ticked from a list, never read out of remark text. Its colour family = tone.
   In a sheet or on a page a label is a tinted chip. On a block the block already has a colour (the room status),
   so there the tone moves into a dot and the chip itself stays neutral. */
.tone-neutral { --tone: #8A9699; --tone-bg: var(--sunken); --tone-fg: var(--text-2); }
.tone-good { --tone: #2E9B55; --tone-bg: var(--good-bg); --tone-fg: var(--good); }
.tone-info { --tone: #2F7DD1; --tone-bg: var(--info-bg); --tone-fg: #1F5A94; }
.tone-warn { --tone: #E0A800; --tone-bg: #FFF2CC; --tone-fg: #6B5000; }
.tone-bad { --tone: #D93025; --tone-bg: var(--bad-bg); --tone-fg: var(--bad); }
:root[data-theme='dark'] .tone-info { --tone-fg: #8FC2F0; }
:root[data-theme='dark'] .tone-warn { --tone-bg: #3A3010; --tone-fg: #F0D472; }
.lb { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--tone-bg); color: var(--tone-fg); }
.lbs { display: flex; gap: 4px; min-width: 0; overflow: hidden; align-self: end; }
.lb.mini { display: inline-block; flex: 0 1 auto; min-width: 0; height: 16px; line-height: 16px; padding: 0 6px 0 5px; font-size: 10px; letter-spacing: .01em; background: rgba(255, 255, 255, .72); color: #0B0B0C; }
.lb.mini::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); margin-right: 4px; vertical-align: 1px; }
.lb.mini.more { flex: none; padding: 0 6px; --tone: transparent; } .lb.mini.more::before { display: none; }
.ucell .lb.mini, .cell.st-UNKNOWN .lb.mini { background: rgba(255, 255, 255, .14); color: var(--on-inverse); }
:root:not([data-theme='dark']) .cell.st-UNKNOWN .lb.mini { background: var(--track); color: var(--text-1); }
.ucell.gone .lb.mini { background: var(--sunken); color: var(--text-2); }
.room .meta .lb.mini { height: 20px; line-height: 20px; font-size: 11px; }

.ucell { grid-template-rows: auto auto auto 1fr; }
.ucell .rn { align-self: start; margin-top: 5px; }
.cell { grid-template-rows: auto auto auto auto 1fr; padding: 8px 10px; }
.cell .r1 { opacity: 1; color: color-mix(in srgb, currentColor 75%, transparent); }
.cell .r1 > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cell .r2 { margin-top: 3px; } .cell .r3 { margin-top: 1px; }
.flag { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #0B0B0C; color: var(--accent); flex: none; }
.flag.bad { background: #C62828; color: #fff; }
.flag svg.ic { width: 10px; height: 10px; stroke-width: 2.6; vertical-align: 0; }

.labels-box { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dd > summary { list-style: none; cursor: pointer; height: 28px; font-size: 12px; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary svg.ic:last-child { transition: transform 160ms var(--ease); }
.dd[open] > summary { border-color: var(--text-1); color: var(--text-1); }
.dd[open] > summary svg.ic:last-child { transform: rotate(180deg); }
.dd-panel { position: absolute; z-index: 3; left: 0; top: calc(100% + 6px); width: min(340px, 100%); max-height: min(380px, 60dvh); overflow: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow-pop); display: grid; gap: 2px; }
.sheet-head { z-index: 4; }
.dd-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 13px; font-weight: 600; color: var(--text-1); }
.dd-opt:hover { background: var(--sunken); }
.dd-opt svg.ic { width: 15px; height: 15px; opacity: 0; }
.dd-opt[aria-pressed='true'] { background: var(--sunken); }
.dd-opt[aria-pressed='true'] svg.ic { opacity: 1; }
.tone-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }
.dd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px; align-items: center; }
.dd-mod { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); opacity: .55; }
.dd-mod:hover, .dd-mod:focus-visible { background: var(--sunken); color: var(--text-1); opacity: 1; }
.dd-mod svg.ic { width: 14px; height: 14px; }
/* management edits a label in place: the name on its own line, then colour, save, retire, cancel */
.dd-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 8px; border-radius: 10px; background: var(--sunken); }
.dd-edit input { grid-column: 1 / -1; }
.dd-edit input, .dd-edit select { height: 32px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text-1); font-size: 13px; }
.dd-new { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-top: 4px; padding: 8px 4px 4px; border-top: 1px solid var(--line); }
.dd-new input, .dd-new select { height: 32px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text-1); font-size: 13px; }
.dd-new input:focus, .dd-new select:focus { outline: 0; border-color: var(--text-1); }

.been-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; padding-top: 4px; }
.been-head svg.ic { color: var(--bad); }
.been-head .muted { font-size: 13px; }
.been { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-tile); background: var(--card); border: 1.5px solid var(--tone); box-shadow: 0 0 0 4px var(--tone-bg); }
.been.tone-neutral { border-color: var(--line); box-shadow: none; }
.been .person-head .nm { font-size: 15px; }
.stays { display: grid; gap: 6px; }
.stay { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
.stay .w { font-weight: 700; }
.stay .d { color: var(--text-2); }
.stay .chip { height: 20px; font-size: 11px; }
.stay .why { flex-basis: 100%; font-size: 12px; color: var(--text-2); }
.inc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.inc svg.ic { width: 15px; height: 15px; color: var(--text-3); }
.inc .muted { font-size: 12px; }

/* ---- a case's cost: who pays, how much, why (Calvin 2026-09-21) ---- */
fieldset.subform { border: 1px solid var(--line); border-radius: var(--r-tile); padding: 12px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 10px; }
fieldset.subform > legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
fieldset.subform > legend svg.ic { width: 14px; height: 14px; }
details.fold > summary { list-style: none; cursor: pointer; height: 28px; font-size: 12px; user-select: none; width: max-content; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary { border-color: var(--text-1); color: var(--text-1); }

/* ---- add a unit: one row per room, type + rent, add / remove (Calvin 2026-09-28) ---- */
.room-rows { display: grid; gap: 8px; }
.room-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 104px 32px; gap: 8px; align-items: center; padding: 6px 6px 6px 8px; border-radius: var(--r-ctl); background: var(--sunken); }
.room-row select, .room-row input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text-1); width: 100%; min-width: 0; }
.room-row select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667275' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.room-row select:focus, .room-row input:focus { outline: 0; border-color: var(--text-1); }
.room-row .code { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; color: var(--text-2); }
.room-row .btn.icon.small { width: 32px; height: 32px; }

/* ---- List view: a unit row with its rooms folded beneath, like Octovis's property list (Calvin 2026-09-28) ---- */
.tree-table td { padding: 9px 10px; }
.tree-table tr.lunit td { background: var(--card); }
.tree-table tr.lunit.gone .lt { color: var(--text-3); }
.tree-table .lu { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tree-table .lt { display: grid; line-height: 1.15; }
.tree-table .lt b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.tree-table .lt small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tree-table .chev { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: grid; place-items: center; transition: transform 160ms var(--ease), background 120ms; }
.tree-table .chev:hover { background: var(--sunken); color: var(--text-1); }
.tree-table .chev svg.ic { width: 16px; height: 16px; }
.tree-table .chev.closed { transform: rotate(-90deg); }
.tree-table tr.lroom td:first-child { padding-left: 52px; }
.tree-table .tree { display: inline-flex; align-items: center; gap: 8px; }
.tree-table .tree::before { content: '└'; color: var(--text-3); font-size: 13px; line-height: 1; margin-top: -4px; }
.tree-table tr[data-room], .tree-table tr[data-unitcell] { cursor: pointer; }
.tree-table tr[data-room]:hover td, .tree-table tr[data-unitcell]:hover td { background: var(--sunken); }
.tree-table .chips { flex-wrap: nowrap; }
@media (max-width: 560px) { .tree-table tr.lroom td:first-child { padding-left: 36px; } .tree-table .lt small { white-space: normal; } }

/* ---- Today: six priority tiles (v0.5.0) ---- */
.kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.kpis.six .kpi { min-height: 132px; padding: 16px; } .kpis.six .kpi-val { font-size: 36px; }
.kpi.hot .kpi-val { color: var(--bad); }
@media (max-width: 1180px) { .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Tenants list (v0.5.4, Calvin 2026-10-01) ---- */
.table.tenants .who { display: inline-flex; align-items: center; gap: 10px; }
.table.tenants .lt { display: grid; line-height: 1.15; } .table.tenants .lt b { font-weight: 700; white-space: nowrap; } .table.tenants .lt small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.table.tenants .chips { flex-wrap: nowrap; }
.table.tenants .lbs { margin-top: 4px; }
.table.tenants td { vertical-align: middle; }
.pill-select { height: 32px; padding: 0 30px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667275' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 12px; font-size: 13px; font-weight: 600; color: var(--text-2); appearance: none; -webkit-appearance: none; max-width: 240px; cursor: pointer; }
.pill-select:hover, .pill-select:focus { border-color: var(--text-1); color: var(--text-1); outline: 0; }
.search.inline { width: min(100%, 300px); } .search.inline input { height: 36px; }

/* v0.5.5: a room with more than one open tenancy (the import left 92), and the other tenancy on the room sheet */
.cell .two, .tree .two { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #E0A800; color: #0B0B0C; font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; flex: none; }
.been .other { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.been .other:first-child { border-top: 0; padding-top: 0; }
.been .other .row { flex-wrap: wrap; }
/* a switch in a page header never makes a phone page scroll sideways: it scrolls inside itself instead (v0.5.6) */
@media (max-width: 560px) { .ph-actions { min-width: 0; max-width: 100%; } .ph-actions .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ph-actions .seg::-webkit-scrollbar { display: none; } }

/* v0.6.0 (CR team 2026-10-29): who a unit is for, empty days, sort row, case deadline picker, properties list */
.utc { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--track); color: var(--text-1); }
.utc.big { height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 800; }
.utc.ut-f { background: #FFD6E8; color: #7A1048; } .utc.ut-m { background: #D3E6FF; color: #0D3A7A; }
.utc.ut-x { background: #E4F5D9; color: #2D5A12; } .utc.ut-w { background: #0B0B0C; color: #FFFF00; }
:root[data-theme='dark'] .utc.ut-f { background: #4A1A33; color: #FFC2DE; } :root[data-theme='dark'] .utc.ut-m { background: #142C4F; color: #BBD8FF; }
:root[data-theme='dark'] .utc.ut-x { background: #213816; color: #CDEDB7; } :root[data-theme='dark'] .utc.ut-w { background: #FFFF00; color: #0B0B0C; }
.ucell .m { flex-wrap: wrap; gap: 4px; }
.keys.ut-row { align-items: center; }
.keys.ut-row .ut-key { gap: 8px; }
.keys.ut-row .sortby { margin-left: auto; }
.vd { font-weight: 800; color: #B3261E; font-size: 12px; }
:root[data-theme='dark'] .vd { color: #FF8A80; }
.due-pick { display: grid; gap: 8px; }
.due-pick .chips .pill { height: 28px; font-size: 12px; }
.th-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-sort.on { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.th-sort svg.ic { width: 14px; height: 14px; }
.props-table td .who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 340px; }
.pctcell { display: inline-grid; grid-template-columns: 44px 80px; align-items: center; gap: 8px; }
.bad-t { color: #B3261E; font-weight: 700; } :root[data-theme='dark'] .bad-t { color: #FF8A80; }
@media (max-width: 560px) { .keys.ut-row .sortby { margin-left: 0; width: 100%; } .pctcell { grid-template-columns: 40px 50px; } }

/* v0.6.1 (Calvin 2026-10-29): on a computer the panel pops out in the middle instead of sliding in at the side;
   phones keep the panel they have. A room shows its unit's rooms on top; edits on the unit page happen in place. */
.sheet-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.sheet-head h2 { min-width: 0; }
@media (min-width: 769px) {
  .sheet { top: 50%; left: 50%; right: auto; bottom: auto; width: min(680px, calc(100vw - 64px)); max-height: calc(100vh - 64px); transform: translate(-50%, -50%); }
  @media (prefers-reduced-motion: no-preference) { .sheet:not([hidden]) { animation: popIn 200ms var(--ease) both; } }
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.unit-strip { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-tile); background: var(--sunken); }
.us-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.us-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.us { display: grid; gap: 1px; text-align: left; padding: 7px 9px; border-radius: 10px; border: 1.5px solid transparent; font: inherit; cursor: pointer; min-width: 0; }
.us b { font-size: 12px; font-weight: 800; } .us span { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us.on { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--accent); }
.inline-edit { border: 2px solid var(--accent); }
.us { background: var(--card); color: var(--text-1); }
.us.st-VACANT { background: var(--st-vacant); color: #0B0B0C; } .us.st-OCCUPIED { background: var(--st-occupied); color: #0B0B0C; } .us.st-BOOKING { background: var(--st-booking); color: #0B0B0C; }
.us.st-HOLD { background: var(--st-hold); color: #0B0B0C; } .us.st-RESERVED { background: var(--st-reserved); color: #0B0B0C; }

/* v0.6.3: unit timeline kinds; past tenants as a quiet timeline at the bottom of the room view */
.tl-kinds { margin: 4px 0 8px; }
.hist { border-top: 1px solid var(--line); padding-top: 14px; }
.hist-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: var(--caps); margin-bottom: 8px; }
.hist-head svg.ic { width: 14px; height: 14px; }
.hist-head [data-hist-n] { font-variant-numeric: tabular-nums; }
.hlist { display: grid; margin-left: 4px; border-left: 2px solid var(--track); }
.hl { position: relative; display: grid; gap: 1px; padding: 6px 8px 6px 16px; border-radius: 0 10px 10px 0; color: inherit; text-decoration: none; min-width: 0; }
.hl::before { content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--text-3); }
.hl:hover { background: var(--sunken); }
.hl .hn { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl .hm { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkish { background: none; border: 0; padding: 6px 0 0 18px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- Today on a computer (Calvin 2026-10-30, after the Crextio-style reference; drawn only from 1025 px, phones keep the list layout) ---- */
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.hello-h { font-size: 46px; font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; }
.hello-h b { font-weight: 600; }
.hello-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.todo-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 3px 0 14px; border-radius: var(--r-pill); background: var(--inverse); color: var(--on-inverse); font-size: 13px; font-weight: 700; }
.todo-pill i { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.todo-pill svg.ic { width: 14px; height: 14px; }
.bignums { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.bign { display: grid; gap: 6px; padding: 4px 8px; border-radius: var(--r-tile); }
.bign:hover { background: var(--card); }
.bign b { font-size: 60px; font-weight: 300; line-height: .95; letter-spacing: -0.05em; }
.bign span { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 500; color: var(--text-3); }
.bign svg.ic { width: 14px; height: 14px; }

.mixbar { display: flex; gap: 10px; }
.mb { flex: var(--n) 1 0; min-width: 120px; display: grid; gap: 8px; }
.mb-l { font-size: 13px; color: var(--text-2); }
.mb-l b { color: var(--text-1); font-weight: 700; margin-left: 6px; }
.mb-p { height: 42px; border-radius: var(--r-pill); display: flex; align-items: center; padding: 0 18px; font-size: 15px; font-weight: 700; transition: transform 160ms var(--ease); }
.mb:hover .mb-p { transform: translateY(-1px); }
.mb.ink .mb-p { background: var(--inverse); color: var(--on-inverse); }
.mb.lemon .mb-p { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.mb.hatch .mb-p { background: repeating-linear-gradient(-45deg, var(--track) 0 2px, transparent 2px 9px); box-shadow: inset 0 0 0 1px var(--line); }
.mb.line .mb-p { box-shadow: inset 0 0 0 1px var(--text-3); }

.today-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ring end" "todo bld" "week week"; }
.tg-ring { grid-area: ring; } .tg-end { grid-area: end; } .tg-bld { grid-area: bld; } .tg-todo { grid-area: todo; } .tg-week { grid-area: week; }
@media (min-width: 1280px) { .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ring end todo" "bld bld todo" "week week week"; } }
@media (min-width: 1560px) {
  .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.1fr); grid-template-areas: "ring end bld todo" "week week week todo"; }
}
/* the buildings card is one column wide below 1280 and from 1560: drop the vacant chip so the bar keeps its room */
@media (max-width: 1279px), (min-width: 1560px) { .tg-bld .hbar { grid-template-columns: minmax(0, 1.4fr) minmax(48px, 1fr) 40px; } .tg-bld .hbar .x { display: none; } }
.round-link { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-1); flex: none; }
.round-link:hover { background: var(--sunken); }
.round-link svg.ic { width: 16px; height: 16px; transform: rotate(-45deg); }

.ring { position: relative; width: min(100%, 210px); aspect-ratio: 1; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; }
.ring .ticks { stroke: var(--text-3); stroke-width: 6; stroke-dasharray: 1.4 5.3; opacity: .5; }
.ring .trk { stroke: var(--track); stroke-width: 14; }
.ring .arc { stroke: var(--accent); stroke-width: 14; stroke-linecap: round; }
.ring-v { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.ring-v b { font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.ring-v small { font-size: 20px; margin-left: 2px; }
.ring-v span { font-size: 12px; color: var(--text-3); }
.ring-foot { display: flex; justify-content: space-between; gap: 8px; }
.ring-foot small { display: block; font-size: 12px; color: var(--text-3); }
.ring-foot b { font-size: 20px; font-weight: 700; }

.end-big { display: flex; align-items: flex-end; gap: 10px; justify-self: start; }
.end-big b { font-size: 52px; font-weight: 300; line-height: .9; letter-spacing: -0.05em; }
.end-big span { font-size: 12px; line-height: 1.3; color: var(--text-3); }
.lps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 172px; }
.lp { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; justify-items: center; padding: 4px 0 2px; border-radius: var(--r-ctl); }
.lp:hover { background: var(--sunken); }
.lp-plot { position: relative; width: 12px; margin-top: 28px; background: linear-gradient(var(--line), var(--line)) center / 2px 100% no-repeat; }
.lp-plot i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%); min-height: 12px; border-radius: var(--r-pill); background: var(--text-1); }
.lp-plot b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp.now .lp-plot i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.lp.now .lp-plot b { padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); }
.lp.zero .lp-plot i { background: var(--track); }
.lp .lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.lp.now .lbl { color: var(--text-1); }
@media (prefers-reduced-motion: no-preference) { .main.enter .lp-plot i { animation: growUp 600ms var(--ease) both; transform-origin: bottom; } }

.td-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.td-big { display: grid; justify-items: end; }
.td-big b { font-size: 44px; font-weight: 300; line-height: .9; letter-spacing: -0.04em; }
.td-big small { font-size: 12px; color: var(--on-inverse-2); margin-top: 4px; }
.td-prog { height: 3px; border-radius: var(--r-pill); background: var(--inverse-line); overflow: hidden; }
.td-prog i { display: block; height: 100%; width: var(--w); background: var(--accent); }
.td-list { display: grid; gap: 2px; }
.td-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 8px; margin: 0 -8px; border-radius: var(--r-tile); }
.td-row:hover { background: rgba(255, 255, 255, .07); }
.td-ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.td-ic svg.ic { width: 16px; height: 16px; }
.td-t { display: grid; min-width: 0; line-height: 1.3; }
.td-t b { font-size: 14px; font-weight: 600; }
.td-t small { font-size: 12px; color: var(--on-inverse-2); }
.td-n { min-width: 40px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--on-inverse-2); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.td-sec { font-size: 11px; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; color: var(--on-inverse-2); margin: 8px 0 2px; }
.td-row.done .td-t b { text-decoration: line-through; color: var(--on-inverse-2); }
.td-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; justify-self: end; }
.td-ok svg.ic { width: 15px; height: 15px; }

.wk-legend { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--text-3); }
.wk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.wk-legend .in i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.wk-legend .out i { box-shadow: inset 0 0 0 1.5px var(--text-2); }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.wk-day { display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 156px; padding: 12px 8px 8px; border-left: 1px dashed var(--line); }
.wk-day:first-child { border-left: 0; }
.wk-day.today { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0 0 var(--r-tile) var(--r-tile); }
.wk-h { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-3); }
.wk-h b { font-size: 13px; color: var(--text-1); }
.wk-day.today .wk-h { color: var(--text-1); font-weight: 600; }
.wk-day.today .wk-h b { padding: 1px 8px; border-radius: var(--r-pill); background: var(--inverse); color: var(--on-inverse); }
.ev { display: grid; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: var(--r-ctl); transition: transform 160ms var(--ease); }
.ev:hover { transform: translateY(-1px); }
.ev b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev b svg.ic { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; color: var(--bad); }
.ev small { font-size: 11px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.in { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.ev.in b svg.ic { color: #B00020; }
.ev.out { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--text-2); }
.wk-more { font-size: 12px; font-weight: 600; color: var(--text-3); }
:root[data-theme='dark'] .wk-day.today { background: rgba(255, 255, 255, .04); box-shadow: inset 0 2px 0 var(--accent); }
:root[data-theme='dark'] .mb.ink .mb-p { box-shadow: inset 0 0 0 1px var(--inverse-line); }