/* apps/ip/door/door.css — the doors: one small page per search people make
 * (owner, 2026-11-11: "many doors", docs/ip-concept.md). Each door is its own
 * errand, answered instantly, with the front page one link away.
 *
 * Same material as the app and the 404, and the same rules as ip.css:
 *   - no border-radius, no box-shadow, no backdrop-filter
 *   - Archivo, self-hosted, nothing else
 *   - cream = what you are told, cold blue = structure, amber = you only
 * No canvas, no map, no content/*.json: a door must be fast before it is
 * anything else. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-var.woff2') format('woff2');
}

:root {
  --ground: #05070d;
  --cream: #f2ede3;
  --cold-1: #cfe3ff;
  --cold-2: #8fa9c9;
  --cold-3: #5c7fa8;
  --cold-4: #2a3c55;
  --amber: #f5a623;
  --gutter: clamp(16px, 4vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--ground); }
body {
  min-height: 100vh;
  padding: clamp(40px, 9vh, 96px) var(--gutter) 48px;
  font-family: 'Archivo', sans-serif;
  color: var(--cold-2);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 760px; margin: 0 auto; }

/* The question, small, the way the front page labels its address. */
h1 {
  color: var(--cold-2); font-size: 15px; font-weight: 400;
  letter-spacing: .02em; text-align: center;
}

/* THE ANSWER. Same weight and stretch as the front page's address. */
.big {
  margin: 14px 0 6px; text-align: center; color: var(--cream);
  font-weight: 260; font-stretch: 108%; letter-spacing: -.01em; line-height: 1.05;
  font-size: clamp(30px, 9vw, 84px);
  overflow-wrap: normal;
}
.big.long { font-size: clamp(22px, 5.4vw, 52px); }
.big.pending { color: var(--cold-4); }
.verdict {
  text-align: center; color: var(--cream); font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 340; line-height: 1.35; max-width: 34ch; margin: 0 auto;
}

.copyRow { text-align: center; margin-top: 10px; }
button, input {
  font: inherit; color: inherit; background: none; border: 0;
}
.copy {
  color: var(--cold-3); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; padding: 10px 12px; min-height: 44px;
}
.copy:hover { color: var(--cold-1); }
.copy[data-done="1"] { color: var(--amber); }
.copy[hidden] { display: none; }

/* Facts: the same hairline rows as the front page's facts. */
dl {
  margin: 34px auto 0; max-width: 560px;
  border-top: 1px solid var(--cold-4);
}
dl > div {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cold-4);
  align-items: baseline;
}
dt {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cold-3);
}
/* `hidden` has to actually hide: the grid above outranks the UA rule. */
dl > div[hidden] { display: none; }
dd { color: var(--cream); font-size: 17px; overflow-wrap: anywhere; }
dd .sub { display: block; color: var(--cold-2); font-size: 13px; margin-top: 3px; }

.note {
  margin: 22px auto 0; max-width: 56ch; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--cold-3);
}

/* The checker's one field: a hairline, not a box. */
form { margin: 30px auto 0; max-width: 560px; display: flex; gap: 12px; align-items: flex-end; }
label { display: block; flex: 1; font-size: 11px; letter-spacing: .16em;
        text-transform: uppercase; color: var(--cold-3); }
input {
  display: block; width: 100%; margin-top: 8px; padding: 8px 0;
  color: var(--cream); font-size: 20px; letter-spacing: .01em;
  border-bottom: 1px solid var(--cold-3); border-radius: 0;
}
input:focus { outline: none; border-color: var(--cream); }
form button {
  color: var(--cream); font-size: 13px; letter-spacing: .08em; cursor: pointer;
  border-bottom: 1px solid var(--cold-3); padding: 8px 2px; min-height: 44px;
}
form button:hover { border-color: var(--cream); }

/* Plain prose below the fold: what a search engine reads and what a
 * curious visitor scrolls to. Never above the answer. */
.prose { margin: 64px auto 0; max-width: 60ch; font-size: 15px; line-height: 1.65; }
.prose h2 { color: var(--cream); font-size: 17px; font-weight: 440; margin: 30px 0 8px; }
.prose p { margin: 0 0 12px; }
.prose code { color: var(--cold-1); font-family: inherit; letter-spacing: .02em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 6px 0 12px; }
.prose td { padding: 7px 0; border-bottom: 1px solid var(--cold-4); vertical-align: top; }
.prose td:first-child { color: var(--cold-1); padding-right: 16px; white-space: nowrap; }

a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--cold-3); }
a:hover { border-color: var(--cream); }
a:focus-visible, button:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }

/* The way back to the front page, and across to the other doors. */
nav.doors {
  margin: 64px auto 0; max-width: 760px; padding-top: 18px;
  border-top: 1px solid var(--cold-4);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
nav.doors a { color: var(--cold-2); border: 0; padding: 8px 0; }
nav.doors a:hover { color: var(--cream); }
nav.doors a[aria-current] { color: var(--cream); }
nav.doors a.home { color: var(--cream); }