/* ============================================================
   switcher.css - the "Pick a look" control. PROOF MODE ONLY.

   With PROOF_MODE false, js/direction.js removes both mounts
   from the page and none of these classes exist. A finished
   business site does not ship with a theme picker on it.

   The control is apparatus, not part of the printed piece, so it
   is drawn in the same pencil as the proofreader's queries
   (proof.css) rather than in the direction's own voice: blue in
   handbill and night, magenta in press, which has no blue on it
   anywhere by definition. It does sit on the direction's paper,
   so the ground and the type under it change as Wes taps, which
   is the point.

   Two hard rules it must never break:
     1. It never covers, crowds, or competes with the phone
        number. The top instance is a band ABOVE the hero, in
        normal flow, so it pushes the hero down instead of
        floating over it, and nothing is ever laid on top of the
        number.
     2. It never overlaps the pinned call bar. Neither instance
        is fixed or sticky, and the footer already reserves the
        bar's height at its foot (sections.css).
   ============================================================ */

.switcher-mount {
  break-inside: avoid;
}

/* The top instance: a labelled band above the hero, so it is on
   screen at 390px without a single scroll. */
.switcher-mount--top {
  background: var(--paper);
  border-bottom: 1px dashed var(--proof);
  padding: 12px 20px 14px;
}

.switcher-mount--top .switcher {
  max-width: 680px;
  margin: 0 auto;
}

/* The foot instance: the same control again, so he meets it
   whichever way he browses. */
.switcher-mount--foot {
  margin-top: 34px;
}

.switcher-mount--foot .switcher {
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
}

/* fieldset + legend: a real named group of real radios. */
.switcher {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.switcher__legend {
  display: block;
  padding: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--proof);
}

.switcher__hint {
  margin-top: 2px;
  font-family: var(--font-hand);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--proof);
}

.switcher__options {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.switcher__opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;          /* thumb-sized, every one of them */
  padding: 7px 8px;
  border: 1px solid var(--proof);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.switcher__radio {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--proof);
  cursor: pointer;
}

.switcher__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.switcher__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  color: var(--ink);
}

/* Honest label on any direction that is not drawn yet. All three
   are drawn now, so nothing in content.js carries draft:true and
   nothing on the control wears this. It stays because the next
   direction that gets named before it is designed needs it. */
.switcher__draft {
  font-family: var(--font-hand);
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--proof);
}

/* The active one, said three ways: the native radio dot, a
   filled and doubled box, and the name in the same weight the
   page uses for a headline. */
.switcher__radio:checked + .switcher__body .switcher__name {
  font-weight: 800;
}

.switcher__opt:has(.switcher__radio:checked) {
  background: var(--proof-soft);
  box-shadow: inset 0 0 0 2px var(--proof);
}

.switcher__opt:has(.switcher__radio:focus-visible) {
  outline: 3px solid var(--denim);
  outline-offset: 2px;
}

/* And said a fourth way, in words, for anyone who cannot see the
   box. role="status" on this line, so a screen reader hears the
   change as it happens. */
.switcher__now {
  margin-top: 8px;
  font-family: var(--font-hand);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--proof);
}

.switcher__now-name {
  font-weight: 700;
}

@media (min-width: 900px) {
  .switcher-mount--top {
    padding: 14px 28px 16px;
  }
  .switcher__legend { font-size: 18px; }
  .switcher__name { font-size: 16px; }
}

/* Wide screens put the proofreader's notes out in the sheet's right
   margin (proof.css). Q10's note is the one that cannot go there:
   it hangs off the control at the very foot of the page, where the
   footer has no depth left to hold a tall note, so it would run
   straight over the query index below. It stays in the flow, under
   the control it is about. */
@media (min-width: 1240px) {
  body.proof-margins .switcher-mount--foot .q-note {
    position: static;
    width: auto;
    max-width: 430px;   /* the width of the control it belongs to */
    margin: 14px auto 4px;
  }
}

/* Printed proof: he can circle the one he wants in pen. */
@media print {
  .switcher-mount--top {
    border-bottom: 1px solid var(--proof);
  }
  .switcher__opt {
    box-shadow: none;
  }
}