html { background: #FBF9F5; }
body { margin: 0; min-height: 100vh; }

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
  src: url('/fonts/figtree-latin-400-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/atkinson-hyperlegible-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('/fonts/atkinson-hyperlegible-latin-700.woff2') format('woff2');
}

.kitchen {
  --ground: #FBF9F5;
  --field: #F5F0E7;
  --ink: #211E1A;
  --ink-secondary: #57514A;
  --ink-muted: #7A7166;
  --edge: #8A8073;
  --placeholder: #57514A;
  --track: #EBE4D9;
  --serious: #A14D2E;
  --on-ink: #FBF9F5;

  color-scheme: only light;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.kitchen *, .kitchen *::before, .kitchen *::after { box-sizing: border-box; }

/* The column. Generous at the sides because a long line of prose is a hard
   line to track back from, and this reader is not going to try twice. */
/* ONE DECISION, SITTING WHERE THE EYE LOOKS FOR IT.
   Almost every screen here is short by design, and a short screen pinned to the
   top of a tall iPad hangs off the ceiling with two thirds of the page empty
   under it -- which reads as a form that has not finished loading rather than
   as a page somebody wrote. So the column is centred in whatever height there
   is, and a screen with more on it than fits simply flows, because the content
   is never squeezed and justify-content stops applying once it overflows.
   min-height: 100% and not 100vh: the mount is inside somebody else's
   document and vh would measure the wrong box. */
.kitchen .screen-root {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vh first, then dvh for the browsers that have it: a percentage would
     resolve against a parent whose height is auto and quietly do nothing,
     which is what the first attempt at this did. */
  min-height: 100vh;
  min-height: 100dvh;
}
.kitchen .screen {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 72px 44px;
}

/* THE LINE DRAWINGS. See src/lib/design/art.ts for why there are any.
   Secondary ink: present, and quieter than every word on the page, because it
   is the one thing here that is not information. It scales down on a phone
   rather than being hidden -- the screens that carry one are the screens where
   somebody is arriving or stopping, and that is exactly when a phone reader
   needs the page to feel like something a person made. */
.kitchen .art { margin: 0 0 20px; color: var(--ink-secondary); line-height: 0; }
.kitchen .art svg { width: 96px; height: 96px; }
.kitchen .prose, .kitchen .ask, .kitchen .lede { max-width: 680px; }

.kitchen .eyebrow {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

/* DISPLAY TYPE IS TRACKED IN. Figtree at 48px carries the spacing it was drawn
   for at 16px, which reads as gappy rather than composed. See TRACKING. */
.kitchen .ask, .kitchen h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.024em;
  margin: 0 0 24px;
}
.kitchen .welcome .ask {
  font-size: 56px;
  letter-spacing: -0.026em;
}
.kitchen h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.024em;
  margin: 48px 0 16px;
}

.kitchen p { margin: 0 0 16px; }
.kitchen .lede { font-size: 24px; line-height: 1.55; }
.kitchen .quiet { font-size: 21px; color: var(--ink-secondary); }
.kitchen .meta {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.kitchen .meta-small { font-size: 17px; }

/* One field, and it is the widest thing on the page. A narrow box says "put a
   word here" when the honest answer is often a sentence.

   A FILL AND A BORDER, NEVER ONE ALONE. The fill says this is a different kind
   of surface; the border says where it ends. A borderless field does not
   announce itself to somebody who is not already looking for it. */
.kitchen .field-set { margin: 0 0 32px; }
.kitchen .field-label {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-secondary);
  margin: 0 0 8px;
}
.kitchen .field {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--edge);
  border-radius: 22px;
}
.kitchen textarea.field { min-height: 160px; resize: vertical; }
/* Italic and not faint: the muted ink is 4.22:1 on the fill, under the floor,
   and nothing here may depend on colour alone anyway. */
.kitchen .field::placeholder { color: var(--placeholder); font-style: italic; }
.kitchen .field-help {
  font-size: 17px;
  color: var(--ink-muted);
  margin: 8px 0 0;
}

/* "I'm not sure" and "There isn't one" sit HERE, beside the answer, at the same
   weight as any other control. Buried, they are not used; unused, the vault
   fills with confident lies. */
.kitchen .escapes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}
.kitchen .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 40px 0 0;
}

/* PILLS. A fully rounded control reads as pressable at a glance and at a
   distance; a 10px rectangle reads as a form on a website. */
.kitchen .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.kitchen .btn-primary {
  min-height: 76px;
  font-size: 24px;
  font-weight: 500;
  color: var(--on-ink);
  background: var(--ink);
  border-color: var(--ink);
}
.kitchen .btn-secondary {
  min-height: 66px;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border-color: var(--edge);
}
/* Colour AND weight, never colour alone. */
.kitchen .btn-serious {
  color: var(--serious);
  border-color: var(--serious);
  font-weight: 500;
}
.kitchen .btn[disabled] { cursor: default; opacity: 1; }

/* A back link is a touch target. The ones that get made small are always the
   ones somebody needs when they are stuck. */
.kitchen .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 12px 0 0;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-secondary);
  background: none;
  border: 0;
  cursor: pointer;
}

.kitchen :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* NO CARDS AND NO TINTS. A panel is a group of things, and a group is made by
   space. Slice 21 took the fill and the corner radius off this: every box drawn
   on this surface was a step towards it looking like an app, and none of them
   was carrying meaning that the space around them was not. */
.kitchen .panel { margin: 0 0 40px; }
.kitchen .note {
  padding: 0;
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-secondary);
}
/* Serious is colour AND weight, so a reader with any colour blindness gets the
   same page. There is no tint behind it and no rule beside it. */
.kitchen .note-serious {
  color: var(--serious);
  font-weight: 500;
}

/* Progress is a rule that fills. No spinner, anywhere: a spinner says
   "something is happening and I will not tell you what", which during a
   four-second key derivation is the sentence that gets the button pressed
   again. */
.kitchen .rule-progress {
  margin-top: 16px;
  height: 6px;
  background: var(--track);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 12px;
}
.kitchen .actions + .rule-progress { margin-top: 48px; }
.kitchen .rule-progress > .filled {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 400ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .kitchen .rule-progress > .filled { transition: none; }
}

/* A list of subjects, held apart by space rather than by a hairline under each
   one. Twenty rules down a page is a table, and a table is a form. */
.kitchen .topics { list-style: none; margin: 0; padding: 0; }
.kitchen .topic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
}
.kitchen .topic-name { font-size: 24px; }
.kitchen .topic-state {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-left: auto;
}
/* NO is-gap class any more. Slice 23 took the serious colour off these rows: it means
   something is missing and nobody can recover it, and an unanswered question on
   a vault started yesterday is neither. See src/lib/interview/render.ts. */
.kitchen .topic-state.is-done { color: var(--ink-secondary); }

/* What is MISSING. Serious, and said in words as well as in colour. */
.kitchen .gaps { list-style: none; margin: 0 0 24px; padding: 0; }
.kitchen .gaps > li {
  padding: 0;
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.55;
}
/* A plain list is not a gap list. Reusing the gap styling for "things you do
   not need to do" put a warning beside every reassurance, which is the opposite
   of what those sentences are for. Found by looking at the page. */
.kitchen ul.plain-list { list-style: none; margin: 0 0 24px; padding: 0; }
.kitchen ul.plain-list > li {
  padding: 0;
  margin: 0 0 16px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.kitchen .gap-what {
  display: block;
  font-weight: 500;
  font-size: 18px;
  color: var(--serious);
}

/* A VALUE THAT MUST BE COPIED DOWN BY HAND: a recovery code, a vault number, a
   digest. The one place Atkinson Hyperlegible earns its keep -- 1, l and I
   cannot be confused with one another here, and neither can 0 and O. It is
   shaped like a field because that is what it is: the counterpart a person
   reads OUT of. */
.kitchen .transcribe {
  font-family: 'Atkinson Hyperlegible', Verdana, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.55;
  background: var(--field);
  border: 1.5px solid var(--edge);
  border-radius: 22px;
  padding: 24px 28px;
  margin: 0 0 24px;
  word-break: break-word;
}

.kitchen .icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WHAT THE PRINTER SEES IS THE PAPER AND NOTHING ELSE.

   Slice 17 prints the binder straight out of the interview, so the page holds
   two things at once: the screen somebody is looking at, and the document they
   are about to print. On paper only the second exists -- the same arrangement
   the offline decryptor has had since slice 06, where #chrome is hidden and
   #binder is the page.

   !important because .screen-root is a container with no other rules and
   nothing to lose a specificity argument to, and because a printed binder with
   a "Save and go on" button across the top of it is a wasted sheet of paper
   rather than a cosmetic problem. */
@media print {
  .kitchen .screen-root { display: none !important; }
}

/* ONE SHEET, FOR THE RECOVERY CODE. It goes through the paper root because the
   screen itself is hidden in print; see printTheCode in src/interview/main.ts.
   On screen it is never shown, because the paper root is hidden except while
   something is being printed. */
.kitchen .code-sheet { max-width: 680px; padding: 32px 0; }
.kitchen .code-sheet h1 { font-size: 32px; margin: 0 0 20px; }
.kitchen .code-sheet p { font-size: 21px; line-height: 1.55; }

/* One decision per screen holds at any width; what changes is the room around
   it. Nothing here reflows into a second column, because a second column is a
   second decision. */
@media (max-width: 700px) {
  .kitchen .screen { padding: 32px 24px 36px; }
  .kitchen .ask, .kitchen h1, .kitchen .welcome .ask { font-size: 32px; }
  .kitchen .btn { width: 100%; }
  .kitchen .art svg { width: 72px; height: 72px; }
}