/* ============================================================
   MIDAS — sign in
   Source: ui/MIDAS Login.dc.html (the design canvas for this one
   screen; `MIDAS Shell Bold.dc.html` has no login among its
   labelled screens, because the shell lives behind the guard).

   SELF-CONTAINED ON PURPOSE. Every other screen links
   tokens.css → base.css → <screen>.css, because every other
   screen is inside the shell. This one is not: templates/login.html
   is standalone, exactly as the canvas file is standalone with its
   own reset. So this file carries its own reset and its own
   literals rather than importing the shell's cascade — the sign-in
   page is the one screen that must still render when somebody is
   part-way through changing a token for the shell.

   Every value below is transcribed from the canvas, not chosen
   here: paddings, gaps, borders, shadows, min-heights, widths,
   font-sizes (whole clamp() expressions), letter-spacing and
   line-height are the canvas's. What changed is the copy and which
   fields exist — the third field is an admin-issued access key,
   not the canvas's rotating six-digit token, so it takes the
   design's own secret-field component instead of the digit grid.

   TWO VALUES ARE NOT LITERAL TRANSCRIPTIONS, AND BOTH SAY WHY AT
   THE POINT THEY APPEAR. The grid track carries a `min()` around
   the canvas's 430px floor so the single column can shrink under
   430px instead of overflowing the window — see THE FRAME below.
   And the mono stack is the canvas's `'JetBrains Mono', monospace`
   again: an earlier pass inserted 'Courier New' ahead of the
   generic, which is a face the canvas never names, so a page that
   failed to reach Google Fonts fell back to a different typeface
   here than the design falls back to. A fallback is a sizing
   decision like any other and comes across whole.
   ============================================================ */

/* ---- reset (the canvas helmet's <style>, verbatim) --------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
a { color: #0000E6; text-decoration: none; }
a:hover  { color: #3D3DFF; }
a:active { color: #0000A8; }
::selection { background: #0000E6; color: #FFFFFF; }

/* ============================================================
   THE FRAME — two panels, side by side until the column can no
   longer hold 430px, then stacked. One 44px gutter each.

   The canvas writes this track as `minmax(430px, 1fr)`, and the
   430px floor is honoured exactly: it is the canvas's own ruling
   on how narrow a panel may get, and it still puts the stack
   point at 860px, with the same track count and the same column
   widths at every width above it.

   What is adapted is the floor *below* 430px. A bare
   `minmax(430px, …)` goes on demanding 430px in a window that
   does not have it, so the page lays out 430px wide inside a
   390px window and scrolls sideways — measured +40px at 390,
   +110px at 320. The canvas does this too, and can afford to: an
   artboard is never narrower than its own artwork, and a browser
   window is. `min(430px, 100%)` computes to 430px at every width
   where the canvas's value has anything to say and to the window
   width below it, so nothing above 430px moves by a pixel and the
   overflow is gone. It is also what ui/CLAUDE.md's own layout
   rule asks for — tracks shrink; text stops wrapping at the text,
   never at a track minimum.
   ============================================================ */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  background: #FFFFFF;
}

/* ============================================================
   LEFT — the standing panel. Ink surface, so every small label
   goes to #8C8C8C and never #4C4C4C (2.5:1 on black).
   ============================================================ */
.standing-panel {
  background: #000000;
  color: #FFFFFF;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8C8C8C;
}

/* The wordmark tile. Cobalt behind Anton, the one place on this
   screen where the display face sits on a colour. */
.wordmark {
  display: inline-block;
  align-self: flex-start;
  background: #0000E6;
  color: #FFFFFF;
  padding: 12px 16px 9px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 3.3rem;
  line-height: 0.78;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

/* The statement. A verdict about how the door works, not a
   description of the form under it. */
.statement {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(1.1rem, 2.3vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  text-wrap: pretty;
  color: #FFFFFF;
}
/* Upright serif, acid — the phrase the sentence turns on. One per
   statement. */
.statement .lead {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.12em;
  color: #CCFF00;
  text-transform: none;
}
/* Italic serif — a judgement. Two per statement, no more. */
.statement .em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.12em;
  text-transform: none;
}

/* ---- the three standing facts ----------------------------- */
.facts {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #8C8C8C;
}
.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #4C4C4C;
}
.fact:last-child { border-bottom: none; }

.fact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8C8C8C;
}
.fact-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
/* A unit nested in a numeral resets tracking — the ladder's
   negative value is inheritable and scales off the parent. */
.fact-value .unit {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: normal;
  margin-left: 4px;
}
/* A fact whose value is a word, not a numeral: it drops to label
   scale rather than setting prose in the numeral slot. */
.fact-word {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CCFF00;
}

/* ---- the note that closes the panel ----------------------- */
.note {
  margin-top: auto;
  border: 1px solid #8C8C8C;
  border-left: 6px solid #CCFF00;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.note-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8C8C8C;
}
.note-body {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
  text-wrap: pretty;
}

/* ============================================================
   RIGHT — the access panel. Paper, so small mono is #4C4C4C.
   ============================================================ */
.access {
  padding: 44px;
  display: flex;
  flex-direction: column;
}

.crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4C4C4C;
  margin-bottom: 10px;
}

.title {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  line-height: 0.92;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

.form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}

/* ---- a field ---------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* A field whose head carries a control or a note, and whose foot
   carries a hint, opens up by 2px. */
.field-wide {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The head row. min-height holds the axis steady whether or not
   the right-hand side is there. */
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
  flex-wrap: wrap;
}
.field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4C4C4C;
}
.field-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4C4C4C;
}
.field-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4C4C4C;
  line-height: 1.7;
}

.input {
  border: 2px solid #000000;
  border-radius: 0;
  background: #FFFFFF;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000000;
  outline: none;
  width: 100%;
}
.input::placeholder { color: #8C8C8C; }
.input:focus { border-color: #0000E6; }
/* A typed secret tracks wider — the canvas's password treatment,
   which the access key takes as well. */
.input-secret { letter-spacing: 0.14em; }

/* `style-hover` / `style-active` on the canvas are pseudo-state
   attributes with no meaning in a browser; they become these. */
.reveal {
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0000E6;
  cursor: pointer;
}
.reveal:hover  { color: #3D3DFF; }
.reveal:active { color: #0000A8; }
/* The control is scripted, so it ships hidden and the script shows
   it. `display:inline-flex` beats the UA's [hidden] rule, hence
   this line: without it a no-JS browser gets a dead button. */
.reveal[hidden] { display: none; }

/* ---- the refusal ------------------------------------------ */
.refusal {
  border: 1px solid #000000;
  border-left: 6px solid #FF0033;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 560px;
}
.refusal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4C4C4C;
}
.refusal-head .icon { color: #000000; }
.refusal-message {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
  line-height: 1.4;
}
.refusal-body {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
  text-wrap: pretty;
}

/* ---- the action row --------------------------------------- */
.actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.submit {
  border: 1px solid #000000;
  border-radius: 0;
  background: #0000E6;
  color: #FFFFFF;
  box-shadow: 1px 1px 0 #000000;
  padding: 15px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.submit:hover  { background: #3D3DFF; box-shadow: 3px 3px 0 #000000; }
.submit:active { background: #0000A8; box-shadow: 1px 1px 0 #000000; }

/* ============================================================
   RECOVERY — two disclosures, opened by a checkbox latch and a
   :checked sibling selector. Same no-JS contract the shell keeps
   for its rail: nothing here needs a script to work.
   ============================================================ */
.recovery {
  position: relative;   /* the latches below are taken out of flow inside it */
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid #000000;
  padding-top: 16px;
  max-width: 560px;
}
/* Out of flow, so the latches are not flex items and the 14px gap
   does not count them. Still focusable — opacity, not display. */
.latch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.recovery-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.rlink {
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0000E6;
  cursor: pointer;
}
.rlink:hover  { color: #3D3DFF; }
.rlink:active { color: #0000A8; }
/* Red is an underline for a problem, never a fill. */
.rlink-password {
  padding: 0 0 3px;
  border-bottom: 2px solid #FF0033;
  color: #000000;
}
.rlink-password:hover  { color: #0000E6; }
.rlink-password:active { color: #0000A8; }

.rpanel {
  display: none;
  border: 1px solid #000000;
  background: #F7F7F7;
  padding: 15px 17px;
  flex-direction: column;
  gap: 7px;
}
.rpanel-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4C4C4C;
}
.rpanel-body {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
  text-wrap: pretty;
}

#latch-key:checked      ~ #panel-key      { display: flex; }
#latch-password:checked ~ #panel-password { display: flex; }

.sign::after { content: "+"; }
#latch-key:checked      ~ .recovery-links .rlink-key      .sign::after { content: "\2212"; }
#latch-password:checked ~ .recovery-links .rlink-password .sign::after { content: "\2212"; }

/* The latch is what the keyboard lands on, so the ring has to show
   on the label it drives. */
#latch-key:focus-visible      ~ .recovery-links .rlink-key,
#latch-password:focus-visible ~ .recovery-links .rlink-password {
  outline: 2px solid #0000E6;
  outline-offset: 3px;
}

/* ---- the line that closes the screen ---------------------- */
.access-foot {
  margin-top: auto;
  padding-top: 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4C4C4C;
}

.icon { display: block; }