/* The style guide's tokens and type. Why: docs/how-it-works/look.md */

:root {
  --bg: #0F0F0F;
  --surface: #1A1A19;
  --ink: #FFFFFF;
  --muted: #A6A6A1;
  --olive: #6F8B4B;
  --olive-text: #9DBA73;
  --info: #8FB3C9;
  --warn: #E0B356;
  --danger: #E0675B;
  --lake: #6FA8CC;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F1F2ED;
    --surface: #FFFFFF;
    --ink: #121212;
    --muted: #5E605A;
    --olive: #5B7539;
    --olive-text: #4D6630;
    --info: #2C5E7C;
    --warn: #8A5A00;
    --danger: #B03A2E;
    --lake: #2F6F96;
  }
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 460px;
  margin: 16px auto;
  padding: 0 12px;
  /* A long email, as on the guest page, wraps rather than widening the page past a phone. */
  overflow-wrap: break-word;
}

a {
  color: var(--olive-text);
}

h1, h2, h3 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

time {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

/* Your stay: the stage banner and the key-card sleeve (style guide "The one signature piece"). */
.stage, .sleeve {
  background-color: var(--surface);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.stage ol {
  display: flex;
  gap: 4px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}

.stage li {
  flex: 1;
  border-top: 4px solid var(--muted);
  padding-top: 4px;
}

.stage li[aria-current="step"] {
  border-color: var(--olive-text);
  color: var(--ink);
}

.hotel {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--muted);
}

.roomno {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.perf {
  border-top: 2px dashed var(--muted);
}

.chip {
  display: inline-block;
  border: 1px solid var(--muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.why {
  border-left: 4px solid var(--olive-text);
  padding-left: 10px;
}

.why.view-only {
  border-left-color: var(--info);
}

/* Style guide "Pieces": phone-sized buttons and fields; olive, filled, in the uppercase lettering. */
input, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  font-size: 16px;
}

button {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background-color: var(--olive);
  color: var(--bg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

button:disabled {
  opacity: 0.5;
}

/* The Swaps tab: a row per room like yours, and per request. */
.choice, .request {
  background-color: var(--surface);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.switcher a[aria-current] {
  color: var(--ink);
  font-weight: 800;
}

/* Style guide "Pieces": the bottom tab bar on every logged-in page. */
body:has(.tabs) {
  padding-bottom: 72px;
}

html:has(.tabs) {
  scroll-padding-bottom: 72px;
}

.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: var(--surface);
  border-top: 1px solid var(--muted);
}

.tabs a {
  flex: 1;
  padding: 16px 4px;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
}

.tabs a[aria-current="page"] {
  color: var(--olive-text);
  font-weight: 800;
}

/* The Overview: a card per control, the state as radios, outlined secondary buttons, and the warnings. */
.card, .control {
  background-color: var(--surface);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.control {
  border: 1px solid var(--muted);
}

/* Hotel lists: a wide preview table scrolls inside its card at phone width, its cells unwrapped. */
.scroll {
  overflow-x: auto;
}

.scroll td, .scroll th {
  white-space: nowrap;
}

.control fieldset {
  display: flex;
  gap: 16px;
  border: none;
  padding: 0;
}

.control input[type="radio"] {
  width: auto;
}

.muted {
  color: var(--muted);
}

button.ghost {
  border: 2px solid var(--olive);
  background-color: transparent;
  color: var(--olive-text);
}

button.danger {
  border: 2px solid var(--danger);
  background-color: transparent;
  color: var(--danger);
}

.flag {
  border-left: 4px solid var(--warn);
  padding-left: 10px;
}

.why.refused {
  border-left-color: var(--danger);
}

/* The floor map (floor-map.md): one page, the floor drawn as the building, a room's state by color and border. */
body:has(.floor-page) {
  max-width: 1280px;
}

.floor-page {
  --cell: 48px;
  --gap: 4px;
}

.hotel-tabs, .floors, .floors [data-floors], .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hotel-tabs a, .floors a {
  border: 1px solid var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
}

.floors [data-floors] a {
  border-radius: 8px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}

.hotel-tabs a[aria-current], .floors a[aria-current] {
  background-color: var(--olive);
  border-color: var(--olive);
  color: var(--bg);
  font-weight: 800;
}

.filters .chip {
  text-decoration: none;
}

.filters .chip[aria-current] {
  border-color: var(--olive-text);
  font-weight: 800;
}

/* The DOM keeps each section's slots in order; grid areas draw them where the building has them. */
.map {
  width: max-content;
}

.map [data-section] {
  display: grid;
  gap: var(--gap);
  grid-template-areas: "side1" "row1" "name" "row2" "side2";
}

.map h2 {
  grid-area: name;
  margin: 0;
  font-size: 0.625rem;
  color: var(--muted);
}

.side {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink);
}

.side.lake {
  color: var(--lake);
  font-weight: 800;
}

.side-1 { grid-area: side1; }
.side-2 { grid-area: side2; }
.row-1 { grid-area: row1; }
.row-2 { grid-area: row2; }

.floor-row {
  display: flex;
  gap: var(--gap);
}

/* A lake side is a band of the lake's color behind its row, apart from the state borders. */
.floor-row[data-lake] {
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--lake) 25%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lake) 25%, transparent);
}

/* Wings (Q125): B runs up from the hub, A to its left and C to its right, each reading outward, the elevators below. */
.wings {
  display: grid;
  gap: 8px;
  grid-template-areas: "compass b ." "a hub c" ". lift .";
}

.wings > :nth-child(1) {
  grid-area: a;
  justify-items: end;
  grid-template-areas: "stairs side1" "stairs row1" "stairs name" "stairs row2" "stairs side2";
}

.wings > :nth-child(1) .floor-row {
  flex-direction: row-reverse;
}

.wings > :nth-child(2) {
  grid-area: b;
  align-self: end;
  grid-template-areas: "stairs stairs" "name name" "side1 side2" "row1 row2";
}

.wings > :nth-child(2) .floor-row {
  flex-direction: column-reverse;
}

.wings > :nth-child(2) .side {
  width: var(--cell);
}

.wings > :nth-child(3) {
  grid-area: c;
  grid-template-areas: "side1 stairs" "row1 stairs" "name stairs" "row2 stairs" "side2 stairs";
}

.landmark, .hub {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.625rem;
  color: var(--muted);
  background-color: var(--surface);
}

.stairs {
  grid-area: stairs;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.wings > :nth-child(1) .stairs, .wings > :nth-child(3) .stairs {
  writing-mode: vertical-rl;
}

.hub {
  grid-area: hub;
  border: 2px solid var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.lift {
  grid-area: lift;
  min-height: 2rem;
}

.compass {
  grid-area: compass;
  align-self: start;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
}

/* A cell is a slot; a room spans its slots across a row, or down B's columns. */
.cell {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--cell);
  height: var(--cell);
  border-radius: 6px;
  font-size: 0.625rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: normal;
}

/* A gap's name wraps inside its slot, hyphenated where the browser can ("Housekeeping" on the Heavenly floors). */
.cell:not([data-room]) {
  hyphens: auto;
  overflow-wrap: anywhere;
}

.cell[data-span="2"] { width: calc(2 * var(--cell) + var(--gap)); }
.cell[data-span="3"] { width: calc(3 * var(--cell) + 2 * var(--gap)); }
.wings > :nth-child(2) .cell[data-span] { width: var(--cell); }
.wings > :nth-child(2) .cell[data-span="2"] { height: calc(2 * var(--cell) + var(--gap)); }
.wings > :nth-child(2) .cell[data-span="3"] { height: calc(3 * var(--cell) + 2 * var(--gap)); }

.floor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* Every state rule has the same specificity as the default, so the later one wins. Each keeps a border color of its own. */
.cell[data-state], .legend [data-state] {
  border: 2px solid var(--muted);
  color: var(--ink);
}

.cell[data-state="unusable"], .legend [data-state="unusable"] {
  border-color: var(--danger);
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--danger) 22%, transparent) 6px 8px);
}
.cell[data-state="art"], .legend [data-state="art"] { border-color: var(--info); }
.cell[data-state="filled"], .legend [data-state="filled"] { border-color: var(--olive-text); }
.cell[data-state="free"], .legend [data-state="free"] { border-color: var(--olive); background-color: var(--olive); color: var(--bg); }
.cell[data-state="hand-placed"], .legend [data-state="hand-placed"] { border-color: var(--warn); border-style: dashed; }
.cell[data-state="none"], .legend [data-state="none"] { border-style: dotted; }

.cell details:not([open]), .cell summary {
  width: 100%;
  height: 100%;
}

.cell summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.cell summary::-webkit-details-marker {
  display: none;
}

.cell .number {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cell .short {
  opacity: 0.8;
}

.ada {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--info);
}

/* A connecting door (floor-map.md): drawn in CSS, on the shared edge of two neighbours or as a badge on a far pair's tiles. */
.door-icon {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 8px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 2px 2px 0 0;
  vertical-align: middle;
}

.door-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: currentColor;
}

.door, .door-badge {
  position: absolute;
  z-index: 1;
  display: flex;
  padding: 1px;
  border-radius: 3px;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 0;
}

.door-badge {
  bottom: 2px;
  left: 3px;
}

/* The door sits on the edge the next cell shares: the right, A wing's left (rows reversed), B wing's top (columns). */
.door {
  top: 50%;
  right: calc(var(--gap) / -2);
  transform: translate(50%, -50%);
}

.wings > :nth-child(1) .door {
  right: auto;
  left: calc(var(--gap) / -2);
  transform: translate(-50%, -50%);
}

.wings > :nth-child(2) .door {
  top: calc(var(--gap) / -2);
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* An open tap is a card fixed at the foot of the screen, wide enough to read, never past the screen's edges. */
.cell details[open] {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(16rem, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  border-radius: 6px;
  background-color: var(--surface);
  border: 1px solid var(--muted);
  color: var(--ink);
  font-size: 0.875rem;
  text-align: left;
  overflow-wrap: anywhere;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.legend li {
  position: relative;
  padding: 2px 8px;
  border-radius: 6px;
}

.legend .lake {
  background-color: color-mix(in srgb, var(--lake) 25%, transparent);
}

.legend .ada {
  position: static;
}

/* The guest floor plan (floor-map.md): Placement's drawing in a box that floor_plan.js scales to fit, zooms and drags. */
body:has([data-plan]) {
  max-width: 1280px;
  --cell: 48px;
  --gap: 4px;
}

.zoom {
  display: flex;
  gap: 8px;
}

.zoom button {
  margin-top: 0;
  padding: 10px 4px;
}

.plan {
  overflow: auto;
  touch-action: none;
  user-select: none;
}

.plan > * {
  transform-origin: 0 0;
}

/* Placement's map keeps the tokens above; the guest's drawing takes the guest look's (look.md "The guest look"). */
.guest .cell, .guest .map h2, .guest .compass, .guest .landmark, .guest .hub {
  color: var(--g-muted);
}

.guest .landmark, .guest .hub {
  background-color: transparent;
  border: 1.5px solid var(--g-line);
}

.guest .side {
  color: var(--g-ink);
}

.guest .cell[data-room], .guest .legend li {
  border: 2px solid var(--g-line);
  color: var(--g-ink);
}

/* The type chip's deeper blue, for white text's contrast (look.md "The guest look"). */
.guest .cell[data-mark="mine"], .guest .legend .mine {
  border-color: #1268E0;
  background-color: #1268E0;
  color: #FFFFFF;
}

.guest .cell[data-mark="could-swap"], .guest .legend .could-swap {
  border-color: var(--g-link);
  border-style: dashed;
}

.guest .cell[data-mark="greyed"], .guest .legend .greyed {
  opacity: 0.4;
}

.guest .cell a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* A room message's marker (RM2-R12): its icon and dot in the cell's top corner, in the cell's own colour. */
.guest .cell [data-posted] {
  position: absolute;
  top: 2px;
  left: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 1;
}

.guest .cell [data-dot] {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}

/* The Your stay card's mini floor plan (YS-R28): the guest's whole wing, one row per hallway side, the room marked.
   Cells share each row's width and shrink to fit, so the wing stays two rows on any screen (no scroll). */
.guest .mini-plan {
  display: flex;
  gap: 3px;
  margin: 10px 0;
}

/* The two hallway sides stack, taking the width left by any framing ends. */
.guest .mini-rows {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guest .mini-row {
  display: flex;
  gap: 3px;
}

/* A wing's framing landmark (Rotunda/Elevators at one end, Stairs at the other), spanning both rows. */
.guest .mini-end {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1.5px dashed var(--g-line);
  border-radius: 4px;
  font-size: 0.5rem;
  line-height: 1.15;
  text-align: center;
  color: var(--g-muted);
}

.guest .mini-cell {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--g-muted);
  font-size: 0.5rem;
  overflow: hidden;
}

.guest .mini-cell[data-room] {
  border: 1.5px solid var(--g-line);
  color: var(--g-ink);
}

.guest .mini-cell[data-mark="mine"] {
  border-color: #1268E0;
  background-color: #1268E0;
  color: #FFFFFF;
}

/* The room number shrinks with the viewport so the whole wing fits, down to a readable floor on a phone. */
.guest .mini-cell .number {
  font-size: clamp(0.5rem, 1.6vw, 0.8125rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A landmark label stays on one line and clips, rather than wrapping into a garble, in a tight cell. */
.guest .mini-gap {
  white-space: nowrap;
}

/* A link styled as a button ("Full Floor Plan"); at least 44px tall for a comfortable tap on a phone. */
.guest .button {
  display: inline-block;
  min-height: 44px;
  padding: 11px 16px;
  border: 1.5px solid var(--g-link);
  border-radius: 6px;
  color: var(--g-ink);
  font-weight: 700;
  text-decoration: none;
}

.guest .button:hover {
  border-color: var(--g-bright);
}

/* The "Add Roommates" section header: a modest heading, not the page's h1 size. */
.guest .roommates-head {
  margin: 0 0 4px;
  font-size: 1rem;
}

/* From 900px the map, and the page's heading and stage above it, leave a column on its right, where an open card sits
   beside them. The map fits there, so it needs no hint to scroll. */
@media (min-width: 900px) {
  .floor-page, body:has(.floor-page) > h1, body:has(.floor-page) > .stage {
    margin-right: 296px;
  }

  .scroll-hint {
    display: none;
  }

  .cell details[open] {
    left: auto;
    right: max(12px, calc((100vw - 1280px) / 2 + 12px));
    top: 16px;
    bottom: auto;
    transform: none;
    width: 280px;
    max-height: calc(100vh - 32px);
  }
}

/* A laptop (look.md): Placement's pages spread their cards into columns, and a card holding a wide table or a floor
   spans the row, as do a .wide card (the launch's long list) and every line outside a card. Guest pages have no
   cards, so they stay one phone-width column. */
@media (min-width: 900px) {
  body:has(main > .card) {
    max-width: 1280px;
  }

  main:has(> .card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
    align-items: start;
  }

  main:has(> .card) > * {
    margin: 0;
  }

  main:has(> .card) > :not(.card),
  main:has(> .card) > .card:has(.scroll, .floor-grid),
  main:has(> .card) > .card.wide {
    grid-column: 1 / -1;
  }
}

/* Guest pages (body.guest; look.md "The guest look"): the mock's blues, dark by default like the tokens above, light
   when the phone asks. Every rule names .guest, so Placement's pages keep the look above. */
.guest {
  --g-ground: #131A24;
  --g-ink: #EEF1F5;
  --g-muted: #A6B5C5;
  --g-link: #8DB4EA;
  --g-line: #828E9B;
  --g-done: #A6B5C5;
  --g-later: #3A4558;
  --g-bright: #167BFF;
  background-color: var(--g-ground);
  color: var(--g-ink);
}

@media (prefers-color-scheme: light) {
  .guest {
    --g-ground: #EEF1F5;
    --g-ink: #2F3038;
    --g-muted: #565964;
    --g-link: #2F5E9E;
    --g-line: #7D8897;
    --g-done: #2F3038;
    --g-later: #C9D2DC;
  }
}

.guest a {
  color: var(--g-link);
}

/* The phone's own sans for headings, fields and buttons, in sentence case. */
.guest h1, .guest h2, .guest input, .guest button {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

.guest .muted {
  color: var(--g-muted);
}

/* The stage bar: a segment per stage, done ones solid, the current one bright, the rest faint, the words below. */
.guest .stage {
  background-color: transparent;
  padding: 0;
}

.guest .stage ol {
  gap: 6px;
  color: var(--g-muted);
}

.guest .stage li {
  border-top: none;
  padding-top: 0;
}

.guest .stage li::before {
  content: "";
  display: block;
  height: 6px;
  margin-bottom: 6px;
  border-radius: 3px;
  background-color: var(--g-later);
}

.guest .stage li:has(~ [aria-current="step"])::before {
  background-color: var(--g-done);
}

.guest .stage li[aria-current="step"] {
  color: var(--g-ink);
  font-weight: 800;
}

.guest .stage li[aria-current="step"]::before {
  background-color: var(--g-bright);
}

/* The key card: the room number as the hero, over the Knot Normal art (its URL is --art, from the profile's `[event] hero_art`). The
   hero looks the same in both schemes, and falls back to slate with no art. */
.guest .sleeve {
  border-radius: 22px;
  padding: 16px;
}

.guest .sleeve:not(:has(.hero)) {
  border: 2px dashed var(--g-ink);
}

.guest .hero {
  margin: -16px -16px 12px;
  padding: 22px 22px 18px;
  border-radius: 22px 22px 0 0;
  background-color: #49638A;
  background-image: linear-gradient(90deg, #49638A 0%, rgba(73, 99, 138, 0.92) 42%, rgba(73, 99, 138, 0.38) 100%), var(--art);
  background-size: auto, auto 150%;
  background-position: 0 0, left 165px center;
  background-repeat: no-repeat;
  background-blend-mode: normal, luminosity;
  color: #E6EBF2;
}

.guest .hero p {
  margin: 0;
}

.guest .hero .hotel {
  color: #D6E2F0;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.guest .hero .roomno {
  margin: 6px 0 14px;
  color: #FFFFFF;
  font-size: 96px;
  line-height: 0.95;
  text-shadow: 0 2px 14px rgba(30, 40, 60, 0.35);
}

.guest .hero .chip {
  border-color: #A6B5C5;
  background-color: rgba(73, 99, 138, 0.85);
  margin: 0 4px 8px 0;
}

/* White on the mock's #167bff is 3.95:1, so the type chip is a deeper blue that reaches 4.5:1. */
.guest .hero .chip.type {
  border-color: #1268E0;
  background-color: #1268E0;
  color: #FFFFFF;
  font-weight: 600;
}

.guest .roomno.pending {
  margin-bottom: 8px;
  color: var(--g-ink);
  font-size: 34px;
  text-transform: none;
}

.guest .chip {
  border: 1.5px solid var(--g-line);
  padding: 5px 11px;
  font-size: 14px;
}

.guest .perf {
  border-top-color: var(--g-line);
}

.guest .why {
  border-left-color: var(--g-bright);
}

.guest .why.view-only {
  border-left-color: var(--g-muted);
}

/* Swaps: a card per room, its number large. */
.guest .choice, .guest .request {
  border-radius: 18px;
}

.guest .choice .roomno {
  font-size: 34px;
}

.guest .switcher a[aria-current] {
  color: var(--g-ink);
}

/* Fields and buttons: rounded, and 44px or taller for a thumb. */
.guest input, .guest textarea {
  min-height: 44px;
  border: 1.5px solid var(--g-line);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--g-ink);
}

.guest button, .guest a.button {
  min-height: 48px;
  border-radius: 14px;
  background-color: #2F5E9E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

.guest .tabs {
  border-top-color: var(--g-line);
}

.guest .tabs a {
  color: var(--g-muted);
}

.guest .tabs a[aria-current="page"] {
  color: var(--g-ink);
}

/* What's on (RM2-R15): a row per room. */
.guest .won {
  border-top: 1px solid var(--g-line);
  padding: 8px 0;
}

/* The room message editor (room_message_editor.html), after the mock's editorHtml: each checkbox and radio its own
   small size on its words' line, out of the page-wide input rules, and the text field the form's width. */
.guest .room-message fieldset {
  margin: 12px 0 0;
  padding: 0;
  border: none;
}

.guest .room-message label {
  display: block;
  margin-top: 8px;
}

.guest .room-message input[type="checkbox"], .guest .room-message input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0 6px 0 0;
  padding: 0;
  vertical-align: middle;
}

.guest .room-message textarea {
  display: block;
  min-height: 76px;
  margin-top: 4px;
  font: inherit;
}

/* A room message's text (room_message.html) stays in its box however long it is or however many marks it stacks. */
.guest .posted .said {
  margin: 0;
  overflow-wrap: anywhere;
  overflow: clip;
}

.guest a.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 12px 16px;
  text-decoration: none;
}