/* The front door: the sign-in page and the rest of the sign-in family.
 *
 * Loaded per page through `{% block extra_css %}`, not by a shell, because the
 * other kiosk pages are a tablet in a student's hands and must not inherit a
 * layout built for a desktop front door.
 *
 * Everything here is drawn from the `--gc-*` tokens the shells already load, so
 * the door and the room behind it cannot drift apart, and every colour has been
 * contrast-measured once (D-122 and the OneUI bundle). The display face is the
 * one the public landing page uses, so a visitor who arrives from `/` does not
 * cross a seam.
 *
 * The panel is `--gc-surface-inverse`, the one dark surface this product has:
 * `public-home.css` paints the landing page's confidentiality band with it and
 * nothing else uses it. So a visitor arriving from `/` meets the same dark
 * surface at the door, and the door is not a second visual system.
 */

/* The kiosk shell lays its content out from the top, which is right for a form
   on a tablet and wrong for a front door: at 900px the door sat against the
   header with a third of the viewport empty beneath it. */
.gcs-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 3.5rem);
}

.gcs-door {
  width: 100%;
  display: grid;
  gap: 0;
  max-width: 62rem;
  margin: 0 auto;
  background: var(--gc-surface-raised);
  border: 1px solid var(--gc-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(30 35 33 / 6%), 0 12px 28px rgb(30 35 33 / 6%);
}

/* The form is first in the source: a screen reader and a phone both meet the
   thing the page is for before the thing it offers. The panel is placed to the
   left only once there is room for two columns. */
@media (min-width: 62em) {
  .gcs-door { grid-template-columns: 1fr 1fr; }
  .gcs-door__form { order: 2; }
  .gcs-door__panel { order: 1; }
}

.gcs-door__form {
  padding: clamp(1.75rem, 4vw, 3rem);
}

.gcs-door__panel {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--gc-surface-inverse);
  color: var(--gc-text-on-dark);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The global focus ring is `--gc-focus-ring`, a dark blue sized for a light
   page. On this panel it would be a dark ring on a near-black surface, so the
   two controls that sit here get a light one instead. Same width and offset:
   only the colour changes, because only the colour is wrong. */
.gcs-door__panel :focus-visible {
  outline-color: var(--gc-text-on-dark);
  box-shadow: 0 0 0 5px rgb(255 255 255 / 25%);
}

.gcs-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.gcs-brand:hover .gcs-brand__name,
.gcs-brand:focus-visible .gcs-brand__name { text-decoration: underline; }

.gcs-brand__seal {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
}

.gcs-brand__name {
  font-weight: 600;
  line-height: 1.25;
}

.gcs-brand__org {
  font-size: 0.8rem;
  color: var(--gc-primary-subtle);
}

.gcs-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-primary-subtle);
}

.gcs-display {
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0;
  text-wrap: balance;
}

.gcs-lead {
  color: var(--gc-primary-subtle);
  margin: 0;
  max-width: 34ch;
}

/* The standing offer. Not an alert: a student who arrives here in distress
   should find the number without a red box telling them they have a problem.
   It sits inside the panel, so it is present on every sign-in, not only on the
   public page a bookmarked link skips. */
.gcs-help {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 22%);
}

.gcs-help__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-primary-subtle);
  margin: 0 0 0.5rem;
}

.gcs-help__note {
  font-size: 0.9rem;
  color: var(--gc-primary-subtle);
  margin: 0 0 0.75rem;
}

.gcs-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

/* Name above number rather than a two-column row: a line is called
   "NCMH Crisis Hotline (landline, toll-free)" and its number can be three
   numbers, so anything relying on both staying short breaks on the real data. */
.gcs-help__row {
  font-size: 0.9rem;
  line-height: 1.4;
}

.gcs-help__row + .gcs-help__row {
  margin-top: 0.5rem;
}

.gcs-help__name {
  display: block;
  color: var(--gc-primary-subtle);
}

.gcs-help__num {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gcs-help__more {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.gcs-help__more a { color: var(--gc-primary-subtle); }

.gcs-door__form-head { margin-bottom: 1.75rem; }

.gcs-door__title {
  font-family: var(--gc-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.gcs-door__subtitle {
  color: var(--gc-text-muted);
  margin: 0.25rem 0 0;
}

.gcs-alt {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gc-border);
  font-size: 0.9rem;
  color: var(--gc-text-muted);
}

/* On a phone the panel follows the form, so its top edge is the seam. */
@media (max-width: 61.99em) {
  .gcs-door__panel { border-top: 1px solid var(--gc-border); }
}