/* TCC Control app: page layout around the design system's components (ds/bundle.css). Colors, radii and
   spacing come from ds/tokens.css only. */
body { font-size: 14px; min-width: 320px; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); }
.app-noscript { margin: var(--space-16); color: var(--text-2); }
.app-hidden { display: none !important; }
.app-locked { overflow: hidden; }

/* type */
.app-h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.app-h1.sm { font-size: 20px; letter-spacing: normal; }
.app-h2 { margin: 0; font-size: 16px; font-weight: 700; }
.app-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.app-copy { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.app-foot { margin: auto 0 0; padding-top: var(--space-24); font-size: 13px; line-height: 1.45; color: var(--text-3); }
.app-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.app-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.app-status { margin: 0; min-height: 18px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.app-status:empty { min-height: 0; }
.app-pair-error { margin-top: var(--space-12); }
.app-pair-error .tc-name { white-space: normal; }

/* page frames */
.app-page { flex: 1; display: flex; flex-direction: column; padding: 56px var(--space-16) var(--space-16); }
.app-page.code { padding-top: 48px; }
.app-page.plain { padding-top: 48px; gap: var(--space-24); }
.app-stack { display: flex; flex-direction: column; gap: var(--space-10); }
.app-logo { display: block; width: 138px; height: 40px; object-fit: contain; object-position: left; }
.app-logo.right { object-position: right; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.app-topbar.start { justify-content: flex-start; }
.app-back { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: var(--radius-control); background: var(--control); color: var(--text-1); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* home: header, then .app-columns (.app-side, empty on a phone, and .app-sections) */
.app-side:empty { display: none; }
.app-sections { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-16) var(--space-16) 0; }
.app-offline { margin: var(--space-8) var(--space-16) 0; }
.app-card { background: var(--card); border-radius: var(--radius-tile); padding: var(--space-14) var(--space-16) var(--space-16); display: flex; flex-direction: column; gap: var(--space-10); }
.app-card.big { border-radius: var(--radius-card); padding: var(--space-24) var(--space-20); gap: var(--space-12); }
.app-card-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-card-row { display: flex; align-items: center; gap: var(--space-12); }
.app-card-row .app-card-head { flex: 1; }
.app-pair { display: flex; gap: var(--space-8); }
.app-pair > * { flex: 1; min-width: 0; }
.app-slides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.app-slides .tc-btn { height: 56px; font-size: 15px; }
.app-card .tc-state, .app-card .tc-name, .tc-actionbtn .tc-name, .tc-actionbtn .tc-state, .tc-doorrow .tc-name { white-space: normal; }
.tc-doorrow .tc-btn { flex-shrink: 0; }
.tc-list { padding: var(--space-4) 0; }
.tc-rsection .head > .roles { text-align: right; }

/* inputs: the design's 1px field border, 16px text (no zoom on iOS), focus ring in the focus token */
.tc-field, .tc-select { border: 1px solid var(--field-border); font-size: 16px; }
.tc-field:focus-visible, .tc-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible, .app-back:focus-visible, .tc-preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tc-btn.big { height: 52px; font-size: 15px; }
.tc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* sign in */
.app-signin-buttons { margin-top: 32px; display: flex; flex-direction: column; gap: var(--space-10); }
.app-email { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-16); border-radius: var(--radius-tile); background: var(--card); }
.app-email label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.app-email .tc-field { background: var(--card); }
.tc-code > .tc-label { font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text-2); }
.tc-codefield { font-size: 28px; }
.tc-codefield:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* not set up / account */
.app-kv { display: flex; flex-direction: column; gap: 4px; padding: var(--space-12); border-radius: var(--radius-control); background: var(--control); min-width: 0; }
.app-kv .value { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.app-signin-code { font: 700 28px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.app-who { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-card); background: var(--card); }
.app-who .tc-iconbox { font-weight: 700; font-size: 14px; }
.app-who .text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-who .tc-name, .app-who .tc-state { white-space: normal; overflow-wrap: anywhere; }
.tc-appearance > .tc-name { font-size: 16px; }
.app-signout { margin-top: auto; }

/* sheets rise from the bottom over the scrim */
.app-overlay { position: fixed; inset: 0; z-index: 20; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.app-overlay .tc-sheet { width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: var(--space-10) var(--space-16) calc(28px + env(safe-area-inset-bottom)); gap: var(--space-16); }
.app-overlay .tc-sheet .head .title { margin: 0; }
.tc-sheet .foot .tc-btn.lit { flex: 2; }
.app-working { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.app-working .tc-spin { width: 32px; height: 32px; border-width: 3px; }
.app-working .tc-name { font-size: 16px; }
.app-working .tc-state { font-size: 13px; white-space: normal; }
.app-sheet-row { border-radius: var(--radius-tile); background: var(--control); }
.app-sheet-row .tc-iconbox { background: var(--card); }

/* toasts */
.app-toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--space-16) + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: center; padding: 0 var(--space-16); pointer-events: none; }
.app-toasts .tc-toast { width: 100%; max-width: 448px; pointer-events: auto; }
.tc-toast .tc-name, .tc-toast .tc-state { white-space: normal; }
.tc-toast .tc-state:empty { display: none; }

/* Doors page (GET /doors): one card per door, each a bigger DoorRow, its position sensor and its last events.
   The home's Doors section links to it with a full-width "See all doors" row under its list. */
.app-seeall { display: flex; align-items: center; width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 var(--space-4); text-decoration: none; }
.app-time { white-space: nowrap; }
.app-doors { display: flex; flex-direction: column; gap: var(--space-12); }
.app-door { padding: var(--space-4) var(--space-4) var(--space-14); gap: var(--space-6); }
.app-door .tc-doorrow { min-height: 80px; }
.app-door .tc-doorrow .tc-name { font-size: 18px; font-weight: 700; }
.app-door .tc-doorrow .tc-state { font-size: 15px; }
.app-door-pos { padding: 0 var(--space-12); }
.app-door-pos:empty { display: none; }
.app-door-events-head { margin: var(--space-8) var(--space-12) 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.app-door-events { list-style: none; margin: 0; padding: 0 var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.app-door-events li { display: flex; gap: var(--space-12); font-size: 14px; line-height: 1.35; color: var(--text-2); }
.app-door-when { flex-shrink: 0; min-width: 8.5em; color: var(--text-3); }
.app-door-what { min-width: 0; overflow-wrap: anywhere; }
.app-door-none { color: var(--text-3); }

/* Tablet and desktop. 700 px and up: the home's Doors (with the building's status above it) in a fixed side
   column, the other sections beside it; 1100 px and up: three equal columns, the other sections across two,
   1280 px at most. With no Doors the main area takes the whole width, in two columns, then three. Main
   columns (.app-col) stack independently: app.js (WIDE_QUERY, DESKTOP_QUERY, homeLayout, splitColumns) puts
   each section in the shorter one by measured height and sets data-cols, so the DOM, and so Tab order,
   follows what's on screen (down each column in turn). Sheets become centred dialogs, like the design
   system's .tc-sheet.panel. */
@media (min-width: 700px) {
  .app.home { max-width: 1280px; }
  .app.account { max-width: 560px; }
  .app.doors { max-width: 1100px; }
  .app.doors .app-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
  .app.home .tc-apphead { padding: var(--space-24) var(--space-24) var(--space-8); }
  .app.home > .app-offline { margin: var(--space-8) var(--space-24) 0; }
  .app-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: start; padding: var(--space-16) var(--space-24) 0; }
  .app-columns.split { grid-template-columns: 320px minmax(0, 1fr); }
  .app-columns > .app-sections { padding: 0; min-width: 0; }
  .app-sections[data-cols="2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .app-col { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
  .app-side { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
  .app-side > .app-offline { margin: 0; }

  .app-overlay { align-items: center; padding: var(--space-24); }
  .app-overlay .tc-sheet { max-width: 480px; max-height: calc(100vh - 2 * var(--space-24)); max-height: calc(100dvh - 2 * var(--space-24)); border-radius: var(--radius-card); padding: var(--space-20); }
  .app-overlay .tc-sheet .grab { display: none; }
  .app-toasts { bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); }
}
@media (min-width: 1100px) {
  .app-columns.split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-columns.split > .app-sections { grid-column: span 2; }
  .app-sections[data-cols="3"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* "Match device" and friends may wrap at 320 wide rather than spill out of their segment. */
.tc-seg button { white-space: normal; line-height: 1.2; }

/* Kiosks (Coffee Bar iPad: Lobby, light; Media Booth iPad: Booth, dark; the theme is fixed by the page
   data). Laid out for an iPad in landscape (1194 x 834): a header with the place, date and a big clock, big
   tiles (ds .tc-ktile) for the kiosk's actions, and a view-only door status strip. */
.app.kiosk { max-width: 1280px; padding-bottom: env(safe-area-inset-bottom); }
.app-kiosk { flex: 1; display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-24) var(--space-16); }
.app-kiosk-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); min-height: 56px; }
.app-kiosk-head .app-logo { width: 150px; height: 44px; flex-shrink: 0; }
.app-kiosk-who { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-kiosk-place { font-size: 20px; font-weight: 700; }
.app-kiosk-sub { font-size: 14px; color: var(--text-3); }
.app-kiosk-clock { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.app-kiosk > .app-offline { margin: 0; }
.app-kiosk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-16); }
.app-kiosk-tiles .tc-ktile { min-width: 0; cursor: pointer; }
.app-kiosk-tiles .tc-ktile:disabled { cursor: default; opacity: .7; }
.app-kiosk-tiles .tc-ktile .name, .app-kiosk-tiles .tc-ktile .state { white-space: normal; }
.app-ktile-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.app-ktile-ask { font-size: 13px; font-weight: 600; color: var(--text-3); }
.app-kiosk-doors { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-8); }
.app-kiosk-doorshead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.app-kiosk-doorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-16); }
.app-kiosk-doorgrid .tc-ktile { min-height: 96px; min-width: 0; padding: var(--space-16); }
.app-kiosk-doorgrid .tc-ktile .name { font-size: 14px; font-weight: 400; color: var(--text-3); }
.app-kiosk-doorgrid .tc-ktile .state { font-size: 18px; font-weight: 700; color: var(--text-1); }
.app-kiosk-doorgrid .tc-ktile .state.accent { color: var(--accent-text); }
.app-kiosk-doorgrid .tc-ktile .state.warn { color: var(--warning); }
.app-kiosk-code { font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 700px) {
  .app-kiosk { padding: var(--space-24); }
  .app-kiosk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(132px, auto); }
  .app-kiosk-doorgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .app.kiosk-booth .app-kiosk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}