/* Gatehouse.
 *
 * Two very different screens from one stylesheet. The console is a normal app
 * on a normal desk. The gate panel is a wall tablet used by a stranger in the
 * rain, so everything on it is oversized on purpose — the smallest target on
 * that screen is 64px, not 44px, because the person tapping it is wearing
 * gloves and holding a clipboard.
 */

.gh-board { display: flex; flex-direction: column; gap: 18px; }
.gh-card {
  border: 1px solid var(--line, #2b3050); border-radius: 12px;
  background: var(--panel, #171a2b); padding: 14px;
}
.gh-card__title { font-weight: 650; margin-bottom: 10px; }
.gh-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gh-hint { color: var(--dim, #9aa0bd); font-size: 13px; margin: 8px 0; }
.gh-section { font-size: 15px; margin: 0 0 8px; }

.gh-gates { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.gh-gaterow {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03);
}
.gh-gaterow__link { margin-left: auto; font-size: 13px; }

/* The knock pill is a button, because the fact it reports is also the thing
   you fix. A status light you cannot act on is decoration. */
.gh-knockpill { border: 0; cursor: pointer; font: inherit; min-height: 32px; }

.gh-calls { display: flex; flex-direction: column; gap: 10px; }
.gh-call {
  border: 1px solid var(--line, #2b3050); border-left-width: 4px;
  border-radius: 12px; background: var(--panel, #171a2b); padding: 12px;
}
.gh-call.is-ringing { border-left-color: #f87171; }
.gh-call.is-answered { border-left-color: #fbbf24; }
.gh-call.is-arrived { border-left-color: #6ee7b7; }
.gh-call.is-cancelled { border-left-color: #6b7280; opacity: .7; }
.gh-call__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.gh-call__reason { color: var(--dim, #9aa0bd); }
.gh-call__age { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--dim, #9aa0bd); }
.gh-call__who { margin: 6px 0; }
.gh-call__knocks { margin: 4px 0; font-size: 12.5px; color: var(--dim, #9aa0bd); }
.gh-call__answered { margin: 4px 0; color: #fbbf24; }
.gh-call__done { margin: 4px 0; color: var(--dim, #9aa0bd); }
.gh-call__btn { min-height: 44px; margin-top: 6px; }

/* ------------------------------------------------------------ the gate */

.gh-gatebody { display: grid; place-items: center; min-height: 100vh; }
.gh-gate {
  width: min(560px, 92vw); display: flex; flex-direction: column; gap: 16px;
  padding: 24px; text-align: center;
}
.gh-gate__site { font-size: 30px; margin: 0; }
.gh-gate__where { margin: 0; color: var(--dim, #9aa0bd); font-size: 18px; }
.gh-gate__reasons { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.gh-reason {
  min-height: 64px; font: inherit; font-size: 17px; cursor: pointer;
  border-radius: 14px; border: 2px solid var(--line, #2b3050);
  background: var(--panel, #171a2b); color: inherit;
}
.gh-reason.is-on { border-color: #6ee7b7; background: rgba(110, 231, 183, .12); }
.gh-gate__name { text-align: left; }
.gh-gate__call {
  min-height: 92px; font-size: 24px; font-weight: 650; cursor: pointer;
  border-radius: 18px; border: 0; color: #06231a; background: #6ee7b7;
}
.gh-gate__call:disabled { background: #2b3050; color: #6b7280; cursor: default; }
.gh-gate__status {
  border: 1px solid var(--line, #2b3050); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.gh-gate__statusText { margin: 0; font-size: 19px; }
/* The caveat is quieter than the status but never hidden: it is the one
   sentence that stops this app from lying about what a ping means. */
.gh-gate__caveat { margin: 0; font-size: 13px; color: var(--dim, #9aa0bd); }

@media (max-width: 420px) {
  .gh-gate__reasons { grid-template-columns: 1fr; }
}