/* Colours come from the shared Blueshade theme (lib/blueshade-theme/theme.css, pinned in blueshade-theme.json): Bridge navy
   and gold, light and dark. HPMS keeps its own names below so the rest of this file reads as before; each one points at a
   --bs-* token (or a mix of them), so every page switches with the Light / Dark / System choice. Text pairs meet WCAG AA. */
:root {
  --bg: var(--bs-bg);
  --surface: var(--bs-surface);
  --surface-2: var(--bs-surface-2);
  --ink: var(--bs-text);
  --muted: var(--bs-muted);
  --line: var(--bs-border);
  --line-soft: color-mix(in srgb, var(--bs-border) 60%, var(--bs-surface));
  --accent: var(--bs-link);          /* links, highlights, hover borders */
  --accent-soft: var(--bs-info-soft);
  --free: var(--bs-ok);
  --free-soft: var(--bs-ok-soft);
  --free-line: color-mix(in srgb, var(--bs-ok) 40%, var(--bs-surface));
  --allocated: var(--bs-warn);
  --allocated-soft: var(--bs-warn-soft);
  --allocated-bar: color-mix(in srgb, var(--bs-warn) 30%, var(--bs-surface));
  --occupied: var(--bs-bad);
  --occupied-soft: var(--bs-bad-soft);
  --occupied-line: color-mix(in srgb, var(--bs-bad) 40%, var(--bs-surface));
  --neutral-soft: color-mix(in srgb, var(--bs-muted) 18%, var(--bs-surface));
  --on-solid: var(--bs-surface);    /* text on a solid status colour (white in light, navy in dark) */
  --env: var(--bs-warn);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0; }
h1 small { font-weight: 400; color: var(--muted); font-size: 1rem; margin-left: .5rem; }
h2 { margin: 0 0 1rem; font-size: 1.2rem; }
code { background: var(--bs-code-bg); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); } .small { font-size: .85rem; }

.env-banner { background: var(--allocated-soft); color: var(--env); text-align: center; font-size: .8rem; padding: 3px; letter-spacing: .04em; border-bottom: 1px solid var(--allocated-bar); }
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.5rem; background: var(--bs-header-bg); color: var(--bs-header-text); flex-wrap: wrap; border-bottom: 3px solid var(--bs-gold); }
.topbar a { color: var(--bs-header-text); text-decoration: none; }
.brand { font-weight: 700; font-size: 1.15rem; } .brand span { font-weight: 300; }
.nav { display: flex; gap: 1.1rem; } .nav a { opacity: .9; } .nav a:hover { opacity: 1; text-decoration: underline; }
.who { margin-left: auto; display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.who small { opacity: .8; }
.page { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.5rem 3rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.actions, .datebar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

button, .btn { font: inherit; padding: .4rem .8rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary, .btn.primary { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-primary-text); }
button.primary:hover, .btn.primary:hover { background: var(--bs-primary-hover); border-color: var(--bs-primary-hover); }
button.danger { color: var(--occupied); border-color: var(--occupied-line); }
button.link { background: none; border: none; color: var(--bs-header-text); padding: 0; text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--bs-focus); outline-offset: 2px; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; }

input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--bs-field-border); border-radius: 6px; background: var(--bs-field); color: var(--ink); width: 100%; }
.datebar input, .datebar select, form.inline input { width: auto; }
label { display: block; margin: .9rem 0 .25rem; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: var(--muted); }
.error { color: var(--occupied); font-size: .85rem; display: block; }
.notice { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.notice.ok { background: var(--free-soft); border: 1px solid var(--free-line); }
.notice.bad { background: var(--occupied-soft); border: 1px solid var(--occupied-line); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; }
.card.narrow { max-width: 520px; }
.form { max-width: 640px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { margin-top: 1.4rem; display: flex; gap: .6rem; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 1rem 0 0; padding: 0 1rem 1rem; }
legend { padding: 0 .4rem; font-weight: 600; }

.login { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: center; max-width: 900px; margin: 4rem auto; }
.login-brand h1 { font-size: 2.4rem; color: var(--bs-primary); } .login-brand h1 span { font-weight: 300; }
.login-brand p { color: var(--muted); font-size: 1.1rem; }
.login-card button { margin-top: 1.4rem; width: 100%; padding: .6rem; }
@media (max-width: 800px) { .login { grid-template-columns: 1fr; margin: 2rem auto; } }

.tiles { display: flex; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.planner { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; margin-bottom: 2rem; }
.planner-inner { min-width: calc(180px + var(--days) * 58px); }
.planner-head, .planner-row { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--line-soft); }
.planner-row:last-child { border-bottom: none; }
.planner-head { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.planner-label { padding: .4rem .8rem; border-right: 1px solid var(--line); line-height: 1.25; }
.planner-label small { display: block; color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-head .planner-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); align-self: center; }
.planner-track { position: relative; min-height: 2.6rem; }
.planner-head .planner-track { min-height: 2.4rem; }
.planner-day { position: absolute; top: 0; bottom: 0; text-align: center; font-size: .8rem; padding-top: .3rem; border-left: 1px solid var(--line); }
.planner-day span { display: block; font-size: .68rem; text-transform: uppercase; color: var(--muted); }
.planner-day.today { background: var(--accent-soft); font-weight: 600; }
.planner-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.planner-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.pbar { position: absolute; top: 5px; bottom: 5px; z-index: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 .5rem; border-radius: 4px; font-size: .8rem; line-height: 2.1rem; text-decoration: none; border: 1px solid transparent; }
.pbar:hover, .pbar:focus-visible { filter: brightness(.94); z-index: 3; outline-offset: 0; }
.pbar.allocated { background: var(--allocated-soft); border-color: var(--allocated); color: var(--ink); }
.pbar.occupied { background: var(--occupied); color: var(--on-solid); }
.pbar.occupied.overstay { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.pbar.completed { background: var(--free-soft); border-color: var(--free-line); color: var(--free); }
.planner-key { margin: 1.2rem 0 .5rem; }
.booking-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.booking-list li { padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.booking-list li:last-child { border-bottom: none; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.facts dt { color: var(--muted); font-size: .9rem; } .facts dd { margin: 0; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.section-gap { margin-top: 2rem; }
.card.form { margin-top: 1.5rem; }
.form input[type="color"] { padding: .15rem; height: 2.4rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px; padding: .5rem 1.1rem; min-width: 140px; }
.tile strong { font-size: 1.6rem; margin-right: .5rem; }
.tile.free { border-left-color: var(--free); } .tile.allocated { border-left-color: var(--allocated); } .tile.occupied { border-left-color: var(--occupied); }

.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill.free, .pill.completed { background: var(--free-soft); color: var(--free); }
.pill.allocated { background: var(--allocated-soft); color: var(--allocated); }
.pill.occupied { background: var(--occupied-soft); color: var(--occupied); }
.pill.cancelled { background: var(--neutral-soft); color: var(--ink); }

.grid { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.grid-head, .grid-row { display: grid; grid-template-columns: 190px 110px minmax(220px, 1fr) minmax(300px, 1.3fr); gap: 1rem; padding: .55rem 1rem; align-items: center; min-width: 900px; }
.grid-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.grid-row { border-bottom: 1px solid var(--line-soft); } .grid-row:last-child { border-bottom: none; }
.col-unit small { display: block; color: var(--muted); font-size: .8rem; }
.col-note { font-size: .9rem; }
.hours { position: relative; height: 1rem; } .hours span { position: absolute; transform: translateX(-30%); }
.track { position: relative; height: 22px; background: var(--neutral-soft); border-radius: 4px; overflow: hidden; }
.seg { position: absolute; top: 0; bottom: 0; display: block; }
.seg:hover { filter: brightness(.9); }
.seg.allocated { background: var(--allocated-bar); }
.seg.occupied { background: var(--occupied); top: 5px; bottom: 5px; border-radius: 3px; }
.now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent); }

.table { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table td { padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.row-actions { white-space: nowrap; display: flex; gap: .4rem; }

/* =====================================================================================================
   Brand type and the dashboard pieces the layout uses (gold shield, Jost)
   ===================================================================================================== */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --gold: var(--bs-accent); --gold-soft: var(--bs-accent-soft); --gold-text: var(--bs-accent-text); --display: var(--bs-font-heading); --waiting: #6a4fb0; --waiting-soft: color-mix(in srgb, var(--waiting) 16%, var(--bs-surface)); }
/* The theme has no purple: "waiting for a room" gets a lighter purple on the dark palette (AA on its soft tint). */
[data-theme="dark"] { --waiting: #c3b1f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --waiting: #c3b1f2; } }
/* Availability grid: "last room" (amber) and "none left" (red). The theme's dark soft tints for these are both near-black
   brown / maroon, so the dark palette gets its own clearly different pair (gold on ochre, pink on crimson; both AA). */
:root { --avail-last-bg: var(--allocated-soft); --avail-last-ink: var(--ink); --avail-none-bg: var(--occupied-soft); --avail-none-ink: var(--occupied); }
[data-theme="dark"] { --avail-last-bg: #5c4a0e; --avail-last-ink: #ffdf8f; --avail-last-link: #ffdf8f; --avail-none-bg: #74202a; --avail-none-ink: #ffcdc8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --avail-last-bg: #5c4a0e; --avail-last-ink: #ffdf8f; --avail-last-link: #ffdf8f; --avail-none-bg: #74202a; --avail-none-ink: #ffcdc8; } }
h1, h2, h3, .brand, .nav, .side-group-toggle, .kpi .value, .tabs a { font-family: var(--display); }
h1 { font-weight: 500; letter-spacing: -.01em; }
h2 { font-weight: 500; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .5rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand img { display: block; }
.brand-word { font-weight: 500; letter-spacing: .02em; }
.brand-pms { font-weight: 300; color: #f4ead6; }   /* on the navy top bar in both themes */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-footer { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 2rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }

.welcome { display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.welcome h1 { font-size: 1.9rem; margin: .2rem 0 .4rem; }
.welcome p { margin: 0 0 1rem; color: var(--muted); }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-text); font-weight: 600; }
.quick { display: flex; gap: .5rem; flex-wrap: wrap; }
.ring { --pct: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; flex: none;
        background: conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--neutral-soft) 0); }
.ring > div { width: 104px; height: 104px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; color: var(--muted); font-size: .8rem; }
.ring strong { display: block; font-family: var(--display); font-size: 1.7rem; color: var(--ink); font-weight: 500; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.kpi .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi .value { font-size: 1.7rem; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi .value.small-value { font-size: 1.15rem; padding-top: .2rem; }
.kpi .sub { font-size: .8rem; color: var(--muted); }
.kpi.alert { border-color: var(--occupied-line); background: var(--occupied-soft); }
.kpis.compact .kpi { padding: .6rem .9rem; }
.kpis.compact .kpi .value { font-size: 1.3rem; }
.statbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--neutral-soft); margin-bottom: .6rem; }
.statbar i { display: block; height: 100%; }
.statbar i.occupied { background: var(--occupied); } .statbar i.allocated { background: var(--gold); } .statbar i.free { background: var(--free); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.legend i, .chip i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .65rem; font-size: .85rem; }
.chip strong { margin-left: .35rem; }
.chip.small { font-size: .75rem; padding: 0 .5rem; margin-left: .4rem; }

/* =====================================================================================================
   Hotel operations (phase 1): reservations, availability, billing, housekeeping, reports, setup
   ===================================================================================================== */
.section-gap-sm { margin-top: 1rem; }
.lede { max-width: 70ch; color: var(--ink); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.owed { color: var(--occupied); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.table.plain { border: none; border-radius: 0; background: transparent; }
.table.plain th { background: transparent; }
.table tr.group th { background: var(--surface-2); color: var(--ink); font-size: .8rem; }
.table tr.subtotal td, .table tfoot th, .table tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.table tr.voided td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.table tr.voided td .small { text-decoration: none; }
.table tr.chosen td { background: var(--gold-soft); }
.table tr.unavailable td { color: var(--muted); }
.table.narrow { max-width: 420px; }

.pill.waiting { background: var(--waiting-soft); color: var(--waiting); }
.pill.noshow { background: var(--occupied-soft); color: var(--occupied); }
.hk-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-left: .35rem; }

.searchbar { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; padding: 1rem 1.2rem; }
.searchbar > div { min-width: 130px; flex: 1 1 130px; }
.searchbar label { margin-top: 0; }
.searchbar-go { flex: 0 0 auto !important; min-width: 0 !important; }
.searchbar .check { align-self: center; flex: 0 0 auto; }
.search { min-width: 260px; }
.inline-label { margin: 0; font-weight: 600; font-size: .9rem; }
select.auto, input.auto { width: auto; }
.num-sm { width: 5.5rem !important; } .num-md { width: 7.5rem !important; }
form.inline.grow { display: flex; width: 100%; }
form.inline.grow input[name="name"] { flex: 1; }
.inline.wrap, .row-actions.wrap { flex-wrap: wrap; }
.form.wide { max-width: none; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
label.check, .check label { display: flex; align-items: center; gap: .45rem; font-weight: 400; margin: .8rem 0 0; }
label.check input, .check input, .checks input, .segmented input { width: auto; }
.checks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.checks label { display: flex; align-items: center; gap: .35rem; font-weight: 400; margin: .6rem 0 0; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: .4rem; }
.segmented label { margin: 0; padding: .35rem .8rem; font-weight: 400; display: flex; gap: .35rem; align-items: center; border-right: 1px solid var(--line); cursor: pointer; }
.segmented label:last-child { border-right: none; }
.segmented label:has(input:checked) { background: var(--accent-soft); }
button[disabled] { opacity: .5; cursor: not-allowed; }

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--gold); font-weight: 500; }
.page-head.sub { margin-bottom: .5rem; }
.page-head.sub h2 { margin: 0; }

.nightly { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.nightly span { border: 1px solid var(--line); border-radius: 6px; padding: .25rem .6rem; font-variant-numeric: tabular-nums; background: var(--surface-2); }
.nightly span small { display: block; font-size: .7rem; color: var(--muted); }
.nightly span.posted { background: var(--free-soft); border-color: var(--free-line); }

.table.avail th, .table.avail td { text-align: center; padding: .45rem .4rem; }
.table.avail th:first-child, .table.avail tbody th, .table.avail tfoot th { text-align: left; white-space: nowrap; padding-left: .8rem; }
.table.avail tbody th small { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; }
.table.avail th.day { font-weight: 500; font-size: .8rem; min-width: 3.2rem; }
.table.avail th.day span { display: block; font-size: .68rem; text-transform: uppercase; color: var(--muted); }
.table.avail th.weekend { background: var(--neutral-soft); }
.table.avail th.today { background: var(--gold-soft); }
.table.avail td.cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.table.avail td.cell a { text-decoration: none; display: block; }
.table.avail td.last { background: var(--avail-last-bg); color: var(--avail-last-ink); }
.table.avail td.none { background: var(--avail-none-bg); color: var(--avail-none-ink); }
.table.avail td.last a { color: var(--avail-last-link, var(--accent)); }
.table.avail td.over { background: var(--occupied); color: var(--on-solid); }
.table.avail td.over a { color: inherit; }
.table.avail td.changed { background: var(--accent-soft); }
.table.avail tfoot td { font-weight: 400; color: var(--muted); font-size: .85rem; }
.table.avail tfoot tr:first-child td { color: var(--ink); font-weight: 600; }
.flag { display: block; font-size: .62rem; font-weight: 700; color: var(--occupied); }
.band { display: inline-block; padding: 0 .45rem; border-radius: 4px; font-weight: 600; font-size: .8rem; }
.band.quiet { background: var(--neutral-soft); color: var(--ink); }
.band.steady { background: var(--free-soft); color: var(--free); }
.band.busy { background: var(--allocated-soft); color: var(--allocated); }
.band.full { background: var(--occupied); color: var(--on-solid); }

.inline-menu { display: inline-block; position: relative; }
.inline-menu summary { cursor: pointer; color: var(--accent); font-size: .85rem; list-style: none; }
.inline-menu summary::-webkit-details-marker { display: none; }
.inline-menu[open] form { position: absolute; right: 0; z-index: 4; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .5rem; box-shadow: var(--bs-shadow); }
.inline-menu input { width: 14rem; }

.trend { display: inline-block; width: 0; height: 0; margin-right: .35rem; vertical-align: 1px; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.trend.up { border-bottom: 7px solid var(--free); }
.trend.down { border-top: 7px solid var(--occupied); }
.trend.flat { width: 8px; height: 2px; background: var(--muted); border: none; vertical-align: 3px; }

.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.hk-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--hk); border-radius: 8px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.hk-card header { display: flex; align-items: baseline; gap: .5rem; }
.hk-card .room { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.hk-card .hk-status { margin-left: auto; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.hk-card.offsale { background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--surface-2) 10px 20px); }
.hk-body { display: flex; flex-direction: column; gap: .25rem; }
.hk-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.hk-actions button { font-size: .75rem; padding: .25rem .55rem; }
.tray { margin-bottom: 2rem; border-left: 4px solid var(--waiting); }

.invoice { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 2rem 2.2rem; max-width: 860px; }
.invoice-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border-bottom: 2px solid var(--gold); padding-bottom: 1rem; margin-bottom: 1rem; }
.invoice-head h2 { margin: .4rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.5rem; font-weight: 600; }
.invoice-to { margin: 1rem 0 1.4rem; }

@media print {
  .topbar, .env-banner, .site-footer, .no-print, .notice { display: none !important; }
  body { background: #fff; }
  .page { margin: 0; padding: 0; max-width: none; }
  .invoice, .card, .table, .kpi { border-color: #ccc; box-shadow: none; }
}

/* ---- Demo environment: banner and sign-in shortcuts ---- */
.env-banner.demo { background: var(--gold-soft); color: var(--gold-text); border-bottom-color: color-mix(in srgb, var(--gold) 50%, var(--bs-surface)); }
.demo-card { grid-column: 2; padding: 1.1rem 1.2rem; }
.demo-card h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.demo-card code { background: var(--gold-soft); padding: 0 .3rem; border-radius: 4px; }
.demo-accounts { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.demo-fill { width: 100%; text-align: left; display: flex; flex-direction: column; gap: .05rem; padding: .45rem .7rem; }
.demo-fill span { font-size: .78rem; color: var(--muted); }
.demo-fill:hover, .demo-fill:focus-visible { border-color: var(--gold); background: var(--gold-soft); }
@media (max-width: 800px) { .demo-card { grid-column: 1; } }

/* =====================================================================================================
   HPMS: settings menu, roles, hotel details, weather, payment devices, Back of House, stock
   ===================================================================================================== */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.small-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 0 0 .6rem; }
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.row-muted td { color: var(--muted); }
.muted-card { background: var(--surface-2); }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.inline-form > div { flex: 1 1 160px; }
.inline-form label { margin-top: 0; }
.inline-form.compact { gap: .3rem; align-items: center; flex-wrap: nowrap; }
.inline-form.compact input, .inline-form.compact select { padding: .25rem .4rem; font-size: .85rem; }
.inline-form.compact button { padding: .25rem .6rem; font-size: .85rem; }
form.inline.role-form select { width: auto; max-width: 14rem; }
form.inline.reset input { width: 11rem; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters select, .filters input:not([type="checkbox"]) { width: auto; }
.filters label { margin: 0; }
details.help { margin: .6rem 0 1rem; }
details.help summary { cursor: pointer; color: var(--accent); }
details.help > div, details.help > ul, details.help > p { margin-top: .5rem; }

/* hotel switcher */
.who .switch-link { font-size: .85rem; padding: .2rem .55rem; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; }
.who .switch-link:hover { background: rgba(255,255,255,.14); }

/* hotel chooser */
.hotel-choices { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.hotel-choices form { margin: 0; }
.hotel-choice { width: 100%; text-align: left; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: 10px; }
.hotel-choice strong { font-family: var(--display); font-weight: 500; font-size: 1.1rem; }
.hotel-choice span { color: var(--muted); font-size: .85rem; }
.hotel-choice.current { border-color: var(--accent); background: var(--accent-soft); opacity: 1; cursor: default; }

/* roles */
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.role-card h3 { margin-top: 0; }
.role-card p { margin: .2rem 0 .6rem; color: var(--muted); font-size: .9rem; }
.perm-list { margin: 0; padding-left: 1.1rem; font-size: .85rem; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .1rem 1.2rem; }
.perm-grid label { display: flex; gap: .45rem; align-items: flex-start; font-weight: 400; margin: .5rem 0 0; }
.perm-grid input { width: auto; margin-top: .25rem; }

/* hotel header on invoices and reports */
.hotel-header { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.hotel-name { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 1.4rem; font-weight: 600; }
.hotel-header address { font-style: normal; margin: .2rem 0; line-height: 1.4; }
.hotel-contact, .hotel-tax { display: flex; gap: .3rem 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.hotel-doc { text-align: right; display: flex; flex-direction: column; }
.hotel-doc strong { font-family: var(--display); font-weight: 500; font-size: 1.1rem; }
.hotel-doc span { color: var(--muted); font-size: .9rem; }
.invoice-head .hotel-header { flex: 1 1 320px; }
.report-hotel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1.2rem; margin-bottom: 1rem; }
.hotel-footer { margin-top: 1.6rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .9rem; }
.hotel-footer p { margin: .2rem 0; }
.invoice-preview { padding: 1.2rem; }
.invoice-footer { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--line); white-space: pre-wrap; font-size: .9rem; }

/* weather */
.weather { display: flex; flex-direction: column; gap: .8rem; }
.weather-now { display: flex; gap: .9rem; align-items: center; }
.wx-icon { width: 3rem; height: 3rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wx-icon.small { width: 1.6rem; height: 1.6rem; }
.wx-temp { font-family: var(--display); font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-sum { font-weight: 600; }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.wx-days li { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.wx-day { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* payment devices */
.provider-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.provider-card h3 { margin-top: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Back of House */
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.report-tile { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--ink); }
.report-tile strong { font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--accent); }
.report-tile span { color: var(--muted); font-size: .9rem; }
.report-tile:hover { border-color: var(--accent); }
/* Reports > Download reports (Pages/Reports/Export): preview table and the CSV button */
.report-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.report-downloads h2 small { font-size: .85rem; font-weight: 400; margin-left: .4rem; }
.report-count { margin-bottom: .4rem; }
.report-preview tfoot td { background: var(--surface-2); }
.notes-body { min-height: 8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-card .prewrap { max-height: 14rem; overflow-y: auto; margin-bottom: .4rem; }
textarea.notes { min-height: 16rem; font-family: inherit; line-height: 1.5; }

/* housekeeping assignment */
.hk-assign { display: flex; gap: .3rem; }
.hk-assign select { padding: .2rem .35rem; font-size: .8rem; }
.hk-assign button { font-size: .75rem; padding: .2rem .55rem; }

@media print {
  .report-hotel { border: none; padding: 0; }
}

/* ---- Dev / Test and Demo banner (never shown in Production) - same as the Blueshade Hub's dev/test banner ---- */
:root { --dev-banner-h: 30px; }
.dev-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--dev-banner-h); z-index: 60; overflow: hidden; display: flex; align-items: center;
  background: repeating-linear-gradient(-45deg, #B7791F 0 14px, #A86C17 14px 28px); color: #fff; font-size: .8rem; letter-spacing: .03em;
  border-bottom: 2px solid #000; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dev-banner-track { display: flex; width: max-content; animation: dev-banner-scroll 40s linear infinite; }
.dev-banner:hover .dev-banner-track { animation-play-state: paused; }
.dev-banner-run { display: flex; flex-shrink: 0; }
.dev-banner-item { white-space: nowrap; padding: 0 2.5rem; }
.dev-banner-item strong { background: #000; color: #f4ead6; padding: .1rem .5rem; border-radius: 4px; margin-right: .35rem; }
@keyframes dev-banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.has-dev-banner { padding-top: var(--dev-banner-h); }
@media (prefers-reduced-motion: reduce) { .dev-banner-track { animation: none !important; } }
@media print {
  .dev-banner { display: none !important; }
  body.has-dev-banner { padding-top: 0; }
}

/* ---- Reports and invoices: fit the page in portrait and landscape, on screen and in print ---- */
.detail-grid > *, .card, .table-wrap { min-width: 0; }
/* Side-by-side cards only when each gets at least 380px (landscape / desktop); otherwise they stack (portrait). */
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.hotel-doc { margin-left: auto; }
.table td.num, .table th.num { white-space: nowrap; }
.table td { overflow-wrap: break-word; }
/* Narrower screens (tablets in portrait, small laptops): tighter tables so columns stay inside their cards. */
@media (max-width: 1100px) {
  .card .table, .table-wrap .table { font-size: .86rem; }
  .card .table th, .card .table td, .table-wrap .table th, .table-wrap .table td { padding: .4rem .5rem; }
  .card .table th, .table-wrap .table th { letter-spacing: .02em; font-size: .7rem; }
}
@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }
  .page { padding: 0 .8rem 2rem; }
}
/* Paper: A4 or Letter, whichever orientation the person picks in the print dialog. */
@page { margin: 12mm; }
@media print {
  html { font-size: 10pt; }
  body { font-size: 9.5pt; line-height: 1.35; }
  .page { padding: 0; margin: 0; max-width: none; }
  h1 { font-size: 15pt; margin: 0 0 .3rem; }
  h2 { font-size: 11.5pt; margin: .2rem 0 .4rem; }
  .page-head { margin-bottom: .4rem; }
  .card { padding: .5rem .7rem; border-radius: 4px; }
  .report-hotel { margin-bottom: .5rem; }
  .hotel-header { flex-wrap: nowrap; gap: 1rem; }
  .hotel-name { font-size: 13pt; }
  .hotel-contact, .hotel-tax { font-size: 8pt; }
  .table-wrap, .grid, .planner { overflow: visible !important; }
  .table { font-size: 8.5pt; border-radius: 0; overflow: visible; width: 100%; box-sizing: border-box; }
  .table th, .table td { padding: .22rem .35rem; }
  .table th { font-size: 7pt; letter-spacing: .02em; background: #f3f3f3 !important; }
  .table thead { display: table-header-group; }
  .table tr { break-inside: avoid; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: .5rem; }
  .kpi { padding: .35rem .55rem; border-radius: 4px; }
  .kpi .value { font-size: 14pt; }
  .kpi .sub, .kpi .label { font-size: 7pt; }
  /* Two columns only when the paper is wide enough (landscape); one column on portrait. */
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(110mm, 1fr)); gap: .5rem; margin-bottom: .5rem; }
  .lede { max-width: none; font-size: 9pt; }
  .section-gap { margin-top: .6rem; }
  a { color: inherit; text-decoration: none; }
  .invoice { padding: 0; border: none; max-width: none; }
  .print-break { break-before: page; }
}

/* ---- Planner: compact layout (10 Oct 2026) - narrower room column, shorter rows, smaller day columns ---- */
.planner { margin-bottom: 1rem; }
.planner-inner { min-width: calc(120px + var(--days) * 40px); }
.planner-head, .planner-row { grid-template-columns: 120px 1fr; }
.planner-label { padding: .15rem .5rem; font-size: .82rem; line-height: 1.15; }
.planner-label small { font-size: .68rem; }
.planner-head .planner-label { font-size: .68rem; }
.planner-track { min-height: 1.75rem; }
.planner-head .planner-track { min-height: 1.9rem; }
.planner-day { font-size: .72rem; padding-top: .15rem; }
.planner-day span { font-size: .6rem; }
.pbar { top: 3px; bottom: 3px; padding: 0 .35rem; font-size: .72rem; line-height: calc(1.75rem - 8px); }
.planner-key { margin: .6rem 0 .4rem; }

/* ---- Settings > Integrations: weather service choice ---- */
.tabs-group { align-self: center; margin-left: .8rem; padding-left: .8rem; border-left: 1px solid var(--line); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.provider-choice { border: none; padding: 0; margin: .4rem 0 .8rem; display: grid; gap: .45rem; }
.provider-option { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: normal; }
.provider-option input { width: auto; margin-top: .25rem; }
.provider-option > span { display: flex; flex-direction: column; gap: .15rem; }
.provider-option .pill { align-self: flex-start; font-size: .68rem; }
.provider-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pill.free { background: var(--free-soft); color: var(--free); }
.wx-source { font-size: .72rem; color: var(--muted); }

/* ---- settings: every entry is a page (side bar, tabs, landing pages) */
.crumbs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: -.4rem 0 .9rem; }
.crumbs a { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }
.settings-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-top: 1rem; }
a.settings-card { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
a.settings-card:hover, a.settings-card:focus-visible { border-color: var(--accent); box-shadow: var(--bs-shadow); }
a.settings-card h2 { margin: 0; }
a.settings-card p { margin: 0; }
.settings-items { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.settings-open { margin-top: auto; padding-top: .4rem; color: var(--accent); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { a.settings-card { transition: none; } }

/* =====================================================================================================
   Phones and tablets (11 Oct 2026): reception tablets and phones on the move. Desktop is unchanged.
   ===================================================================================================== */
body { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
.planner-label { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.planner-head .planner-label { background: var(--surface-2); }
.inline-menu input { width: min(14rem, 70vw); }
.hk-assign select { flex: 1 1 auto; min-width: 0; }
.hk-assign button { flex: none; white-space: nowrap; }
.pill { white-space: nowrap; }
.inline-menu[open] form { max-width: calc(100vw - 2rem); }

/* Tablets and small laptops: the small buttons stay comfortably tappable. */
@media (max-width: 1100px) {
  button.link { padding: .3rem .25rem; }
  .hk-actions button, .hk-assign button, .inline-form.compact button { min-height: 2rem; min-width: 2.2rem; }
  .hk-assign select, .inline-form.compact input, .inline-form.compact select { min-height: 2rem; }
}

@media (max-width: 800px) {
  .topbar { gap: .5rem; padding: .45rem 1rem; }
  /* Who is signed in: its own line under the search box, wrapping instead of pushing past the edge (see the side bar block). */
  .who .switch-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; }
  .who form.inline button.link { min-height: 44px; padding: 0 .5rem; }

  /* Comfortable tap targets. */
  button, .btn { min-height: 44px; }
  .hk-actions button, .hk-assign button, .inline-form.compact button, .table button { min-height: 40px; min-width: 40px; }
  .tabs a { padding: .65rem .8rem; }

  /* Search boxes may shrink. */
  .search { min-width: 0; flex: 1 1 100%; }
  .datebar input[type="search"] { width: 100%; }
  .inline-form.compact { flex-wrap: wrap; }
  .page-head h1 small { display: block; margin-left: 0; }
  .login { margin: 1.5rem auto; gap: 1.5rem; }
  .welcome { padding: 1rem 1.1rem; gap: 1rem; }
  .invoice { padding: 1rem; }
  .facts { grid-template-columns: 1fr; gap: 0 1rem; }
  .facts dd { margin-bottom: .35rem; }
  .site-footer { flex-direction: column; gap: .2rem; padding: 1rem; }
}

/* Phones: 16px form fields (smaller ones make iPhones zoom in when tapped). */
@media (max-width: 767px) {
  input, select, textarea,
  .inline-form.compact input, .inline-form.compact select, .hk-assign select, .datebar input, .datebar select { font-size: 16px; }
  .page { margin-top: 1rem; }
  .form .two { grid-template-columns: 1fr; gap: 0; }
  h1 { font-size: 1.35rem; }
  .welcome h1 { font-size: 1.5rem; }
}

/* Light / Dark / System switch: always in the top bar, at the right; signed out, on its own at the right. */
.who .theme-slot { display: inline-flex; }

@media print {
  .nav-toggle, .global-search, .side-nav, .side-backdrop, .bs-theme-toggle { display: none !important; }
}

/* ---- Paper is always light: bills, invoices and reports print with the light palette even when the screen is dark. ---- */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --bs-bg: #ffffff; --bs-surface: #ffffff; --bs-surface-2: #f7f9fc; --bs-field: #ffffff; --bs-code-bg: #edf1f6;
    --bs-text: #142033; --bs-muted: #5d6b80; --bs-border: #d9dfe8; --bs-border-strong: #b6c1d1; --bs-field-border: #7d8a9e;
    --bs-link: #24588f; --bs-primary: #0d2240; --bs-primary-hover: #163156; --bs-primary-text: #ffffff;
    --bs-accent: #c8a24c; --bs-accent-soft: #f4ead2; --bs-accent-text: #7a5d17;
    --bs-ok: #276b48; --bs-ok-soft: #e2f2e9; --bs-warn: #8a5a0f; --bs-warn-soft: #fbefd6;
    --bs-bad: #b23a33; --bs-bad-soft: #f8e1df; --bs-info: #24588f; --bs-info-soft: #e1ecf8;
    --waiting: #6a4fb0;
    --avail-last-bg: #fbefd6; --avail-last-ink: #142033; --avail-last-link: #24588f; --avail-none-bg: #f8e1df; --avail-none-ink: #b23a33;
  }
  html, body { background: #fff !important; color: #142033; }
}

/* ---- Dashboard: housekeeping staff on a phone get a big link to the phone room list (Housekeeping/Mobile). ---- */
.phone-rooms-link { display: none; }
@media (max-width: 760px) {
  .phone-rooms-link { display: flex; flex-direction: column; gap: .15rem; min-height: 64px; justify-content: center; margin-bottom: 1rem;
    padding: .8rem 1.1rem; border-radius: 10px; background: var(--bs-primary); color: var(--bs-primary-text); text-decoration: none; }
  .phone-rooms-link strong { font-size: 1.2rem; }
  .phone-rooms-link span { font-size: .9rem; opacity: .9; }
}

/* Settings > Online booking (docs/online-booking.md): room photos, the widget snippet, the dashboard's online bookings. */
.photo-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.photo-tile { margin: 0; width: 160px; }
.photo-tile img { width: 160px; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
pre.code { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bs-code-bg); padding: .6rem; border-radius: 6px; font-family: var(--bs-font-mono); }
.pill.online { background: var(--bs-info-soft); color: var(--bs-info); }

/* Wide screens (23 Oct 2026): pages and the footer use the whole window on wide monitors (they were capped at 1200px,
   leaving empty columns at 1920px and wider). Narrow layouts keep their own caps: .login 900px, .invoice 860px,
   .book-wrap 1040px. Same change as applied in place on SERVER on 23 Oct. */
.page, .site-footer { max-width: none; width: 100%; box-sizing: border-box; padding-inline: clamp(1rem, 2.5vw, 3rem); }

/* =====================================================================================================
   Side bar and global search (23 Oct 2026): every menu in a pop-out side bar (a drawer over the page on every screen;
   docked open with "Pin" at 1400px and wider) and one search box in the middle of the top bar. Theme tokens only, so
   light and dark both work. Nothing here caps the page width (see "Wide screens" above): a docked side bar only pads
   the body, and the page keeps width: 100%.
   ===================================================================================================== */
:root { --side-w: 18rem; }

/* Top bar: Menu, brand, the search box (grows, centred), then the theme switch and who is signed in. */
.topbar { gap: .6rem 1rem; }
.nav-toggle { display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 40px; padding: .35rem .8rem;
  background: transparent; color: var(--bs-header-text); border: 1px solid color-mix(in srgb, var(--bs-header-text) 45%, transparent);
  border-radius: 6px; font-family: var(--display); }
.nav-toggle:hover { background: color-mix(in srgb, var(--bs-header-text) 14%, transparent); border-color: color-mix(in srgb, var(--bs-header-text) 70%, transparent); }
.nav-toggle svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.nav-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--bs-header-text) 16%, transparent); }
.who { flex-wrap: wrap; justify-content: flex-end; }
.who-account { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }

.global-search { position: relative; flex: 1 1 14rem; min-width: 0; max-width: 40rem; margin-inline: auto; }
.global-search-form { position: relative; display: flex; align-items: center; margin: 0; }
.global-search-icon { position: absolute; left: .75rem; width: 1.1rem; height: 1.1rem; fill: var(--muted); pointer-events: none; }
.global-search input[type="search"] { width: 100%; min-height: 40px; padding: .45rem 2.6rem .45rem 2.35rem; border: 1px solid color-mix(in srgb, var(--bs-header-text) 30%, transparent); border-radius: 999px;
  background: var(--bs-field); color: var(--ink); }
.global-search input[type="search"]:focus-visible { outline: 2px solid var(--bs-gold); outline-offset: 1px; }
.global-search-key { position: absolute; right: .8rem; padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2);
  color: var(--muted); font: 500 .75rem/1.2 var(--bs-font-mono); pointer-events: none; }
.global-search input:focus ~ .global-search-key, .global-search input:not(:placeholder-shown) ~ .global-search-key { display: none; }

/* The suggestions under the search box (built by search.js with textContent only). */
.global-search-list { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0; max-height: min(70vh, 34rem); overflow-y: auto;
  overscroll-behavior: contain; padding: .35rem 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--bs-shadow); text-align: left; }
.global-search-list[hidden] { display: none; }
.gs-group + .gs-group { border-top: 1px solid var(--line-soft); margin-top: .2rem; padding-top: .2rem; }
.gs-heading { padding: .45rem .9rem .15rem; font-family: var(--display); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.global-search-list a.gs-option { display: flex; flex-direction: column; gap: .05rem; padding: .45rem .9rem; color: var(--ink); text-decoration: none; }
.global-search-list a.gs-option:hover, .global-search-list a.gs-option.active { background: var(--accent-soft); }
.global-search-list a.gs-option.active { box-shadow: inset 3px 0 0 var(--bs-gold); }
.gs-title { font-weight: 500; overflow-wrap: anywhere; }
.gs-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.gs-empty { padding: .6rem .9rem; color: var(--muted); }
.global-search-list a.gs-option.gs-all { margin-top: .25rem; padding: .55rem .9rem; border-top: 1px solid var(--line); color: var(--accent); font-weight: 500; }

/* The side bar: a drawer from the left with a backdrop; closed, it is off screen and hidden from keyboard and readers. */
.side-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--bs-overlay); }
.side-backdrop[hidden] { display: none; }
.side-nav { position: fixed; z-index: 71; top: 0; bottom: 0; left: 0; width: var(--side-w); max-width: calc(100vw - 3rem);
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); box-shadow: var(--bs-shadow);
  transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
html.side-open .side-nav { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
html.side-open { overflow: hidden; }
body.has-dev-banner .side-nav { top: var(--dev-banner-h); }
.side-nav-head { display: flex; align-items: center; gap: .3rem; min-height: 3.4rem; padding: .45rem .5rem .45rem 1rem;
  background: var(--bs-header-bg); color: var(--bs-header-text); border-bottom: 3px solid var(--bs-gold); }
.side-nav-title { margin-right: auto; font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.side-nav-head button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 40px; min-height: 40px; padding: .3rem .55rem;
  background: transparent; color: inherit; border: 1px solid transparent; border-radius: 6px; font-family: var(--display); }
.side-nav-head button:hover { background: color-mix(in srgb, var(--bs-header-text) 14%, transparent); border-color: transparent; }
.side-nav-head svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.side-nav-head .side-pin { display: none; }
.side-nav-head .side-pin[aria-pressed="true"] { background: color-mix(in srgb, var(--bs-gold) 22%, transparent); }
.side-nav-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .3rem 0 1.5rem; }
.side-group + .side-group { border-top: 1px solid var(--line-soft); }
.side-group-heading { margin: 0; font-size: 1rem; font-weight: 500; }
.side-group-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
  background: transparent; color: var(--ink); border: none; border-radius: 0; font-size: .98rem; font-weight: 500; text-align: left; }
.side-group-toggle:hover { background: var(--surface-2); }
.side-chevron { flex: none; width: 1.2rem; height: 1.2rem; fill: var(--muted); transition: transform .15s ease; }
.side-group-toggle[aria-expanded="true"] .side-chevron { transform: rotate(180deg); }
.side-group-items { list-style: none; margin: 0; padding: 0 0 .5rem; }
.side-group-items[hidden] { display: none; }
.side-section { padding: .55rem 1rem .15rem 1.4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.side-nav a { display: flex; flex-direction: column; justify-content: center; gap: .05rem; min-height: 40px; padding: .4rem 1rem .4rem 1.25rem;
  color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.side-nav a:hover { background: var(--accent-soft); }
.side-nav a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--bs-gold); font-weight: 600; }
.side-nav a small { color: var(--muted); font-size: .76rem; font-weight: 400; }
.side-nav a.side-all { font-weight: 600; }
.side-nav a:focus-visible, .side-group-toggle:focus-visible { outline-offset: -2px; }
@media (max-width: 800px), (pointer: coarse) {
  .side-nav a { min-height: 44px; }
  .side-nav-head button { min-width: 44px; min-height: 44px; }
}
/* Docked: "Pin" on screens 1400px and wider keeps the side bar open beside the page, which moves right. */
@media (min-width: 1400px) {
  .side-nav-head .side-pin { display: inline-flex; }
  html.side-pinned .side-nav { z-index: 50; transform: none; visibility: visible; transition: none; box-shadow: none; }
  html.side-pinned .side-backdrop { display: none; }
  html.side-pinned body { padding-left: var(--side-w); }
}

/* Phones and small tablets: Menu, brand and theme switch on the first line, the search box on the next, then who is signed in. */
@media (max-width: 800px) {
  .topbar { gap: .5rem; }
  .nav-toggle { min-height: 44px; min-width: 44px; justify-content: center; }
  .who { display: contents; }
  .who .theme-slot { order: 2; margin-left: auto; }
  .global-search { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
  .global-search input[type="search"] { min-height: 44px; }
  .global-search-key { display: none; }
  .who-account { order: 4; flex: 1 1 100%; gap: 0 .8rem; font-size: .85rem; padding-top: .2rem;
    border-top: 1px solid color-mix(in srgb, var(--bs-header-text) 25%, transparent); }
  .side-nav { width: min(22rem, 88vw); max-width: none; }
}
@media (max-width: 480px) {
  .nav-toggle { padding: .35rem .6rem; }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .side-nav, html.side-open .side-nav, .side-chevron { transition: none; }
}

/* The Search page: every result, grouped in cards. */
.search-page-form input[type="search"] { width: min(28rem, 70vw); }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.search-group h2 small { margin-left: .3rem; font-size: .8rem; }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li + li { border-top: 1px solid var(--line-soft); }
.search-list a { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .3rem; text-decoration: none; }
.search-list a:hover { background: var(--accent-soft); }
.search-title { font-weight: 500; overflow-wrap: anywhere; }
.search-sub { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }