/* Quiet Shelf start flow (QS-2): O1, L1, L2, L3, O2, O3. Tokens only (theme/tokens.css); sizes
   follow the framework floors (QUESTIONS Q0.4): rows, fields and toggles 56, primary 72, the 48
   hard floor for links. Reuses .qsBtn, .qsRow, .qsList, .qsBar, .qsTile and .qsEyebrow from
   components/components.css. QS-13: shapes match the regenerated reference (O1 .lang, .mark,
   .greet, .list / .li, .srch.big, .eb, .libcard, .tiles.two, .opt, .field). #main sets the 16 px
   gutter, so nothing here adds side padding. Rules new in QS-13 are scoped to .qsStart or the
   libraries sheet; the older unscoped field, link and toggle rules are unchanged. */

.qsStart {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

/* O1, L1 and O2 sit in the middle of the screen (the reference .bd.center); L2 keeps Continue at
   the foot (the reference .fill). min-height is the main area's content box. */
.qsStart--center,
.qsStart--fill {
  box-sizing: border-box;
  min-height: 100%;
}

.qsStart--center {
  justify-content: center;
}

.qsStart--fill > .qsStart__form {
  flex: 1;
}

.qsStart--fill .qsStart__primary {
  margin-top: auto;
}

/* L2 and O3: the h1 is the reference's 20 px header title. */
#main .qsStart h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

/* O1, L1 and O2: the reference .greet, 24 px and centered. The staff buttons the shell keeps the
   h1 clear of sit at the top right, well above a centered heading, so it needs no end padding. */
#main .qsStart--center h1 {
  padding-inline: 0;
  font-size: var(--fs-section);
}

.qsStart__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qsStart--center .qsStart__head {
  text-align: center;
}

.qsStart__lead,
.qsStart__alts,
.qsStatus {
  margin: 0;
}

.qsStart__lead,
.qsStart__alts {
  color: var(--muted);
}

/* "Elige tu idioma . Chon ngon ngu": one line, the headings set apart by a middle dot. The dot
   has empty alt text, so it is not read or put in a name (browsers without CSS alt text keep the
   first declaration). */
.qsStart__alt + .qsStart__alt::before {
  content: " \00B7  ";
  content: " \00B7  " / "";
}

/* The closing line of O1, O2 and L3 (the reference's muted .link): centered, 20 px semibold. It is
   not a link, so it is not underlined. */
.qsStart__note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
  text-align: center;
}

/* Empty live regions stay in the accessibility tree (so their first message is announced) but
   take no space. */
.qsStatus:empty,
.qsErr:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.qsStart__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.qsStart__form[hidden] {
  display: none;
}

.qsStart__primary,
.qsStart__wide {
  width: 100%;
}

.qsStart .qsBtn__icon {
  width: 29px;
  height: 29px;
}

.qsStack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.qsStack > .qsBtn {
  width: 100%;
}

/* ---------- The Capstone mark (O1, L1; the reference .mark) ---------- */
.qsMark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 11px 0 6px;
}

.qsMark__iris {
  display: block;
  width: 80px;
  height: auto;
}

.qsMark__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 0;
  text-align: center;
}

/* At 320 px with 200% text and the WCAG 1.4.12 spacing, the letter-spaced CAPSTONE and the
   EnvisionWare line are each wider than the column: they wrap inside it instead of scrolling the
   page (1.4.10). At the default size both fit on one line, so nothing changes there. */
.qsMark__wm,
.qsMark__by {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The wordmark: system 800 on the 28 px rung of the type ladder. */
.qsMark__wm {
  color: var(--fg);
  font-family: var(--font-head);
  font-size: var(--fs-code);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: var(--lh-head);
  text-transform: uppercase;
}

.qsMark__by {
  color: var(--muted);
  line-height: var(--lh-head);
}

/* ---------- Section labels (the reference .eb) ---------- */
.qsStart__more {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- Radio list (O1 languages, L2 branches): one card, the whole row is the target ---------- */
.qsChoice {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsChoice__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  min-height: var(--target-std);
  padding: 13px 14px;
  cursor: pointer;
}

.qsChoice__row[hidden] {
  display: none;
}

.qsChoice__row:not([hidden]) ~ .qsChoice__row {
  border-top: var(--line-w) solid var(--line);
}

.qsChoice__row:has(.qsChoice__input:checked) {
  background: var(--primary-soft);
}

/* The radio stays the control (name, state, arrow keys); the row draws it: the --primary-soft
   fill and the check. The ring is drawn inside the card so its clip never cuts it. */
.qsChoice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.qsChoice__row:has(.qsChoice__input:focus-visible) {
  border-radius: calc(var(--r-card) - var(--line-w));
  outline: 3px solid var(--focus);
  outline-offset: -4px;
}

.qsChoice__icon {
  display: flex;
  flex: none;
  color: var(--primary);
}

.qsChoice__icon .ic {
  width: 29px;
  height: 29px;
}

.qsChoice__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.qsChoice__title {
  font-weight: var(--weight-action);
}

.qsChoice--lang .qsChoice__title {
  font-size: var(--fs-action);
}

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

.qsChoice__end {
  display: flex;
  flex: none;
  color: var(--muted);
}

.qsChoice__end .ic {
  width: 23px;
  height: 23px;
}

.qsChoice__check {
  display: none;
}

/* The check and the chevron follow the radio through a sibling selector, so they work where
   :has() does not (an old Android WebView). */
.qsChoice__input:checked ~ .qsChoice__end .qsChoice__check {
  display: block;
}

.qsChoice__input:checked ~ .qsChoice__end .qsChoice__chev {
  display: none;
}

/* Without :has() the row cannot draw the radio's focus or state: show the native radio. */
@supports not selector(:has(a)) {
  .qsChoice__input {
    position: static;
    flex: none;
    width: var(--icon);
    height: var(--icon);
    opacity: 1;
    accent-color: var(--primary);
  }
}

/* ---------- Fields ---------- */
.qsField {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qsField__label {
  font-weight: var(--weight-action);
}

.qsField__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qsField__row > .qsField__input {
  flex: 1 1 12em;
}

.qsField__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--target-std);
  padding: 0 12px;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

.qsField__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-color: var(--primary);
}

/* Not color alone: the edge also gets three times wider, which stays visible in forced colors. */
.qsField__input[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: calc(var(--line-w) * 3);
}

.qsBtn[aria-disabled="true"] {
  cursor: progress;
}

.qsErr {
  margin: 0;
  color: var(--danger);
  font-weight: var(--weight-action);
}

/* Scoped above the .qsField rules in me.css (a grid with a bottom margin). */
.qsStart .qsField {
  display: flex;
  margin: 0;
}

/* O3 fields (the reference .field): one box with the label inside it over the value. The label
   is in normal flow, so text spacing and wrapping push the value down rather than overlap it. The
   input draws its own focus ring inside the box; the box takes the --primary edge on focus and
   the wide --danger edge on an error. */
.qsStart__box {
  gap: 0;
  padding: 6px 17px 0;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsStart__box:has(.qsField__input:focus-visible) {
  border-color: var(--primary);
}

.qsStart__box:has(.qsField__input[aria-invalid="true"]) {
  border-color: var(--danger);
  border-width: calc(var(--line-w) * 3);
}

.qsStart__box .qsField__label {
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: var(--lh-head);
  text-transform: uppercase;
}

.qsStart__box .qsField__row {
  align-items: center;
}

.qsStart__box .qsField__input {
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.06em;
}

.qsStart__box .qsField__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Show PIN: the reference's text action at the end of the PIN box. */
.qsStart__show {
  flex: none;
  margin-inline-start: auto;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-card);
  background: none;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  text-decoration: underline;
  cursor: pointer;
}

.qsStart__show:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- L1 bar (the reference .srch.big): the input is the bar; its search icon at the start
   is the submit button (Enter searches too). Scoped above the bar rules still in home.css and
   search.css (fid-shell-notes 4). ---------- */
.qsStart__search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.qsStart__bar {
  position: relative;
}

.qsStart .qsStart__barInput {
  display: block;
  width: 100%;
  margin: 0;
  padding-inline: 59px 17px;
  border-color: var(--primary);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-action);
}

.qsStart__barInput:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.qsStart__go {
  position: absolute;
  top: 50%;
  inset-inline-start: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: none;
  color: var(--primary);
  transform: translateY(-50%);
  cursor: pointer;
}

.qsStart__go .ic {
  width: 29px;
  height: 29px;
}

.qsStart__go:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-w));
}

/* ---------- Text link (48 px target, underlined: REQ-A11Y-1) ---------- */
.qsLink {
  align-self: flex-start;
  min-height: var(--target-min);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.qsStart .qsLink {
  align-self: center;
  text-align: center;
}

.qsLink:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- L1 / L3 lists (the shared .qsList card) ---------- */
.qsStart__list:empty {
  display: none;
}

.qsStart__list .qsRow__icon .ic {
  width: 29px;
  height: 29px;
}

.qsStart__list .qsRow__chev .ic {
  width: 23px;
  height: 23px;
}

/* ---------- L2 library card (the reference .libcard) ---------- */
.qsLibCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-bar);
  background: var(--card);
}

.qsLibCard__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 63px;
  height: 63px;
  border-radius: var(--r-card);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: var(--fs-section);
  font-weight: 800;
}

.qsLibCard__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qsLibCard__name {
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

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

/* L2 "What you get": two columns (the reference .tiles.two); one at large text (components.css). */
.qsStart__tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Information, not controls: no hover fill, no pointer. */
.qsStart__tiles .qsTile,
.qsStart__tiles .qsTile:hover {
  background: var(--card);
  cursor: default;
}

/* ---------- L3 libraries sheet ---------- */
.qsSheet[data-sheet="libraries"] {
  background: var(--bg);
}

.qsSheet[data-sheet="libraries"] .qsSheet__title {
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.qsSheet .qsStart__list {
  margin-bottom: var(--gap);
}

.qsSheet__actions.qsStart__sheetActions {
  margin-bottom: var(--gap);
}

/* The library's mark: its initial on a tile, the library in use on its own --primary. */
.qsStart__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-card);
  background: var(--cover-1);
  color: var(--on-cover);
  font-family: var(--font-head);
  font-weight: 800;
}

.qsStart__logo--current {
  background: var(--primary);
  color: var(--on-primary);
}

/* "Norman Central . Signed in" on one line. The dot has empty alt text (screen readers hear the
   hidden ", " instead); browsers without CSS alt text keep the first declaration. */
.qsStart__part ~ .qsStart__part::before {
  content: " \00B7  ";
  content: " \00B7  " / "";
}

/* ---------- Native header library chip (opens L3): shell.css styles it; the name wraps instead of
   truncating, so the whole name stays readable at 200% text (1.4.4). ---------- */
.qsLibChip__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- O2 doors (the reference .opt) ---------- */
.qsDoor {
  display: flex;
  align-items: center;
  gap: 17px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--target-primary);
  padding: 20px 17px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-bar);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
  cursor: pointer;
}

.qsDoor:hover {
  background: var(--primary-soft);
}

/* The first door: --primary-soft with a --primary edge, not a solid block. */
.qsDoor--primary,
.qsDoor--primary:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.qsDoor:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.qsDoor__icon {
  display: flex;
  flex: none;
  color: var(--primary);
}

.qsDoor__icon .ic {
  width: 40px;
  height: 40px;
}

.qsDoor__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.qsDoor__title {
  font-family: var(--font-head);
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

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

/* ---------- O3 keep me signed in: the whole 56 px row is the target (DESIGN 5) ---------- */
.qsToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: var(--target-std);
  cursor: pointer;
}

.qsToggle__text {
  display: flex;
  flex-direction: column;
}

.qsToggle__title {
  font-weight: var(--weight-action);
}

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

.qsToggle__input {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  appearance: none;
  cursor: pointer;
}

.qsToggle__input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}

.qsToggle__input:checked {
  border-color: var(--primary);
  background: var(--primary);
}

.qsToggle__input:checked::before {
  left: auto;
  right: 3px;
  background: var(--on-primary);
}

.qsToggle__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

@media (forced-colors: active) {
  .qsToggle__input {
    appearance: auto;
    width: var(--icon);
    height: var(--icon);
  }

  .qsToggle__input::before {
    content: none;
  }

  .qsDoor,
  .qsChoice,
  .qsLibCard,
  .qsStart__box,
  .qsStart__logo,
  .qsLibCard__logo {
    border: var(--line-w) solid CanvasText;
  }

  /* The chosen row keeps a start bar where the fill is gone (the check stays too). */
  .qsChoice__row:has(.qsChoice__input:checked) {
    border-inline-start: 4px solid CanvasText;
  }

  /* The first door keeps a heavier edge where the fill is gone. */
  .qsDoor--primary {
    border-width: calc(var(--line-w) * 3);
  }

  /* The L1 bar's search button and the eyebrow's text action draw no edge of their own; where
     colors are forced they get one, so each still reads as a control (Q10.3). */
  .qsStart__go,
  .qsStart__more {
    border: var(--line-w) solid ButtonText;
  }

  .qsChoice__row:has(.qsChoice__input:focus-visible),
  .qsStart__barInput:focus-visible,
  .qsStart__box .qsField__input:focus-visible,
  .qsField__input:focus-visible,
  .qsDoor:focus-visible,
  .qsLink:focus-visible,
  .qsToggle__input:focus-visible,
  .qsStart__go:focus-visible,
  .qsStart__show:focus-visible,
  .qsStart__more:focus-visible {
    outline: 3px solid Highlight;
  }
}