/* Self-hosted brand webfont — Manrope (geometric grotesque). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-800.woff2') format('woff2'); }

/* AWAYO-inspired light theme — warm paper, near-black, minimal Scandinavian. */
:root {
  --bg: #f4f1ea; --panel: #ffffff; --line: #e6e0d4; --txt: #1a1815;
  --muted: #6d665a; --accent: #3f6cb4; --green: #2f8052; --amber: #a9791a; --amber-ink: #8a6310; --red: #c0392b; --violet: #7a5bd0;
  --ink: #1a1815; --soft: #faf8f3; --faint: #6f6859;
  --sans: 'Manrope', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(26,24,21,.04), 0 6px 20px rgba(26,24,21,.05);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }

/* visible keyboard focus — single token-driven ring (was missing entirely) */
:where(a, button, select, input, summary, [tabindex]):focus-visible,
.cseg:focus-visible, .logchip:focus-visible, .cmdk-item:focus-visible,
.cabin-tile:focus-visible, .pm-cabin:focus-visible, .netpill:focus-visible,
.tabs button:focus-visible, .cal-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.cmdk-box:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 24px 70px rgba(26,24,21,.28); }

/* inline stroked-SVG icon set — inherits each control's currentColor */
.ico { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; }

header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 800; letter-spacing: 0.3px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.cobrand { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.awayo-mark { height: 16px; width: auto; opacity: 0.9; }
.conn { display: flex; gap: 14px; align-items: center; color: var(--muted); flex-wrap: wrap; font-size: 13px; }
.conn strong { color: var(--txt); }
.mode { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.on { background: var(--green); }

/* context bar: cabin switcher (left) + utility cluster (right) */
.contextbar { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--soft); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cabin-switch { display: inline-flex; padding: 3px; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.cseg { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; color: var(--muted); border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; border-left: 3px solid transparent; }
.cseg:hover { background: var(--soft); }
.cseg.sel { background: var(--ink); color: #fff; border-left-color: transparent; }
.cseg.OCCUPIED { border-left-color: var(--green); }
.cseg.PREPARING { border-left-color: var(--amber); }
.cseg.CLEANING { border-left-color: var(--accent); }
.cseg.MAINTENANCE { border-left-color: var(--violet); }
.cseg.EMERGENCY { border-left-color: var(--red); }
.cseg.sel.OCCUPIED, .cseg.sel.PREPARING, .cseg.sel.CLEANING, .cseg.sel.MAINTENANCE, .cseg.sel.EMERGENCY { border-left-color: transparent; }
.util-cluster { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.scenario-pick { display: inline-flex; align-items: center; gap: 8px; }
.sb-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.util-cluster select { background: #fff; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; min-width: 150px; box-shadow: var(--shadow); }
.sb-desc { font-size: 12px; max-width: 360px; line-height: 1.3; color: var(--muted); }
.util-sep { width: 1px; height: 22px; background: var(--line); }
.util-more { position: relative; }
.util-more > summary { list-style: none; cursor: pointer; }
.util-more > summary::-webkit-details-marker { display: none; }
.util-menu { position: absolute; right: 0; top: 120%; z-index: 50; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: var(--shadow); min-width: 150px; }
.util-menu .netpill { text-align: left; width: 100%; }

.tabs { display: flex; align-items: flex-end; gap: 4px; padding: 12px 24px 0; }
.tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); border-bottom: none; padding: 9px 18px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13px; }
.tabs button.active { color: var(--txt); background: var(--panel); font-weight: 600; }
.tabs-spacer { flex: 1; }
.tabs button.dev { color: #6d665a; border-color: transparent; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.tabs button.dev .ico { opacity: .8; }
.tabs button.dev.active { color: var(--txt); background: var(--panel); border-color: var(--line); }

.tab { display: none; padding: 22px 24px; }
.tab.active { display: block; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.grant { padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: var(--soft); }
.grant strong { font-size: 22px; color: var(--green); letter-spacing: 2px; font-family: var(--mono); }
.grant-meta { margin-top: 4px; font-size: 11px; color: var(--muted); }
.grant-meta .ts { font-family: var(--mono); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.state-badge { font-size: 24px; font-weight: 800; text-align: center; padding: 22px; border-radius: 12px; background: #efece4; letter-spacing: 0.5px; }
.state-badge.FREE { background: #efece4; color: var(--muted); }
.state-badge.PREPARING { background: #fbf3df; color: var(--amber-ink); }
.state-badge.OCCUPIED { background: #e6f3eb; color: var(--green); }
.state-badge.CLEANING { background: #e8effa; color: var(--accent); }
.state-badge.MAINTENANCE { background: #f1ecfb; color: var(--violet); }
.state-badge.EMERGENCY { background: #fbe9e6; color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .62; } }

/* emergency notification beat — calm, warm, red/amber accents */
.alertcard { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, #fdf1ee 0%, #fbe9e6 100%); border: 1px solid #f0cfca; border-left: 4px solid var(--red); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.alertcard[hidden] { display: none; }
.ac-bell { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--red); border: 1px solid #f0cfca; animation: acring 1.6s ease-in-out infinite; }
.ac-bell .ico { width: 19px; height: 19px; }
@keyframes acring { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 96% { transform: rotate(7deg); } 98% { transform: rotate(-4deg); } }
.ac-body { min-width: 0; }
.ac-head { font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: 0.2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-chan { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--red); background: #fff; border: 1px solid #f0cfca; border-radius: 999px; padding: 1px 8px; }
.ac-line { margin-top: 5px; font-size: 12.5px; color: var(--ink); }
.ac-times { margin-top: 9px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.ac-t { display: inline-flex; align-items: center; gap: 6px; }
.ac-t b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.ac-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ac-dot.edge { background: var(--green); }
.ac-dot.staff { background: var(--amber); }
.ac-safe { font-size: 10.5px; font-style: italic; color: var(--muted); border-left: 1px solid #f0cfca; padding-left: 14px; }

.chips { margin-top: 12px; display: flex; gap: 8px; justify-content: center; }
.chip { padding: 3px 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.reservation, #reservation { margin-top: 10px; text-align: center; }

.telemetry table { width: 100%; border-collapse: collapse; }
.telemetry td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.telemetry td:last-child { text-align: right; font-weight: 600; font-family: var(--mono); }
.card.sensors > summary { cursor: pointer; list-style: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.card.sensors > summary::-webkit-details-marker { display: none; }
.card.sensors > summary::before { content: '▸  '; }
.card.sensors[open] > summary::before { content: '▾  '; }
.card.sensors > table { margin-top: 14px; }

.log #log { max-height: 320px; overflow: auto; font-size: 12.5px; font-family: var(--mono); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.row { display: grid; grid-template-columns: 78px 70px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid #ece6da; }
.row .src { color: var(--muted); }
.row.bex .src { color: var(--accent); }
.row.loxone .src { color: var(--green); }
.row.system .src { color: #9b9486; }
.row.operator .src { color: var(--violet); }
.row .ts { color: var(--faint); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; }

/* AUDIT LOG — source filter chips */
.log-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.logchip { font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.logchip:hover { border-color: var(--accent); color: var(--txt); }
.logchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.logchip[data-srcfilter="loxone"].on { background: var(--green); border-color: var(--green); }
.logchip[data-srcfilter="system"].on { background: #9b9486; border-color: #9b9486; }
.logchip[data-srcfilter="operator"].on { background: var(--violet); border-color: var(--violet); }
/* When a filter set is active, the matching .hide-<src> class drops that source's rows */
#log.hide-bex .row.bex,
#log.hide-loxone .row.loxone,
#log.hide-system .row.system,
#log.hide-operator .row.operator { display: none; }

/* kind tag + click-to-cabin affordance */
.row .msg { display: inline; }
.row .kind { font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
.row.clickable { cursor: pointer; border-radius: 5px; transition: background .12s; }
.row.clickable:hover { background: var(--line); }
.row.clickable:hover .kind { border-color: var(--accent); color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
button { font-family: var(--sans); cursor: pointer; background: #fff; color: var(--txt); border: 1px solid var(--line); padding: 9px 16px; border-radius: 8px; font-size: 13px; transition: border-color .15s, background .15s; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
button.primary:hover { background: #000; border-color: #000; }
button.danger { border-color: var(--red); color: var(--red); background: #fff; }
button.danger:hover { background: #fbe9e6; }
button.reel-btn { border-color: var(--accent); color: var(--accent); background: #fff; }
button.reel-btn:hover { background: #eaf0f9; border-color: var(--accent); }
button.reel-btn[disabled] { opacity: .5; cursor: default; }
button.reel-btn[disabled]:hover { background: #fff; }

.netpill { font-family: var(--sans); cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 12px; background: #fff; color: var(--txt); }
.netpill:hover { border-color: var(--accent); }
.netpill.online { background: #e6f3eb; color: var(--green); border-color: #cfe6d8; }
.netpill.offline { background: #fbe9e6; color: var(--red); border-color: #f0cfca; }

/* topology event-flow strip */
.topo { display: flex; align-items: center; gap: 14px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; }
.tnode { font-size: 12px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); white-space: nowrap; z-index: 2; }
.tnode.bex { color: var(--accent); border-color: #cdddf0; }
.tnode.mw { color: var(--green); border-color: #cfe6d8; animation: mw-breath 2.4s ease-in-out infinite; }
.tnode.lox { color: var(--txt); }
.tlink { flex: 0 0 90px; height: 2px; z-index: 1; background-image: linear-gradient(90deg, transparent 0%, rgba(63,108,180,.28) 50%, transparent 100%), linear-gradient(90deg, var(--line), #d8d2c6, var(--line)); background-size: 200% 100%, 100% 100%; background-repeat: no-repeat; animation: topo-flow 3s linear infinite; }
.topo-hint { font-size: 11px; margin-left: auto; }
.packet { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; margin-top: -4px; z-index: 3; pointer-events: none; }
.packet.fwd { animation: pk-fwd 1.1s ease-in-out forwards; }
.packet.rev { animation: pk-rev 1.1s ease-in-out forwards; }
@keyframes pk-fwd { from { left: 150px; opacity: 0; } 10% { opacity: 1; } to { left: 560px; opacity: 0; } }
@keyframes pk-rev { from { left: 560px; opacity: 0; } 10% { opacity: 1; } to { left: 150px; opacity: 0; } }
/* idle "alive" baseline for the topology strip (event bursts fire on top) */
@keyframes topo-flow { from { background-position: -100% 0, 0 0; } to { background-position: 100% 0, 0 0; } }
@keyframes mw-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,108,180,0); } 50% { box-shadow: 0 0 7px 1px rgba(63,108,180,.28); } }
@media (prefers-reduced-motion: reduce) {
  .tlink, .tnode.mw { animation: none; }
}

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .kn { font-size: 32px; font-weight: 800; color: var(--txt); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.kpi .kl { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: 0.3px; }
.kpi .ksub { font-size: 11px; color: var(--faint); margin-top: 4px; font-family: var(--mono); }
.kpi.primary .kn { font-size: 34px; }
.kpi.secondary { background: var(--soft); }
.kpi.secondary .kn { font-size: 30px; color: var(--muted); }
.kpi.secondary .kl { font-size: 11px; }
.kpi.alert.on { border-color: var(--red); }
.kpi.alert.on .kn { color: var(--red); }

.spark { width: 100%; height: 44px; margin-top: 10px; display: block; }

/* now-playing overlay */
.nowplaying { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 900; width: 540px; max-width: 92vw; background: #fff; border: 1px solid var(--accent); border-radius: 12px; padding: 14px 18px; box-shadow: 0 12px 40px rgba(26,24,21,.18); }
.np-top { display: flex; align-items: center; gap: 10px; }
.np-tag { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
#npName { color: var(--txt); font-weight: 700; }
#npStop { margin-left: auto; background: #fbe9e6; border: 1px solid var(--red); color: var(--red); border-radius: 6px; padding: 2px 12px; cursor: pointer; }
.np-step { color: var(--muted); font-size: 13px; margin: 9px 0; min-height: 18px; }
.np-bar { height: 4px; background: var(--line); border-radius: 3px; overflow: hidden; }
#npFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .3s; }

/* state-change ripple on cabin tiles */
.cabin-tile.ripple::after { content: ''; position: absolute; inset: 0; border-radius: 8px; border: 2px solid var(--green); animation: ripple .7s ease-out; pointer-events: none; }
.cabin-tile { position: relative; }
@keyframes ripple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.04); } }

/* tab badge — neutral by default; red only on a real alert. [hidden] must win over inline-block. */
.tabbadge { display: inline-block; min-width: 18px; text-align: center; background: var(--muted); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; margin-left: 6px; }
.tabbadge[hidden] { display: none; }
.tabbadge.alert { background: var(--red); }

/* guest journey timeline */
.timeline { display: flex; align-items: flex-start; gap: 0; margin-top: 6px; }
.tstep { flex: 1; text-align: center; position: relative; }
.tstep .tcircle { width: 18px; height: 18px; border-radius: 50%; background: #d8d2c6; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); margin: 0 auto 8px; position: relative; z-index: 2; transition: background .3s; }
.tstep .tlabel { font-size: 12px; line-height: 1.2; color: var(--muted); }
.tstep .tsub { font-size: 10px; color: var(--faint); margin-top: 2px; min-height: 12px; }
.tstep:not(:last-child)::after { content: ''; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px; background: #e0dacd; z-index: 1; }
.tstep.done .tcircle { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.tstep.done:not(:last-child)::after { background: var(--green); }
.tstep.done .tlabel { color: var(--txt); }
.tstep.cur .tcircle { background: var(--accent); box-shadow: 0 0 0 4px rgba(63,108,180,.2); animation: tpulse 1.4s infinite; }
.tstep.cur .tlabel { color: var(--accent); font-weight: 700; }
.tstep.alert .tcircle { background: var(--red); box-shadow: 0 0 0 4px rgba(192,57,43,.2); animation: tpulse 1s infinite; }
.tstep.alert .tlabel { color: var(--red); }
@keyframes tpulse { 50% { opacity: .55; } }
.timeline.idle { opacity: .5; }

/* task board */
.taskboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.task { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
.task.red { border-left-color: var(--red); }
.task.violet { border-left-color: var(--violet); }
.task .tk-type { font-weight: 700; color: var(--txt); }
.task .tk-meta { color: var(--muted); font-size: 12px; margin: 6px 0 12px; }
.task .tk-done { width: 100%; }
.taskboard .empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14px; }
.outbox { font-size: 12px; color: var(--amber-ink); }
.guestlink { color: var(--accent); text-decoration: none; font-size: 12px; }
.guestlink:hover { text-decoration: underline; }

.cabin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cabin-tile { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 13px; cursor: pointer; box-shadow: var(--shadow); }
.cabin-tile:hover { border-color: var(--accent); }
.cabin-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cabin-tile.OCCUPIED { border-left-color: var(--green); }
.cabin-tile.PREPARING { border-left-color: var(--amber); }
.cabin-tile.CLEANING { border-left-color: var(--accent); }
.cabin-tile.MAINTENANCE { border-left-color: var(--violet); }
.cabin-tile.EMERGENCY { border-left-color: var(--red); animation: pulse 1.2s infinite; }
.ct-name { font-weight: 600; }
.ct-state { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 4px; }

/* park map — inline SVG resort masterplan */
.parkmap { position: relative; aspect-ratio: 1000 / 560; height: auto; width: 100%; max-width: 1040px; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: #e9ece0; }
.pm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp { fill: #ffffff; stroke: #b0a99a; stroke-width: 2; transition: fill .3s, stroke .3s; }
.fp.OCCUPIED { fill: rgba(47,128,82,.20); stroke: var(--green); }
.fp.PREPARING { fill: rgba(169,121,26,.18); stroke: var(--amber); }
.fp.CLEANING { fill: rgba(63,108,180,.16); stroke: var(--accent); }
.fp.MAINTENANCE { fill: rgba(122,91,208,.16); stroke: var(--violet); }
.fp.EMERGENCY { fill: rgba(192,57,43,.20); stroke: var(--red); animation: pulse 1.1s infinite; }
/* park-map live motion */
.pm-car { pointer-events: none; }
.pm-barrier { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .5s ease, fill .3s ease; }
.pm-barrier.up { transform: rotate(-62deg); }
.pm-barrier.deny { fill: var(--red); animation: pmDeny .5s ease 2; }
@keyframes pmDeny { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.pm-plate { pointer-events: none; transition: opacity .3s ease; }
/* ANPR outcome: green box = booking matched, red box = denied */
.pm-plate #pmPlateBox { stroke: var(--green); transition: stroke .2s ease; }
.pm-plate.deny #pmPlateBox { stroke: var(--red); }
.pm-plate.deny #pmPlateText { fill: var(--red); }
.fp.arrive { animation: fpArrive 1.6s ease; }
@keyframes fpArrive { 0%, 100% { stroke-width: 2; } 40% { stroke-width: 6; } }
.pm-guest { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #1a1815; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(26,24,21,.18); transform: translate(-50%, -50%); transition: left 2.2s ease-in-out, top 2.2s ease-in-out; z-index: 5; pointer-events: none; }
.pm-clean { position: absolute; transform: translate(-50%, -50%); font-size: 17px; z-index: 5; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(26,24,21,.3)); animation: cleanBob 1.1s ease-in-out infinite; }
@keyframes cleanBob { 0%, 100% { transform: translate(-50%, -50%) rotate(-10deg); } 50% { transform: translate(-50%, -62%) rotate(10deg); } }
.pm-park { position: absolute; transform: translate(-50%, -50%); width: 17px; height: 9px; border-radius: 3px; background: #1a1815; z-index: 4; pointer-events: none; box-shadow: 0 1px 2px rgba(26,24,21,.35); animation: parkIn .35s ease; }
.pm-park::before { content: ''; position: absolute; left: 4px; top: -3px; width: 9px; height: 4px; border-radius: 2px 2px 0 0; background: #3f6cb4; }
@keyframes parkIn { from { opacity: 0; transform: translate(-50%, -90%); } }
.pm-cabin { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 9px; padding: 8px 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(26,24,21,.16); min-width: 96px; transition: border-color .15s, transform .15s; z-index: 4; }
.pm-cabin:hover { border-color: var(--accent); transform: translate(-50%, -50%) scale(1.04); }
.pm-cabin.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pm-cabin.OCCUPIED { border-left-color: var(--green); }
.pm-cabin.PREPARING { border-left-color: var(--amber); }
.pm-cabin.CLEANING { border-left-color: var(--accent); }
.pm-cabin.MAINTENANCE { border-left-color: var(--violet); }
.pm-cabin.EMERGENCY { border-left-color: var(--red); animation: pulse 1.2s infinite; }
.pm-cabin .pm-lbl { font-weight: 600; font-size: 13px; }
.pm-cabin .pm-st { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.pm-pres { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); border: 1px solid #fff; }
.pm-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 12px; }
.pm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pm-legend .dotg { background: var(--green); } .pm-legend .dota { background: var(--amber); } .pm-legend .dotb { background: var(--accent); } .pm-legend .dotr { background: var(--red); } .pm-legend .dotm { background: var(--muted); }

/* command palette */
.cmdk { position: fixed; inset: 0; background: rgba(26,24,21,.32); z-index: 1100; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.cmdk[hidden] { display: none; }
.cmdk-box { width: 580px; max-width: 92vw; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 70px rgba(26,24,21,.28); overflow: hidden; }
#cmdkInput { width: 100%; border: none; outline: none; padding: 16px 18px; font: 15px var(--sans); color: var(--txt); border-bottom: 1px solid var(--line); }
.cmdk-list { max-height: 56vh; overflow: auto; }
.cmdk-item { padding: 11px 18px; display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 14px; }
.cmdk-item .ci-cat { color: var(--muted); font-size: 11px; margin-left: auto; text-transform: uppercase; letter-spacing: .5px; }
.cmdk-item.active, .cmdk-item:hover { background: var(--soft); }
.cmdk-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.cmdk-empty { padding: 16px 18px; color: var(--muted); font-size: 13px; }

/* presenter mode */
body.presenter [data-tab="simulate"], body.presenter [data-tab="setup"] { display: none; }

/* floor-plan markers sit on the cabin photo -> keep dark chips for contrast */
.iplan { position: relative; max-width: 470px; margin: 0 auto; }
.iplan-img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.imk { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: default; }
.imk .pin2 { width: 15px; height: 15px; border-radius: 50%; background: #5a6378; border: 2px solid rgba(0,0,0,.5); box-shadow: 0 0 0 4px rgba(0,0,0,.2); transition: background .25s, box-shadow .25s; }
.imk .ilbl { font-size: 11px; color: #fff; background: rgba(10,12,16,.82); border: 1px solid rgba(255,255,255,.14); padding: 2px 7px; border-radius: 10px; white-space: nowrap; display: flex; gap: 5px; align-items: center; }
.imk .ilbl b { font-weight: 700; }
.imk.on .pin2 { background: var(--green); box-shadow: 0 0 0 4px rgba(46,204,113,.25), 0 0 12px var(--green); }
.imk.on .ilbl b { color: #4ade80; }
.imk.off .pin2 { background: #6b7280; }
.imk.off .ilbl b { color: #c7c2b8; }
.imk.ok .pin2 { background: var(--accent); box-shadow: 0 0 0 4px rgba(63,108,180,.25); }
.imk.ok .ilbl b { color: #7ea6ff; }
.imk.alarm .pin2 { background: var(--red); box-shadow: 0 0 0 4px rgba(192,57,43,.3), 0 0 16px var(--red); animation: pulse 1s infinite; }
.imk.alarm .ilbl { border-color: var(--red); }
.imk.alarm .ilbl b { color: #ff8a7a; }

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
.toast { min-width: 230px; max-width: 360px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--txt); box-shadow: 0 8px 30px rgba(26,24,21,.14); font-size: 13px; animation: toastin .18s ease; border-left: 4px solid var(--accent); }
.toast.ok { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--amber); }
.toast.alarm { border-left-color: var(--red); }
.toast .tt { font-weight: 600; margin-bottom: 2px; }
.toast.fade { opacity: 0; transition: opacity .4s; }
@keyframes toastin { from { transform: translateX(20px); opacity: 0; } }

.row.unsynced { opacity: 0.6; }
.row.unsynced .src { color: var(--amber); }

table.structure { width: 100%; border-collapse: collapse; }
table.structure th, table.structure td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
table.structure td:last-child { font-family: var(--mono); }
table.structure th { color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
code { background: var(--soft); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); color: var(--txt); }

/* ---- bookings calendar ---- */
.cal-card { padding: 0; overflow: hidden; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex-wrap: wrap; }
.cal-top h3 { margin: 0; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-btn { background: #fff; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-family: var(--sans); font-size: 13px; cursor: pointer; box-shadow: var(--shadow); }
.cal-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-range { margin-left: 8px; font-size: 12.5px; }
.cal { border-top: 1px solid var(--line); }
.cal-head, .cal-row { display: grid; grid-template-columns: 132px 1fr; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-corner { border-right: 1px solid var(--line); }
.cal-d { padding: 9px 0; text-align: center; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.cal-d:last-child { border-right: none; }
.cal-dw { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.cal-dn { font-size: 15px; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.cal-d.we { background: rgba(26,24,21,.022); }
.cal-d.today .cal-dn { color: var(--accent); }
.cal-d.today { background: rgba(63,108,180,.07); }
.cal-row { border-top: 1px solid var(--line); }
.cal-unit { display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--txt); border-right: 1px solid var(--line); background: var(--soft); }
.cal-track { position: relative; height: 54px; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { border-right: 1px solid var(--line); }
.cal-cell:last-child { border-right: none; }
.cal-cell.we { background: rgba(26,24,21,.022); }
.cal-cell.today { background: rgba(63,108,180,.06); }
.cal-bar { position: absolute; top: 9px; height: 36px; box-sizing: border-box; border: 2px solid var(--panel); border-radius: 8px; padding: 0 9px; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: pointer; overflow: hidden; line-height: 1.15; transition: filter .12s, transform .12s; }
.cal-bar:hover { filter: brightness(.97); transform: translateY(-1px); z-index: 3; }
.cb-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-id { font-family: var(--mono); font-size: 11px; opacity: .85; }
.cal-bar.clipL { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.cal-bar.clipR { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.cal-bar.occ  { background: rgba(47,128,82,.16);  color: #245f3d; box-shadow: inset 3px 0 0 var(--green); }
.cal-bar.conf { background: rgba(63,108,180,.14); color: #2c4f86; box-shadow: inset 3px 0 0 var(--accent); }
.cal-bar.done { background: var(--soft); color: var(--muted); box-shadow: inset 3px 0 0 var(--line); }
.cal-bar.canc { background: repeating-linear-gradient(135deg, rgba(192,57,43,.08) 0 6px, rgba(192,57,43,.14) 6px 12px); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.cal-bar.canc .cb-name { text-decoration: line-through; }
.cal-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-dot.occ { background: var(--green); }
.cal-dot.conf { background: var(--accent); }
.cal-dot.done { background: var(--line); }
.cal-dot.canc { background: var(--red); }

/* ======================================================================
   RESPONSIVE — adapts the three chrome bands + dashboard/calendar cards
   for 13" laptops, projectors and phones. Appended last; desktop rules
   above are untouched. Uses only existing theme vars.
   ====================================================================== */

/* --- 13" laptop / projector: tighten chrome, stop the tabs wrapping --- */
@media (max-width: 1100px) {
  header { padding: 12px 18px; }
  .contextbar { gap: 12px; padding: 9px 18px; }
  .util-cluster { gap: 8px; }
  .util-cluster select { min-width: 120px; padding: 7px 10px; }
  .sb-desc { max-width: 200px; }

  /* let the tab strip scroll sideways instead of wrapping into a tall stack;
     fade the right edge so a partial tab reads as "scroll for more", never a mid-word clip */
  .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 12px 22px 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .tabs button { flex: 0 0 auto; }
  .tabs-spacer { flex: 0 0 12px; }

  .tab { padding: 20px 18px; }
}

/* --- tablet / small projector: stack the three bands cleanly --- */
@media (max-width: 820px) {
  header { padding: 11px 14px; gap: 8px; }
  .contextbar { padding: 9px 14px; gap: 10px; }
  /* let the cabin switcher and utilities stack to their own rows */
  .cabin-switch { flex-wrap: wrap; }
  .util-cluster { margin-left: 0; width: 100%; }
  .sb-desc { max-width: 100%; white-space: normal; }

  .tabs { padding: 10px 14px 0; }
  .tabs button { padding: 8px 13px; }
  .tab { padding: 18px 14px; }

  /* KPIs: smaller numbers + fewer columns so the strip fits one screen */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi .kn { font-size: 26px; }
  .kpi.primary .kn { font-size: 28px; }
  .kpi.secondary .kn { font-size: 20px; }

  /* Bookings calendar: keep the 7-day grid usable by scrolling sideways */
  .cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-head, .cal-row { min-width: 620px; }
  .cal-unit { position: sticky; left: 0; z-index: 2; }

  /* alert card: a touch tighter so it never overflows */
  .alertcard { padding: 14px 14px; gap: 12px; }
}

/* --- phone: single-column cards, smaller brand --- */
@media (max-width: 560px) {
  .brand { font-size: 13px; gap: 8px; }
  .cobrand { padding-left: 8px; }

  .grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .cabin-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .actions, .btn-row { gap: 6px; }
  .card { padding: 16px; }

  /* scenario controls wrap instead of clipping 'Demo reel' off the right edge */
  .scenario-pick { flex-wrap: wrap; }
  .scenario-pick button { white-space: nowrap; }
  .util-cluster select { flex: 1 1 140px; min-width: 0; }

  /* topology strip wraps; the hint drops to its own line instead of being clipped */
  .topo { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .tlink { flex: 1 1 24px; }
  .topo-hint { flex-basis: 100%; margin-left: 0; }

  /* >=40px touch targets on the primary mobile controls */
  .cseg { min-height: 40px; padding: 9px 14px; }
  .cal-btn { min-height: 40px; min-width: 40px; padding: 9px 14px; }

  /* cabin actions: even halves; destructive isolated on its own full-width row */
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions .danger { grid-column: 1 / -1; }

  /* calendar: more room per day + a right-edge fade signalling horizontal scroll */
  .cal-head, .cal-row { min-width: 720px; }
  .cal { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}