@font-face {
  font-family: "Roobert PRO";
  src: url("../fonts/RoobertPRO-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("../fonts/RoobertPRO-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("../fonts/RoobertPRO-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert PRO";
  src: url("../fonts/RoobertPRO-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Design tokens (colours, glass, radii, …) live in tokens.css, loaded before this file. */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* The page padding is symmetric, but a vertical scrollbar is not: it eats into the right
   edge only, so the content ends up sitting closer to the left. Reserving the gutter on
   both edges puts the two margins back in step, on report pages that scroll and on the
   fixed dashboard alike. Ignored by engines that lack it — that is the behaviour we have
   today anyway. */
html {
  scrollbar-gutter: stable both-edges;
  /* iOS Safari enlarges text in landscape unless told not to. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--fw-regular);
  color: var(--ink);
  background: var(--bg-app);
  /* macOS draws light text on a dark background bolder than Windows does. Grayscale
     smoothing brings the two close; the designer's token page uses it too. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

/* Form controls take the system font by default: a sign-in field would show SF on a
   Mac, Segoe on Windows and Roboto on Android. */
button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

/* The frame of every page (templates/page.html). At least one screen tall, longer when
   the content is. The page never moves sideways: a block wider than a phone gets cut
   off instead of making the whole page pan. clip, unlike hidden, makes no scroll box,
   so vertical scrolling stays as it is. 100vh is the fallback for engines without dvh. */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-x: clip;
}

.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.scrim {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bottom) 100%);
  z-index: -1;
}

/* ---------- Top bar ---------- */

/* Same markup on every page (templates/page.html), so the menu sits at the same height
   everywhere. When the brand and the menu don't fit on one line, the menu takes the
   next one. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.brand-icon {
  flex-shrink: 0;
}

.brand__name {
  display: block;
  font-size: var(--fs-28);
  letter-spacing: -0.84px;
  white-space: nowrap;
}

.brand__page {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-12);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The nav is a popover so that a phone can open it as a menu (responsive.css). On
   wider screens it is never opened and simply sits in the page, so the browser's
   own popover box (fixed, centred, bordered) is undone here. */
.nav-pills {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  overflow: visible;
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--border-highlight);
}

/* Every pill is the same icon-sized box, so the bar keeps one width on every page and
   nothing shifts when the active item changes. Pills never shrink: a bar too wide for
   the screen wraps to a second row instead of squeezing icons out of finger reach.
   The bottom padding is the dot's lane: applied to all pills, it keeps the icons on
   one line whether or not a dot is drawn. */
.pill {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 6px;
  background: transparent;
  color: var(--ink);
  transition: background-color 160ms ease;
}

.pill img {
  width: 20px;
  height: 20px;
  opacity: 0.55;
  transition: opacity 160ms ease;
}

/* Active page: brighter glass, full-strength icon and an accent dot beneath it. */
.pill--active {
  background: var(--glass-pill-active);
}

.pill--active img {
  opacity: 1;
}

.pill--active::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
}

.nav-pills .pill {
  text-decoration: none;
}

/* Signing out must be a POST (a link would let a prefetch log the user out), so the
   control is a form. display:contents keeps its button as the flex item, otherwise the
   form would become a box of its own and break the even pill row. */
.nav-pills .nav-form {
  display: contents;
}

/* Names are shown only in the phone menu; on a wide screen the icon is the label and
   the name comes up as a tooltip. */
.pill__label {
  display: none;
}

/* Opens the menu on a phone (responsive.css); hidden everywhere else. */
.nav-toggle {
  display: none;
  padding: 0;
  background: var(--glass);
  box-shadow: var(--border-highlight);
}

.nav-toggle img {
  opacity: 1;
}

/* ---------- Navigation transition ----------
   A navigation is a full page load, so there is no element to animate from — the marker
   would simply appear on the new item. Cross-document view transitions give the browser
   both frames: the marker carries the same name on every page, so it is treated as one
   element that moved and slides across instead of jumping. Sizes are identical, so only
   its position animates. Chromium and Safari; elsewhere the rules are ignored and the
   marker just appears in its new place. */
@view-transition {
  navigation: auto;
}

.pill--active {
  view-transition-name: nav-marker;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ---------- Shared card ---------- */

.card {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--border-highlight);
  position: relative;
}

/* ---------- Main content ----------
   The dashboard fills the screen and grows past it only when the window is lower than
   its cards need; then the whole page scrolls, nothing is rearranged. Lists never set
   the height: each list box starts at a small fixed height and takes whatever the
   columns have left, scrolling inside. So the layout depends on the window width only,
   never on how many people or bookings there are today. */

.content {
  flex: 1 0 auto;
  display: flex;
  gap: var(--space-3);
}

/* 360px is what the date chips and the weather need side by side. */
.col-left {
  flex: 0 0 clamp(360px, 33%, 460px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.col-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* ---------- Date / time chips + weather ---------- */

.row-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.chip-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 140px;
}

.chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--border-highlight);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.48px;
}

.chip img {
  width: 20px;
  height: 20px;
}

.weather-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--border-highlight);
  padding: var(--space-5) var(--space-4);
}

.weather-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.weather-slot__label {
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.48px;
}

.weather-slot img {
  width: 20px;
  height: 20px;
}

.weather-slot__temp {
  font-size: var(--fs-16);
  font-weight: 500;
}

.weather-divider {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
}

/* ---------- Occupancy card ---------- */

/* Sized to its content: the space left in the column goes to the entries card below. */
.occupancy-card {
  flex: none;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.occupancy-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.48px;
}

.occupancy-head svg {
  width: 24px;
  height: 24px;
}

.gauge-center-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.gauge-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.gauge-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gauge-stat--right {
  align-items: flex-end;
  text-align: right;
}

.gauge-stat__num {
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 32px;
}

.gauge-stat__label {
  font-size: var(--fs-14);
  color: var(--text-dim);
}

.gauge {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gauge svg {
  width: min(150px, 100%);
  height: auto;
}

.gauge__center {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Scaled down with the 150px arc: a 36px reading would touch its inner edge. */
.gauge__pct {
  font-size: var(--fs-28);
  font-weight: 500;
  line-height: 1;
}

.gauge__pct small {
  font-size: var(--fs-18);
}

.gauge__label {
  font-size: var(--fs-14);
  color: var(--text-dim);
  margin-top: 2px;
}

.occupancy-foot {
  display: flex;
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
}

.occupancy-foot__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}

.occupancy-foot__item:last-child {
  border-right: none;
}

.occupancy-foot__num {
  font-size: var(--fs-24);
  font-weight: 500;
}

.occupancy-foot__label {
  font-size: var(--fs-14);
  color: var(--text-dim);
}

/* ---------- Entries card (who has just come in; rows from modules/locks) ---------- */

.entries-card {
  flex: 1 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Two rows to start with; the rest of the column on a taller screen. */
.entries-body {
  flex: 1 0 auto;
  height: 80px;
  overflow-y: auto;
}

.entry-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-16);
  border-bottom: 1px solid var(--hairline-soft);
}

.entry-row:last-child {
  border-bottom: none;
}

.entry-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-door {
  font-size: var(--fs-13);
  color: var(--text-dim);
  white-space: nowrap;
}

/* The worker marks a row new for its first ENTRY_NEW_SEC and clears it itself, so the
   highlight comes and goes on every screen at the same moment. The glow is inset: the
   scrolling body would clip an outer one at its edges. */
.entry-row--new {
  margin-bottom: var(--space-1);
  border-bottom-color: transparent;
  border-radius: var(--radius-sm);
  background: var(--state-new-bg);
  animation: entry-pulse 1.6s ease-in-out infinite;
}

.entry-row--new .entry-name {
  font-weight: var(--fw-medium);
}

@keyframes entry-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--state-new-glow); }
  50% { box-shadow: inset 0 0 14px 0 var(--state-new-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .entry-row--new {
    animation: none;
    box-shadow: inset 0 0 0 1px var(--state-new-glow);
  }
}

/* ---------- Player card ---------- */

.player-card {
  flex-shrink: 0;
  padding: var(--space-6) var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: 24px 60px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
}

.player-wave {
  width: 24px;
  height: 24px;
}

.player-art {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--blue-deep) 0%, var(--blue-mid) 45%, var(--blue) 100%);
}

.player-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.player-title {
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: -0.54px;
}

.player-sub {
  font-size: var(--fs-16);
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;
}

.player-btn img {
  width: 24px;
  height: 24px;
}

.player-scrub {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.player-scrub img {
  width: 20px;
  height: 20px;
}

.scrub-track {
  flex: 1;
  position: relative;
  height: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset -0.5px -1px 0 0 var(--surface-bright), inset 0.5px 1px 0 0 var(--surface-bright);
  margin: 0 var(--space-1);
}

.scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  border-radius: 12px;
  background: var(--surface-active);
}

.scrub-thumb {
  position: absolute;
  left: 44%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-active);
  transform: translate(-50%, -50%);
}

/* ---------- Bookings ---------- */

/* Visitors block on the left, the two booking cards stacked on the right. This
   fills col-right (a flex column) via one row-flex child. Below 1200px the two stack
   (responsive.css). */
.bookings-layout {
  flex: 1 0 auto;
  display: flex;
  gap: var(--space-3);
}

.bookings-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* 460px on a full HD screen, as designed; narrower windows give the bookings table the
   room instead. 340px keeps a name readable between the photo and the "since" pill. */
.visitors-card {
  flex: 0 0 clamp(340px, 40%, 460px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* About two people to start with, the rest of the column on a taller screen. */
.visitors-body {
  flex: 1 0 auto;
  height: 160px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.visitor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--fs-16);
  border-bottom: 1px solid var(--hairline-soft);
}

.visitor-row:last-child {
  border-bottom: none;
}

.visitor-info {
  flex: 1;  /* with the avatar the row has three children; keeps the pill hard right */
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* In Hub avatar. Same box whether it holds a photo or initials, so a photo arriving on a
   later refresh replaces the circle without moving the row. */
.visitor-avatar {
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  border: 1px solid var(--hairline);  /* keeps light photos off the glass */
  object-fit: cover;
}

.visitor-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-strong);
  color: var(--ink);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

.visitor-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-time {
  font-size: var(--fs-13);
  color: var(--text-dim);
}

.visitor-host {
  font-size: var(--fs-13);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* People panel: segmented tabs (In Hub / Visitors) above the shared scroll body. */
.people-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.ptab {
  flex: 1;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--glass-soft);
  color: var(--text-control);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
}

.ptab--active {
  background: var(--surface-active);
  color: var(--ink-on-light);
}

.ptab__count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.15);
  font-size: var(--fs-12);
  text-align: center;
}

.ptab--active .ptab__count {
  background: rgba(0, 0, 0, 0.1);
}

/* Inactive tab panel; the two panels share .visitors-body so only display differs. */
.visitors-body.is-hidden {
  display: none;
}

/* Uniform-width "since" pills in the In Hub list so they line up regardless of the
   time text (single- vs double-digit hour). Centred content inside a fixed min width. */
[data-ppanel="inhub"] .status-pill {
  min-width: 132px;
  justify-content: center;
}

.bookings-card {
  flex: 1 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bookings-card--fade {
  background: var(--surface-faint);
}

.bookings-card--fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(20, 28, 48, 0) 0%, rgba(12, 18, 38, 0.55) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  pointer-events: none;
}

.bookings-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.48px;
  margin-bottom: var(--space-3);
}

.bookings-head img {
  width: 20px;
  height: 20px;
}

/* Header and every data row share one grid track definition, so columns line up
   regardless of content (an empty Company cell can't shift a row). */
.table-head,
.table-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 1fr 1fr;
  align-items: center;
}

.table-head {
  padding: 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-14);
  color: var(--text-dim);
  font-weight: 500;
}

/* Two rows to start with, like the entries list. */
.table-body {
  flex: 1 0 auto;
  height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.table-row {
  padding: var(--space-2);
  font-size: var(--fs-16);
  border-bottom: 1px solid var(--hairline-soft);
}

.table-row:last-child {
  border-bottom: none;
}

/* Empty-state message: drop the grid so it spans the whole width. */
.table-row--empty {
  display: block;
  color: var(--text-faint);
}

/* A grid cell grows to fit unbroken text unless its minimum is zeroed, and a long
   company name would then push its row's columns out of line with the header. */
.col-time,
.col-room,
.col-resident,
.col-company {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-lg);
  background: var(--surface-chip);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
}

.status-dot--red {
  background: var(--red);
}

.status-dot--amber {
  background: var(--amber);
}

.status-dot--green {
  background: var(--green);
}


/* ---------- Bottom panel: tabs + rooms ---------- */

.bottom-panel {
  flex-shrink: 0;
  background: var(--glass-soft);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--border-highlight);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tab {
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--glass-soft);
  color: var(--text-control);
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
}

.tab--active {
  background: var(--surface-active);
  color: var(--ink-on-light);
}

.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-bright);
}

.tab-dot--grey {
  background: var(--grey);
}

.tab-dot--amber {
  background: var(--warm);
}

.floors {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.floors-label {
  font-size: var(--fs-14);
  color: var(--text-dim);
  white-space: nowrap;
}

.floor-btn {
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  font-size: var(--fs-16);
  font-weight: 500;
}

.floor-btn--active {
  background: var(--surface-active);
  color: var(--ink-on-light);
}

/* Seven cards fit one line from 1200px up; narrower screens wrap them, and adding or
   removing a room needs no CSS edit. */
.rooms-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.room-card {
  min-width: 0;
  background: var(--glass-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--border-highlight);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}

.room-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: -0.48px;
  white-space: nowrap;
}

.room-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.room-dot--amber {
  background: var(--warm);
}

.room-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: 500;
}

.room-line img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.room-line--warm {
  color: var(--warm);
  position: relative;
}

.room-line--warm .flame {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.room-set {
  font-size: var(--fs-13);
  color: var(--text-faint);
  margin-top: -4px;
}