/* sonar-kutir — this demo in the Veydr Labs look. See kit.css for the shared --vl-* variables.
   Linked right after the demo's own css/tour.css, so rules of equal weight here win.
   Only the interface is restyled: the drawing, the paper, the hand-lettered titles and the 3D
   scene are the demo's content and are left alone.

   Where things sit, now that the kit bar has the top left (where the name pill used to be):
   - the name pill goes to the bottom row, opposite Full / Light: bottom left on wide screens,
     bottom centre on phones;
   - the m / ft-in switch stays top right, level with the kit bar; on phones, where the kit bar
     fills the first row and the lettered title of the opening sheet starts right under it, the
     switch goes to the bottom left;
   - room cards in a top corner start on the first free line under the bar (--vl-below), and
     cards in a bottom corner stand on the first free line above the bottom row (--sk-clear). */

:root {
  --sans: var(--vl-font);                 /* tour.css sets all its interface text from --sans */
  --sk-muted: #5f5e5a;                    /* the site's muted text on a light page */
  --sk-rule: rgba(11, 11, 11, 0.16);      /* the site's hairline on a light page */
  --sk-pill: 38px;                        /* height of the switches and the name pill */
  --sk-foot: 20px;                        /* how far the bottom row stands off the bottom edge */
  --sk-clear: calc(var(--sk-foot) + var(--sk-pill) + 10px);   /* first free line above that row */
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--vl-accent); color: var(--vl-on-accent); }

/* ---- units switch: top right, level with the kit bar ------------------------------------ */
.bar { top: var(--vl-top); left: auto; right: var(--vl-right); height: var(--vl-bar); padding: 0; justify-content: flex-end; }

/* ---- name pill: bottom left, a black pill like the kit bar (its lettering takes the text colour) */
.brand {
  position: fixed; left: var(--vl-left); bottom: var(--sk-foot);
  display: flex; align-items: center; height: var(--sk-pill); padding: 0 17px;
  border: 1px solid var(--vl-line); background: var(--vl-panel); color: var(--vl-white);
  -webkit-backdrop-filter: var(--vl-blur); backdrop-filter: var(--vl-blur);
}

/* ---- switches: a black pill track, the pressed side Vermilion -------------------------- */
.units, .tier {
  box-sizing: border-box; height: var(--sk-pill); padding: 4px; gap: 2px; align-items: stretch; overflow: visible;
  border: 1px solid var(--vl-line); background: var(--vl-panel);
  -webkit-backdrop-filter: var(--vl-blur); backdrop-filter: var(--vl-blur);
}
.units button, .tier button {
  min-width: 36px; padding: 0 13px; border-radius: 999px; color: var(--vl-white);
  font: 600 12.5px/1 var(--vl-font); letter-spacing: 0.01em;
  transition: color 0.4s var(--vl-ease), background-color 0.4s var(--vl-ease);
}
.units button:hover, .tier button:hover { color: var(--vl-accent); }
.units button[aria-pressed="true"], .tier button[aria-pressed="true"] { background: var(--vl-accent); color: var(--vl-on-accent); cursor: default; }
.units button:focus-visible, .tier button:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 2px; }
.tier { right: var(--vl-right); bottom: var(--sk-foot); }

/* ---- room card: one of the site's off-white surfaces ----------------------------------- */
.card {
  padding: 13px 13px 13px 18px; max-width: min(340px, calc(100vw - var(--vl-left) - var(--vl-right)));
  background: var(--vl-white); color: var(--vl-black); border: 1px solid var(--sk-rule); border-radius: 0;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.1), 0 18px 38px -14px rgba(11, 11, 11, 0.34);
}
.card[data-at="tl"] { top: var(--vl-below); left: var(--vl-left); }
.card[data-at="tr"] { top: var(--vl-below); right: var(--vl-right); }
.card[data-at="bl"] { left: var(--vl-left); bottom: var(--sk-clear); }
.card[data-at="br"] { right: var(--vl-right); bottom: var(--sk-clear); }
.card.open { padding-bottom: 17px; }

/* the "+" that opens the notes: a Vermilion disc */
.card-more {
  border: 0; background: var(--vl-accent); color: var(--vl-on-accent);
  transition: background-color 0.4s var(--vl-ease), color 0.4s var(--vl-ease);
}
.card-more span::before, .card-more span::after { height: 1.5px; }
.card-more:hover { background: var(--vl-black); color: var(--vl-white); }
.card-more:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 3px; }

/* the notes scroll inside the card before the card can reach the bar above or the bottom row below */
.card-notes { margin-top: 13px; padding-top: 14px; max-height: calc(100vh - 232px); border-top-color: var(--sk-rule); scrollbar-width: thin; scrollbar-color: rgba(11, 11, 11, 0.28) transparent; }
.card-notes:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 4px; }
.card-facts { gap: 8px 24px; margin-bottom: 14px; }
.card-facts dt, .note b { font: 550 10.5px/1.3 var(--vl-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-muted); }
.card-facts dd { margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; }
.note { margin-bottom: 12px; font-size: 13px; line-height: 1.5; color: var(--vl-black); }
.note b { margin-bottom: 4px; }
.card-notes > :last-child, .card-notes > :last-child .note { margin-bottom: 0; }
.card-swatches { margin-top: 6px; }
.card-swatches li { font-size: 11px; line-height: 1.3; color: var(--sk-muted); }
.chip { border-radius: 0; box-shadow: inset 0 0 0 1px var(--sk-rule); }

/* ---- hint and status: the site's small label -------------------------------------------- */
.hint, .status { font: 550 11px/1.3 var(--vl-font); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; text-align: center; color: var(--sk-muted); }
.hint::after { width: 1.5px; background: var(--vl-accent); opacity: 1; }
.status { bottom: 84px; }

/* ---- opening sheet: the lettered title and the line under it ---------------------------- */
/* The demo hangs both from the top of the plan as one block. Here each is placed on its own,
   in the same spots, from a number the demo already publishes (--ph: the plan's height on
   screen), so that on screens under 1200 px, where the centred title would run into the kit
   bar, the two can part:
   - the line of text keeps its place above the plan, but never rises into the bar's band;
   - the title keeps its place above that line; when that place would be in the bar's band, it
     moves onto the bar's own row, centred in the gap between the bar and the units switch
     (and shrinks to that gap if it must). */
.opening {
  --sk-half: 50vh;
  --sk-above: calc(var(--sk-half) - var(--ph, 0px) / 2);   /* the plan's top edge */
  --sk-title-h: 49.5px;                                    /* the title as drawn (30 px letters) */
  --sk-sub-h: 16px; --sk-gap: 30px; --sk-sub-gap: 12px;
  --sk-sub-own: calc(var(--sk-above) - var(--sk-gap) - var(--sk-sub-h));
  --sk-title-own: calc(var(--sk-sub-own) - var(--sk-sub-gap) - var(--sk-title-h));
}
@supports (height: 1dvh) { .opening { --sk-half: 50dvh; } }
.opening-head { position: static; transform: none; width: auto; }
.opening-title, .opening-sub { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; text-align: center; }
.opening-title { top: calc(var(--sk-title-own) + var(--sk-title-h) / 2); transform: translate(-50%, -50%); }   /* placed by its middle, so it stays centred if it has to shrink */
.opening-sub {
  top: var(--sk-sub-own); margin: 0;
  font: 550 11px/var(--sk-sub-h) var(--vl-font); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.16em; color: var(--sk-muted); text-wrap: balance;
}
@media (max-width: 1199px) {
  .opening-title { top: calc(max(var(--vl-below), var(--sk-title-own)) + var(--sk-title-h) / 2); }
  .opening-sub { top: max(var(--vl-below), var(--sk-sub-own)); }
}
/* an upright phone has no room beside the bar: if the bar ever sits lower (a notch), the line of text follows the title down */
@media (max-width: 639px) and (orientation: portrait) {
  .opening-sub { top: max(var(--sk-sub-own), calc(var(--vl-below) + var(--sk-title-h) + var(--sk-sub-gap))); }
}
@media (min-width: 640px) and (max-width: 1199px), (orientation: landscape) and (max-width: 1199px) {
  .opening {
    --sk-title-row: calc(var(--vl-top) + (var(--vl-bar) - var(--sk-title-h)) / 2);
    /* a switch: hugely positive when the title's own place is in the bar's band, hugely negative when not */
    --sk-tight: calc((var(--vl-below) - var(--sk-title-own)) * 9999);
    --sk-kit-end: calc(var(--vl-left) + 214px + 10.6 * clamp(17px, 1.5vw, 22px));   /* the bar's right edge: its width follows its type size */
    --sk-gap-l: calc(var(--sk-kit-end) + 12px);
    --sk-gap-r: calc(var(--vl-right) + 108px);                                        /* the units switch and a little air */
    --sk-gap-w: calc(100% - var(--sk-gap-l) - var(--sk-gap-r));
  }
  /* each is "the row's value when tight, else its own": max(a + min(0, tight), b + min(0, -tight)) */
  .opening-title {
    top: calc(max(calc(var(--sk-title-row) + min(0px, var(--sk-tight))), calc(var(--sk-title-own) + min(0px, -1 * var(--sk-tight)))) + var(--sk-title-h) / 2);
    left: max(calc(var(--sk-gap-l) + var(--sk-gap-w) / 2 + min(0px, var(--sk-tight))), calc(50% + min(0px, -1 * var(--sk-tight))));
    max-width: max(calc(var(--sk-gap-w) + min(0px, var(--sk-tight))), calc(92% + min(0px, -1 * var(--sk-tight))));
  }
}

/* ---- phones: the kit bar has the whole first row ---------------------------------------- */
@media (max-width: 720px) {
  :root { --sk-pill: 36px; --sk-foot: max(16px, env(safe-area-inset-bottom, 0px)); }
  /* the bottom row: units switch left, name pill centre, Full / Light right */
  .bar { top: auto; bottom: var(--sk-foot); left: var(--vl-left); right: auto; height: var(--sk-pill); }
  .brand { left: 50%; transform: translateX(-50%); padding: 0 14px; }
  .units button, .tier button { padding: 0 12px; font-size: 12px; }
  .hint { bottom: calc(var(--sk-clear) + 10px); }
  .status { bottom: calc(var(--sk-clear) + 66px); }
  .opening { --sk-kit-end: calc(var(--vl-left) + 306px); --sk-gap-r: var(--vl-right); }
}
/* a phone on its side: little room under the plan, so the hint's line is shorter */
@media (max-width: 720px) and (max-height: 480px) {
  .hint::after { height: 8px; margin-top: 5px; }
  .hint { bottom: calc(var(--sk-clear) + 2px); }
  .status { bottom: calc(var(--sk-clear) + 33px); }
}
@media (max-width: 639px) {
  .opening { --sk-title-h: 36.3px; --sk-sub-h: 14px; --sk-gap: 20px; --sk-sub-gap: 8px; }   /* the title is drawn with 22 px letters */
  .opening-sub { font-size: 10px; margin: 0; }
}
@media (max-width: 640px) {
  .card { padding: 9px 9px 9px 14px; }
  /* open: a strip under the kit bar (or above the bottom row), its notes as pages to swipe */
  .card.open { left: var(--vl-left); right: var(--vl-right); top: var(--vl-below); max-width: none; padding-bottom: 10px; }
  .card.open[data-at^="b"] { top: auto; bottom: var(--sk-clear); }
  .card-notes { margin-top: 10px; padding-top: 11px; max-height: none; }
  .card-facts { margin-bottom: 8px; }
  .card-facts dt, .note b { font-size: 10px; }
  .card-facts dd { font-size: 14px; }
  .note { font-size: 12.5px; line-height: 1.45; margin-bottom: 0; }
  .card.open .card-dots { gap: 0; margin-top: 8px; }
  .card-dots button::before { width: 7px; height: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--vl-accent); transition: background-color 0.4s var(--vl-ease); }
  .card-dots button.on::before { background: var(--vl-accent); }
  .card-dots button:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: -2px; }
}
@media (max-width: 350px) {
  .brand { padding: 0 10px; }
  .brand svg { height: 10px; }
  .units button, .tier button { min-width: 0; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .units button, .tier button, .card-more, .card-dots button::before { transition: none; }
}