@charset "UTF-8";
/* ============================================================================
   BRAHMARAKSHA — CONSOLE LAYER
   Sign-in register and administration panel.

   Loaded after app.css and inherits every token from it. No new palette, no
   new typefaces: the gate and the admin panel are part of the same instrument
   as the dashboard, so they use the same slate surfaces, the same hairlines,
   the same mono for anything numeric, and the same sequential severity ramp.

   The one idea specific to this layer is the register: a form styled as a
   ruled duty log rather than a set of floating rounded boxes, because signing
   in here is a matter of record, not a login.
   ========================================================================= */

/* --------------------------------------------------------------- FIELDS */
.field { display: block; margin-bottom: var(--s5); }

.field > label,
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s2);
}

.field-hint {
  font-size: var(--t-fine);
  color: var(--fg-faint);
  margin-top: var(--s2);
  line-height: 1.5;
}

.input,
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  background: var(--ink-1);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px var(--s3);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}

/* Anything the operator reads back character by character — a key, a URL, a
   port — is set in mono so a transcription error is visible. */
.input.mono,
.field input.mono,
.field textarea.mono { font-family: var(--mono); font-size: var(--t-sm); }

.input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-hard); }

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--river);
  background: var(--ink-2);
  box-shadow: 0 0 0 3px var(--river-bg);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--fg-faint); }

.field select {
  appearance: none;
  /* Chevron drawn in the mark-up-free way so no extra request is needed. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%),
    linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s8);
}

.field textarea { min-height: 84px; resize: vertical; }

.field[data-invalid="1"] input,
.field[data-invalid="1"] select { border-color: var(--sev-3); }

.field-error {
  display: none;
  font-size: var(--t-fine);
  color: var(--sev-3);
  margin-top: var(--s2);
}
.field[data-invalid="1"] .field-error { display: block; }

.field-row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .field-row.two { grid-template-columns: 1fr 1fr; } }

/* Inline switch, used for "require sign-in". */
.toggle { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-box {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  border: 1px solid var(--rule-hard); border-radius: var(--r-sm);
  background: var(--ink-1); position: relative;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.toggle-box::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B1116' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.6 8 14.6 16 5.4'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .12s var(--ease);
}
.toggle input:checked + .toggle-box { background: var(--river); border-color: var(--river); }
.toggle input:checked + .toggle-box::after { opacity: 1; }
.toggle input:focus-visible + .toggle-box { box-shadow: 0 0 0 3px var(--river-bg); }
.toggle-text { font-size: var(--t-sm); color: var(--fg-mute); line-height: 1.45; }
.toggle-text strong { color: var(--fg); font-weight: 550; display: block; }

/* ------------------------------------------------------------ SIGN-IN GATE */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .gate { grid-template-columns: minmax(0, 1fr) 460px; }
}

/* Left: what the river is doing right now. An operator signing in at 3am
   should learn the situation before they finish typing their name, so the
   gate carries live figures rather than a decorative splash. */
.gate-brief {
  display: none;
  padding: var(--s9) var(--s8);
  border-right: 1px solid var(--rule-soft);
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(74,144,184,.08), transparent 62%),
    var(--ink-0);
}
@media (min-width: 900px) {
  .gate-brief { display: flex; flex-direction: column; justify-content: space-between; }
}

.gate-brief-head { max-width: 520px; }
.gate-brief h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: var(--s4) 0 var(--s3);
}
.gate-brief p { color: var(--fg-mute); font-size: var(--t-md); max-width: 46ch; }

.gate-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  margin-top: var(--s7);
  max-width: 520px;
}
.gate-figure { background: var(--ink-1); padding: var(--s4) var(--s5); }
.gate-figure dt {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.gate-figure dd {
  font-family: var(--mono); font-size: var(--t-xl); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  margin-top: 2px; color: var(--fg);
}
.gate-figure dd .unit {
  font-size: var(--t-fine); color: var(--fg-faint); margin-left: 3px; font-weight: 450;
}
.gate-figure[data-sev="3"] dd { color: var(--sev-3); }
.gate-figure[data-sev="2"] dd { color: var(--sev-2); }

.gate-brief-foot {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s6); border-top: 1px solid var(--rule-soft); max-width: 520px;
}

/* Right: the register itself. */
.gate-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s7) var(--s5);
  background: var(--ink-1);
}
@media (min-width: 900px) { .gate-panel { padding: var(--s8) var(--s7); } }

.gate-form { width: 100%; max-width: 380px; margin: 0 auto; }

.gate-mark { margin-bottom: var(--s6); }
.gate-mark img { width: 168px; height: auto; display: block; }
@media (min-width: 900px) { .gate-mark { display: none; } }

.gate-title {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: -.01em;
}
.gate-sub {
  color: var(--fg-mute); font-size: var(--t-sm);
  margin: var(--s2) 0 var(--s6); line-height: 1.5;
}

.gate-note {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-fine); color: var(--fg-faint); line-height: 1.55;
}

.gate-alert {
  display: none;
  border: 1px solid var(--sev-3-line);
  background: var(--sev-3-bg);
  color: var(--fg);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  margin-bottom: var(--s5);
}
.gate-alert.is-shown { display: block; }

/* ------------------------------------------------------------ ADMIN PANEL */
.adm { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s9); position: relative; z-index: 1; }

.adm-bar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) 0 var(--s4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s6);
}
.adm-bar img { height: 26px; width: auto; }
.adm-bar-tag {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
  padding-left: var(--s4); border-left: 1px solid var(--rule);
}

/* Sign-in card, centred on its own. */
.adm-login {
  max-width: 380px; margin: 12vh auto 0;
  background: var(--ink-1); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s7) var(--s6);
  box-shadow: var(--shadow);
}

.adm-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin-bottom: var(--s6);
}
.adm-tab {
  background: none; border: 0; cursor: pointer;
  padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.adm-tab:hover { color: var(--fg-mute); }
.adm-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--river); }

.adm-panel { display: none; }
.adm-panel.is-active { display: block; }

.adm-actions {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s5);
}

.adm-status {
  font-size: var(--t-sm); color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.adm-status[data-tone="ok"]   { color: var(--safe); }
.adm-status[data-tone="bad"]  { color: var(--sev-3); }
.adm-status[data-tone="busy"] { color: var(--river); }

/* Provider chooser: three mutually exclusive cards, so the choice and its
   consequence are visible at once instead of hidden in a select. */
.provider-set { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
@media (min-width: 760px) { .provider-set { grid-template-columns: repeat(3, 1fr); } }

.provider {
  display: block; cursor: pointer; text-align: left;
  background: var(--ink-1); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s4);
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.provider:hover { border-color: var(--rule-hard); }
.provider input { position: absolute; opacity: 0; pointer-events: none; }
.provider-name {
  font-weight: 550; font-size: var(--t-sm);
  display: flex; align-items: center; gap: var(--s2);
}
.provider-name::before {
  content: ""; width: 11px; height: 11px; flex: none;
  border: 1px solid var(--rule-hard); border-radius: 50%;
  transition: box-shadow .14s var(--ease), background .14s var(--ease);
}
.provider-why {
  font-size: var(--t-fine); color: var(--fg-faint);
  margin-top: var(--s2); line-height: 1.5;
}
.provider:has(input:checked) { border-color: var(--river); background: var(--river-bg); }
.provider:has(input:checked) .provider-name::before {
  background: var(--river); border-color: var(--river);
  box-shadow: inset 0 0 0 2px var(--ink-1);
}
.provider:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--river-bg); }

.provider-config { display: none; }
.provider-config.is-active { display: block; }

/* Horizontal bar for the page-engagement table. */
.bar-cell { display: flex; align-items: center; gap: var(--s3); min-width: 150px; }
.bar-cell .meter { min-width: 60px; }
.bar-cell span {
  font-family: var(--mono); font-size: var(--t-fine);
  font-variant-numeric: tabular-nums; color: var(--fg-mute);
  white-space: nowrap;
}

.adm-drawer {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  background: rgba(5, 9, 12, .68);
  backdrop-filter: blur(2px);
}
.adm-drawer.is-open { display: block; }
.adm-drawer-sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--ink-1);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  padding: var(--s6);
  box-shadow: -18px 0 44px -20px rgba(0,0,0,.7);
}
.adm-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-soft);
}

.kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--s2) var(--s4); font-size: var(--t-sm); }
.kv dt {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint);
  padding-top: 2px;
}
.kv dd { color: var(--fg); overflow-wrap: anywhere; }

.tag {
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--ink-3); color: var(--fg-mute);
  border: 1px solid var(--rule);
}
.tag[data-kind="signin"] { color: var(--safe); border-color: var(--safe-bg); background: var(--safe-bg); }
.tag[data-kind="visit"]  { color: var(--river); border-color: var(--river-line); background: var(--river-bg); }
.tag[data-kind="admin_login_failed"],
.tag[data-kind="user_deleted"] { color: var(--sev-3); border-color: var(--sev-3-line); background: var(--sev-3-bg); }

/* Reduced motion: the transitions above are all short, but honour the
   preference rather than assuming nobody set it. */
@media (prefers-reduced-motion: reduce) {
  .input, .field input, .field select, .field textarea,
  .provider, .adm-tab, .toggle-box { transition: none; }
}

/* Footer of the register column. The helpline block inside it is shown only
   where the left panel is hidden, so the number appears exactly once. */
.gate-panel-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--rule-soft);
}
.gate-panel-foot .helpline-label,
.gate-panel-foot .helpline-num { display: block; }
@media (min-width: 900px) {
  .gate-panel-foot > div:first-child { display: none; }
  .gate-panel-foot { justify-content: flex-end; }
}

.gate-admin-link {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--fg-faint); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.gate-admin-link:hover { color: var(--river); border-bottom-color: var(--river-line); }

/* The KPI row and the section beneath it were touching. */
.adm-panel .stat-grid + .section { margin-top: var(--s7); }