/* Raw Senses — control components (buttons stage).
   Families, named after the Figma frames: MONO SELECT (one of), MULTI SELECT (any of),
   WRITER (a line of text), CONTINUE (the one action), plus the TAG pill and the CODE input the
   mono select reveals. Everything is set in the one mono face at 10px / 1px tracking, uppercase,
   on 13px rows. Colour comes only from rs-tokens.css. */

/* iOS Safari FONT BOOSTING (caught on the owner's phone, 05.09): without this, Safari
   inflates "too small" text per element — sibling ticker rows rendered at visibly different
   sizes. The design's sizes are deliberate; nobody adjusts them but us. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

.rs{
  --rs-line:var(--rs-row);            /* height of every control; the indicator keeps --rs-row */
  font-family:var(--rs-mono);
  font-size:var(--rs-ui-size);
  letter-spacing:var(--rs-ui-track);
  text-transform:uppercase;
  line-height:1;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  color:var(--rs-ink);
}

/* The width a component answers to is its CONTAINER, not the window: a page declares itself
   `rs-view` (the questionnaire screen does; the sheet's 375 column does), and the phone rules of
   the menus and the ticker are @container queries against it. */
.rs-view{container:rs-view / inline-size}

/* ---- a stack of controls: rows + the action, 1px apart, 490px on desktop ---- */
.rs-group{
  display:flex;flex-direction:column;align-items:center;gap:var(--rs-gap);
  width:100%;max-width:var(--rs-control-w);margin:0 auto;
}
.rs-rows{display:flex;flex-direction:column;gap:var(--rs-gap);width:100%}

/* ---- one selectable row: indicator + label ---- */
.rs-row{
  display:flex;align-items:flex-start;gap:var(--rs-gap);width:100%;min-height:var(--rs-line);
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
}
.rs-row:focus-visible{outline:1px solid var(--rs-white);outline-offset:1px}
.rs-ind{
  flex:0 0 var(--rs-ind);width:var(--rs-ind);height:var(--rs-ind);box-sizing:border-box;
  border:1px solid var(--rs-cyan);background:transparent;
  transition:background-color var(--rs-t-fast) var(--rs-ease),border-color var(--rs-t-fast) var(--rs-ease);
}
.rs-row[data-kind="mono"] .rs-ind{border-radius:50px}
.rs-row[aria-checked="true"] .rs-ind{background:var(--rs-cyan)}
.rs-row[aria-checked="true"] .rs-label{background:var(--rs-chosen);color:var(--rs-chosen-ink)}
.rs-label{
  flex:1 0 0;min-width:1px;min-height:var(--rs-line);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1px 17px 1px var(--rs-pad);line-height:11px;   /* V2 draws multi labels 3 left / 17 right */
  background:var(--rs-cyan);color:var(--rs-ink);
  overflow-wrap:anywhere;
  transition:background-color var(--rs-t-fast) var(--rs-ease);
}
.rs-row[data-kind="mono"] .rs-label{padding-left:20px;padding-right:20px}   /* V2: mono labels breathe 20/20 */
/* V2 artboard "MONO-SELECT — INCL. A MULTI-LINE ANSWER" (05.09): a WRAPPED label breathes —
   7 top and bottom, text stays centred, the tick rides the first line (rows already align
   flex-start). rs-components.js measures the lines — CSS cannot count them. */
.rs-row--tall .rs-label{padding-top:7px;padding-bottom:7px}
/* a one-line label centres its 11px line in the row; a real option that runs long on a phone
   wraps instead of being cut — the questionnaire's options need this, the Figma only drew short
   ones. The indicator stays row-sized, top-aligned, as drawn. */

/* Hover, as drawn: the hovered row stays full, every other row of the same stack dims to 40%.
   A chosen row never dims (assumption — the Figma hover frame has no chosen row). `.is-hover`
   mirrors :hover for the static state strip and for touch screens. */
@media (hover:hover){
  .rs-rows:has(.rs-row:hover) .rs-row:not(:hover):not([aria-checked="true"]) .rs-label{background:var(--rs-cyan-40)}
  .rs-rows:has(.rs-row:hover) .rs-row:not(:hover):not([aria-checked="true"]) .rs-ind{border-color:var(--rs-cyan-40)}
}
.rs-rows:has(.is-hover) .rs-row:not(.is-hover):not([aria-checked="true"]) .rs-label{background:var(--rs-cyan-40)}
.rs-rows:has(.is-hover) .rs-row:not(.is-hover):not([aria-checked="true"]) .rs-ind{border-color:var(--rs-cyan-40)}
/* variant B, for the owner to compare: the chosen row dims too (its indicator stays filled) */
.rs-rows.dims-chosen:has(.is-hover) .rs-row:not(.is-hover) .rs-label{background:var(--rs-cyan-40)}
.rs-rows.dims-chosen:has(.is-hover) .rs-row:not(.is-hover) .rs-ind{border-color:var(--rs-cyan-40)}
.rs-rows.dims-chosen:has(.is-hover) .rs-row:not(.is-hover)[aria-checked="true"] .rs-ind{background:var(--rs-cyan-40)}

/* ---- pills: CONTINUE (a button) and TAG (a caption) ---- */
.rs-btn,.rs-tag{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--rs-line);box-sizing:border-box;padding:0 var(--rs-pad);
  background:var(--rs-cyan);color:var(--rs-ink);border:0;border-radius:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:1;
  white-space:nowrap;
}
.rs-btn{cursor:pointer;transition:color var(--rs-t-fast) var(--rs-ease),background-color var(--rs-t-fast) var(--rs-ease)}
/* Owner, 03.09: a button that can be pressed turns BLACK (cyan text); one that cannot yet stays
   cyan with the 20% text. So CONTINUE flips to black the moment the answer is valid, and BACK,
   always pressable, is always black. Not in the Figma, which drew only the dim state. */
.rs-btn:not([aria-disabled="true"]){background:var(--rs-ink);color:var(--rs-cyan)}
.rs-btn[aria-disabled="true"]{background:var(--rs-cyan);color:var(--rs-ink-20);cursor:default}
.rs-btn:not([aria-disabled="true"]):active{color:var(--rs-cyan-40)}
.rs-btn:focus-visible{outline:1px solid var(--rs-white);outline-offset:1px}
/* V2 (05.09, the MONO/MULTI-SELECT artboards): the PAIR's faces. BACK is white and ink;
   CONTINUE waits white with the word at 20% ink and turns ink and WHITE when ready —
   black still means pressable, only the waiting face left the cyan. */
.rs-btn[data-rs="back"]{background:var(--rs-white);color:var(--rs-ink)}
.rs-btn[data-rs="back"]:active{color:var(--rs-ink-20)}
.rs-btn[data-rs="continue"][aria-disabled="true"]{background:var(--rs-white);color:var(--rs-ink-20)}
.rs-btn[data-rs="continue"]:not([aria-disabled="true"]),.rs-btn[data-rs="go"]{background:var(--rs-ink);color:var(--rs-white)}
/* Owner, 03.09: BACK and CONTINUE are one pair of equal weight, sharing the width of the option
   rows — half each, 1px apart. A lone CONTINUE (first screen) takes the whole width. */
.rs-actions{display:flex;gap:var(--rs-gap);width:100%}
/* Owner, 03.09: under option rows the pair lines up with the cyan field, not with the tick
   column — indented by the indicator (13) + the gap (1). Under a writer or fields it stays full. */
.rs-group > .rs-rows ~ .rs-actions,
.rs-group > .rs-rows ~ .rs-btn,
.rs-group > .rs-btn.rs-btn--field{align-self:flex-end;margin-left:0;width:calc(100% - var(--rs-ind) - var(--rs-gap))}
/* (the last one is a button ABOVE the rows — Read the Guest Information — on the same edge as the field below it) */
.rs-actions .rs-btn{flex:1 1 0;min-width:1px}
.rs-group > .rs-btn{width:100%}
.rs-tag{width:100%;box-sizing:border-box;height:auto;min-height:var(--rs-line);padding:1px var(--rs-pad);line-height:11px;white-space:normal;text-align:center}
/* owner, 03.09: a tag (HOME, WORK, the code line) is full width like the option rows */
.rs-btn,.rs-tag,.rs-input,.rs-label{font-family:var(--rs-mono)}

/* ---- inputs: WRITER and CODE — a cyan hairline box, cyan typed text, 40% placeholder ---- */
.rs-input{
  width:100%;height:var(--rs-line);box-sizing:border-box;
  border:1px solid var(--rs-cyan);border-radius:0;background:transparent;
  color:var(--rs-cyan);caret-color:var(--rs-cyan);text-align:center;
  padding:0 var(--rs-pad);margin:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:1;
  outline:0;appearance:none;-webkit-appearance:none;
  transition:box-shadow var(--rs-t-fast) var(--rs-ease);
}
.rs-input::placeholder{color:var(--rs-cyan-40);opacity:1;text-transform:inherit}
.rs-input:focus-visible{box-shadow:0 0 0 1px var(--rs-cyan)}
/* the writer is a textarea: one 13px row that grows a row per line (rs-components.js sizes it) */
textarea.rs-input{display:block;resize:none;overflow:hidden;line-height:11px;height:var(--rs-line);white-space:pre-wrap;overflow-wrap:anywhere}

/* the BLINK of a cursor — born with the shift+enter tooltip (retired 05.09, enter makes the
   line break now); the questionnaire writer's waiting caret keeps the beat */
@keyframes rs-blink{50%{opacity:0}}

/* ---- the block a mono row reveals (tag + code input), animated in ---- */
.rs-reveal{display:flex;flex-direction:column;align-items:center;gap:var(--rs-gap);
  align-self:flex-end;width:calc(100% - var(--rs-ind) - var(--rs-gap))}   /* owner, 06.09: the
  Other box rides the BUTTONS' width — indented past the tick like the pair, its text centred */
.rs-reveal[hidden]{display:none}
.rs-reveal{animation:rs-in var(--rs-t-slow) var(--rs-ease)}
/* V2 (05.09, the CODE artboards): the code line lives IN the label column — a bare cyan
   caption, then a BOXLESS input whose blinking cyan caret is the whole drawing; 7/20 pads.
   🔴 CENTRED, both lines — the artboard frames are pri:CENTER (owner caught the left-set
   caption on the welcome, 05.09 evening; the artboard re-read confirmed centre, empty AND
   filled). The tag pill and the hairline box left this reveal. */
.rs-reveal--code{align-items:stretch;align-self:flex-end;width:calc(100% - var(--rs-ind) - var(--rs-gap));gap:0}
.rs-code-cap{padding:7px 20px 0;color:var(--rs-cyan);font-family:var(--rs-mono);line-height:11px;text-align:center}
.rs-input--bare{border:0;background:transparent;height:auto;padding:7px 20px;text-align:center;line-height:11px;color:var(--rs-cyan);caret-color:var(--rs-cyan)}
.rs-input--bare:focus-visible{box-shadow:none}
@keyframes rs-in{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rs *,.rs{transition:none!important;animation:none!important}
}

/* ---- MINI pills (owner, 05.09): born as the prototype's position switches, promoted to the
   system — a row of small quiet toggles for secondary UI (view switches, filters, modes).
   Grey-2 ground, silver word; the active one takes the chosen colours; NOT in the Figma yet. */
.rs-mini{display:flex;gap:var(--rs-gap)}
.rs-mini-btn{height:12px;padding:0 4px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;
  background:var(--rs-grey-2);color:var(--rs-silver);
  font-family:var(--rs-mono);font-size:8px;letter-spacing:var(--rs-ui-track);text-transform:uppercase;
  transition:color var(--rs-t-fast) var(--rs-ease),background-color var(--rs-t-fast) var(--rs-ease)}
.rs-mini-btn:hover{color:var(--rs-white)}
.rs-mini-btn[aria-pressed="true"]{background:var(--rs-chosen);color:var(--rs-chosen-ink)}
.rs-mini-btn:focus-visible{outline:1px solid var(--rs-white);outline-offset:1px}

/* Cap-height centring, as Figma draws it (text-box-trim): the glyph box is trimmed to cap and
   baseline so the letters sit in the exact middle of a 13px row. Browsers without it keep the
   line-box centring above. */
.rs-label,.rs-btn,.rs-tag{text-box:trim-both cap alphabetic}

/* ---- touch screens (owner, 03.09: "13px is too small to tap, let's try to see") ----
   The look stays: 1px gaps, cyan rows, the same proportions. Row, indicator and every button
   double to 26px and the type goes to 12px, so the tick column and the button bar keep one
   edge. Desktop is untouched. */
@media (pointer:coarse){
  .rs{--rs-line:26px;--rs-ind:26px;font-size:12px}   /* owner, 03.09: double the row AND the tick, aligned with the button bar; triple (39px) if still too small */
  .rs-row{align-items:flex-start}
  .rs-label{padding:2px var(--rs-pad-end) 2px var(--rs-pad);line-height:13px}
  .rs-row--tall .rs-label{padding-top:9px;padding-bottom:9px}   /* the 7 at the touch ratio */
  .rs-tag{line-height:13px;padding:2px var(--rs-pad)}
  textarea.rs-input{line-height:14px}
  .rs-mini-btn{height:18px;padding:0 6px;font-size:10px}   /* 12px is no tap target */
}