/* AskPradhan design system.
   The single source of colour, type and spacing for the customer app.

   Rules this file exists to enforce:
     SR6 - nothing below 14px, tap targets 48px.
     SR7 (revised 18 Sep 2026) - NO BLUE ANYWHERE. No black BACKGROUND or
          SURFACE. Black TEXT is allowed (he confirmed it twice, 17 and 18
          Sep 2026). Everything else is allowed: many colours, illustration,
          gradients where they help.
     SR3 - phone size only (390 x 844 reference). No desktop layout.

   Two things in here are NOT free choices, whatever the palette does:
     - Green and red stay reserved for "fine" and "needs attention". If they
       start appearing as decoration, every alert in the app quietly stops
       meaning anything.
     - No value anywhere may sit in the blue hue band, and no background or
       surface may be near black. tests/check-standing-rules.py converts every
       colour in every served file to its hue and enforces both. */

:root {
  /* ---- Interface ---- */
  --surface:      #FBF7F1;  /* warm paper */
  --surface-deep: #F2EADF;  /* a slightly deeper band, for contrast */
  --raised:       #FFFFFF;
  --ink:          #000000;  /* black TEXT is allowed - confirmed twice, 17 and
                               18 Sep 2026. Black as a BACKGROUND or SURFACE is
                               still banned outright. See SR7. */
  --ink-soft:     #6B5B50;
  --line:         #E8DFD3;
  --accent:       #5B21B6;  /* brand violet */
  --accent-deep:  #46168F;
  --accent-wash:  #F3EEFC;
  --good:         #15803D;  /* ONLY "this is fine" */
  --good-wash:    #E8F3EC;
  --warn:         #B91C1C;  /* ONLY "this needs attention" */
  --warn-wash:    #FBEBEA;

  /* ---- Scene. Illustration only. Never an alert. ---- */
  --sun:        #E08A1E;
  --sun-wash:   #FDF0DC;
  --sky-warm:   #F6D9A8;
  --sky-high:   #EFC9CE;   /* dawn flush, rose not blue */
  --hill-far:   #A8B79A;
  --hill-mid:   #7E9470;
  --hill-near:  #5E7A52;
  --road:       #B8A392;
  --rain:       #8E7CA8;   /* violet-grey. NEVER blue-grey. */
  --clay:       #C05621;
  --plum:       #7B2D6E;
  --mist:       #FFFFFF;

  /* ---- Type. SR6 gives FLOORS, not targets.
     Raised across the board on 18 Sep 2026: "Font must be prominent."
     Every value here is well above its SR6 minimum. Never lower one to make
     a layout fit - cut the content or restructure it (SR6). ---- */
  --size-floor:   14px;   /* absolute minimum for anything at all */
  --size-body:    18px;
  --size-lead:    21px;
  --size-head:    30px;
  --size-figure:  40px;   /* a number the owner must act on */

  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --gap-tight: 8px;
  --gap:       16px;
  --gap-wide:  24px;

  --tap:       48px;
  --radius:    18px;
  --radius-sm: 12px;

  --shadow-soft: 0 1px 2px rgba(36, 26, 20, 0.04),
                 0 10px 28px rgba(36, 26, 20, 0.07);
  --shadow-lift: 0 2px 6px rgba(36, 26, 20, 0.06),
                 0 20px 48px rgba(36, 26, 20, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100svh; overflow-x: hidden; }

/* ---- Type ------------------------------------------------------------- */

.display {
  font-size: clamp(34px, 9.6vw, 52px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.038em;
  margin: 0 0 var(--gap) 0;
  text-wrap: balance;
}

h1 { font-size: var(--size-head); line-height: 1.15; font-weight: 700;
     letter-spacing: -0.02em; margin: 0 0 var(--gap) 0; }

h2 { font-size: var(--size-lead); line-height: 1.3; font-weight: 700;
     letter-spacing: -0.01em; margin: 0 0 var(--gap-tight) 0; }

p { margin: 0 0 var(--gap) 0; }

.lead     { font-size: var(--size-lead); line-height: 1.45; }
.soft     { color: var(--ink-soft); }
.smallest { font-size: var(--size-floor); line-height: 1.5; }

.figure {
  font-family: var(--font-mono);
  font-size: var(--size-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* The step marker. A numbered chip, so the three ideas feel like a journey. */
.step {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 7px 14px;
  margin: 0 0 var(--gap) 0;
}

.step__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.step--live .step__dot { animation: pulse 2.2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.75); }
}

/* ---- Screen scaffold -------------------------------------------------- */

.screen {
  display: none;
  flex-direction: column;
  min-height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--gap-wide) + env(safe-area-inset-top))
           var(--gap)
           calc(var(--gap) + env(safe-area-inset-bottom));
}

.screen[data-active="true"] { display: flex; }
.screen__body { flex: 1 1 auto; }
.screen__foot { flex: 0 0 auto; padding-top: var(--gap-wide); }

/* ---- Reveal ----------------------------------------------------------- */

.reveal { animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both; }

.screen[data-active="true"] .reveal:nth-child(1) { animation-delay: 0.02s; }
.screen[data-active="true"] .reveal:nth-child(2) { animation-delay: 0.09s; }
.screen[data-active="true"] .reveal:nth-child(3) { animation-delay: 0.16s; }
.screen[data-active="true"] .reveal:nth-child(4) { animation-delay: 0.23s; }
.screen[data-active="true"] .reveal:nth-child(5) { animation-delay: 0.30s; }
.screen[data-active="true"] .reveal:nth-child(6) { animation-delay: 0.37s; }
.screen[data-active="true"] .reveal:nth-child(7) { animation-delay: 0.44s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .step--live .step__dot,
  .scene__rain, .scene__mist, .scene__truck, .scene__sun, .scene__spark,
  .drawer__body { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-tight);
  width: 100%;
  min-height: var(--tap);
  padding: 14px var(--gap);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #FFFFFF;
  font: inherit;
  font-size: var(--size-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.btn--plain {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  font-weight: 600;
  box-shadow: none;
}

.btn + .btn { margin-top: var(--gap-tight); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}

/* ---- Cards ------------------------------------------------------------ */

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  box-shadow: var(--shadow-soft);
}

.card + .card { margin-top: var(--gap-tight); }
.card--warn { border-left: 4px solid var(--warn); background: var(--warn-wash); }
.card--good { border-left: 4px solid var(--good); background: var(--good-wash); }

/* ---- The command deck ------------------------------------------------
   Asked for on 18 Sep 2026: the look of a serious piece of science-fiction
   equipment. Sophisticated, precise, expensive.

   ⚠️ THE CONSTRAINT THAT SHAPES ALL OF THIS: screen sci-fi is almost always
   glowing cyan on black. SR7 bans BOTH - no blue anywhere, no black surface.
   So the feeling has to be built from the things that actually make an
   instrument look like an instrument:

     - corner brackets and registration marks, not decoration
     - hairline rules that measure something
     - monospace readouts with tabular figures
     - a slow scan sweep, so a panel feels live rather than printed
     - very large, very tight display type against tiny wide-tracked labels

   Violet does the work that cyan does in the films. It carries the same
   precision without breaking the one rule that never changes. */

.panel {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;            /* nearly square - machined, not friendly */
  padding: var(--gap-wide) var(--gap);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Four corner brackets, drawn as eight hairlines. This single detail does
   more for the instrument feeling than any amount of colour. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top    left  / 16px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top    left  / 2px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top    right / 16px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top    right / 2px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left  / 16px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left  / 2px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 16px no-repeat;
}

/* The sweep. Slow and faint on purpose - a panel that is alive, not a
   loading spinner. */
.panel--live::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--accent), transparent);
  opacity: 0.55;
  animation: sweep 4.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Animates `top` rather than a transform, so the sweep crosses the whole
   panel whatever its height. A transform would need the height in advance,
   and every panel is a different size. */
@keyframes sweep {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: 0.55; }
  88%  { opacity: 0.55; }
  100% { top: 100%; opacity: 0; }
}

/* A label on a machine: tiny, wide, mono, with a rule running off it. */
.panel__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--gap) 0;
}

.panel__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* The big number. This is what the owner actually came to see. */
.readout {
  font-family: var(--font-mono);
  font-size: var(--size-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}

.readout__unit {
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-top: 6px;
}

/* Registration ticks. A measured edge, like a rule on an instrument. */
.ticks {
  display: flex;
  gap: 4px;
  margin: var(--gap) 0;
}

.ticks span {
  height: 8px;
  width: 2px;
  background: var(--line);
  flex: 0 0 auto;
}

.ticks span:nth-child(5n + 1) { height: 14px; background: var(--accent); }

/* A step counter that reads like a system status, not a form wizard. */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--gap) 0;
}

.progress__bar {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
}

.progress__bar i {
  flex: 1 1 auto;
  height: 4px;
  background: var(--line);
}

.progress__bar i[data-on="true"] { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .panel--live::after { animation: none; opacity: 0; }
}

/* ---- The illustrated scene -------------------------------------------
   Each scene shows a real moment from the hills, because that is the life
   the user is actually living. They are not spot illustration - each one is
   the screen's idea, drawn. */

.scene {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--gap);
  background: var(--sky-warm);
}

.scene svg { display: block; width: 100%; height: auto; }

/* A caption sitting on the picture, so the drawing has a voice. */
.scene__caption {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: var(--raised);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--size-floor);
  line-height: 1.45;
  box-shadow: var(--shadow-soft);
}

.scene__caption b { color: var(--accent-deep); }

/* Scene motion. Everything here is slow on purpose - it should feel calm,
   not like a loading screen. */
.scene__rain  { animation: rainfall 1.1s linear infinite; }
.scene__rain--b { animation-duration: 1.45s; animation-delay: -0.4s; }
.scene__rain--c { animation-duration: 0.9s;  animation-delay: -0.7s; }

@keyframes rainfall {
  from { transform: translate(0, -14px); opacity: 0; }
  20%  { opacity: 0.9; }
  to   { transform: translate(-5px, 20px); opacity: 0; }
}

.scene__mist { animation: drift 13s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translateX(-12px); }
  to   { transform: translateX(14px); }
}

/* transform-box: fill-box is required for percentage/center transform origins
   on SVG elements. Without it the browser uses the whole SVG canvas as the
   origin and the shape flies off across the picture instead of scaling in
   place. */
.scene__sun,
.scene__spark { transform-box: fill-box; transform-origin: center; }

.scene__sun { animation: glow 5.5s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.scene__truck { animation: trundle 9s linear infinite; }
@keyframes trundle {
  from { transform: translate(-40px, 13px); }
  to   { transform: translate(250px, -34px); }
}

.scene__spark { animation: ping 2.6s ease-out infinite; }
@keyframes ping {
  0%       { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

/* Any text drawn inside an SVG. See the SR6 note in
   tests/check-standing-rules.py before changing this size. */
.scene__label {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Drawers ----------------------------------------------------------
   Native details/summary. No JavaScript, works with a touch, and a closed
   drawer keeps the screen short instead of frightening people with a wall
   of text. */

.drawer {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap-tight);
  overflow: hidden;
}

.drawer[open] { border-color: var(--accent); box-shadow: var(--shadow-soft); }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 12px var(--gap);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--size-body);
  letter-spacing: -0.01em;
}

.drawer__head::-webkit-details-marker { display: none; }

/* The little coloured tile that gives each drawer its own character. */
.drawer__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accent-wash);
}

.drawer__mark svg { width: 21px; height: 21px; fill: none; stroke-width: 1.7;
                    stroke-linecap: round; stroke-linejoin: round; }

.drawer__title { flex: 1 1 auto; }

.drawer__chev {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 4px;
}

.drawer[open] .drawer__chev { transform: rotate(-135deg); }

.drawer__body {
  padding: 0 var(--gap) var(--gap) 66px;
  font-size: var(--size-body);
  color: var(--ink-soft);
  animation: open 0.32s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.drawer__body p:last-child { margin-bottom: 0; }
.drawer__body b { color: var(--ink); }

@keyframes open {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

/* Per-drawer colour. Illustration only - never red or green. */
.drawer--sun   .drawer__mark { background: var(--sun-wash); }
.drawer--sun   .drawer__mark svg { stroke: var(--sun); }
.drawer--hill  .drawer__mark { background: #EDF1E9; }
.drawer--hill  .drawer__mark svg { stroke: var(--hill-near); }
.drawer--clay  .drawer__mark { background: #FAEBE2; }
.drawer--clay  .drawer__mark svg { stroke: var(--clay); }
.drawer--plum  .drawer__mark { background: #F7E9F4; }
.drawer--plum  .drawer__mark svg { stroke: var(--plum); }
.drawer--rain  .drawer__mark { background: #EFEBF5; }
.drawer--rain  .drawer__mark svg { stroke: var(--rain); }
.drawer--violet .drawer__mark svg { stroke: var(--accent); }

/* ---- The honesty note ------------------------------------------------ */

.honest {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--raised);
  padding: 12px var(--gap);
  margin: var(--gap) 0;
}

.honest b { display: block; margin-bottom: 3px; }
.honest p { font-size: var(--size-floor); margin: 0; color: var(--ink-soft); }

/* ---- EXAMPLE marker ---------------------------------------------------
   Build Rule 6: never show a number that could read as a promise. Loud,
   full width, above the numbers. Do not quieten or move it. */

.example-band {
  background: var(--accent-wash);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px var(--gap);
  margin-bottom: var(--gap);
}

.example-band__title {
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 6px 0;
}

.example-band__note { font-size: var(--size-floor); color: var(--ink); margin: 0; }

.is-warn { color: var(--warn); }
.is-good { color: var(--good); }

.alert-row { display: flex; align-items: baseline; gap: 12px; }
.alert-row__figure { flex: 0 0 auto; }
.alert-row__text { flex: 1 1 auto; }

.stamp {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--gap-tight);
}

/* ---- The approval block ----------------------------------------------- */

.approve {
  border-radius: var(--radius);
  padding: var(--gap-wide) var(--gap);
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(150deg, var(--accent) 0%, var(--plum) 100%);
  box-shadow: var(--shadow-lift);
}

.approve__label {
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 var(--gap-tight) 0;
}

.approve__big {
  font-size: clamp(28px, 7.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--gap-tight) 0;
}

.approve p:last-child { margin-bottom: 0; }

/* ---- Safety promise ---------------------------------------------------- */

.promise {
  background: var(--raised);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--gap);
  margin: var(--gap-wide) 0;
  box-shadow: var(--shadow-lift);
}

.promise p:last-child { margin-bottom: 0; }

/* ---- Progress --------------------------------------------------------- */

.dots { display: flex; gap: 6px; justify-content: center; padding-bottom: var(--gap); }

.dots span {
  height: 4px;
  flex: 1 1 auto;
  background: var(--line);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.dots span[data-on="true"] { background: var(--accent); }

/* ---- Report a problem (SR5 - on every single screen) ------------------- */

.report-btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--gap-tight);
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.sheet {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(36, 26, 20, 0.55);
  z-index: 50;
}

.sheet[data-open="true"] { display: flex; }

.sheet__panel {
  width: 100%;
  max-width: 480px;
  max-height: 88svh;
  overflow-y: auto;
  background: var(--raised);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--gap-wide) var(--gap)
           calc(var(--gap-wide) + env(safe-area-inset-bottom));
  animation: sheetUp 0.28s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes sheetUp { from { transform: translateY(24px); } to { transform: none; } }

.sheet__panel h2 { font-size: var(--size-head); margin: 0 0 var(--gap-tight) 0; }

.field { display: block; margin-bottom: var(--gap); }

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.field textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-body);
  resize: vertical;
}

.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ---- Text and choice inputs -------------------------------------------
   font-size stays at --size-body (17px) and never drops. Below 16px an
   iPhone zooms the whole page the moment the field is tapped, which throws
   the layout sideways - and it would break SR6 anyway. */

.field input[type="text"],
.field input[type="tel"],
.field input[type="password"],
.field select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-body);
}

.field select {
  /* The native picker is the right control on a phone: it is familiar, it is
     accessible, and it needs no keyboard. */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px),
                       calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.field__hint {
  display: block;
  font-size: var(--size-floor);
  color: var(--ink-soft);
  margin-top: 6px;
}

/* One place for every message the form gives back. */
.notice {
  display: none;
  border-radius: var(--radius-sm);
  padding: 12px var(--gap);
  margin-bottom: var(--gap);
  font-size: var(--size-body);
}

.notice[data-show="true"] { display: block; }

.notice--warn { background: var(--warn-wash); border-left: 4px solid var(--warn); }
.notice--good { background: var(--good-wash); border-left: 4px solid var(--good); }
.notice--busy { background: var(--accent-wash); border-left: 4px solid var(--accent); }

.btn[disabled] { opacity: 0.55; }

/* A quiet text link for the secondary path, e.g. "I already have an account". */
.textlink {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-size: var(--size-body);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.context-note {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: var(--gap);
  font-family: var(--font-mono);
  font-size: var(--size-floor);
  white-space: pre-line;
}

.context-note b { display: block; letter-spacing: 0.06em; text-transform: uppercase; }