/* Page styling for recipe-box, built on the Organic design system.
 *
 * organic.css carries every color, font, space, radius and shadow. Nothing
 * here may hard-code one - if a value is missing from the tokens it is a page
 * concern, and it is declared below with a reason.
 *
 * Two rules of the system that shape everything here:
 *   - No dividers. Sections part on whitespace from the spacing scale, never
 *     on a rule or a box. The stylesheet this replaced was built from rules.
 *   - Left-aligned and asymmetric. Content hugs the left edge and the air goes
 *     on the right, rather than a centered column.
 */

:root {
  /* The page lattice, following the system's own landing template. */
  --leading: 28px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 62ch;

  /* Not a system token: the system has no monospace voice because nothing in
     it needed one. The verbatim card text does - it is the card as written,
     with its line breaks load-bearing, and a proportional face reflows it into
     something the card never said. */
  --font-verbatim: ui-monospace, "SF Mono", Menlo, monospace;

  /* The system's P1 body size, which its type scale sets at 17px against a
     15px P2. A recipe is read at arm's length on a counter, so the recipe
     column takes P1 and the chrome around it stays at P2. */
  --reading-size: 17px;

  /* Not system tokens: Organic has two accents and the queue has three kinds
     of doubt. A card that might already be in the box takes a blue, so it
     reads apart from the orange "disagrees" and the green "couldn't be read" -
     and lighter and darker than each, so hue is not the only difference. */
  --color-resembles-100: #dde6f0;
  --color-resembles-700: #2f4a6b;
  --color-resembles-800: #243a55;
}

body { text-wrap: pretty; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--edge) calc(3 * var(--leading)); }

/* — masthead — */
.nav { padding-inline: max(var(--edge), calc((100% - 1100px) / 2 + var(--edge))); }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-brand a { font: inherit; color: inherit; text-decoration: none; }
.nav-who { margin-left: auto; font-size: 13px; }
.nav form { display: inline; }

/* Words a screen reader says that the page does not show. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The links sit in the nav's row on a wide screen - the menu box takes no
   room of its own - and fold behind .nav-toggle on a phone, below. */
.nav { position: relative; }
.nav-menu { display: contents; }
.nav-toggle { display: none; }
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--color-accent-200); color: var(--color-accent-800);
}

@media (max-width: 700px) {
  .lockup-script { font-size: 19px; }
  .lockup-caps { font-size: 10px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 44px; height: 44px; flex: none; margin-left: auto;
    border-radius: 999px; border: 1px solid var(--color-divider);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
  }
  .nav-toggle .nav-count { position: absolute; top: 2px; right: 0; background: var(--color-accent); color: #fff; }
  .nav-menu { display: none; }
  /* Open, the menu drops over the page under the bar it came from. */
  .nav-toggle[aria-expanded="true"] + .nav-menu {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; z-index: 10; top: 100%; left: 0; right: 0;
    padding: var(--space-2) var(--edge) var(--space-6);
    background: var(--color-neutral-100); box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .nav-menu > a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--color-divider);
  }
  .nav-menu > a.nav-add {
    justify-content: center; margin: var(--space-4) 0 var(--space-1); border: 0;
    min-height: 48px; border-radius: 999px; background: var(--color-accent); color: #fff;
    font-family: var(--font-heading); font-size: 18px;
  }
  .nav-menu .nav-who { margin: var(--space-3) 0 0; }
  .nav-menu form { display: block; margin-top: var(--space-2); }
  .nav-menu form .btn { min-height: 44px; width: 100%; }
}

/* The wordmark, horizontal: the index-card mark, then "Penned" in script over
   nothing and "& PLATED" in tracked caps beside it. Values from the Penned &
   Plated handoff's nav lockup, which scales every part from its 160px icon.
   Homemade Apple and Fraunces are for this and nothing else. */
.lockup { display: flex; align-items: center; gap: 12px; color: var(--color-text); text-decoration: none; }
.lockup-mark {
  width: 41px; height: 41px; flex: none; border-radius: 9.2px; overflow: hidden;
  background: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
}
.lockup-card {
  position: relative; width: 30.2px; height: 23.1px; border-radius: 2px;
  background: var(--color-neutral-100); transform: rotate(-6deg);
  box-shadow: 0 1.5px 0 rgba(60, 20, 10, 0.25);
  display: flex; align-items: center; justify-content: center;
}
.lockup-rule { position: absolute; left: 2.3px; right: 2.3px; height: 1px; background: var(--color-accent-2-300); }
.lockup-rule-head { top: 4.4px; background: var(--color-accent-700); }
.lockup-rule-1 { top: 14.1px; }
.lockup-rule-2 { top: 18.7px; }
.lockup-monogram {
  position: relative; display: flex; align-items: center; padding-top: 2.3px;
  font-family: Fraunces, Georgia, serif; font-size: 9.5px; line-height: 1;
}
.lockup-amp { font-family: "Homemade Apple", cursive; font-size: 5.6px; padding-top: 2.3px; color: var(--color-accent-700); }
.lockup-script { font-family: "Homemade Apple", cursive; font-size: 22px; line-height: 1.3; white-space: nowrap; }
.lockup-caps { font-family: Fraunces, Georgia, serif; font-size: 13px; letter-spacing: 0.24em; white-space: nowrap; }

/* A checkbox that reads as one, with the accent where the browser allows it.
   Here rather than in organic.css, which is vendored and replaced wholesale. */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }

/* A card's own page: the reading on the left, what arrived on the right -
   two equal columns, as the import screen in the design handoff lays them. */
.card-page { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; margin-top: var(--space-4); }
.card-page h2 { margin: 0 0 var(--space-3); }
.reading-pane { padding: var(--space-4); gap: var(--space-2); }
.reading-pane p { margin: 0; }
.reading-pane .btn { align-self: flex-start; margin-top: var(--space-2); }
.card-page-scan { display: block; overflow: hidden; border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-neutral-100); }
.card-page-scan + .card-page-scan { margin-top: var(--space-3); }
.card-page-scan img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.card-page-note { font-size: 13px; margin: 12px 0 0; }
.card-page-note code { font-family: var(--font-verbatim); }

/* The photo of the finished dish a reading cut from its card. Contained,
   never cropped again: the box was left generous so the food is all there. */
.dish-photo { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--radius-md); }
.recipe-photo { margin: var(--space-3) 0 var(--space-4); max-height: 420px; }

/* A card being read: a small index card, tilted like the wordmark's, whose
   ruled lines fill in turn - the reading being written. Still for anyone who
   has asked for less motion. */
.reading-now { display: flex; align-items: center; gap: var(--space-3); }
.reading-card {
  position: relative; flex: none; width: 44px; height: 33px; border-radius: 3px;
  background: var(--color-neutral-100); transform: rotate(-6deg);
  box-shadow: 0 2px 0 rgba(60, 20, 10, 0.2);
  animation: reading-bob 2.4s ease-in-out infinite;
}
.reading-rule {
  position: absolute; left: 5px; height: 2px; border-radius: 1px; width: 0;
  background: var(--color-accent-700); animation: reading-write 2.4s ease-in-out infinite;
}
.reading-rule:nth-child(1) { top: 8px; }
.reading-rule:nth-child(2) { top: 15px; background: var(--color-accent-2-300); animation-delay: 0.4s; }
.reading-rule:nth-child(3) { top: 22px; background: var(--color-accent-2-300); animation-delay: 0.8s; }
@keyframes reading-write { 0% { width: 0; } 45%, 80% { width: 34px; } 100% { width: 0; } }
@keyframes reading-bob { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg) translateY(-2px); } }
/* The steps, one under another: done ones ticked, the current one in ink
   with the model's thinking indented beneath it, the rest still to come. */
.reading-steps { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.reading-steps li::before { content: "○"; display: inline-block; width: 1.4em; }
.reading-steps li.is-done { color: var(--color-text); }
.reading-steps li.is-done::before { content: "✓"; color: var(--color-accent-2); }
.reading-steps li.is-current { color: var(--color-text); font-weight: 600; }
.reading-steps li.is-current::before { content: "●"; color: var(--color-accent); }
.reading-steps li.is-stopped { color: var(--color-text); }
.reading-steps li.is-stopped::before { content: "✕"; color: var(--color-accent-700); }
/* The model's thinking: its words, so set apart from the page's own, and
   hung under the step it belongs to. */
.reading-thinking {
  margin: var(--space-1) 0 0 1.4em; padding-left: var(--space-3); max-width: 60ch;
  border-left: 2px solid var(--color-accent-2-300); font-style: italic; font-weight: 400; font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
details.reading-thinking summary { cursor: pointer; font-style: normal; }
details.reading-thinking p { margin: var(--space-2) 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reading-card, .reading-rule { animation: none; }
  .reading-rule { width: 34px; }
}

/* — the A-Z index — */
.index-head { padding: calc(1.5 * var(--leading)) 0 var(--leading); }
.index-head h1 { font-size: clamp(40px, 5.5vw, 68px); margin: 0; letter-spacing: -0.02em; }
.index-head .meta { margin: calc(var(--leading) / 2) 0 0; }

/* The A-Z index is the system's .table: the letter is the header cell, the
   rows carry its rules and hover tint, and the category reuses .tag the way
   the component's own status column does. */
.recipes { margin-bottom: calc(1.5 * var(--leading)); }
.recipes th { font-size: 13px; }
.recipes td { vertical-align: baseline; }
.recipes a { color: inherit; text-decoration: none; display: block; }
.recipes tr:hover a { color: var(--color-accent-700); }
.recipes .cats { text-align: right; white-space: nowrap; }
.recipes .cats .tag + .tag { margin-left: var(--space-1); }

/* — a recipe — */
.recipe { padding: calc(1.5 * var(--leading)) 0 0; max-width: var(--measure); }
.recipe h1 {
  font-size: clamp(34px, 4.4vw, 52px); margin: 0;
  letter-spacing: -0.02em;
  /* Titles are stored exactly as the card has them and a dozen are shouted in
     full caps, which Caprasimo sets very wide. Let a long one wrap rather than
     run off. */
  text-wrap: balance;
}
.recipe h2 {
  font-size: 25px; margin: calc(1.5 * var(--leading)) 0 var(--space-3);
}

.cat { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Most cards carry almost none of this - source is on 75 of 144, a cook time
   on 19 - so the line has to look deliberate when it holds one item. */
/* Muted colour comes from the system's .text-muted in the markup. */
.meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: 13px; margin: var(--space-3) 0 0;
}
.description { font-size: var(--reading-size); margin: var(--leading) 0 0; }

.ingredients { list-style: none; margin: 0; padding: 0; font-size: var(--reading-size); }
.ingredients li { padding: var(--space-1) 0; line-height: 1.45; }
/* Never a numeral column: qty holds "1 1/4", "1 to 2", "1/3 c. plus 2 tbsp."
   and "2 [?]". Aligning these as numbers would be a lie about the data. */
.ingredients .qty { font-weight: 600; }
/* The note and the optional marker take .text-muted and .tag .tag-accent-2
   from the system; nothing to declare here. */

.steps { margin: 0; padding-left: 1.4em; font-size: var(--reading-size); }
.steps li { padding-left: var(--space-1); margin-bottom: var(--space-3); line-height: 1.45; }
.steps::marker, .steps li::marker {
  font-family: var(--font-heading); color: var(--color-accent);
}

.notes { font-size: 15px; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--leading) 0 0; }

/* The archival record: the card as written, its line breaks part of what it
   says. Over-rounded on the sand surface so it reads as a kept thing rather
   than a debug dump. */
.verbatim {
  white-space: pre-wrap; font-family: var(--font-verbatim); font-size: 14px;
  line-height: 1.6;
  background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.15);
  padding: var(--space-4) var(--space-6);
  color: var(--color-neutral-800);
}

/* — footer — */
.footer { padding: calc(2 * var(--leading)) 0 0; font-size: 13px; }

@media (max-width: 600px) {
  :root { --leading: 24px; }
  .verbatim { padding: var(--space-3) var(--space-4); }

  /* A two-column row does not survive a phone: titles run to 45 characters
     and a category to "Snacks & Appetizers". The row stacks instead, title
     over tags, which keeps every title on the reading axis. */
  .recipes, .recipes thead, .recipes tbody, .recipes tr, .recipes td, .recipes th { display: block; }
  .recipes tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
  .recipes td { border: 0; padding: 0; }
  .recipes .cats { text-align: left; white-space: normal; margin-top: var(--space-1); }
  /* The letter's row is a heading, not a recipe: one rule, and flush with
     the titles under it. */
  .recipes thead tr { padding: 0; border: 0; }
  .recipes th { padding-inline: 0; }
}

/* — the review queue — */
.queue .why { white-space: nowrap; }
.queue .why .tag + .tag { margin-left: var(--space-1); }
.queue .legibility { text-align: right; }

/* Working a reading borrows the edit screen's frame: the reading on the left,
   the card it came from on the right, and a bar at the foot that says what is
   still outstanding. Correcting a value needs the card in view - that is the
   whole point of the screen. */
.review { padding: calc(1.5 * var(--leading)) 0 0; }
.review .back { font-size: 14px; text-decoration: none; }
.review-frame {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 52px; margin-top: var(--leading); align-items: start;
}
.review-main h6 { color: var(--color-accent-700); margin-bottom: var(--space-2); }
.review-main h2 { font-size: 24px; margin: calc(1.25 * var(--leading)) 0 var(--space-1); }
.review-main p.note { font-size: 13px; margin-bottom: var(--space-3); }
.review-main p.note code { font-family: var(--font-verbatim); }

.input.title {
  font-family: var(--font-heading); font-size: 28px; min-height: 58px;
  margin-bottom: var(--space-4);
}
.meta-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.seg.categories { flex-wrap: wrap; border-radius: var(--radius-md); }
/* Wrapped, `.seg-opt + .seg-opt` also borders whichever option starts row two,
   doubling the container's edge, and nothing divides one row from the next.
   Every option takes both dividers and sits 1px up and left, so
   `overflow: hidden` clips them wherever a row or the list begins. Options grow
   to fill their row, or the divider stops short under a shorter one. */
.seg.categories .seg-opt {
  flex-grow: 1; justify-content: center;
  border-left: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider);
  margin: -1px 0 0 -1px;
}

/* What has to happen before filing, ahead of the form it points into. */
.settle-list {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-accent-100);
}
.review-main .settle-list h2 {
  margin: 0 0 var(--space-1); font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--color-accent-800);
}
.settle-list ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.5; }
.settle-list li::marker { color: var(--color-accent); }
.settle-list code { font-family: var(--font-verbatim); }

/* A text area that grows with what it holds, so the end of a long line - where
   a misreading hides - is never scrolled out of sight inside its box. */
.input.grow { field-sizing: content; resize: none; line-height: 1.4; padding-block: 7px; }

.rows { display: flex; flex-direction: column; gap: var(--space-2); }
/* Quantity, unit, item. No numeral column and no width that assumes a number:
   qty holds "1 1/4", "1 to 2" and "2 [?]". The ingredient and its note share a
   column, stacked, so a long one wraps rather than squeezing its neighbours. */
.rows-head, .row {
  display: grid; grid-template-columns: 88px 96px minmax(0, 1fr) auto 32px;
  gap: 10px;
}
.rows-head { font-size: 12px; font-weight: 600; opacity: 0.75; }
.row { align-items: start; }
.row .cell { display: block; }
.row .caption { display: none; }
.row .what { display: flex; flex-direction: column; gap: 6px; }
/* One line until it needs more - the system's text area starts at four. */
.row .input.grow { min-height: 36px; }
.row .qty { font-family: var(--font-verbatim); font-size: 13px; text-align: center; }
.row .note { font-size: 13px; }
.row .check { min-height: 36px; }
/* The chip takes a line of its own rather than a column, so the inputs stay
   aligned down the list without every row reserving room for it. */
.row .flag { grid-column: 1 / -1; justify-self: start; }
.row:not(.is-flagged) .flag { display: none; }

.step { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); align-items: start; }
/* The system pills every .input, which is right for a line and wrong for a box:
   a pill around four lines of method wastes its corners and pushes the text off
   its own left edge. The handoff's edit screen makes the same exception. */
.review-main textarea.input { border-radius: var(--radius-md); }

.step .n {
  font-family: var(--font-heading); font-size: 17px;
  color: var(--color-accent); padding-top: var(--space-2);
}

.field.settle + .field.settle { margin-top: var(--space-3); }

.review-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 90px; }
/* Deliberately NOT .washed, which every other photograph in the system takes.
   The wash desaturates and drops contrast so an image sits back into the page -
   right for decoration, wrong for the one thing on screen you are squinting at
   to tell 1/2 t. from 1/2 T. Legibility wins over the house style here.
   Both faces stay on screen rather than behind a Front/Back switch, because a
   card that contradicts itself contradicts itself *across* the two, and
   switching hides half the evidence. */
.review-side .scan { display: block; border-radius: var(--radius-md); overflow: hidden; }
.review-side .scan + .scan { margin-top: var(--space-2); }
.card-peek { display: none; }
.card-peek [aria-expanded="true"] .when-closed,
.card-peek [aria-expanded="false"] .when-open { display: none; }
.review-side .verbatim {
  font-size: 13px; line-height: 1.8; padding: 0; background: none;
  border-radius: 0; opacity: 0.8;
}

/* The system's one soft shape for a bar that follows you down a long form. */
.save-bar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) 22px; margin-top: calc(1.25 * var(--leading));
  background: var(--color-surface); border-radius: 999px; box-shadow: var(--shadow-md);
  font-size: 13px;
}
.save-bar form { margin: 0; }
.save-actions { display: flex; gap: 10px; }

.discrepancies { margin: 0 0 var(--space-3); padding-left: 1.2em; font-size: var(--reading-size); }
.discrepancies li { margin-bottom: var(--space-2); line-height: 1.45; }
.settled { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Flash is a tinted patch, the system's one soft shape for a passing message. */
.flash {
  margin: var(--leading) 0 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: 15px;
}
.flash-notice { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.flash-alert { background: var(--color-accent-100); color: var(--color-accent-900); }

/* An example in an empty field, paler than anything typed, so it never reads
   as a value already filled in. `opacity` because Firefox dims placeholders by
   default and would dim this one again. */
.input::placeholder { color: var(--color-neutral-600); opacity: 1; }

/* — people — the box's members as tinted patches, an invitation on a paler
   one, since it is a person who has not arrived yet. */
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px; }
.person {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.person-pending { background: var(--color-neutral-100); gap: var(--space-1); }
.person-name { font-weight: 600; }
.person-name .text-muted { font-weight: 400; }
.person-email { font-size: 14px; overflow-wrap: anywhere; }
.person-status { font-size: 13px; font-weight: 600; color: var(--color-accent-700); }
.person form { margin: var(--space-1) 0 0; }
.people-alone { max-width: 560px; margin: var(--space-4) 0 0; }
.people-invite { margin: calc(1.5 * var(--leading)) 0 0; }

.invite {
  max-width: 560px; box-sizing: border-box;
  padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-neutral-100);
}
.invite h2 { margin: 0 0 var(--space-3); }
.invite .flash { margin: 0 0 var(--space-4); }
.invite .flash p { margin: 0; }
.invite-form { display: flex; flex-direction: column; gap: var(--space-3); }
.invite-note { font-size: 13px; margin: 0; }
.invite-back { margin: var(--space-4) 0 0; font-size: 14px; }

/* Below the handoff's ~900px note the sidebar stops being a sidebar. */
@media (max-width: 900px) {
  .review-frame { grid-template-columns: 1fr; gap: var(--leading); }
  .card-page { grid-template-columns: 1fr; gap: var(--leading); }
  .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The card comes first, rather than waiting below a form several screens
     long, and scrolls away with the page - pinned, it took the screen from
     the field being edited. The sidebar dissolves so the card can move ahead
     of the form and the rest fall in after it. */
  .review-side { display: contents; }
  .review-side > * { order: 1; }
  .review-side > .card-to-check {
    order: -1; margin-inline: calc(-1 * var(--edge)); border-radius: 0;
  }
  .review-side .scans { display: flex; gap: var(--space-2); overflow-x: auto; }
  .review-side .scan + .scan { margin-top: 0; }
  .review-side .scans .scan { flex: none; }
  .review-side .scans img { display: block; height: 28vh; width: auto; }

  .card-peek:not([hidden]) {
    display: flex; flex-direction: column; gap: var(--space-2);
    position: fixed; z-index: 5; top: 0; left: 0; right: 0;
    padding: var(--space-1) var(--edge) var(--space-2);
    background: var(--color-surface); box-shadow: var(--shadow-md);
  }
  .card-peek .card-kicker { display: flex; align-items: center; justify-content: space-between; }
  .card-peek .btn { min-height: 40px; text-transform: none; letter-spacing: 0; font-size: 14px; }
  .card-peek:has([aria-expanded="false"]) .scans { display: none; }
}

/* On a phone an ingredient is a card of labelled fields, not a table row. */
@media (max-width: 700px) {
  .meta-grid { grid-template-columns: 1fr; }

  /* Every line above the card is a line less of the form. */
  .nav { padding-block: var(--space-2); }
  .review { padding-top: var(--space-2); }
  .review-frame { margin-top: var(--space-2); gap: var(--space-4); }
  .review-side .scans img { height: 22vh; }
  .card-to-check .card-meta { display: none; }
  .review-main h6 .kicker-more { display: none; }
  /* Under 16px iOS zooms the page into whichever field takes focus. */
  .review-main .input { font-size: 16px; min-height: 44px; }
  .rows-head { display: none; }
  .row {
    grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--color-surface); border: 1px solid var(--color-divider);
  }
  .row.is-flagged { border-color: var(--color-accent); }
  .row .caption { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
  .row .what { grid-column: 1 / -1; gap: var(--space-3); }
  .row .input.grow { min-height: 44px; }
  .row .check { min-height: 44px; }
  .row .remove { justify-self: end; min-height: 44px; gap: 6px; }
  .row .remove .caption { display: inline; margin: 0; font-size: 14px; font-weight: 400; }

  /* The bar keeps its two buttons and gives up its sentence. */
  .save-bar { padding: var(--space-2); border-radius: var(--radius-lg); }
  .save-bar > .text-muted { display: none; }
  .save-actions { flex: 1; }
  .save-actions > * { white-space: nowrap; justify-content: center; padding-inline: var(--space-3); }
  .save-actions > input { flex: 1; }
}

/* — the queue index — */
.queue-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  padding: calc(1.5 * var(--leading)) 0 var(--space-1);
}
.queue-head h1 { font-size: clamp(32px, 4vw, 40px); margin: 0; }
.queue-head span { font-size: 14px; }
.lede { max-width: 70ch; font-size: 15px; margin-bottom: calc(1.25 * var(--leading)); }

.group + .group { margin-top: calc(2 * var(--leading)); }
.group-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.group-head h2 { font-size: 26px; margin: 0; }
.group-head .text-muted { font-size: 13px; }

.queue .reading { width: 34%; }
.queue .source { font-family: var(--font-verbatim); font-size: 12px; white-space: nowrap; }
.queue .settle { text-align: right; }
.queue td { vertical-align: top; }

.unreadable, .resemblances { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.unreadable .card, .resemblances .card { color: inherit; text-decoration: none; gap: var(--space-2); }
.unreadable .card:hover { background: var(--color-accent-100); }
.unreadable .thumb, .resemblances .thumb {
  height: 120px; width: 100%; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: var(--space-1);
}
/* A card that might already be in the box, in its own colour. */
.tag-resembles { background: var(--color-resembles-100); color: var(--color-resembles-800); }
.resemblances .card:hover { background: var(--color-resembles-100); }

/* The unread value itself, in the archive's voice for a quantity. */
.unreadable .value { font-family: var(--font-verbatim); font-size: 13px; color: var(--color-accent-700); }

.queue .more { display: block; margin-top: var(--space-1); font-size: 12px; }
.queue-jump { display: none; }

/* On a phone the table is a list of cards, one per reading, each a single tap
   to its reading page - a three-column table runs off a phone's edge. The
   disagreement is cut at three lines; the reading page has it in full. */
@media (max-width: 700px) {
  .queue-jump { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--leading); }
  .queue-jump a {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px;
    padding: 0 14px; border-radius: 999px; font-size: 14px; text-decoration: none; color: inherit;
    background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  }
  .queue-jump b { color: var(--color-accent-700); }
  .queue-jump b.resembles { color: var(--color-resembles-700); }

  .queue, .queue tbody { display: block; }
  .queue thead { display: none; }
  .queue tbody { display: flex; flex-direction: column; gap: var(--space-3); }
  .queue tr {
    display: flex; flex-direction: column; gap: var(--space-1); position: relative;
    padding: var(--space-3) 40px var(--space-3) var(--space-3);
    border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
  }
  .queue td { display: block; padding: 0; border: 0; width: auto; }
  .queue .title { font-family: var(--font-heading); font-size: 18px; line-height: 1.2; }
  .queue .what { font-size: 15px; line-height: 1.45; }
  .queue .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* The whole card is the link: it stretches over the row, and the word
     gives way to a chevron. */
  .queue .settle { display: contents; }
  .queue .settle .btn { position: absolute; inset: 0; font-size: 0; padding: 0; min-height: 0; border-radius: inherit; }
  .queue tr::after, .unreadable .card::after, .resemblances .card::after {
    content: "›"; position: absolute; right: 16px; top: 50%; translate: 0 -50%;
    font-size: 24px; color: var(--color-accent-700); pointer-events: none;
  }

  .unreadable, .resemblances { grid-template-columns: 1fr; gap: var(--space-3); }
  .unreadable .card, .resemblances .card { position: relative; padding-right: 40px; }
  .unreadable .card:has(.thumb), .resemblances .card:has(.thumb) { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
  .unreadable .card:has(.thumb) > :not(.thumb), .resemblances .card:has(.thumb) > :not(.thumb) { grid-column: 2; }
  .unreadable .thumb, .resemblances .thumb { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; }
  .unreadable .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* — the same card? — */
/* One reading at a time, in a single column at any width: the photo is what
   gets compared, and it wants the room. The switch is two radios, and only
   the side whose radio is checked shows. */
.compare {
  max-width: 640px; display: flex; flex-direction: column; gap: var(--space-4);
  padding: calc(1.5 * var(--leading)) 0 0;
}
.compare .back { font-size: 14px; text-decoration: none; }
.compare-head h1 { font-size: clamp(32px, 4vw, 40px); margin: 0 0 var(--space-2); }
.compare-head .lede { margin: 0; }
.compare-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-switch .seg-opt { justify-content: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.compare-side { display: none; flex-direction: column; gap: var(--space-3); }
.compare:has(#side-0:checked) #compare-0,
.compare:has(#side-1:checked) #compare-1 { display: flex; }
.compare-side .scan { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-100); }
.compare-side .scan + .scan { margin-top: var(--space-2); }
.compare-side .scan img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.compare-differs { margin: 0; font-size: 14px; line-height: 1.45; }
.compare-differs code { font-family: var(--font-verbatim); }
.compare-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.compare-actions p { margin: 0; font-size: 13px; }
.compare-actions > a { align-self: center; min-height: 44px; display: flex; align-items: center; }
.compare .button_to .btn { width: 100%; min-height: 52px; font-size: 16px; }

/* — the way in — */
/* The five sign-in screens share one shape: a centred column, a panel, and a
   line underneath. Nothing else on the site is centred like this, which is the
   point — being signed out should not look like a page of the archive. */
.gate {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-6);
}
.gate-panel {
  width: min(468px, 100%); box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.gate-panel h1 { font-size: 42px; margin: 0 0 var(--space-2); letter-spacing: -0.015em; }
.gate-panel p { margin: 0 0 var(--space-4); }
.gate-panel p:last-of-type { margin-bottom: 0; }
.gate-form { margin-top: var(--space-4); }
.gate-note { font-size: 13px; text-align: center; margin: 0; }