/* Imagine it in your room — the optional AI add-on.

   One full-screen dialog in black and white, dressed as the Mercedes-Benz
   pages dress a model: a black bar, the steps in the white segmented switch
   (the current one lit black), the room and the painting shown on a black
   showroom stage, and a white sheet beside it (or, on a telephone, rising
   over it) where the patron reads and chooses. Headlines and big numbers are
   in the narrow serif; everything else is in the plain sans. Black cards carry
   the offers and the actions, light-grey tiles the choices, and white spec
   cards the measurements. There is no colour of the site's own in here: the
   paintings, the rooms and the room's palette keep theirs.

   Everything here is scoped to .room, and every token is read with a
   fallback, so the dialog looks the same whether or not the V2 shell's
   stylesheet has defined it. The shell's tokens win wherever they exist.
   Each rule begins with ".room " for a second reason: the dialog hangs off
   body.v2, and the shell's element rules (".v2 p" and the like) would
   otherwise outrank a single class and put their margins and colours in. */

.room {
  --rm-ink: var(--ink, #000);
  --rm-paper: var(--paper, #fff);
  --rm-g50: var(--g50, #f8f8f8);
  --rm-g100: var(--g100, #f4f4f4);
  --rm-g150: var(--g150, #ececec);
  --rm-g200: var(--g200, #e0e0e0);
  --rm-g300: var(--g300, #c8c8c8);
  --rm-g500: var(--g500, #767676);
  --rm-g600: var(--g600, #5c5c5c);
  --rm-g700: var(--g700, #3c3c3c);
  --rm-g800: var(--g800, #262626);
  --rm-g900: var(--g900, #141414);
  --rm-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --rm-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --rm-deva: var(--f-deva, "Tiro Devanagari Hindi", "Nirmala UI", sans-serif);
  --rm-card: var(--r-card, 12px);
  --rm-tile: var(--r-tile, 8px);
  --rm-pill: var(--r-pill, 999px);
  --rm-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --rm-panel: clamp(380px, 31vw, 468px);
  /* The focus ring follows the ground it sits on: white on black, black on
     white. Each ground below sets its own. */
  --rm-focus: #fff;
}

/* While the dialog is open the page behind it stays where it was. The site
   normally reserves the scrollbar's gutter (base.css), and a desktop browser
   with classic scrollbars would go on reserving it here: a blank white strip
   down the right-hand edge, outside the dialog and its backdrop alike. The
   gutter is given up for as long as the dialog is open instead. The page
   behind reflows by the width of a scrollbar, but the dialog covers all of
   it, and it reflows back before it is seen again. */
html.room-lock {
  overflow: hidden;
  scrollbar-gutter: auto;
}

/* Sized to the whole window, scrollbar gutter included, so no strip of the
   page shows down the right-hand edge. */
dialog.room {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--rm-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

dialog.room[open] { display: block; animation: room-in 0.42s var(--rm-ease); }
dialog.room::backdrop { background: rgba(0, 0, 0, 0.82); }

@keyframes room-in {
  from { opacity: 0; transform: translateY(14px); }
}

.room *,
.room *::before,
.room *::after { box-sizing: border-box; }

/* The page's own stylesheets give sections generous padding and hidden
   things no special treatment; neither is wanted in here. */
.room [hidden] { display: none !important; }
.room li { margin: 0; }

.room .hi { font-family: var(--rm-deva); font-weight: 400; }

.room .sr-only,
.room .room__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The file inputs are real and reachable by script, but never seen: the
   buttons in the panel speak for them. They are not display:none, which some
   telephones refuse to open. */
.room .room__file {
  position: absolute;
  top: 0;              /* inside the dialog, which would otherwise be a pixel too tall */
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.room button { font-family: inherit; }

.room :focus-visible {
  outline: 2px solid var(--rm-focus);
  outline-offset: 3px;
}

.room .room__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

/* ---------- the black bar ---------- */

.room .room__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  height: 76px;
  padding: 0 16px 0 22px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.room .room__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.room .room__mark {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.room .room__title {
  margin: 0;
  font: 600 15px/1.2 var(--rm-sans);
  letter-spacing: -0.006em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room .room__title .hi {
  margin-left: 8px;
  font-size: 14px;
  color: var(--rm-g300);
}

/* The site's add-on capsule, in its outline dress for the black bar. */
.room .addon-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--rm-pill);
  background: transparent;
  color: #fff;
  font: 500 11px/1 var(--rm-sans);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.room .addon-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* The steps, as the Mercedes brand switch: one white capsule with a hairline
   edge, the current segment lit black. Roman numerals in the serif. */
.room .room__steps {
  --rm-focus: #000;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  list-style: none;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
  background: #fff;
}

/* Where a step shows only its numeral (a tablet or a telephone held across)
   it is still a finger wide. */
.room .room__steps button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 500 13.5px/1 var(--rm-sans);
  letter-spacing: -0.003em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--rm-ease), color 0.25s var(--rm-ease);
}

.room .room__steps button:hover:not(:disabled):not([aria-current="step"]) { background: var(--rm-g100); }

.room .room__steps button:focus-visible {
  outline-offset: 1px;
  box-shadow: inset 0 0 0 2px #fff;
}

.room .room__rn {
  font: 400 18px/1 var(--rm-serif);
  letter-spacing: 0.02em;
}

.room .room__steps button[aria-current="step"] {
  background: var(--rm-g900);
  color: #fff;
}

/* In the lit segment a single "I" in the serif would read as a rule, so a
   point sets the numeral off from the step's name. It is not read aloud. */
.room .room__steps button[aria-current="step"] .room__rn::after {
  content: "\00b7";
  content: "\00b7" / "";
  margin-left: 7px;
  font: 500 13.5px/1 var(--rm-sans);
  color: var(--rm-g500);
}

.room .room__steps button:disabled { color: var(--rm-g300); cursor: default; }
.room .room__steps button[aria-current="step"]:disabled { background: var(--rm-g700); color: #fff; }

.room .room__close {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: transform 0.25s var(--rm-ease);
}

.room .room__close:hover { transform: rotate(90deg); }

.room .room__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---------- the two halves ---------- */

.room .room__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rm-panel);
  min-height: 0;
}

/* ---------- the stage: showroom black under a cool white spot ---------- */

.room .room__stage {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(255, 255, 255, 0.085), transparent 72%),
    radial-gradient(120% 70% at 50% 115%, rgba(0, 0, 0, 0.7), transparent 60%),
    #000;
}

.room .room__view {
  position: absolute;
  inset: 64px 36px 62px;
  display: grid;
  place-items: center;
}

/* I — the painting alone, in the spot, inside a white hairline */
.room .room__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.room .room__artbox {
  position: relative;
  display: block;
  line-height: 0;
}

.room .room__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 560px;          /* refined by the script to the stage's size */
  max-height: 60vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.7)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity 0.5s var(--rm-ease), transform 0.7s var(--rm-ease);
}

.room .room__art.is-in img { opacity: 1; transform: none; }

/* A picture that has not arrived leaves a line in its place, inside the same
   hairline. Elsewhere in the dialog a missing picture simply is not drawn. */
.room .room__artnone { display: none; }
.room img.is-missing { visibility: hidden; }
.room .room__art.is-missing img { display: none; }
.room .room__art.is-missing .room__artbox::after { content: none; }

.room .room__art.is-missing .room__artnone {
  display: block;
  width: min(250px, 58vw);
  padding: 46px 6px;
  font: 400 14px/1.5 var(--rm-sans);
  color: var(--rm-g300);
  text-align: center;
}

/* The floor under the spot, where the painting's shadow falls. */
.room .room__artbox::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -30px;
  height: 30px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent);
}

/* A grey hairline round the painting with white corners, as a gallery
   marks the place a work hangs. */
.room .room__gframe {
  position: absolute;
  inset: -34px -40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.room .room__gframe i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid #fff;
}

.room .room__gframe i:nth-child(1) { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.room .room__gframe i:nth-child(2) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.room .room__gframe i:nth-child(3) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.room .room__gframe i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* II — no room yet */
.room .room__blank {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 440px;
  text-align: center;
  color: var(--rm-g300);
}

.room .room__blankfig {
  position: relative;
  display: block;
  width: min(380px, 78%);
}

.room .room__blankart {
  position: absolute;
  left: 39%;
  top: 13.5%;
  width: 22%;
  height: 31%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}

.room .room__blank svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room .room__blank .b-wall { stroke: rgba(255, 255, 255, 0.16); fill: rgba(255, 255, 255, 0.03); }
.room .room__blank .b-art { stroke: #fff; stroke-dasharray: 5 5; fill: rgba(255, 255, 255, 0.06); }
.room .room__blank .b-dim { stroke: #fff; stroke-width: 1.6; }

.room .room__blank p { margin: 0; font: 400 14px/1.5 var(--rm-sans); }

.room .room__blank strong {
  display: block;
  margin-bottom: 6px;
  font: 400 30px/1.05 var(--rm-serif);
  color: #fff;
}

/* III and IV — the room itself */
.room .room__scene {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  user-select: none;
  -webkit-user-select: none;
}

.room .room__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;             /* the box already has the photograph's proportions */
  pointer-events: none;
  -webkit-user-drag: none;
}

.room .room__ovl,
.room .room__marks {
  position: absolute;
  inset: 0;
}

.room .room__marks { pointer-events: none; }

.room .room__scene.is-manual { cursor: crosshair; touch-action: none; }

.room .room__piece {
  position: absolute;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 var(--sy, 6px) var(--sb, 12px) rgba(0, 0, 0, var(--sa, 0.4)));
}

.room .room__piece[hidden] { display: none; }
.room .room__piece canvas { display: block; width: 100%; height: 100%; }
.room .room__piece:focus { outline: none; }

/* White, black, white: a ring that shows on a pale wall and a dark one. */
.room .room__piece:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #fff;
}

.room .room__scene.is-dragging .room__piece { cursor: grabbing; }
.room .room__piece.is-in { animation: room-hang 0.55s var(--rm-ease); }
/* The outline that marks the place of a picture not yet arrived casts no shadow. */
.room .room__piece.is-missing { filter: none; }

@keyframes room-hang {
  from { opacity: 0; transform: translateY(-8px); }
}

/* What the helper found: the open wall dashed in white, the furniture in a
   solid white line with a black edge. */
.room .room__box { position: absolute; border-radius: 3px; }

.room .room__box--wall {
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.room .room__box--anchor {
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.room .room__box span {
  position: absolute;
  padding: 5px 10px;
  border-radius: var(--rm-pill);
  font: 600 11px/1.2 var(--rm-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* The wall's label keeps inside its box, and so inside the photograph: on a
   small screen, or with the open wall near an edge, it takes a second line
   rather than running off the picture. */
.room .room__box--wall span {
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  border-radius: 14px;
  background: #fff;
  color: #000;
  white-space: normal;
  text-wrap: balance;
}
.room .room__box--anchor span { left: -2px; top: -8px; transform: translateY(-100%); background: #000; color: #fff; }

/* The measuring line, drawn in the photograph's own pixels. */
.room .room__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.room .room__line line {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.room .room__line:not(.is-live) line { stroke-dasharray: 6 5; }

.room .room__handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

/* A white disc with a black ring and a black centre: a target that reads on
   any wall. */
.room .room__handle i {
  width: 24px;
  height: 24px;
  border: 2px solid #000;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 3px, #fff 3.5px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s var(--rm-ease);
}

.room .room__handle:hover i,
.room .room__scene.is-dragging .room__handle i { transform: scale(1.15); }
.room .room__handle:focus-visible { outline: none; }
.room .room__handle:focus-visible i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000, 0 3px 10px rgba(0, 0, 0, 0.55); }

.room .room__linelabel {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  padding: 6px 12px;
  border-radius: var(--rm-pill);
  background: #000;
  color: #fff;
  font: 600 12.5px/1.2 var(--rm-sans);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* The measuring pass: the room dims a shade and a band of white light
   travels down it, slowly. */
.room .room__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity 0.35s var(--rm-ease);
}

.room .room__scene.is-scanning .room__scan { opacity: 1; }

/* The band travels only while there is something being measured; the rest
   of the time it is held where it is (paused, not removed, so it does not
   jump back into view while the veil fades). */
.room .room__scene:not(.is-scanning) .room__scan i { animation-play-state: paused; }

.room .room__scan i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14) 82%, rgba(255, 255, 255, 0.92) 99%, transparent);
  animation: room-scan 2.4s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

@keyframes room-scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(290%); }
}

/* Caption, tools and scale on the stage */
.room .room__cap {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 12px/1.3 var(--rm-sans);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.room .room__capl:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.55);
}

/* The plate's own line is kept whole; a long note beside it gives way,
   wrapping to two lines at most, so it never climbs into the picture. */
.room .room__capl {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room .room__capr {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.room .room__tools {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.room .room__tools[hidden] { display: none; }

.room .room__tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--rm-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 500 13px/1 var(--rm-sans);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.room .room__tool:hover { border-color: rgba(255, 255, 255, 0.7); }
.room .room__tool[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.room .room__tool[aria-pressed="true"]:focus-visible { outline-color: #fff; }

.room .room__tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.room .room__ruler {
  position: absolute;
  left: 36px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font: 500 11.5px/1 var(--rm-sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.room .room__ruler[hidden] { display: none; }

.room .room__ruler i {
  display: block;
  height: 8px;
  border: 1.5px solid #fff;
  border-top: 0;
}

/* ---------- the white sheet ---------- */

/* One column, exactly as wide as the sheet: the foot's two pills keep their
   words on one line, and without this a pair too long for a narrow sheet
   would widen the column and carry the whole sheet past the window's edge. */
.room .room__panel {
  --rm-focus: #000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0;
  background: var(--rm-paper);
  color: var(--rm-ink);
}

.room .room__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px clamp(24px, 2.5vw, 36px) 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.room .room__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rm-g150);
  background: var(--rm-paper);
}

.room .room__foot .rbtn { white-space: nowrap; }

/* Head of each step: the numeral, a hairline, the Hindi name; then the
   serif headline and a plain lede under it. */
.room .room__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--rm-g600);
}

.room .room__eyrn { font: 400 18px/1 var(--rm-serif); color: #000; }

.room .room__lead {
  flex: 0 0 28px;
  height: 0;
  border-top: 1px solid var(--rm-g300);
}

.room .room__eyebrow .hi { font-size: 14px; color: var(--rm-g600); }

.room .room__h {
  margin: 0 0 12px;
  font: 400 clamp(40px, 3.3vw, 52px)/1.02 var(--rm-serif);
  letter-spacing: -0.005em;
  color: #000;
  outline: none;
}

.room .room__lede {
  margin: 0 0 26px;
  font: 400 15px/1.6 var(--rm-sans);
  color: var(--rm-g700);
}

.room .room__sub {
  margin: 30px 0 14px;
  font: 400 26px/1.1 var(--rm-serif);
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}

.room .room__quiet { margin: 0 0 16px; color: var(--rm-g600); font: 400 14px/1.5 var(--rm-sans); }

/* Black cards on white, as the Mercedes pages set their offers. */
.room .room__card {
  margin: 0 0 18px;
  padding: 24px 22px 22px;
  border-radius: var(--rm-card);
}

.room .room__card--night {
  --rm-focus: #fff;
  background: #000;
  color: #fff;
}

.room .room__k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 600 11px/1.2 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g300);
}

.room .room__k svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* The card's title, as Mercedes titles its black cards: the serif in
   capitals. A sentence stays a sentence. */
.room .room__big {
  margin: 0 0 8px;
  font: 400 30px/1.02 var(--rm-serif);
  letter-spacing: 0.005em;
  color: #fff;
}

.room .room__card--night .room__big { text-transform: uppercase; }

.room .room__v {
  margin: 0;
  font: 400 14px/1.55 var(--rm-sans);
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- buttons: pills ---------- */

.room .rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--rm-pill);
  font: 600 15px/1.1 var(--rm-sans);
  letter-spacing: -0.003em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--rm-ease), color 0.2s var(--rm-ease), border-color 0.2s var(--rm-ease), transform 0.2s var(--rm-ease);
}

.room .rbtn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room .rbtn:active:not(:disabled) { transform: scale(0.98); }
/* A pill that cannot be pressed yet goes quiet grey, as Mercedes greys an
   unavailable action, rather than fading its own colours. */
.room .rbtn:disabled {
  border-color: transparent;
  background: var(--rm-g150);
  color: var(--rm-g500);
  box-shadow: none;
  cursor: not-allowed;
}

.room .room__card--night .rbtn:disabled { background: var(--rm-g800); color: var(--rm-g500); }

/* The main action of a step: black on white, and white inside a black card. */
.room .rbtn--primary,
.room .rbtn--ink { background: #000; color: #fff; }
.room .rbtn--primary:hover:not(:disabled),
.room .rbtn--ink:hover:not(:disabled) { background: var(--rm-g800); }
.room .room__card--night .rbtn--primary { background: #fff; color: #000; }
.room .room__card--night .rbtn--primary:hover:not(:disabled) { background: var(--rm-g150); }
.room .rbtn--light { background: #fff; color: #000; }
.room .rbtn--light:hover { background: var(--rm-g150); }
.room .rbtn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.room .rbtn--ghost:hover { border-color: #fff; }
.room .rbtn--line { border-color: var(--rm-g500); color: #000; background: #fff; }
.room .rbtn--line:hover:not(:disabled) { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.room .rbtn--wide { width: 100%; }

.room .room__link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: 600 14px/1.3 var(--rm-sans);
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.room .room__link:hover { text-decoration-thickness: 2px; }

.room .room__link--solo {
  display: block;
  min-height: 44px;
  margin: 2px auto 0;
  padding: 10px 8px;
}

.room .room__row { display: flex; flex-wrap: wrap; gap: 10px; }
.room .room__row > .rbtn { flex: 1 1 auto; }

/* ---------- I: choosing the painting ---------- */

/* The kind filter, as the segmented switch again, in small. */
.room .room__seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 18px;
  padding: 2px;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
  background: #fff;
}

.room .room__seg button {
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 500 14px/1 var(--rm-sans);
  cursor: pointer;
}

.room .room__seg button:hover:not([aria-pressed="true"]) { background: var(--rm-g100); }
.room .room__seg button[aria-pressed="true"] { background: var(--rm-g900); color: #fff; }
.room .room__seg button:focus-visible { outline-offset: 1px; box-shadow: inset 0 0 0 2px #fff; }

/* The record as light-grey tiles, each with its picture. */
.room .room__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.room .room__thumbs button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.3;
  padding: 8px 7px 22px;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.25s var(--rm-ease);
}

.room .room__thumbs button:hover { background: var(--rm-g150); }

/* A framed oil arrives cut out of its background and a drawing as a white
   sheet: the soft shadow lifts both off the tile, and keeps the edge of a
   sheet in sight when its tile turns white. */
.room .room__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.26));
}

.room .room__thumbs button[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
}

.room .room__no {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  font: 600 10px/1 var(--rm-sans);
  letter-spacing: 0.06em;
  color: var(--rm-g600);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.room .room__thumbs button[aria-pressed="true"] .room__no { color: #000; }

/* A tile whose picture has not arrived keeps its number, set in the middle. */
.room .room__thumbs img.is-missing + .room__no {
  display: block;
  top: 50%;
  bottom: auto;
  font-size: 13px;
  transform: translateY(-50%);
}

.room .room__plate .room__big { font-size: 34px; }

.room .room__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.room .room__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--rm-pill);
  font: 600 10.5px/1 var(--rm-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.room .room__tagnote { font: 400 13px/1.4 var(--rm-sans); color: rgba(255, 255, 255, 0.66); }

/* ---------- II: the room ---------- */

.room .room__chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--rm-card);
  background: var(--rm-g100);
}

.room .room__chosen img {
  width: 44px;
  height: 54px;
  flex: none;
  padding: 3px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.room .room__chosen p { display: grid; flex: 1; min-width: 0; margin: 0; }
.room .room__chosen .room__k { margin: 0 0 4px; color: #000; }
.room .room__chosen .room__v { color: var(--rm-g700); font-size: 14px; }
.room .room__chosen .room__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

.room .room__upload { position: relative; transition: outline-color 0.2s; }
.room .room__upload.is-over { outline: 2px dashed #000; outline-offset: 4px; }

.room .room__upicon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
}

.room .room__upicon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.room .room__uprow { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* A telephone is offered its camera and its gallery; a desktop, one chooser. */
.room .room__onlytouch { display: none; }

@media (pointer: coarse) {
  .room .room__onlytouch { display: inline-flex; }
  .room .room__onlyfine { display: none; }
}

/* The sample rooms, as Mercedes shows its ranges: a light-grey tile, the
   picture above and a serif name under it. */
.room .room__samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.room .room__samples button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.room .room__samples button:hover { background: var(--rm-g150); }

.room .room__samples img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--rm-ease), opacity 0.3s;
}

.room .room__samples button:hover img { transform: scale(1.03); }

.room .room__samples button > span {
  display: block;
  padding: 10px 12px 12px;
  font: 400 20px/1.1 var(--rm-serif);
}

.room .room__samples .hi { display: block; margin-top: 3px; color: var(--rm-g600); font-size: 12.5px; line-height: 1.3; }
.room .room__samples button[aria-pressed="true"] { background: #fff; }

/* The chosen room is ringed in black over its picture as well as its name. */
.room .room__samples button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #000;
  border-radius: inherit;
  pointer-events: none;
}

.room .room__privacy,
.room .room__fine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font: 400 13px/1.55 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__privacy svg,
.room .room__fine svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
}

.room .room__fine {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rm-g200);
  font-size: 12px;
}

/* A quiet note, on a light-grey tile. */
.room .room__aside {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  font: 500 13.5px/1.5 var(--rm-sans);
  color: #000;
}

.room .room__aside svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Something that needs reading before going on: a white card with a firm
   black edge and a round mark, as Mercedes sets its notices. */
.room .room__warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 2px solid #000;
  border-radius: var(--rm-card);
  background: #fff;
  color: #000;
  font: 500 14px/1.5 var(--rm-sans);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.45);
}

.room .room__warn::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 700 12px/1 var(--rm-sans);
}

/* ---------- III: measuring ---------- */

.room .room__aicta .room__big { font-size: 25px; line-height: 1.12; margin-bottom: 20px; text-transform: none; }
.room .room__aicta .rbtn { margin-bottom: 16px; min-height: 52px; font-size: 15px; }

.room .room__bar2 {
  height: 2px;
  margin: 2px 0 22px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.room .room__bar2 i {
  display: block;
  width: 38%;
  height: 100%;
  background: #fff;
  animation: room-bar 1.5s var(--rm-ease) infinite;
}

@keyframes room-bar {
  from { transform: translateX(-100%); }
  to { transform: translateX(270%); }
}

.room .room__ticks {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  font: 500 14px/1.3 var(--rm-sans);
  color: #fff;
}

.room .room__ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.32;
  animation: room-tick 4.5s linear infinite;
}

.room .room__ticks li:nth-child(2) { animation-delay: 1.5s; }
.room .room__ticks li:nth-child(3) { animation-delay: 3s; }

.room .room__ticks li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

@keyframes room-tick {
  0% { opacity: 0.32; }
  8%, 34% { opacity: 1; }
  44%, 100% { opacity: 0.32; }
}

/* The measurement, as a white spec card. */
.room .room__card--night.room__result {
  --rm-focus: #000;
  border: 1px solid var(--rm-g200);
  background: #fff;
  color: #000;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.35);
}

.room .room__result .room__k { color: var(--rm-g600); }
.room .room__result .room__v { color: var(--rm-g700); }

.room .room__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 8px 0 16px;
}

.room .room__facts div { padding-top: 10px; border-top: 1px solid var(--rm-g200); }

.room .room__facts dt {
  font: 500 10.5px/1.2 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g600);
}

.room .room__facts dd { margin: 5px 0 0; font: 400 23px/1.1 var(--rm-serif); color: #000; }

.room .room__palette {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font: 500 12.5px/1 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__palette i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.room .room__palette span { margin-left: 6px; }

.room .room__conf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 500 12.5px/1 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__conf b {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--rm-g150);
}

.room .room__conf b i { display: block; height: 100%; background: #000; }
.room .room__conf em { font-style: normal; color: #000; font-variant-numeric: tabular-nums; }

.room .room__how {
  margin: 0 0 18px;
  padding-left: 22px;
  font: 400 15px/1.55 var(--rm-sans);
  color: var(--rm-g700);
}

.room .room__how li { margin-bottom: 6px; padding-left: 4px; }
.room .room__how li::marker { font: 400 18px var(--rm-serif); color: #000; }
.room .room__how b { font-weight: 600; color: #000; }

/* What the line measures: light-grey tiles, the chosen one black. */
.room .room__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.room .room__presets button {
  display: flex;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  min-height: 56px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  color: #000;
  font: 500 14px/1.2 var(--rm-sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.room .room__presets button:hover { background: var(--rm-g150); }

.room .room__presets em {
  font: normal 400 18px/1 var(--rm-serif);
  color: var(--rm-g600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.room .room__presets button[aria-checked="true"] { background: #000; color: #fff; }
.room .room__presets button[aria-checked="true"] em { color: var(--rm-g300); }
.room .room__presets button[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

.room .room__custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 18px;
}

.room .room__custom label[for] { grid-column: 1 / -1; font: 600 13px/1.2 var(--rm-sans); color: #000; }

.room .room__custom input[type="number"] {
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rm-g500);
  border-radius: var(--rm-tile);
  background: #fff;
  color: #000;
  font: 500 18px/1 var(--rm-sans);
  font-variant-numeric: tabular-nums;
}

.room .room__custom input[type="number"]:hover { border-color: #000; }
.room .room__custom input[type="number"]:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-color: #000; }

.room .room__unit {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 3px;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
}

.room .room__unit button {
  min-width: 52px;
  height: 44px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 600 14px/1 var(--rm-sans);
  cursor: pointer;
}

.room .room__unit button[aria-pressed="true"] { background: var(--rm-g900); color: #fff; }
.room .room__unit button:focus-visible { outline-offset: 1px; box-shadow: inset 0 0 0 2px #fff; }

.room .room__check {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 14px/1.3 var(--rm-sans);
  cursor: pointer;
}

.room .room__check input { width: 20px; height: 20px; margin: 0; accent-color: #000; }

/* ---------- IV: on the wall ---------- */

.room .room__advice { padding: 24px 22px 22px; }

.room .room__size {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0 14px;
  font: 400 64px/0.95 var(--rm-serif);
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.room .room__size small {
  font: 600 11px/1 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g300);
}

.room .room__reason { margin: 0; font: 400 14.5px/1.6 var(--rm-sans); color: rgba(255, 255, 255, 0.84); }

/* The standard sizes, as white spec tiles; the one on the wall is black. */
.room .room__sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding-top: 10px;
}

.room .room__sizes button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--rm-g200);
  border-radius: var(--rm-tile);
  background: #fff;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.room .room__sizes button:hover { border-color: #000; }

.room .room__sz {
  font: 400 23px/1 var(--rm-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* How a size fits is told by a word and a mark, never by colour alone:
   a full dot for ideal, a half dot for large, an open ring for small, and a
   struck ring with the size greyed for too large. */
.room .room__fit {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--rm-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-g600);
}

.room .room__fit i {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.room .room__sizes .fit--ideal .room__fit { color: #000; }
.room .room__sizes .fit--ideal .room__fit i { background: currentColor; }
.room .room__sizes .fit--large .room__fit i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.room .room__sizes .fit--too-large .room__fit { color: var(--rm-g500); }
.room .room__sizes .fit--too-large .room__fit i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  margin-left: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
}
.room .room__sizes .fit--too-large .room__sz { color: var(--rm-g500); }

.room .room__sizes button[aria-checked="true"] { background: #000; border-color: #000; color: #fff; }
.room .room__sizes button[aria-checked="true"] .room__sz { color: #fff; }
.room .room__sizes button[aria-checked="true"] .room__fit { color: var(--rm-g300); }
.room .room__sizes button[aria-checked="true"].fit--ideal .room__fit { color: #fff; }
.room .room__sizes button[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

.room .room__sizes .is-best::after {
  content: "Suggested";
  position: absolute;
  top: -10px;
  right: 8px;
  padding: 4px 8px;
  border: 1px solid #000;
  border-radius: var(--rm-pill);
  background: #fff;
  color: #000;
  font: 700 9px/1 var(--rm-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room .room__allow { margin: 0 0 22px; font: 400 12.5px/1.55 var(--rm-sans); color: var(--rm-g600); }

.room .room__acts { display: grid; gap: 10px; margin: 0 0 18px; }
.room .room__acts .rbtn--wide { min-height: 54px; font-size: 15.5px; }

.room .room__meas { margin: 0; font: 400 13px/1.6 var(--rm-sans); color: var(--rm-g600); }
/* The link inside the sentence is given a finger's height to be pressed in,
   the extra taken back by its margins so the line itself does not move. */
.room .room__meas .room__link {
  display: inline-block;
  padding: 14px 0;
  margin: -10px 0;
  font-size: 13px;
}

/* ---------- desktop: a little more room to breathe ---------- */

@media (min-width: 861px) {
  .room .room__foot .rbtn { min-width: 132px; }
}

/* Short of a wide desktop the bar has no room for two equal sides and a
   centre: the title keeps its own width at the left, whole, and the switch
   is centred in what remains. */
@media (min-width: 861px) and (max-width: 1439px) {
  .room .room__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .room .room__steps { justify-self: center; }
}

/* A small desktop or a tablet held across: the sheet is at its narrowest,
   so the title's Hindi stands down and the kind filter tightens. */
@media (min-width: 861px) and (max-width: 1199px) {
  .room .room__title .hi { display: none; }
  .room .room__steps button { padding: 0 16px; }
  .room .room__seg { flex-wrap: nowrap; }
  .room .room__seg button { padding: 0 13px; }
}

/* Short of 1024px the bar has no room for four named steps between the
   title and the close, so the switch names only the current step. The other
   names are kept in the page, out of sight, for a screen reader, which
   would otherwise hear those buttons as bare numerals. */
@media (max-width: 1023px) {
  .room .room__steps button:not([aria-current="step"]) .room__sl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The way on fills the bar, as the full-width pill does on Mercedes; Back
   keeps to its own size beside it. */
.room .room__foot .rbtn[data-act="next"],
.room .room__foot .rbtn[data-act="close"] { flex: 1 1 auto; }

/* "Next: see it on the wall" gives way to Done in the very same place. A
   quick second tap meant for Next would otherwise land on Done and close the
   room just as the painting is hung, so Done waits half a second before it
   listens to a finger or a mouse. The keyboard is not held back. This is not
   movement, so it stays when motion is reduced. */
.room .room__foot .rbtn[data-act="close"] { animation: room-arm 0.5s; }

@keyframes room-arm {
  from, to { pointer-events: none; }
}

/* ---------- telephones: the room above, the white sheet over it ---------- */

@media (max-width: 860px) {
  .room .room__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 58px auto;
    row-gap: 0;
    height: auto;
    padding: 0 12px 12px 16px;
  }

  .room .room__brand { grid-column: 1; grid-row: 1; gap: 10px; }
  .room .room__mark { width: 28px; height: 28px; }
  .room .room__title { font-size: 15px; }
  .room .room__title .hi { display: none; }
  .room .addon-badge { height: 22px; padding: 0 9px; font-size: 10.5px; }

  .room .room__close { grid-column: 2; grid-row: 1; }

  .room .room__steps { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .room .room__steps li { flex: 1 1 0; min-width: 0; }
  .room .room__steps li:has([aria-current="step"]) { flex: 2.8 1 0; }

  .room .room__steps button {
    width: 100%;
    justify-content: center;
    gap: 7px;
    padding: 0 6px;
    font-size: 13.5px;
  }

  .room .room__rn { font-size: 18px; }

  .room .room__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(230px, 40%) minmax(0, 1fr);
  }

  .room .room__view { inset: 46px 16px 48px; }
  .room .room__stage[data-mode="art"] .room__view { inset: 28px 16px 46px; }

  .room .room__gframe { inset: -14px -18px; }
  .room .room__gframe i { width: 11px; height: 11px; }
  .room .room__blank { gap: 14px; padding: 0 12px; }
  .room .room__blankfig { width: min(260px, 70%); }
  .room .room__blank strong { font-size: 24px; }
  .room .room__blank p { font-size: 13px; }

  .room .room__cap { left: 20px; right: 20px; bottom: 30px; font-size: 11.5px; }
  .room .room__capr { display: none; }
  .room .room__tools { top: 8px; right: 12px; gap: 8px; }
  .room .room__tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .room .room__tool span { display: none; }
  .room .room__ruler { left: 20px; top: 18px; }

  .room .room__panel {
    position: relative;
    z-index: 1;
    margin-top: -16px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }

  .room .room__scroll { padding: 26px 20px 24px; }
  .room .room__h { font-size: 40px; margin-bottom: 10px; }
  .room .room__lede { font-size: 15px; margin-bottom: 22px; }
  .room .room__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .room .room__foot .rbtn { min-height: 48px; padding: 0 20px; }
  .room .room__card { padding: 22px 20px 20px; }
  .room .room__size { font-size: 56px; }
  .room .room__uprow .rbtn { flex: 1 1 100%; }
  .room .room__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .room .room__thumbs button { aspect-ratio: 4 / 5; padding: 6px 5px; }
  .room .room__no { display: none; }

  /* The stage takes the height each step needs: little while there is no
     room to show, most when the painting is on the wall. */
  .room[data-stage="blank"] .room__body { grid-template-rows: minmax(160px, 24%) minmax(0, 1fr); }
  .room[data-stage="scene"] .room__body { grid-template-rows: minmax(250px, 44%) minmax(0, 1fr); }
  .room[data-stage="scene"][data-step="3"] .room__body { grid-template-rows: minmax(270px, 50%) minmax(0, 1fr); }
  .room[data-stage="blank"] .room__view { inset: 14px 16px 36px; }
  .room[data-stage="blank"] .room__blank { gap: 8px; }
  .room[data-stage="blank"] .room__blankfig { width: min(150px, 40%); }
  .room[data-stage="blank"] .room__blank strong { font-size: 21px; margin: 0; }
  .room[data-stage="blank"] .room__blank p span { display: none; }
  .room[data-stage="blank"] .room__cap { display: none; }

  /* Measuring by hand shows no scale bar and no tools above the room, so
     the photograph takes that strip too: the ends of the line are dragged
     with a thumb, and every pixel of picture helps. */
  .room .room__stage:has(.room__scene.is-manual) .room__view { inset: 14px 16px 48px; }
}

/* The bar's first row holds the mark, the title, the add-on capsule and the
   close, and the title is never cut short to make room for the others: as
   the screen narrows the mark gives way first (here), then the capsule
   tightens (389px), and on the very smallest telephones the capsule too
   stands down (343px). Each width is where the row stops fitting, with a
   few pixels in hand. */
@media (max-width: 424px) {
  .room .room__mark { display: none; }
}

@media (max-width: 400px) {
  /* The chosen plate: "Change" moves up beside the plate's number, so the
     medium and size below it have the whole width and a size is never split
     ("24 × 20" on one line, "in" on the next). */
  .room .room__chosen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }
  .room .room__chosen img { grid-row: 1 / span 2; }
  .room .room__chosen p { display: contents; }
  .room .room__chosen .room__k { grid-column: 2; grid-row: 1; align-self: last baseline; margin: 0; }
  .room .room__chosen .room__v { grid-column: 2 / -1; grid-row: 2; align-self: start; }

  /* The link sits on the number's line in a box of its own size, so its
     focus ring rings the word and not the size beneath it; the finger's
     44px is an invisible margin round it. */
  .room .room__chosen .room__link {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: last baseline;
    min-height: 0;
    padding: 2px 4px;
  }
  .room .room__chosen .room__link::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }
}

@media (max-width: 383px),
  (max-width: 860px) and (max-height: 520px) and (orientation: landscape),
  (min-width: 861px) and (max-width: 1439px) {
  /* Where the sheet is narrow (the narrowest telephones; a telephone, a
     tablet or a laptop whose sheet stands beside the room) Back becomes the
     round arrow of the Mercedes carousels, so the way on keeps its words on
     one line and inside the sheet: "Next: see it on the wall" beside a
     worded Back is wider than the sheet there. The word is still there for
     a screen reader. */
  .room .room__foot .rbtn[data-act="back"] {
    flex: none;
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
  }

  .room .room__foot .rbtn[data-act="back"] span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 389px) {
  .room .room__bar { column-gap: 10px; }
  .room .room__brand { gap: 8px; }
  .room .room__title { font-size: 14px; }
  .room .addon-badge { padding: 0 8px; font-size: 10px; letter-spacing: 0.01em; }
  .room .addon-badge::before { display: none; }
}

@media (max-width: 343px) {
  .room .addon-badge { display: none; }
  .room .room__foot .rbtn { padding: 0 16px; }
}

@media (max-width: 380px) {
  .room .room__h { font-size: 36px; }
  .room .room__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room .room__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room .room__presets button { padding: 8px 12px; }
  .room .room__seg button { padding: 0 13px; }
}

/* Short landscape screens: the room gets the height it needs. */
@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
  /* Side by side, one row, whatever the step: the per-step heights above
     are for a telephone held upright. */
  .room .room__body,
  .room[data-stage][data-step] .room__body {
    grid-template-columns: minmax(0, 1fr) minmax(332px, 46%);
    grid-template-rows: minmax(0, 1fr);
  }
  .room .room__panel { margin-top: 0; border-radius: 0; box-shadow: none; }

  /* Height is what is short, so the bar keeps to one row: the switch sits
     between the title and the close, naming only the current step. */
  .room .room__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 60px;
    column-gap: 14px;
    padding: 0 12px 0 16px;
  }
  .room .room__steps { grid-column: 2; grid-row: 1; width: auto; justify-self: center; }
  .room .room__steps li,
  .room .room__steps li:has([aria-current="step"]) { flex: none; }
  .room .room__steps button { width: auto; padding: 0 14px; }
  .room .room__close { grid-column: 3; }
}

/* On the smaller telephones held across, that one row has room for the
   title, the switch and the close, and for nothing more. */
@media (max-width: 740px) and (max-height: 520px) and (orientation: landscape) {
  .room .room__mark,
  .room .addon-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.room[open],
  .room .room__piece.is-in,
  .room .room__ticks li,
  .room .room__bar2 i { animation: none !important; }

  .room .room__ticks li { opacity: 1; }
  /* The painting neither fades nor rises: it is there when it has arrived,
     and the one before it is gone the moment another is chosen. */
  .room .room__art img { transition: none; transform: none; }
  .room .rbtn,
  .room .room__close,
  .room .room__thumbs button,
  .room .room__samples img { transition: none; }
  .room .room__close:hover,
  .room .room__samples button:hover img { transform: none; }

  /* The measuring pass holds still: a single white line across the room. */
  .room .room__scan i {
    top: 50%;
    height: 2px;
    background: #fff;
    animation: none;
  }
}