/* The pad — a CAD terminal in a patrol car, on whatever screen is in the
   cradle. Dark navy chassis, one blue for action, one red for alarm, amber for
   caution. The light bar across the top of the header is the only decoration
   that is not doing a job. Chakra Petch for words, JetBrains Mono for codes.

   Layout is one column that reflows: keys are an auto-fill grid, so a phone
   in portrait gets two, a phone on its side gets three or four, an iPad gets
   five. The settings sheet rises from the bottom on narrow screens and slides
   in from the right on wide ones. */

:root {
  --bg: #070b14;
  --bg-2: #0b1120;
  --panel: #0f1729;
  --panel-hi: #162038;
  --line: rgba(255, 255, 255, 0.09);
  --line-hi: rgba(255, 255, 255, 0.16);
  --ink: #f2f5fb;
  --sec: #8ea0c0;
  --dim: rgba(255, 255, 255, 0.4);
  --accent: #2f6bff;
  --accent-deep: #1b3a8f;
  --red: #ff3b4a;
  --red-deep: #a71f2a;
  --amber: #ffc24b;
  --green: #34ff93;
  --display: 'Chakra Petch', system-ui, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --r: 12px;
  --pad-x: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% -10%, #121b33 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; touch-action: manipulation; }
input, select { font: inherit; color: inherit; }
svg { display: block; }

.app {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 var(--pad-x) max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── header — the unit line of a CAD ───────────────────────────────────── */
.hd {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--pad-x));
  padding: max(10px, env(safe-area-inset-top)) var(--pad-x) 10px;
  background: rgba(7, 11, 20, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* the light bar: red and blue, never mixed */
.hd::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--accent) 50% 100%);
  opacity: 0.9;
}
.hd-row { display: flex; align-items: center; gap: 12px; }
.hd-badge {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #fff;
}
.hd-badge svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the product mark sits in the badge; the owner's words sit next to it */
.hd-badge.mark { background: var(--bg-2); border-color: var(--line-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hd-badge.mark img { width: 30px; height: 30px; object-fit: contain; }
.hd-id { min-width: 0; flex: 1; }
.hd-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-clock {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.hd-gear {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sec);
}
.hd-gear svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-gear:active { background: rgba(255, 255, 255, 0.1); }

/* ── status strip ──────────────────────────────────────────────────────── */
.st {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.st-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--dim);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.st-led.on  { background: var(--green); box-shadow: 0 0 10px var(--green), 0 0 0 3px rgba(52, 255, 147, 0.12); }
.st-led.off { background: var(--red);   box-shadow: 0 0 10px var(--red),   0 0 0 3px rgba(255, 59, 74, 0.14); animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0.35 } }
.st-txt { min-width: 0; }
.st-who { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-last {
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sec);
  white-space: nowrap;
}
.st-last b { display: block; font-family: var(--display); font-size: 12px; letter-spacing: 0.02em; color: var(--ink); }

/* ── groups + keys ─────────────────────────────────────────────────────── */
.grp { display: flex; flex-direction: column; gap: 8px; }
.grp-cap {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sec);
  padding: 0 2px;
}
.grp-cap::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.key {
  position: relative;
  min-height: 96px;
  padding: 12px 12px 11px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  transition: transform 100ms ease, filter 100ms ease, opacity 160ms ease;
  --pri: var(--dim);
}
/* the stripe: one colour per rung, on the edge, the way the card does it */
.key::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--pri);
  box-shadow: 0 0 10px var(--pri);
}
.key.p0 { --pri: var(--red); }
.key.p1 { --pri: var(--amber); }
.key.p2 { --pri: var(--accent); }
.key.p3 { --pri: #7d8aa8; }
.key:active { transform: scale(0.97); filter: brightness(1.18); }
.key-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.key-code {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--pri);
}
.key-ico { width: 20px; height: 20px; stroke: var(--sec); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.key-label { font-size: 15.5px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; }
.key.busy { opacity: 0.55; pointer-events: none; }
.key.sent { outline: 2px solid var(--green); outline-offset: -2px; }
.key.failed { outline: 2px solid var(--red); outline-offset: -2px; }
.key[disabled] { opacity: 0.4; pointer-events: none; filter: saturate(0.4); }

/* ── the hero: panic, held not tapped ──────────────────────────────────── */
.hero {
  position: relative;
  min-height: 96px;
  padding: 14px 18px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 160, 168, 0.55);
  background: linear-gradient(180deg, #ff4d5b 0%, #d62c3a 60%, var(--red-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 30px -14px rgba(255, 59, 74, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  overflow: hidden;
  --p: 0;
}
.hero-ico { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hero-txt { flex: 1; min-width: 0; }
.hero-code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; opacity: 0.85; }
.hero-label { font-size: 22px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.05; }
.hero-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin-top: 4px; }
/* the ring fills as the key is held; a released key resets it */
.hero-ring {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, 0.22) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.hero.holding { filter: brightness(1.1); }
.hero.sent { outline: 3px solid var(--green); outline-offset: -3px; }
.hero.failed { outline: 3px solid #fff; outline-offset: -3px; }
.hero.busy { opacity: 0.6; pointer-events: none; }
.hero[disabled] { opacity: 0.45; pointer-events: none; filter: saturate(0.5); }
.hero.tap .hero-ring { display: none; }

/* ── the brand, where it is the whole point: pairing ───────────────────── */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 18px;
}
.brand img { width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(47, 107, 255, 0.25)); }
.wordmark {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.34em;
  padding-left: 0.34em;              /* optical: cancel the trailing tracking */
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.wordmark b { color: var(--accent); font-weight: inherit; }
.tagline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sec);
}

/* ── generic surfaces (enter / claim / sheet) ──────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.panel h2 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sec);
  margin-bottom: 10px;
}
.panel p { color: var(--sec); font-size: 13.5px; line-height: 1.45; }
.panel p + p { margin-top: 8px; }
.panel .title { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-bottom: 6px; }
.center { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px var(--pad-x); max-width: 480px; margin: 0 auto; }

.row { display: flex; align-items: center; gap: 10px; }
.row + .row { margin-top: 8px; }
.row .grow { flex: 1; min-width: 0; }
.row .meta { font-family: var(--mono); font-size: 10.5px; color: var(--sec); letter-spacing: 0.04em; }
.row .name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .name small { font-weight: 500; color: var(--sec); margin-left: 6px; }

.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line-hi);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:active { filter: brightness(1.2); }
.btn.primary {
  border-color: rgba(108, 155, 255, 0.45);
  background: linear-gradient(180deg, var(--accent) 0%, #2453c9 55%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.danger { color: #ffb3b0; border-color: rgba(255, 59, 74, 0.4); }
.btn.ghost { color: var(--sec); }
.btn.block { width: 100%; }

.field {
  width: 100%;
  height: 56px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  outline: none;
}
.field:focus { border-color: rgba(108, 155, 255, 0.6); }
.select {
  height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--line-hi);
  background: var(--panel-hi);
  font-size: 13px;
  font-weight: 600;
}
.url {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sec);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ok { color: var(--green); }
.bad { color: var(--red); }

/* ── the sheet: settings, out of the way until asked for ───────────────── */
.veil {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(3, 6, 12, 0.6);
  opacity: 0;
  transition: opacity 180ms ease;
}
.veil.show { opacity: 1; }
.sheet {
  position: fixed;
  z-index: 21;
  left: 0; right: 0; bottom: 0;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 14px var(--pad-x) max(18px, env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line-hi);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  display: flex; flex-direction: column; gap: 12px;
}
.sheet.show { transform: none; }
.sheet-hd { display: flex; align-items: center; gap: 10px; }
.sheet-hd .title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line-hi); margin: 0 auto 2px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--panel-hi);
  border: 1px solid var(--line-hi);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: rgba(52, 255, 147, 0.45); }
.toast.bad { border-color: rgba(255, 59, 74, 0.55); }

.foot {
  margin-top: auto;
  padding-top: 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── shapes of screen ──────────────────────────────────────────────────── */

/* phone on its side: everything shorter, more keys per row */
@media (orientation: landscape) and (max-height: 520px) {
  .hd { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .hd-badge, .hd-gear { width: 34px; height: 34px; }
  .hd-name { font-size: 13.5px; }
  .st { padding: 6px 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
  .key { min-height: 72px; padding: 9px 10px 8px 14px; }
  .key-label { font-size: 14px; }
  .hero { min-height: 72px; padding: 10px 16px; }
  .hero-label { font-size: 18px; }
  .app { padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); }
  .hd { margin: 0 calc(-1 * max(var(--pad-x), env(safe-area-inset-left))) 0 calc(-1 * max(var(--pad-x), env(safe-area-inset-right))); }
}

/* tablets and up: roomier keys, the sheet becomes a drawer */
@media (min-width: 720px) {
  :root { --pad-x: 22px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
  .key { min-height: 110px; }
  .key-label { font-size: 17px; }
  .hero { min-height: 110px; }
  .hero-label { font-size: 26px; }
  .hero-ico { width: 40px; height: 40px; }
  .sheet {
    left: auto; top: 0; bottom: 0;
    width: min(440px, 92vw);
    max-height: none;
    border-radius: 16px 0 0 16px;
    border-top: none;
    border-left: 1px solid var(--line-hi);
    padding-top: max(18px, env(safe-area-inset-top));
    transform: translateX(100%);
  }
  .sheet-grab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-led.off { animation: none; }
  .sheet, .veil, .toast, .key, .hero { transition: none; }
}