/* Phone-first. One screen, thumb-reachable, and built to survive a screenshot. */

:root {
  --ink: #07090c;
  --ink-2: #0e1218;
  --text: #f4f7fb;
  --muted: #8a94a6;
  --line: rgba(255, 255, 255, .09);

  --go: #3ddc84;
  --wait: #ffb020;
  --no: #ff5a5f;

  /* Before a verdict lands the wash stays neutral, but the primary button is
     already live -- a grey CTA reads as disabled. */
  --accent: var(--go);
  --accent-dim: rgba(138, 148, 166, .16);

  --pad: clamp(20px, 6vw, 32px);
  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}

html[data-tone="go"]   { --accent: var(--go);   --accent-dim: rgba(61, 220, 132, .18); }
html[data-tone="wait"] { --accent: var(--wait); --accent-dim: rgba(255, 176, 32, .18); }
html[data-tone="no"]   { --accent: var(--no);   --accent-dim: rgba(255, 90, 95, .18); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip; /* nothing on this screen may scroll sideways */
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top) + 8px)
    var(--pad)
    calc(env(safe-area-inset-bottom) + 18px);
  gap: 18px;
}

/* The colour is the verdict. It should read from across a room. */
.wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--accent-dim), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 55%);
  transition: background .5s ease;
}

.screen > * { position: relative; }

/* ------------------------------------------------------------------- card */

/* Place pinned to the top, verdict block centred in what is left. */
.card {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
  min-height: 0;
  min-width: 0;
}

.stack {
  align-self: center;
  min-width: 0;
  padding-bottom: 6px;
}

.place {
  margin: 0;
  padding-top: 4px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
}

.verdict {
  margin: 0 0 0 -.04em;
  font-size: clamp(4.5rem, 25vw, 8rem);
  line-height: .84;
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--accent);
  transition: color .4s ease;
}

/* "NOT NOW" breaks onto two lines rather than shrinking to nothing. */
html[data-tone="wait"] .verdict {
  font-size: clamp(3.6rem, 21vw, 6.4rem);
  max-width: 5ch;
}

.reason {
  margin: 20px 0 0;
  max-width: 20ch;
  font-size: clamp(1.35rem, 5.6vw, 1.9rem);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--text);
  text-wrap: pretty;
}

.window {
  display: inline-block;
  margin: 16px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
}

.window[hidden] { display: none; }

.card.is-stale { opacity: .55; transition: opacity .2s; }

/* ---------------------------------------------------------------- factors */

.factors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.chip[data-status="warn"]  { color: var(--wait); border-color: rgba(255, 176, 32, .3); }
.chip[data-status="block"] { color: var(--no);   border-color: rgba(255, 90, 95, .3); }
.chip[data-status="warn"]::before,
.chip[data-status="block"]::before { opacity: 1; }

/* ---------------------------------------------------------------- actions */

.actions { display: flex; gap: 10px; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}

.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-primary { flex: 1; background: var(--accent); color: #07090c; }
.btn-ghost { background: rgba(255, 255, 255, .07); color: var(--text); }

.btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.stamp {
  margin: 0;
  text-align: center;
  font-size: .74rem;
  font-weight: 500;
  color: var(--muted);
  opacity: .65;
}

/* ------------------------------------------------------------ sheets */

.veil {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: rgba(3, 5, 8, .66);
  backdrop-filter: blur(8px);
  animation: fade .18s ease;
}

.veil[hidden] { display: none; }

.sheet {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px var(--pad) calc(env(safe-area-inset-bottom) + 26px);
  border-radius: 26px 26px 0 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  animation: rise .26s cubic-bezier(.2, .9, .3, 1);
}

.sheet h2 { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.sheet-sub { margin: -14px 0 0; color: var(--muted); font-size: .92rem; }

.knob { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; }
.knob-head { font-size: .98rem; font-weight: 600; color: var(--muted); }
.knob-head b { color: var(--text); font-variant-numeric: tabular-nums; }

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 30px; height: 30px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--text); }

input[type="text"] {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.segmented { display: flex; gap: 7px; }

.segmented button {
  flex: 1;
  min-height: 48px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #07090c;
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Landscape and small phones: keep the card the tallest thing on screen. */
@media (max-height: 620px) {
  .verdict { font-size: clamp(3.4rem, 17vw, 5rem); }
  .reason { font-size: 1.15rem; margin-top: 12px; }
  .btn { min-height: 50px; }
}