/* Simply MBBS — v16. Making it behave like an app.

   Three complaints, and then a sweep for the same class of fault everywhere
   else it occurs, because it occurred in a lot of places.

   1. THE FOOTER. On the public site it is doing its job — four columns, the
      subject links, the policies, the cross-check caution. In the installed
      app it is six hundred pixels of scrolling after every single page, on a
      site with one user who wrote the policies himself. It goes.

   2. BUTTON LABELS WRAPPING TO THREE LINES. "Didn't know" in a third of a
      phone width is three lines, so the commute grade row was three times
      taller than it needed to be and the buttons no longer looked like a
      row. Shorter labels went into the JS; the CSS below stops the same
      thing happening to every other button grid in the plugin.

   3. SPOTTERS. Not a CSS problem — see the new Spotter builder in the admin.

   The rule underneath all of this: a control you press one-handed on a ward
   is at least 44px tall, its label fits on one line at the width it will
   actually be rendered at, and nothing on the page scrolls sideways. */

/* ================= 1. no footer in the app ================= */

html.smcc-standalone .smcc-footer { display: none; }

/* One line, ten pixels, so the caution still exists somewhere in the app
   without costing a screen and a half of scrolling to reach it. */
html.smcc-standalone .smcc-appfoot {
  display: block;
  font-family: var(--smcc-mono); font-size: 9.5px; line-height: 1.5;
  color: var(--smcc-muted); text-align: center;
  padding: 14px calc( 16px + var(--smcc-safe-l) ) 4px calc( 16px + var(--smcc-safe-r) );
  opacity: .65;
}
.smcc-appfoot { display: none; }

/* ================= 2. buttons that fit ================= */

/* The global rule. Labels stop hyphenating and breaking mid-word, wrap
   evenly when they must wrap at all, and sit on a line height that does not
   double the button when they do. */
.smcc-btn, .smcc-cm__btn, .smcc-rv__g, .smcc-md__b, .smcc-hm__pickI,
.smcc-du__opt, .smcc-tg__rank, .smcc-ex__chip, .smcc-nb__tab, .smcc-dh__act {
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* Commute mode. Three grade buttons across a phone. */
.smcc-cm__btn { font-size: clamp( .82rem, 3.6vw, .95rem ); min-height: 60px; padding: 8px 6px; }
.smcc-cm__row { gap: 8px; }
@media (max-width: 380px) {
  .smcc-cm__btn { font-size: .8rem; min-height: 56px; }
  .smcc-cm__row { gap: 6px; }
}

/* The mistake book asks four questions in four buttons. In a flex row they
   were four different widths and three of them wrapped; as a two-by-two grid
   they are even and each label fits. */
.smcc-nb__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smcc-nb__acts .smcc-btn { width: 100%; justify-content: center; text-align: center; }
@media (min-width: 720px) { .smcc-nb__acts { grid-template-columns: repeat(4, 1fr); } }

/* Retrieval mode picker: four labels on one row on the narrowest phone. */
.smcc-md__b { font-size: clamp( 10.5px, 3.2vw, 12px ); padding: 9px 4px; }

/* Card grading row. */
.smcc-rv__g { font-size: clamp( 12.5px, 3.6vw, 14px ); padding: 14px 4px; }

/* Answer options in the test room wrap freely — they are sentences, and they
   should wrap. They just must not break words to do it. */
.smcc-ex__optT { overflow-wrap: break-word; hyphens: none; }

/* Anything pressed one-handed. */
.smcc-btn, .smcc-btn--sm, .smcc-md__b, .smcc-nb__tab, .smcc-hm__duty,
.smcc-du__change, .smcc-tg__rank, .smcc-ex__chip, .smcc-rv__link {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.smcc-rv__link { min-height: 32px; }

/* ================= 3. the sweep ================= */

/* Every horizontal button row on a phone becomes a wrapping row with even
   children rather than a squeezed one. */
@media (max-width: 560px) {
  .smcc-ex__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .smcc-ex__nav .smcc-btn { width: 100%; }
  .smcc-ex__nav .smcc-btn--solid { grid-column: 1 / -1; }

  .smcc-ex__resActs, .smcc-or__acts, .smcc-tg__acts, .smcc-w__acts, .smcc-sync__acts {
    display: grid; grid-template-columns: 1fr; gap: 8px;
  }
  .smcc-ex__resActs .smcc-btn, .smcc-or__acts .smcc-btn,
  .smcc-tg__acts .smcc-btn, .smcc-w__acts .smcc-btn, .smcc-sync__acts .smcc-btn { width: 100%; }

  .smcc-lk__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .smcc-lk__acts .smcc-btn { width: 100%; }

  /* The card action bar on /flashcards/ was three links on one line. */
  .smcc-cardbar { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .smcc-cardbar .smcc-btn { width: 100%; }
}

/* Tables were the other sideways-scroll culprit. They scroll inside their
   own box rather than taking the page with them. */
.smcc-ex__table, .smcc-w__table {
  display: block; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The question palette is forty small squares; on a narrow phone they were
   spilling out of the card. */
.smcc-ex__pal { max-width: 100%; overflow-x: hidden; }
@media (max-width: 400px) { .smcc-ex__palI { width: 30px; height: 30px; font-size: 11px; } }

/* Ward kit inputs are 16px so iOS does not zoom the page when they focus —
   which it does, silently, for anything smaller, and then never zooms back. */
.smcc-wk__in, .smcc-rv__type, .smcc-w__input, .smcc-w__select, .smcc-wk__search {
  font-size: 16px;
}

/* The clock row on a very narrow phone. */
@media (max-width: 360px) {
  .smcc-dh__uN { font-size: 34vw; }
  .smcc-dh__unit.is-small .smcc-dh__uN { font-size: 20px; }
}

/* Long deck and subject names in the ward log and the leech clinic were
   pushing their rows wide. */
.smcc-lk__q, .smcc-lk__a, .smcc-w__hitQ, .smcc-w__hitA, .smcc-or__qQ,
.smcc-nb__stem, .smcc-cf__colQ { overflow-wrap: anywhere; }

/* Spotter images: fit the card, never the other way round. */
.smcc-ex__fig { max-width: 100%; }
.smcc-ex__img { max-height: 42vh; }
@media (orientation: landscape) { .smcc-ex__img { max-height: 60vh; } }

/* Selects on iOS render with the platform chevron and no padding for it. */
.smcc-wk__in[type], select.smcc-wk__in, .smcc-w__select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--smcc-muted) 50%),
                    linear-gradient(135deg, var(--smcc-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.smcc-wk__in[type="text"], .smcc-wk__in[type="number"], .smcc-wk__in[type="date"] {
  background-image: none; padding-right: 12px;
}

/* Date inputs on iOS collapse to nothing unless given a width. */
input[type="date"].smcc-wk__in { min-height: 44px; }

/* Momentum scrolling inside the note box, and a visible edge when there is
   more to see. */
.smcc-rv__note, .smcc-nb__note { -webkit-overflow-scrolling: touch; }

/* Never let a single element take the page sideways. */
html, body { overflow-x: clip; }