/* Kiosk styling. Sized for a tablet held at arm's length by someone who may be
   in pain and not wearing their reading glasses: large type, large targets,
   nothing smaller than 16px (which also stops iOS zooming on focus). */
/* Without this, `width: 100%` plus the input's own padding makes every field
   wider than the card it sits in, and the right-hand edge of every box is
   sliced off by the fieldset border. Caught in a screenshot, not in a test. */
.sospi, .sospi *, .sospi *::before, .sospi *::after { box-sizing: border-box; }

.sospi { max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; font-size: 17px; line-height: 1.5; }
.sospi h2 { font-size: 28px; margin: 0 0 6px; }
.sospi h3 { font-size: 19px; margin: 0 0 8px; }
.sospi .sospi-sub { color: #555; margin: 0 0 22px; }
.sospi-office { text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
  font-weight: 700; color: #d82729; margin: 0 0 4px; }

.sospi-form label { display: block; font-weight: 600; margin: 18px 0 6px; }
.sospi-req { color: #d82729; }
.sospi-form input, .sospi-form select {
  width: 100%; font-size: 17px; padding: 14px 12px; border: 1px solid #bdbdbd;
  border-radius: 8px; background: #fff; -webkit-appearance: none; appearance: none;
}
.sospi-form input:focus, .sospi-form select:focus { outline: 3px solid rgba(216,39,41,.35); border-color: #d82729; }

.sospi-consent { margin: 30px 0 18px; padding: 16px 18px; background: #f6f6f6; border-radius: 8px; }
.sospi-consent-text { font-size: 15.5px; color: #333; }

.sospi-siglabel { display: block; font-weight: 600; margin: 20px 0 8px; }
/* touch-action is also set in JS; kept here so the pad never pans even before
   the script runs. */
.sospi-pad { width: 100%; height: 240px; background: #fff; border: 2px dashed #c9c9c9;
  border-radius: 10px; display: block; touch-action: none; }
.sospi-sigline { border-top: 1px solid #333; margin-top: 6px; padding-top: 6px;
  font-size: 13px; color: #666; }

.sospi-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.sospi-btn { font-size: 17px; padding: 15px 22px; border-radius: 10px; border: 1px solid #c4c4c4;
  background: #fff; cursor: pointer; min-height: 52px; }
.sospi-primary { background: #d82729; border-color: #d82729; color: #fff; font-weight: 700; flex: 1; min-width: 200px; }
.sospi-primary[disabled] { opacity: .6; }

.sospi-choices { display: grid; gap: 14px; margin: 10px 0 30px; }
.sospi-choice { display: block; padding: 26px 22px; border: 2px solid #ddd; border-radius: 12px;
  text-decoration: none; color: inherit; }
.sospi-choice:active { border-color: #d82729; }
.sospi-choice-title { display: block; font-size: 21px; font-weight: 700; }
.sospi-choice-sub { display: block; color: #666; margin-top: 4px; }

.sospi-error { background: #fdecec; border-left: 4px solid #d82729; padding: 12px 14px;
  border-radius: 4px; margin: 14px 0; }

.sospi-done { text-align: center; padding-top: 60px; }
.sospi-tick { font-size: 64px; color: #1a7f37; line-height: 1; }
.sospi-lock { margin-top: 30px; text-align: center; }
/* The staff utility controls. 44px is the size a finger hits, and these are
   pressed by a receptionist mid-conversation with a patient standing there.
   They were 37px tall, which is a miss often enough to be annoying and never
   often enough for anyone to report it. */
.sospi-link { background: none; border: 0; color: #777; text-decoration: underline;
  font-size: 15px; cursor: pointer; padding: 10px;
  min-height: 44px; display: inline-flex; align-items: center; }

/* Plain in-flow links are tapped by the same finger. Inline text is as tall as
   its line box -- about 16px -- so the target has to be declared. */
.sospi a:not(.sospi-choice):not(.sospi-btn) {
  display: inline-flex; align-items: center; min-height: 44px; }

/* ---- the registration form, laid out like the practice's own paperwork ---- */

.sospi-section { border: 1px solid #ddd; border-radius: 12px; padding: 4px 18px 22px;
  margin: 26px 0 0; }
.sospi-section > legend { font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; background: #1f1f1f; color: #fff; padding: 8px 16px;
  border-radius: 20px; }
.sospi-note { color: #666; font-size: 15px; margin: 12px 0 0; }
.sospi-help { color: #666; font-size: 14px; margin: 6px 0 0; }
.sospi-form textarea { width: 100%; font-size: 17px; padding: 14px 12px; border: 1px solid #bdbdbd;
  border-radius: 8px; background: #fff; }
.sospi-form input.sospi-narrow { width: 7em; text-transform: uppercase; }
.sospi-row[hidden] { display: none; }

/* ---- the signing packet ---------------------------------------------------- */

.sospi-packet-head { margin-top: 40px; }
.sospi-doc { border: 1px solid #ddd; border-radius: 12px; padding: 20px 18px;
  margin: 22px 0; background: #fcfcfc; }
.sospi-doc[hidden] { display: none; }
.sospi-doc h3 { font-size: 21px; border-bottom: 2px solid #d82729; padding-bottom: 8px; }
.sospi-doc h4 { font-size: 16px; margin: 18px 0 4px; }
.sospi-doc p { font-size: 15.5px; color: #333; margin: 0 0 10px; }
.sospi-doc-intro { font-weight: 600; }

/* An initial box, laid out the way the paper does it: the box on the left, the
   policy it belongs to on the right, so there is no doubt what is being
   initialled. */
.sospi-policy { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0;
  padding: 14px; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; }
.sospi-policy-text strong { display: block; margin-bottom: 4px; }
.sospi-policy-text p { margin: 0; }

.sospi-check { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0;
  font-weight: 400; cursor: pointer; }
/* THE POLICY INITIALS. Seven of these, tapped one after another, by somebody
   who came in because their shoulder does not work. At 30px a miss lands on the
   text and does nothing, and the patient cannot tell a missed tap from a broken
   form -- so they call the receptionist over, who ticks it for them, and the
   initial stops meaning what the policy says it means. 44px is the published
   minimum and the honest one here. */
.sospi-check input[type="checkbox"] { width: 44px; height: 44px; min-width: 44px;
  margin: 0; -webkit-appearance: checkbox; appearance: checkbox; }
.sospi-initbox { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: #777; align-self: center; }
.sospi-ack span { font-size: 15.5px; }
.sospi-missing { outline: 3px solid rgba(216,39,41,.5); border-radius: 10px; }

.sospi-padwrap { margin-top: 22px; }
.sospi-padbtns { display: flex; gap: 10px; margin-top: 10px; }
.sospi-padbtns .sospi-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.sospi-second[hidden], .sospi-optin-body[hidden] { display: none; }

@media (max-width: 600px) {
  .sospi { padding: 18px 16px 40px; }
  .sospi h2 { font-size: 24px; }
  .sospi-section { padding: 4px 14px 18px; }
  .sospi-doc { padding: 16px 14px; }
}


/* ---- licence and insurance card ----------------------------------------
   Looks like a packet document but is not one, so it carries its own class:
   .sospi-doc is hidden by the script whenever the document does not apply to
   the patient, and this section always applies. */
.sospi-panel {
  border: 1px solid #ddd; border-radius: 12px; padding: 20px 18px;
  margin: 0 0 22px; background: #fff;
}
.sospi-panel h3 { font-size: 21px; border-bottom: 2px solid #d82729; padding-bottom: 8px; margin-top: 0; }
.sospi-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.sospi-id-label { display: block; font-weight: 700; margin-bottom: 8px; }
.sospi-id-input { display: block; width: 100%; }
/* 44px, because this is used with a finger on a counter. */
.sospi-id-input::file-selector-button {
  min-height: 44px; padding: 0 16px; margin-right: 12px;
  border: 1px solid #d82729; border-radius: 8px;
  background: #fff; color: #a70005; font-weight: 700;
}
.sospi-id-preview { margin-top: 12px; }
.sospi-id-preview[hidden] { display: none; }
.sospi-id-thumb {
  display: block; width: 100%; max-width: 260px; height: auto;
  border: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px;
}
.sospi-id-status { font-size: 13px; color: #555; margin: 8px 0 0; min-height: 1.2em; }


/* ---- sign once, apply to all -------------------------------------------
   Set apart from the documents below it on purpose: it is an offer, not a
   step. A patient who does not want it scrolls past and signs each document,
   and nothing about the layout suggests they have skipped something. */
.sospi-applyall { border-color: #d82729; }
.sospi-applyall-consent { margin-top: 18px; font-weight: 600; }
.sospi-applyall-list { margin: 6px 0 0; padding-left: 22px; color: #444; font-size: 15.5px; }
.sospi-applyall-list li[hidden] { display: none; }
.sospi-applyall-status { margin: 12px 0 0; font-size: 15px; color: #a70005; font-weight: 600; min-height: 1.2em; }

/* ---- the kiosk and the desk --------------------------------------------
   The kiosk is left open on a counter and worked by a queue, so its state
   has to be readable from standing distance: who is on the desk, and that
   the last patient's signature is gone. */
.sospi-kiosk-staff { font-weight: 700; }
.sospi-when { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  font-variant-numeric: tabular-nums; color: #333; }
/* Read-only on purpose: this is the record of when the signature was made, not
   a field. It still has to look like a field, or a patient will try to fix it. */
.sospi-when input[readonly] { background: #f3f3f3; color: #444; }
.sospi-kiosk-staff { margin-top: 26px; font-size: 15px; color: #555; }
.sospi-ok { background: #edf7ed; border-left: 4px solid #2e7d32; padding: 12px 14px;
  border-radius: 6px; margin: 0 0 18px; font-weight: 600; }
.sospi-warn { background: #fff6e5; border-left: 4px solid #e08b00; padding: 12px 14px;
  border-radius: 6px; margin: 0 0 18px; }
/* Each name is its own form (it posts a slug), so the grid's children are the
   forms, not the buttons — without this the buttons shrink to their text and a
   staff picker on a tablet becomes a column of small targets. Seen in a
   screenshot, not in a test. */
.sospi-desk .sospi-choices { margin-top: 10px; }
.sospi-desk .sospi-choices form { display: block; margin: 0; }
.sospi-desk .sospi-choice { width: 100%; text-align: left; background: #fff; cursor: pointer; }
/* Who is on the desk now is the one fact this screen exists to show. */
.sospi-choice.is-on { border-color: #d82729; background: #fdf3f3; }
.sospi-choice.is-on .sospi-choice-sub { color: #a70005; font-weight: 700; }

/* ---- payroll -----------------------------------------------------------
   Counts and staff names only. If a patient's name ever needs styling on
   this page, the page has gone wrong -- see the note in class-payroll.php. */
.sospi-payroll-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sospi-payroll-tabs { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.sospi-tab { display: inline-block; padding: 12px 18px; border: 1px solid #c4c4c4;
  border-radius: 999px; text-decoration: none; color: #333; min-height: 44px; }
.sospi-tab.is-on { background: #d82729; border-color: #d82729; color: #fff; font-weight: 700; }
.sospi-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.sospi-table th, .sospi-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e6e6e6; }
.sospi-table tfoot th, .sospi-table tfoot td { border-bottom: 0; font-weight: 700; }
.sospi-table .sospi-num { text-align: right; font-variant-numeric: tabular-nums; }
.sospi-row-unassigned { color: #8a6d00; }
.sospi-tag { display: inline-block; margin-left: 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: #666; border: 1px solid #ddd; border-radius: 999px; padding: 2px 8px; }
.sospi-payroll-add { margin-top: 20px; }
.sospi-payroll-lockform { margin: 0; }

/* The back option and the show-password toggle -- both asked for by the
   practice in his own words, on screenshots of these exact screens. */
.sospi-back { margin: 0 0 .5em; }
.sospi-back a { color: #a70005; text-decoration: none; font-weight: 600; }
.sospi-back a:hover { text-decoration: underline; }
.sospi-showpw { display: block; margin: .4em 0 1em; font-size: .95em; font-weight: 400; }
.sospi-showpw input { width: auto; margin-right: .4em; }