/* The office screens. Layout responds to the space the screen actually has (container queries on
   the screen), not to the window, so the same rule holds beside the sidebar, beside the rail and
   on a phone. */

.screen { container-type: inline-size; container-name: screen; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 28px 0 12px; }
.section-head h2 { margin: 0; }
.screen-head + .section-head, .screen-head + .building .section-head { margin-top: 0; }

/* A panel: a white card with a title and a short gold rule under it. */
.panel {
  position: relative;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 18px 18px 8px;
  box-shadow: var(--shadow);
}
.panel > h2 { font-size: 1.15rem; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.panel > h2 + .table-wrap { margin: 0 -18px; border: 0; border-radius: 0; box-shadow: none; }
.panel > h2 + .table-wrap + * { margin-top: 12px; }
.panel .empty { margin: 4px 0 12px; color: var(--muted); font-style: italic; }
.panel-count {
  position: absolute; top: 16px; right: 16px;
  min-width: 30px; height: 26px; padding: 0 8px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--linen); color: var(--navy); font-weight: 700; font-size: 0.9rem;
}
.panel-count.is-attention { background: var(--alert-soft); color: var(--alert); }
.panel.is-empty .panel-count { color: var(--muted); }
.panel.is-empty { background: rgba(255, 255, 255, 0.6); box-shadow: none; }

/* ---- Today ---- */

.quick .btn { min-height: 42px; }
/* On a phone the units are one row to swipe through, so the lists below come sooner. */
.unit-strip {
  list-style: none; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 2px var(--gutter) 8px;
  display: grid; gap: 10px; grid-auto-flow: column; grid-auto-columns: 66%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.unit-now { scroll-snap-align: start; }
.unit-now a {
  display: grid; gap: 3px; height: 100%;
  padding: 12px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--hair); border-top: 4px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.12s, transform 0.12s;
}
.unit-now a:hover { border-color: var(--navy); transform: translateY(-1px); }
.unit-top { display: grid; gap: 3px; margin-bottom: 4px; }
.unit-name { font: 700 1.25rem/1.1 var(--font-display); color: var(--navy); }
.unit-state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.unit-who { font-weight: 700; min-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-line { font-size: 0.88rem; color: var(--muted); }
.unit-flag { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 4px; background: var(--alert-soft); color: var(--alert); font-size: 0.8rem; font-weight: 700; }
.unit-now.is-in a { border-top-color: var(--navy); }
.unit-now.is-in .unit-state { color: var(--navy); }
.unit-now.is-leaving a { border-top-color: var(--sand); }
.unit-now.is-leaving .unit-state { color: #6E5428; }
.unit-now.is-arriving a { border-top-color: var(--gold); }
.unit-now.is-arriving .unit-state { color: #6E5428; }
.unit-now.is-vacant a { background: rgba(255, 255, 255, 0.55); border-style: dashed; border-top-style: solid; box-shadow: none; }
.unit-now.is-attention a { border-top-color: var(--alert); }

.today-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.today-row:last-child { border-bottom: 0; }
.when-box {
  display: grid; place-items: center; align-content: center;
  width: 46px; height: 48px; border-radius: 6px;
  background: var(--linen); color: var(--navy);
  line-height: 1;
}
.when-box b { font: 700 1.3rem/1 var(--font-display); }
.when-box span { margin-top: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.when-box.is-late { background: var(--alert-soft); color: var(--alert); }
.when-box.is-late span { color: var(--alert); }
.today-main { display: grid; min-width: 0; }
/* Block, not flex: a flex row split "Wild Dog Sam Taylor" into two wrapping columns on a phone. */
.today-what { display: block; padding: 2px 0; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.35; font-size: 1.02rem; }
.today-what b { color: var(--navy); }
.today-what:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }
.today-when { font-size: 0.86rem; color: var(--muted); }
.today-row.is-late .today-when { color: var(--alert); font-weight: 700; }
.today-call { display: flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 0.95rem; }

@container screen (min-width: 560px) {
  .unit-strip { margin: 0 0 8px; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
}
@container screen (min-width: 600px) {
  .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container screen (min-width: 1050px) {
  .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .today-call { grid-column: 2 / -1; min-height: 32px; }
}

/* ---- Stat tiles: linen, a label, a Caladea figure, a word. Attention is a word plus the alert edge ---- */

.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 8px; }
.tile {
  display: grid; gap: 2px; align-content: start; text-align: left;
  padding: 14px 16px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tile-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.tile-value { font: 700 1.7rem/1.15 var(--font-display); color: var(--navy); white-space: nowrap; }
.tile-note { font-size: 0.86rem; color: var(--muted); }
.tile.is-attention { box-shadow: inset 4px 0 0 var(--alert), var(--shadow); }
.tile.is-attention .tile-value { color: var(--alert); }
.tile.is-attention .tile-note { color: var(--alert); font-weight: 700; }
@container screen (min-width: 760px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tile { padding: 10px 12px; } .tile-value { font-size: 1.35rem; } }

/* A meter: a navy fill on a lighter step of the same family. */
.meter { margin: 6px 0 4px; }
.meter-track { height: 8px; border-radius: 999px; background: var(--navy-soft); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--navy); }

/* ---- Money ---- */

.money-grid { display: grid; gap: 14px; margin: 20px 0 12px; grid-template-columns: minmax(0, 1fr); }
@container screen (min-width: 980px) { .money-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }

/* ---- Filter chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 700;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip .data { min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--linen); color: var(--muted); text-align: center; font-size: 0.85rem; }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.chip.is-on .data { background: rgba(255, 255, 255, 0.16); color: var(--paper); }

/* ---- Calendar ---- */

.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cal-range { margin-left: auto; font: 700 1.05rem var(--font-display); color: var(--navy); }
.cal-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.cal-go input { width: auto; min-height: 44px; }
.cal-scroll { overflow-x: auto; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); }
.cal { display: grid; grid-template-columns: var(--cal-unit) repeat(var(--cal-days), var(--cal-day)); width: max-content; }
.cal-corner, .cal-unit {
  grid-column: 1; position: sticky; left: 0; z-index: 3;
  background: var(--paper); border-right: 1.5px solid var(--gold);
}
.cal-corner { background: var(--linen); }
.cal-unit {
  display: flex; align-items: center; padding: 0 12px;
  font: 700 1rem var(--font-display); color: var(--navy);
  border-bottom: 1px solid var(--hair);
}
.cal-month {
  padding: 6px 8px; background: var(--linen);
  border-left: 1px solid var(--hair);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap; overflow: hidden;
}
.cal-day {
  display: grid; place-items: center; align-content: center;
  background: var(--linen);
  font-variant-numeric: tabular-nums; font-size: 0.82rem; line-height: 1.15;
  border-bottom: 1.5px solid var(--gold);
}
.cal-day span { color: var(--muted); font-size: 0.7rem; }
.cal-day b { color: var(--navy); }
.cal-cell { border-left: 1px solid #EFE8DA; border-bottom: 1px solid var(--hair); }
.cal-cell.is-weekend { background-color: var(--zebra); }
.cal-day.is-weekend { background-color: #F0EADC; }
.cal-cell.is-today { background-color: rgba(184, 149, 90, 0.12); }
.cal-day.is-today { background: var(--navy); }
.cal-day.is-today span, .cal-day.is-today b { color: var(--paper); }
.cal-cell.is-free { position: relative; }
.cal-cell.is-free:hover, .cal-cell.is-free:focus-visible { background: var(--gold-soft); }
.cal-cell.is-free:hover::after, .cal-cell.is-free:focus-visible::after {
  content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 1.15rem var(--font-body); color: var(--navy);
}

/* Bars (docs/BRAND.md "Calendar"): a lease is navy, a short stay is gold, a provisional hold is
   hatched in its family, attention is the alert inset outline and left edge. */
.bar {
  z-index: 2; align-self: center; min-width: 0;
  height: 34px; margin: 0 2px; padding: 0 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-radius: 6px;
  font-size: 0.85rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 40, 56, 0.2);
}
.bar-name, .bar-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bar-sub { display: none; font-size: 0.75rem; font-weight: 400; opacity: 0.85; }
.cal-unit { flex-direction: column; align-items: flex-start; justify-content: center; }
.cal-unit::after { content: attr(data-meta); font: 400 0.75rem var(--font-body); color: var(--muted); }
.bar.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.bar.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.bar--lease { background: var(--navy); color: var(--paper); }
.bar--stay { background: var(--gold); color: var(--ink); }
.bar--lease.is-provisional {
  background: repeating-linear-gradient(135deg, var(--navy-soft) 0 6px, var(--paper) 6px 12px);
  color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy);
}
.bar--stay.is-provisional {
  background: repeating-linear-gradient(135deg, var(--gold-soft) 0 6px, var(--paper) 6px 12px);
  color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold);
}
.bar.is-out, .bar-swatch.is-out { opacity: 0.45; }
.bar.is-saved { outline: 3px solid var(--gold); outline-offset: 1px; }
.bar.is-attention, .bar-swatch.is-attention { box-shadow: inset 0 0 0 2px var(--alert); border-left: 6px solid var(--alert); }
.bar:hover { filter: brightness(1.12); }
.bar--stay:hover { filter: brightness(1.05); }

.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); }
.cal-legend li { display: flex; align-items: center; gap: 8px; }
.bar-swatch { display: inline-block; width: 30px; height: 14px; border-radius: 3px; }
/* On a tablet or desktop the rows share out the height of the screen, so the calendar fills it,
   and a bar has room for its dates under the name. */
@media (min-width: 768px) {
  .cal { --cal-row: clamp(60px, calc((100vh - 300px) / var(--units, 5)), 88px); }
  .bar { height: min(52px, calc(var(--cal-row) - 18px)); }
  .bar-sub { display: block; }
}
@media (max-width: 599px) { .cal-go > span { display: none; } .cal-range { width: 100%; margin-left: 0; } }

/* ---- Booking page: jumps to each section; two columns when there is room ---- */

.jumps {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto;
  margin: -8px calc(-1 * var(--gutter)) 16px; padding: 10px var(--gutter);
  background: rgba(247, 243, 234, 0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hair);
  scrollbar-width: none;
}
.jumps button {
  flex: none; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--paper); color: var(--navy);
  font: 700 0.92rem var(--font-body); cursor: pointer;
}
.jumps button:hover { border-color: var(--navy); }
.jumps button.is-here { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.booking-cols { display: flex; flex-direction: column; gap: 16px; }
.col-a, .col-b { display: contents; }
.booking-cols .rent { order: 3; }
.booking-cols form.form { order: 4; }
.booking-cols > * > * { scroll-margin-top: 72px; }
.booking .facts.card { margin: 0; }
.form-h { margin-top: 0; }
@container screen (min-width: 900px) {
  .booking-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .col-a, .col-b { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .booking-cols form.form { max-width: none; }
}
.lease-life, .deposit, .rent, .stay { margin: 0; }

/* Lease stages, a step at a time. */
.stages { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 14px; font-size: 0.8rem; }
.stages li { padding: 4px 10px; border-radius: 4px; background: var(--linen); color: var(--muted); font-weight: 700; }
.stages li.is-done { background: var(--navy-soft); color: var(--navy); }
.stages li.is-now { background: var(--navy); color: var(--paper); }
.mini-form, .pay-form { display: grid; gap: 12px; padding: 14px; margin-top: 12px; background: var(--linen); border-radius: 6px; border: 1px solid var(--hair); }
.pay-form { margin: 0 0 8px; }
.mini-form h3, .pay-form h3 { margin: 0; }
.rule { margin: 4px 0; }
.clock, .balance { font-size: 1.08rem; margin: 4px 0 12px; }
.clock.is-urgent, .balance.is-overdue { color: var(--alert); }
.balance.is-ok { color: var(--ok); }
.new-person { display: grid; gap: 14px; padding-left: 14px; border-left: 3px solid var(--gold); }
.new-person[hidden], .daily-rate[hidden], .t-lease[hidden], .t-stay[hidden], .tenant-cost[hidden], .tenant-responded[hidden] { display: none; }
.taken { margin: -6px 0 0; font-size: 0.92rem; color: #6E5428; }
.taken:empty { display: none; }
.type-pick { display: flex; flex-wrap: wrap; gap: 4px 20px; border: 0; padding: 0; margin: 0; }
.type-pick legend { width: 100%; margin-bottom: 4px; }
.stay-sum { margin: 0; color: #6E5428; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.history li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.history li:last-child { border-bottom: 0; }

/* Two columns for a form with its side information (a person and their bookings). */
.split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container screen (min-width: 900px) { .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.split > .form { max-width: none; }

/* A long form of short fields (Settings) lays out in columns when there is room. */
@container screen (min-width: 760px) {
  .form--grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .form--grid > :is(h2, h3, .check, .note, .problem, .actions, p) { grid-column: 1 / -1; }
}
@container screen (min-width: 1200px) {
  .form--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form--grid > h2 { margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); }
.contact { margin: 0 0 16px; }

/* ---- Inspection form and record ---- */

.inspect-form { max-width: 880px; }
.room { border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px; margin: 0; display: grid; gap: 12px; background: var(--paper); }
.room legend { font: 700 1.1rem var(--font-display); color: var(--navy); padding: 0 6px; }
.item { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.item:last-of-type { border-bottom: 0; }
.item-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.item-name { font-weight: 700; }
.conditions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cond { position: relative; }
.cond input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cond span { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--hair); border-radius: 6px; background: var(--paper); font-size: 0.95rem; font-weight: 700; }
.cond input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.cond--good input:checked + span { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.cond--fair input:checked + span { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.cond--damaged input:checked + span, .cond--missing input:checked + span { background: var(--alert); border-color: var(--alert); color: var(--paper); }
.item-note { min-height: 40px; font-size: 0.95rem; }
.room-photos { display: grid; gap: 8px; }
.photo-btn { justify-self: start; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hair); }
.inv { grid-template-columns: 1fr 96px; align-items: center; }
.sign { display: grid; gap: 12px; grid-template-columns: 1fr; }
.sig { display: grid; gap: 4px; }
.sig[hidden], .progress[hidden] { display: none; }
.sig canvas { width: 100%; height: 160px; border: 1.5px dashed var(--gold); border-radius: 6px; background: var(--paper); touch-action: none; }
.progress { color: #6E5428; }
.room-view { margin-bottom: 16px; }
.room-view table { margin-bottom: 8px; }
.sigs { display: flex; flex-wrap: wrap; gap: 16px; }
.sig-view { margin: 0; }
.sig-view img { width: 260px; max-width: 100%; height: auto; border-bottom: 1px solid var(--ink); }
@media (min-width: 768px) { .sign { grid-template-columns: 1fr 1fr; } }

/* ---- Expenses, profit, bank statement ---- */

.month-label { padding: 0 8px; font: 700 1.1rem var(--font-display); color: var(--navy); }
.period { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.period input { width: auto; }
.st-map { display: grid; gap: 12px; margin-bottom: 16px; }
.st-table td.out, .st-table tr.st-imported td, .st-table tr.st-out td { color: var(--muted); }
.st-status { font-size: 0.82rem; color: #6E5428; }
.st-table tr.st-ref .st-status { color: var(--ok); }
.st-table input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
.st-table select { min-width: 160px; }

/* ---- Receipt ---- */

.receipt { max-width: 760px; position: relative; }
.receipt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-bottom: 1.5px solid var(--gold); margin-bottom: 14px; padding-bottom: 10px; }
.receipt-head h1 { margin: 0; }
.receipt-from { text-align: right; font-size: 0.92rem; }
.receipt .facts div { grid-template-columns: 130px 1fr; }
.void-stamp { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font: 700 4rem var(--font-display); color: var(--alert); opacity: 0.35; transform: rotate(-12deg); pointer-events: none; margin: 0; }

/* ---- Find ---- */

.find-form input { font-size: 1.15rem; min-height: 54px; max-width: 760px; padding-left: 16px; }
.find-results { max-width: 760px; margin-top: 8px; }
.find-results .today-list { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); }
.find-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.find-row:last-child { border-bottom: 0; }
.find-what { flex: 1 1 220px; display: block; padding: 11px 0; color: var(--ink); text-decoration: none; }
.find-what b { color: var(--navy); }
.find-what:hover b { text-decoration: underline; text-decoration-color: var(--gold); }
.find-call { min-height: 44px; display: flex; align-items: center; }

/* ---- Sign-in gate ---- */

.gate { max-width: 560px; }
.code { padding: 10px 12px; background: var(--linen); border-radius: 6px; word-break: break-all; user-select: all; }
.form--grid > h2.form-h { border-top: 0; padding-top: 0; margin-top: 0; }
/* A second heading inside a panel, after a table that runs to the panel's edges. */
.panel > .panel-sub { font-size: 1.15rem; margin: 22px 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
.panel > .panel-sub + .table-wrap { margin: 0 -18px; border: 0; border-radius: 0; box-shadow: none; }
.panel > .table-wrap:last-child { margin-bottom: -8px; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* ---- Units: a card each ---- */
.unit-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.unit-card { display: grid; gap: 12px; align-content: start; padding: 18px; background: var(--paper); border: 1px solid var(--hair); border-top: 4px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); }
.unit-card.is-inactive { border-top-color: var(--hair); background: rgba(255, 255, 255, 0.6); box-shadow: none; }
.uc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uc-name { font: 700 1.45rem var(--font-display); color: var(--navy); text-decoration-thickness: 1.5px; }
.uc-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; margin: 0; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.uc-facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.uc-facts dd { margin: 0; font-weight: 700; }
.uc-now { margin: 0; }
@container screen (min-width: 900px) { .split--wide { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); } }
.panel .history li { flex-direction: column; align-items: flex-start; gap: 2px; }
.panel > p:last-child { margin-bottom: 12px; }
/* In the two-column booking page on a laptop, the months table drops its Due date (the month says it). */
@container screen (min-width: 900px) and (max-width: 1180px) {
  .booking-cols table.charges .hide-sm { display: none; }
}