/* ===========================================================================
   TRAPEX DEAL ROOM

   The COMMAND language from Design.md in the simulation repo, applied to an
   application rather than a page. The rules that carry over unchanged:

     ~90% black and white, 7% red, 3% yellow. Red marks the one thing that
     matters on a screen (a single primary action, or an alarm) and nothing
     else. Hover brightens to white; a cursor passing over a row is not an
     emergency.

     Pigment, not light. Flat colour, no glow, no bloom, no coloured shadows.

     Panels are square (0–2px). Controls are full pills. The contrast between
     the hard-edged dossier and the fully rounded control is the thing that
     reads as premium.
   ======================================================================== */

:root {
  --black:   #0A0A0C;
  --surface: #121216;
  --line:    #26262C;
  --white:   #F5F5F3;
  --grey:    #8B8B93;
  /* The quietest tone that still clears 4.5:1 on --black. Column headers and
     placeholders stop here; anything dimmer fails WCAG AA. */
  --dim:     #808089;
  --red:     #F4232B;
  --red-deep:#DE1F27;
  --yellow:  #FFD41C;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Anything given a display below would otherwise ignore the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }

.microlabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------------------------------------------------------------------------
   Focus. Keyboard is how someone moves through a form on a laptop, and how
   anyone using assistive technology moves through everything. White, not red:
   red is commitment, and moving focus across a control commits to nothing.
   ------------------------------------------------------------------------ */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Lock-on brackets (Design.md §3)

   Arms are a proportion of what is framed, ~12% of the short side, set per
   use through --arm. The corners sit in padding the element reserves, never
   on negative offsets that hang into a neighbour: a fixed-size frame around
   a phrase in a table row lands on the divider above it.
   ------------------------------------------------------------------------ */

.lockon {
  --arm: 6px;
  --inset: 7px;
  position: relative;
  display: inline-block;
  padding: var(--inset) calc(var(--inset) + 3px);
}
.lockon > i,
.lockon-frame > i {
  position: absolute;
  width: var(--arm); height: var(--arm);
  border: 0 solid var(--red);
  pointer-events: none;
}
.lockon > i:nth-of-type(1) { top: 0; left: 0;  border-top-width: 2px; border-left-width: 2px; }
.lockon > i:nth-of-type(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.lockon > i:nth-of-type(3) { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.lockon > i:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.lockon-frame { --arm: 10px; position: relative; }
.lockon-frame > i:nth-of-type(1) { top: 9px; left: 12px;  border-top-width: 2px; border-left-width: 2px; }
.lockon-frame > i:nth-of-type(2) { top: 9px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.lockon-frame > i:nth-of-type(3) { bottom: 9px; left: 12px;  border-bottom-width: 2px; border-left-width: 2px; }
.lockon-frame > i:nth-of-type(4) { bottom: 9px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out, opacity 150ms ease-out;
}
.btn-primary { background: var(--red); color: #0A0A0C; }
.btn-primary:hover { background: var(--red-deep); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--white); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.65); }

/* Small in type and padding only. The hit area stays at 44px, which is the
   floor for a pointer or a thumb; shrinking a label is a visual decision,
   shrinking what you can hit is a usability one. */
.btn-sm { min-height: 44px; padding: 0 22px; font-size: 11.5px; letter-spacing: 0.12em; }
.btn-block { width: 100%; }

.btn[disabled], .btn.is-busy {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.link {
  color: var(--grey);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.link:hover { color: var(--white); border-color: rgba(255,255,255,0.65); }

.iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 150ms ease-out, opacity 150ms ease-out;
}
.iconbtn:hover { border-color: rgba(255,255,255,0.65); }
.iconbtn[disabled], .iconbtn.is-off { opacity: 0.3; pointer-events: none; }
.iconbtn svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */

.field { margin-bottom: 22px; }
.field label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}
.field label span { color: var(--dim); }

.field .input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  transition: border-color 150ms ease-out;
}
.field .input::placeholder { color: var(--dim); }
.field .input:hover { border-color: rgba(255,255,255,0.65); }
.field.has-error .input { border-color: var(--red); }

.field-error {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--white);
}
.field-error::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--red);
}
.hint { margin-top: 8px; font-size: 12.5px; color: var(--grey); }

/* The password arrives pasted out of an email; not being able to see it is
   how it gets mistyped. */
.field-inline { position: relative; }
.field-inline .input { padding-right: 62px; }
.reveal {
  position: absolute;
  right: 5px;
  top: 33px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--grey);
  cursor: pointer;
  transition: color 150ms ease-out;
}
.reveal:hover { color: var(--white); }
.reveal svg { width: 17px; height: 17px; }

.nda {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  padding: 18px 20px;
  /* Tall enough that the link to the full agreement is visible without
     scrolling. Terms hidden below a fold are terms nobody reads. */
  max-height: 240px;
  overflow: auto;
  font-size: 13px;
  color: var(--grey);
  line-height: 1.65;
}
.nda p + p, .nda dl + p { margin-top: 10px; }

/* The link is the point of the box: the tick accepts the agreement, and this
   is where the agreement is. White, and the only underlined thing in here. */
.nda-doc {
  color: var(--white);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px;
  text-decoration: none;
  transition: border-color 150ms ease-out;
}
.nda-doc:hover { border-bottom-color: var(--white); }
.nda-alt { color: var(--dim); font-size: 12px; }
.nda-alt a { color: var(--dim); }

.nda-points { margin-top: 14px; }
.nda-points dt {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.nda-points dd { margin-top: 3px; }

.nda-attribution {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--dim);
}

.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); flex: none; }
/* Overrides .field label: this is an agreement someone has to read before
   ticking it, not a system label. Sentence case, body font, no tracking. */
.consent label {
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  color: var(--white);
}
.consent label span { display: block; margin-top: 3px; color: var(--grey); font-size: 12.5px; }

/* Hidden from people, so anything in it came from a bot. */
.botcheck {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------------ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.5;
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.notice-error { border-color: rgba(244,35,43,0.45); }
.notice-error svg { color: var(--red); }
.notice-ok svg { color: var(--white); }

/* ---------------------------------------------------------------------------
   Status chips. The only coloured one is the alarm state.
   ------------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-active { color: var(--white); }
.chip-alarm { color: var(--red); border-color: rgba(244,35,43,0.4); }
/* Opacity, never blur. The brand allows a pulsing dot and nothing more. */
.chip-alarm .dot { animation: pulse 2.4s ease-in-out infinite; }
.chip-revoked { color: var(--dim); border-style: dashed; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------------------
   Signed-out pages
   ------------------------------------------------------------------------ */

.auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
.auth-aside {
  padding: 56px 48px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.auth-aside h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
}
.auth-aside h2 em { font-style: normal; color: var(--red); }
.auth-aside p { margin-top: 20px; color: var(--grey); font-size: 15px; max-width: 34ch; }

.auth-main {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-main-inner { width: 100%; max-width: 440px; }
.auth-main h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 6px;
}
.auth-main .lede { color: var(--grey); font-size: 14.5px; margin-bottom: 34px; }
.auth-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: -4px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { gap: 12px; }
.btn-google svg { flex: none; }
.auth-alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* No rule under these two: they sit directly above the footer's own line, and
   two stacked hairlines read as clutter. Colour carries the link, hover shows it. */
.auth-alt .link { border-bottom: 0; padding-bottom: 0; }
.auth-alt .link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.auth-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.wordmark { display: flex; align-items: baseline; gap: 12px; }
.wordmark b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wordmark span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.ortho { border: 1px solid var(--line); border-radius: 2px; padding: 22px; background: var(--surface); }
.ortho svg { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Signed-in chrome
   ------------------------------------------------------------------------ */

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
}
.appbar-right { display: flex; align-items: center; gap: 20px; }
.whoami { text-align: right; line-height: 1.3; }
.whoami b { display: block; font-size: 13.5px; font-weight: 500; }
.whoami span { font-family: var(--font-mono); font-size: 11px; color: var(--grey); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 44px 32px 26px;
  flex-wrap: wrap;
}
.page-head h1 { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.1; }
.page-head .microlabel { display: block; margin-bottom: 12px; }

.section-label { display: flex; align-items: center; gap: 14px; padding: 30px 32px 14px; }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.foot-note {
  padding: 22px 32px 34px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   The document index
   ------------------------------------------------------------------------ */

/* Sized to the content each column carries: a reference, PDF / IMAGE / VIDEO,
   "128 pages" or "1.8 GB", and one Open button. What is left goes to the
   document's name and description, the only text here that should ever take
   a second line. The admin's list (.index-admin) sets its own columns. */
.index-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 96px 104px 116px;
  align-items: center;
  gap: 20px;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  transition: background 150ms ease-out;
}
.index-row:hover { background: var(--surface); }
.index-row.head span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.index-row .ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--grey); }
/* min-width 0 and anywhere: a title or filename with no spaces must wrap inside
   its column, not widen the column (which knocks every row out of line) or
   the page (which scrolls a phone sideways). */
.index-row .title { font-size: 15.5px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.index-row .title small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--grey); }
.index-row .meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--grey); }
.index-row .act { text-align: right; }
.index-row .ref, .index-row .meta, .index-row .act { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Admin tables
   ------------------------------------------------------------------------ */

.tabs { display: flex; gap: 26px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.tabs a {
  padding: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tabs a:hover { color: var(--white); }
.tabs a.is-current { color: var(--white); border-bottom-color: var(--red); }

/* The last column is sized to the widest set of actions a row can carry
   (Record, Decline, Approve: 328px at this type size), not to a round number.
   Every row is its own grid, so the column cannot size itself to its content:
   rows with different buttons would each get a different width and the
   columns to their left would stop lining up. */
.inv-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.2fr 104px 336px;
  align-items: center;
  gap: 18px;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  transition: background 150ms ease-out;
}
.inv-row:hover { background: var(--surface); }
.inv-row.head span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.inv-row .who b { display: block; font-size: 14.5px; font-weight: 500; }
.inv-row .who small { font-family: var(--font-mono); font-size: 12px; color: var(--grey); }
.inv-row .cell { font-family: var(--font-mono); font-size: 12.5px; color: var(--grey); word-break: break-word; }
.inv-row .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.inv-row .acts form { display: contents; }

/* Sized to what actually arrives. The address column was 140px, which holds
   an IPv4 address; most investors now connect over IPv6, 39 characters and
   no spaces, so it never wrapped and ran out past the column instead. The
   timestamp, event and address never break; the document column is the only
   free text, and the only one allowed to take a second line. */
.log-row {
  display: grid;
  grid-template-columns: 160px 150px minmax(0, 1fr) 300px;
  gap: 18px;
  padding: 12px 32px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--grey);
}
.log-row:hover { background: var(--surface); }
.log-row .what { color: var(--white); }
.log-row > :nth-child(1), .log-row > :nth-child(2), .log-row > :nth-child(4) { white-space: nowrap; }
.log-row > :nth-child(3) { overflow-wrap: anywhere; }
.log-row.head { color: var(--dim); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts > div { background: var(--black); padding: 20px 32px; }
.facts .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.facts .v { margin-top: 8px; font-size: 15px; word-break: break-word; }
.facts .v.mono { font-family: var(--font-mono); font-size: 13.5px; }

/* Empty states. The first screen after an install is an empty one, so it has
   to say what to do rather than show a blank panel. */
.empty { padding: 56px 32px 64px; border-top: 1px solid var(--line); }
.empty-head { font-size: 16px; font-weight: 500; }
.empty-body { margin-top: 8px; max-width: 56ch; color: var(--grey); font-size: 14px; }

/* ---------------------------------------------------------------------------
   The viewer
   ------------------------------------------------------------------------ */

/* The chain of definite heights that lets a page be sized to the space it has
   rather than to a fixed number: body is a column, the viewer takes what is
   left of it, and each box below passes a real height down. Without min-height
   0 at every step a flex child refuses to shrink below its content and the
   page overflows instead of fitting. */
/* The viewer is the one page that fills the window instead of scrolling it:
   the page image is sized to the space, so the space has to be a fixed
   quantity. Everything else on the site keeps the ordinary min-height and
   scrolls as long as its content needs. */
body:has(.viewer) { height: 100dvh; overflow: hidden; }

.viewer { display: grid; grid-template-columns: 160px 1fr; flex: 1; min-height: 0; }
/* A single image has no page rail. Hiding the rail with display:none was not
   enough. It leaves the grid template alone, so the stage slid into the
   160px column meant for thumbnails and the picture came out postage-stamp
   sized. The column has to go, not just its contents. */
.viewer-solo { grid-template-columns: 1fr; }
/* Grid and flex items default to min-height:auto, which means "never shrink
   below my content". Left at that, the stage grows to whatever the page image
   asks for and pushes the bottom of the document past the window, which is
   exactly what a page sized to `100%` of an unbounded parent will do. */
.stage, .rail { min-height: 0; }
.rail { border-right: 1px solid var(--line); padding: 18px 0; overflow-y: auto; }
.rail .microlabel { display: block; padding: 0 18px 14px; }
.thumb {
  display: block;
  width: calc(100% - 36px);
  margin: 0 18px 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
.thumb:hover { border-color: rgba(255,255,255,0.65); }
.thumb.is-current { border-color: rgba(255,255,255,0.65); }
/* No forced ratio and no cropping: the thumbnail takes the shape of the page
   it stands for. A4 portrait and a 16:9 slide are both documents, and a rail
   of portrait boxes holding cropped landscape slides shows neither. */
.thumb img { width: 100%; height: auto; display: block; }
.thumb span {
  position: absolute;
  left: 50%; bottom: -19px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--grey);
}

.stage { display: flex; flex-direction: column; min-width: 0; }
.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.stage-bar .doc-title { font-size: 14.5px; font-weight: 500; }
.stage-bar .doc-title span { font-family: var(--font-mono); font-size: 12px; color: var(--grey); margin-right: 10px; }
.pager { display: flex; align-items: center; gap: 12px; }
.pager .count { font-family: var(--font-mono); font-size: 12.5px; color: var(--grey); letter-spacing: 0.08em; }

.stage-body {
  flex: 1;
  min-height: 0;
  padding: 28px;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.012) 18px 36px),
    var(--black);
  /* Flex, not grid: a percentage max-height resolves against a flex
     container's definite height, which is what caps the page image. In a grid
     cell the same percentage had nothing to resolve against and the image
     overflowed its own box. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Every asset below is displayed, never offered. There is no download control
   anywhere in this interface, and for documents and images there is no file
   to download either. What arrives is an image with the reader's name in it. */
/* Fit the page to the space, whatever shape either of them is. Capping the
   width at a fixed number left a 16:9 slide stranded in the middle of a wide
   screen; capping only the width would let a tall page run off the bottom.
   Both dimensions are bounded and the aspect ratio is left alone. */
.asset { user-select: none; -webkit-user-drag: none; }

/* The image is made a direct child of the stage so that its max-height has a
   definite height to resolve against. Wrapping it in another box left the
   percentage unresolved, and once the wrapper became a flex container the
   default stretch pulled the image out of its own aspect ratio. Video keeps
   its wrapper, because the watermark overlay is positioned against it. */
.asset:not(.video-wrap) { display: contents; }

.asset img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  align-self: center;
  display: block;
  background: var(--surface);
}

.video-wrap { position: relative; }
.video-wrap video { width: 100%; height: auto; display: block; background: #000; }
/* Video is the one asset that leaves the server as a file, so its stamp is an
   overlay rather than burnt in. Someone technical can remove it; that is
   stated plainly in the spec rather than papered over. */
.video-stamp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,245,243,0.22);
  text-align: center;
  padding: 20px;
}

.stage-foot {
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Narrow screens

   Tables scroll sideways and keep every column. Hiding the action column is
   what makes an admin screen look tidier on a phone and stop working: Approve
   and Revoke simply would not be there.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px 24px; }
  .auth-main { padding: 40px 24px 56px; }
  .auth-main-inner { max-width: none; }

  .appbar, .page-head, .section-label, .foot-note { padding-left: 20px; padding-right: 20px; }
  .tabs { padding-left: 20px; padding-right: 20px; gap: 18px; }

  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll-x > * { min-width: 1040px; }
  /* The investors' room has one control a row and fits a tablet as it is.
     Scrolling it sideways would put Open off the edge of the screen. */
  .scroll-x.fits { overflow: visible; }
  .scroll-x.fits > * { min-width: 0; }

  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div { padding: 18px 20px; }

  .viewer { grid-template-columns: 1fr; min-height: 0; }
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 14px 6px;
  }
  .rail .microlabel { display: none; }
  .thumb { width: 74px; flex: none; margin: 0 12px 20px; }
  .stage-body { padding: 18px; }
}

@media (max-width: 560px) {
  .page-head h1 { font-size: 24px; }
  .btn { padding: 0 26px; }
}

/* ---------------------------------------------------------------------------
   Privacy policy: one readable column, nothing else
   ------------------------------------------------------------------------ */

.auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-privacy { font-size: 13px; }
.wordmark-link { color: inherit; text-decoration: none; }

.legal { max-width: 68ch; margin: 0 auto; padding: 48px 16px 72px; line-height: 1.65; }
.legal h1 { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1.1; margin: 10px 0 22px; }
.legal h2 { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 38px 0 10px; }
.legal p, .legal dd { color: var(--white); font-size: 15.5px; }
.legal p + p { margin-top: 12px; }
.legal dl { margin-top: 6px; }
.legal dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-top: 20px; }
.legal dd { margin: 4px 0 0; }
/* .legal p would otherwise set the date label at body size. */
.legal .microlabel { font-size: 11px; }

/* Registration: Google as the short way through the form */
.auth-google-first { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 8px; }
.auth-google-first .hint { margin: -2px 0 6px; text-align: center; }
.google-verified { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -10px 0 18px; font-size: 13px; }
.google-verified .microlabel { color: var(--grey); }
.input[readonly] { color: var(--grey); cursor: default; }

/* ---------------------------------------------------------------------------
   Page furniture that used to be inline styles, so a phone can reach it
   ------------------------------------------------------------------------ */

.page-notice { padding: 24px 32px 0; }
.page-block { padding: 8px 32px 28px; }
.page-form { max-width: 640px; }
.page-block .input {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 16px;
}
.page-note { padding: 20px 32px 0; color: var(--grey); font-size: 14px; max-width: 62ch; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.act-tools { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }

/* The admin's list of materials carries four controls a row where the room
   carries one, so it gets its own columns. The last is sized to the widest
   set (up, down, Withdraw, Delete: 330px), for the same reason as the
   investor table: every row is its own grid, and a column sized to each row's
   content would knock the columns to its left out of line. */
.index-row.index-admin { grid-template-columns: 74px 1fr 96px 104px 336px; }
/* Withdraw and Publish take turns in the same slot. One width for both keeps
   the arrows beside them in a straight line down the list. */
.index-admin .act-tools button[value="publish"],
.index-admin .act-tools button[value="unpublish"] { min-width: 124px; }
.legal-back { margin-top: 40px; }

/* The way back to the index carries a list mark for phones, where it shrinks to
   the mark alone. Not an arrow: an arrow beside the pager's own arrows reads
   as "previous page". On a desktop the words are enough. */
.stage-back svg { display: none; width: 14px; height: 14px; }

/* A finger has no hover. Without this a tapped row keeps its hover tint until
   something else is tapped, which reads as "still selected". */
@media (hover: none) {
  .index-row:hover, .inv-row:hover, .log-row:hover { background: transparent; }
}

/* ---------------------------------------------------------------------------
   Phones

   Up to 820px (phones either way up, and a tablet held upright) the tables
   stop being tables. A row that scrolls sideways hides
   the one thing on it that matters (Open, Approve) behind a gesture nobody
   thinks to make, so every row becomes a card with its action in reach of a
   thumb. Wider than that, the sideways scroll above still applies.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  /* Stacked above the form, the drawing pushes sign-in below the fold. */
  .auth-aside .ortho { display: none; }
  .auth-aside { gap: 0; }
}

@media (max-width: 820px) {

  /* --- chrome ---------------------------------------------------------- */

  .appbar { padding: 14px 16px; gap: 12px; }
  .appbar .wordmark { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .appbar .wordmark-lead { display: none; }
  /* The name is on every page they open, burnt into it. The bar needs the
     room for Sign out more than it needs to repeat it. */
  .whoami { display: none; }
  .appbar .btn-sm { padding: 0 18px; flex: none; }

  .page-head { padding: 28px 16px 20px; gap: 16px; }
  .page-head h1 { font-size: 26px; }
  .section-label { padding: 26px 16px 12px; }
  .foot-note { padding: 20px 16px 28px; gap: 10px; }
  .tabs { padding-left: 16px; padding-right: 16px; }
  .page-notice { padding: 20px 16px 0; }
  .page-block { padding: 8px 16px 24px; }
  .page-note { padding: 18px 16px 0; }
  .empty { padding: 40px 16px 48px; }

  /* --- signed-out pages ------------------------------------------------ */

  .auth-aside { padding: 24px 16px 22px; }
  .auth-aside h2 { font-size: 24px; margin-top: 22px; }
  .auth-aside p { margin-top: 10px; font-size: 14px; }
  .auth-main { padding: 28px 16px 40px; justify-content: flex-start; }
  .auth-main .lede { margin-bottom: 26px; }

  /* Text links get a thumb-sized hit area without changing how they look. */
  .auth-alt .link, .auth-foot .link, .google-verified .link, .legal-back .link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* A border would now sit at the bottom of the 44px box, well clear of the
     words. The underline has to follow the text instead. */
  .auth-foot .link, .google-verified .link, .legal-back .link {
    border-bottom: 0; padding-bottom: 0;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px;
  }
  .page-form .btn { width: 100%; }
  .auth-actions { gap: 16px; }
  .auth-foot { margin-top: 12px; padding-top: 8px; row-gap: 0; }

  .consent input { width: 22px; height: 22px; margin-top: 1px; }
  .nda { max-height: 300px; padding: 16px; }

  .legal { padding: 32px 16px 56px; }
  .legal h1 { font-size: 28px; }

  /* --- tables become cards --------------------------------------------- */

  .scroll-x.stack { overflow: visible; }
  .scroll-x.stack > * { min-width: 0; }
  .index-row.head, .inv-row.head, .log-row.head { display: none; }

  /* Documents: reference, format and extent on one line, the title under it. */
  .index-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
    padding: 18px 16px;
  }
  .index-row .ref { order: 1; }
  .index-row .meta { order: 2; font-size: 11.5px; }
  .index-row .meta::before { content: "· "; color: var(--dim); }
  .index-row .title { order: 4; flex-basis: 100%; font-size: 16px; }
  .index-row .act { order: 3; margin-left: auto; }
  .index-row .act-tools { order: 5; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; margin: 8px 0 0; }
  /* On a phone the two text buttons share what the arrows leave. */
  .index-admin .act-tools form:nth-child(n+3) { flex: 1 1 0; }
  .index-admin .act-tools form:nth-child(n+3) .btn { width: 100%; min-width: 0; padding: 0 12px; }

  /* In the investor's room the whole card opens the document, not just the
     pill. The pill stays as the visible cue. */
  .index-open { position: relative; }
  .index-open .act .btn::after { content: ""; position: absolute; inset: 0; }
  .lockon-frame > i:nth-of-type(1), .lockon-frame > i:nth-of-type(3) { left: 6px; }
  .lockon-frame > i:nth-of-type(2), .lockon-frame > i:nth-of-type(4) { right: 6px; }
  .lockon-frame > i:nth-of-type(1), .lockon-frame > i:nth-of-type(2) { top: 6px; }
  .lockon-frame > i:nth-of-type(3), .lockon-frame > i:nth-of-type(4) { bottom: 6px; }

  /* Investors: name and status, address, standing, then the actions. */
  .inv-row {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 6px 12px;
    padding: 18px 16px;
  }
  /* The status tag shares a line with the name only. Sharing it with the
     whole name-and-company block pushed a long company onto a second line
     beside empty space; unwrapped, the company takes the full width. */
  .inv-row .who { display: contents; }
  .inv-row .who b { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
  .inv-row > :nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; }
  .inv-row .who small { grid-column: 1 / -1; grid-row: 2; }
  .inv-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .inv-row > :nth-child(3) { grid-column: 1 / -1; grid-row: 4; }
  .inv-row > :nth-child(5) { grid-column: 1 / -1; grid-row: 5; margin-top: 10px; justify-content: stretch; }
  /* An address wider than the screen has to break somewhere. The markup
     offers the @; anywhere else is the last resort that keeps the card from
     growing wider than the phone. */
  .inv-row .cell { overflow-wrap: anywhere; word-break: normal; }
  .inv-row .acts .btn { flex: 1 1 0; padding: 0 12px; }

  /* Activity: what happened and when, then the detail and the address. */
  .log-row {
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 14px 16px;
  }
  .log-row > :nth-child(2) { grid-column: 1; grid-row: 1; font-size: 13.5px; }
  .log-row > :nth-child(1) { grid-column: 2; grid-row: 1; font-size: 11.5px; }
  .log-row > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .log-row > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 11.5px; color: var(--dim); }
  .log-row > :empty { display: none; }

  .facts { grid-template-columns: 1fr; }
  .facts > div { padding: 16px; }

  /* --- the viewer -------------------------------------------------------- */

  /* Every pixel of height belongs to the page. The thumbnail strip goes (the
     pager and a swipe do its job), the bar collapses to one line, and the
     footer keeps only the stamp. */
  .viewer .rail { display: none; }
  .stage-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
  }
  .stage-back { order: -1; width: 44px; padding: 0; }
  .stage-back svg { display: block; }
  .stage-back span { display: none; }
  .stage-bar .doc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .stage-bar .doc-title span { display: none; }
  .pager { gap: 6px; }
  .pager .count { font-size: 12px; letter-spacing: 0.04em; }
  .stage-body { padding: 10px; touch-action: pan-y pinch-zoom; }
  .stage-foot { padding: 10px 16px; }
  .stage-foot-extra { display: none; }
  .video-stamp { font-size: 10px; padding: 10px; }
}

@media (max-width: 560px) {
  .auth-aside p { display: none; }
}

/* A phone turned sideways has about 375px of height. In the viewer that is too
   little to share with two bars and a footer, so on short screens the page
   gets it all: the app bar and the footer go, and the one-line bar stays. The
   stamp is still burnt into the page, and "All materials" leads back to the
   index, where Sign out is. */
@media (max-height: 500px) and (max-width: 1100px) {
  body:has(.viewer) .appbar { display: none; }
  .viewer .stage-foot { display: none; }
  .viewer .stage-bar { padding-top: 4px; padding-bottom: 4px; }
  .viewer .stage-body { padding: 6px; }
}

/* ---------------------------------------------------------------------------
   Adding material: the drop zone and the progress panel
   ------------------------------------------------------------------------ */

.dropzone {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px dashed #3A3A42;
  border-radius: 2px;
  background: var(--surface);
  text-align: center;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.dropzone:hover { border-color: rgba(255,255,255,0.65); }
.dropzone:focus-within { outline: 2px solid var(--white); outline-offset: 3px; }
.dropzone.has-file { border-style: solid; min-height: 0; padding: 16px 18px; }
.dropzone.is-invalid { border-color: var(--red); border-style: solid; }
.dropzone.is-locked { opacity: 0.6; pointer-events: none; }

/* The real input, stretched over the whole zone and invisible: every click
   opens the picker and every drop lands on it, script or no script. */
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-empty { display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.dropzone-empty svg { width: 26px; height: 26px; color: var(--grey); }
.dropzone-title { font-size: 15px; color: var(--white); }
.dropzone-choose { border-bottom: 1px solid rgba(255,255,255,0.4); }
.dropzone-empty .microlabel { font-size: 10.5px; letter-spacing: 0.14em; }

.dropzone-file {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  pointer-events: none;
}
.dropzone-kind {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.dropzone-name { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-size { font-family: var(--font-mono); font-size: 12.5px; color: var(--grey); }
.dropzone-change { font-size: 13px; color: var(--grey); border-bottom: 1px solid var(--line); }
.dropzone:hover .dropzone-change { color: var(--white); }

/* Dragging a file over the zone locks on to it: the brand's red brackets,
   drawn in the corners. The one moment on this page that is a target. */
.dropzone.is-dragover { border-color: transparent; background: #16161B; }
.dropzone.is-dragover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --a: 16px;
  background:
    linear-gradient(var(--red), var(--red)) top left / var(--a) 2px,
    linear-gradient(var(--red), var(--red)) top left / 2px var(--a),
    linear-gradient(var(--red), var(--red)) top right / var(--a) 2px,
    linear-gradient(var(--red), var(--red)) top right / 2px var(--a),
    linear-gradient(var(--red), var(--red)) bottom left / var(--a) 2px,
    linear-gradient(var(--red), var(--red)) bottom left / 2px var(--a),
    linear-gradient(var(--red), var(--red)) bottom right / var(--a) 2px,
    linear-gradient(var(--red), var(--red)) bottom right / 2px var(--a);
  background-repeat: no-repeat;
}

.upload-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.upload-error { margin: 0 0 18px; }

.upload-progress {
  margin: 4px 0 22px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
}

.upload-steps {
  list-style: none;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  counter-reset: step;
}
.upload-steps li {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.upload-steps li::before { content: "0" counter(step) " "; }
.upload-steps li.is-current { color: var(--white); }
.upload-steps li.is-done { color: var(--grey); }
.upload-steps li.is-done::before { content: "✓ "; color: var(--white); }

.upload-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.upload-stage { font-size: 14.5px; font-weight: 500; }
.upload-percent {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* White on the hairline, not red: progress is information, and red on this
   page belongs to the one button that commits. */
.upload-bar {
  position: relative;
  height: 4px;
  margin: 12px 0 10px;
  background: var(--line);
  overflow: hidden;
}
.upload-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--white);
  transition: width 200ms linear;
}

.upload-detail {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grey);
}

/* Between the last byte arriving and the first page being counted there is
   nothing to measure yet. The bar says "working" and the number stays out of
   it rather than showing a 0% that is not true. */
.upload-progress.is-waiting .upload-percent { visibility: hidden; }
.upload-progress.is-waiting .upload-bar span {
  width: 30% !important;
  animation: upload-wait 1.3s ease-in-out infinite;
}
@keyframes upload-wait {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.upload-progress.is-complete { border-color: rgba(255,255,255,0.35); }

@media (max-width: 820px) {
  .dropzone-file { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dropzone-change { display: none; }
  .upload-actions .btn { width: 100%; }
}

/* The narrowest phones (320px) leave exactly the width the four controls need
   and not a pixel for rounding, so they wrapped. A little less air between
   them and inside the two text buttons keeps them on one line; the arrows
   keep their full 44px target. */
@media (max-width: 400px) {
  .index-admin .act-tools { gap: 6px; }
  .index-admin .act-tools form:nth-child(n+3) .btn { padding: 0 8px; letter-spacing: 0.08em; }
}

/* ---------------------------------------------------------------------------
   Zoom, in the toolbar under the page
   ------------------------------------------------------------------------ */

.zoom { display: flex; align-items: center; gap: 8px; }
.zoom-level {
  min-width: 72px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
.zoom-level:hover { border-color: rgba(255,255,255,0.65); }
.zoom-hint { margin-left: 8px; font-size: 10px; }
.stage-foot:has(.zoom) { padding-top: 8px; padding-bottom: 8px; }

.stage-body:not(.is-zoomed) .asset img { cursor: zoom-in; }

/* Zoomed, the image is bigger than its box. Centering with justify-content
   would clip its top-left off the scrollable area; auto margins center it
   while it fits and give way once it does not. */
.stage-body.is-zoomed { justify-content: flex-start; align-items: flex-start; cursor: grab; }
.stage-body.is-zoomed.is-panning { cursor: grabbing; }
.stage-body.is-zoomed .asset img {
  max-width: none;
  max-height: none;
  height: auto;
  margin: auto;
  align-self: auto;
  cursor: grab;
}
.stage-body.is-zoomed.is-panning .asset img { cursor: grabbing; }

@media (max-width: 820px) {
  .zoom-hint { display: none; }
  /* The stamp is burnt into the page; the toolbar needs the room more. */
  .stage-foot:has(.zoom) > .microlabel { display: none; }
}
@media (max-height: 500px) and (max-width: 1100px) {
  .viewer .stage-foot:has(.zoom) { display: flex; padding: 3px 10px; }
  .viewer .stage-foot:has(.zoom) > .microlabel { display: none; }
  /* Height is the scarce thing here: the controls shrink to 36px, still a
     comfortable thumb target side by side, and the page keeps the rest. */
  .viewer .zoom .iconbtn, .viewer .zoom-level { height: 36px; }
  .viewer .zoom .iconbtn { width: 36px; }
}

/* A page that takes a moment to arrive dims the one it replaces, so a turn
   is acknowledged at once even when the image is not there yet. */
.stage-body .asset img { transition: opacity 120ms ease-out; }
.stage-body.is-loading .asset img { opacity: 0.4; }

/* ---------------------------------------------------------------------------
   Two-step verification
   ------------------------------------------------------------------------ */

/* Facts about the key, in the label-over-value rhythm the investor record
   uses, rather than a browser's default definition list. */
.facts-inline { margin: 0 0 8px; border-top: 1px solid var(--line); }
.facts-inline dt {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.facts-inline dd { margin: 3px 0 14px; font-size: 14.5px; word-break: break-word; }

.auth-h2 {
  margin: 34px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}
.auth-p { margin-bottom: 18px; color: var(--grey); font-size: 14px; }

/* Eight codes read once and copied into a password manager: never wrapped
   mid-code, and spaced enough to read one line at a time. */
textarea.code-block {
  width: 100%;
  resize: vertical;
  line-height: 1.85;
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 820px) {
  /* A code is 39 characters and must be read in one line, so on a phone the
     type comes down to meet the screen rather than the code scrolling out of
     it. Read-only, so the smaller size is never typed into. */
  .field textarea.code-block { font-size: 13px; padding: 12px 14px; }
  .facts-inline dd { font-size: 14px; }
}