/* Tarifiniz — the shared recipe page.
 *
 * Laid out as the phone lays out its recipe card (recipe_screen.dart), on the
 * owner's word of 18 September 2026: the picture edge to edge, a white sheet
 * rising over its foot, the name in ink, one card for the durations, and the
 * measures and the steps as rows on the page. Every length below that has a
 * name on the phone is that length — the 246 of the picture, the 30 of the
 * sheet's corner, the 22 of the gutter, the 13 above and below a row.
 *
 * Every colour below is a value from app/lib/core/theme/palette.dart and
 * every type role from typography.dart, spelled in CSS. The page carries the
 * same three-face contract as the phone: .said is Fraunces italic and marks
 * what a person said, .got is DM Mono and marks what the phone worked out,
 * everything else is Noto Sans and says nothing about provenance.
 * Pomegranate appears on the conversion arrow and nowhere else.
 *
 * Self-hosted from the same subsetted files the app bundles, so the page
 * makes no request to a font server: a shared link should not report its
 * reader to a third party for the sake of a typeface. */

@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/Fraunces-Italic-400.ttf) format("truetype"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/Fraunces-600.ttf) format("truetype"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/DMMono-400.ttf) format("truetype"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/DMMono-500.ttf) format("truetype"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/NotoSans-400.ttf) format("truetype"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/NotoSans-700.ttf) format("truetype"); }

:root {
  color-scheme: light;

  /* Mine — enamel green: brand, primary actions. */
  --mine: #0F6B45;
  --mine-3: #27A26B;
  --mine-deep: #06291C;
  --mine-tint: #E6F2EB;

  /* Un — flour: the ground, and the ink on green. */
  --un: #F4F7F5;
  --surface: #FFFFFF;

  /* Nar — spent on the conversion arrow only. */
  --nar: #B01F42;

  /* Safran — the uncertainty dot, the timer chip, the aside. */
  --safran: #E8942A;
  --safran-tint: rgba(232, 148, 42, .12);
  --safran-wash: #FDF3E4;

  /* Is — soot: ink on the light ground. */
  --is: #11221B;
  --is-72: rgba(17, 34, 27, .72);
  --is-60: rgba(17, 34, 27, .60);
  --is-38: rgba(17, 34, 27, .38);
  --is-14: rgba(17, 34, 27, .14);
  --is-06: rgba(17, 34, 27, .06);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Insets: the radius scale, the sheet's corner and the gutter. */
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-sheet: 30px;
  --gutter: 22px;

  /* Shadows.card and Shadows.raised, tinted with the green-black. */
  --shadow-card: 0 6px 16px rgba(6, 41, 28, .04), 0 1px 3px rgba(6, 41, 28, .03);
  --shadow-raised: 0 12px 28px rgba(6, 41, 28, .08), 0 2px 6px rgba(6, 41, 28, .04);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--un);
  color: var(--is);
  font: 400 15px/1.45 var(--sans);
}
h1, h2, p, ul, ol, blockquote { margin: 0; }
a { color: inherit; }

/* ---- the three faces ---- */
.said { font-family: var(--serif); font-style: italic; font-weight: 400; }
.got  { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; font-style: normal; }
.got-quiet { font-family: var(--mono); font-weight: 400; font-style: normal; }

/* ---- chrome ---- */
.top { max-width: 600px; margin: 0 auto; padding: 14px var(--gutter) 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* The chef brings its own tile and its own corner; nothing here rounds it. */
.mark { width: 36px; height: 36px; display: block; flex: none; }
/* Set low in its box so the word's baseline, not its box, centres on the
 * tile: the T's cap and the dots stand above the x-height and would
 * otherwise push the word down by eye. */
.wordmark { height: 24px; width: auto; display: block; margin-top: -2px; }

.page { max-width: 600px; margin: 0 auto; padding: 0 var(--gutter) 24px; }
.foot { max-width: 600px; margin: 0 auto; padding: 8px var(--gutter) 44px; font-size: 11.5px; line-height: 1.55; color: var(--is-38); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.foot-nav a { color: var(--is-60); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }

/* ---- the recipe card: a picture, and the sheet that rises over its foot ---- */
/* Edge to edge on a phone, as the card is; an object on the ground from a
 * tablet up, where edge to edge would be a banner. */
.page.recipe { padding-left: 0; padding-right: 0; }
.recipe-card { background: var(--surface); border-radius: 0 0 var(--r-sheet) var(--r-sheet); box-shadow: var(--shadow-card); overflow: hidden; }

/* Where the photograph would be: RecipeMonogram's letter on its duotone, at
 * the hero's 246 and the hero's 72. The five pairs are RecipeImage's, and
 * they are classes because the policy this page is served under refuses a
 * style attribute — see MONOGRAM_TONES in format.ts. */
.hero {
  height: 246px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
}
.hero span {
  font: 600 72px/1 var(--serif);
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .9);
  /* The sheet covers the picture's last 30; the letter centres on what shows. */
  margin-top: calc(var(--r-sheet) * -1);
}
.tone-0 { --tone-from: #27A26B; --tone-to: #0F6B45; }
.tone-1 { --tone-from: #D9A83E; --tone-to: #9A6516; }
.tone-2 { --tone-from: #3FA9A0; --tone-to: #1C6F68; }
.tone-3 { --tone-from: #7FA755; --tone-to: #3F6B2E; }
.tone-4 { --tone-from: #E0806A; --tone-to: #A34430; }

.sheet {
  position: relative;
  margin-top: calc(var(--r-sheet) * -1);
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 26px var(--gutter) 30px;
}
.title {
  font: 600 32px/1.08 var(--serif);
  letter-spacing: -.02em;
  color: var(--is);
  overflow-wrap: anywhere;
}
.meta { margin-top: 10px; font-size: 11px; letter-spacing: .02em; color: var(--is-38); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.origin { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: var(--is-38); }
.who { margin-top: 12px; font-size: 14px; color: var(--is-60); }
.who .said { font-size: 16px; color: var(--is); }
.desc { margin-top: 12px; font-size: 15.5px; line-height: 1.4; color: var(--is-72); }

/* ---- a soft round chip with a glyph in it: SoftIcon ---- */
.soft-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mine-tint); color: var(--mine);
  display: grid; place-items: center;
}
.soft-icon svg { width: 47%; height: 47%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soft-icon.safran { width: 32px; height: 32px; background: var(--safran-tint); color: var(--safran); }

/* ---- how long, as it was said: one card, one clock, up to three figures ---- */
.durations {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 11px 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--is-06);
}
.durations .soft-icon { margin-right: 2px; }
.figure { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.figure .got { font-size: 14.5px; line-height: 1.3; color: var(--is); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure .label { font-size: 11px; line-height: 1.3; color: var(--is-38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- cards ---- */
/* One left: the call under the recipe. The measures and the steps stand on
 * the sheet itself, as they do on the phone. */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 8px 16px 14px;
  margin-top: 22px;
}
/* SectionLabel: 22 above, 11 below — less the row's own 13 under it. */
.slabel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 400 10px/1.3 var(--mono);
  letter-spacing: .16em;
  color: var(--is-38);
  margin: 22px 0 0;
}
/* How many the amounts are for: the one thing the card's stepper says that
 * a reader who cannot press it still needs. */
.slabel-note { letter-spacing: .02em; font-size: 11.5px; color: var(--is-60); }

/* ---- the signature strip: said → got ---- */
.convs { list-style: none; padding: 0; }
.conv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--is-14);
}
.conv:last-child { border-bottom: 0; }
.conv .said { font-size: 16px; line-height: 1.25; color: var(--is-72); overflow-wrap: anywhere; }
/* a heading over a run of lines — her word for a list inside the list */
.conv-group { padding: 18px 0 2px; }
.conv-group .said, .conv-group .got { font-size: 13.5px; line-height: 1.3; color: var(--is-60); }
.conv-group + .conv { border-top: 0; }
.arrow { text-align: center; font: 400 14px/1 var(--mono); color: var(--nar); }
.got-cell { text-align: right; min-width: 0; }
.conv .got { font-size: 17px; line-height: 1.3; color: var(--is); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--safran);
  margin-left: 5px; vertical-align: middle;
}
.note { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .06em; color: var(--is-38); margin-top: 2px; }
.estimate { font-size: 11.5px; line-height: 1.55; color: var(--is-38); margin: 12px 0 2px; }

/* ---- steps ---- */
.steps { list-style: none; padding: 0; }
.step { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--is-14); }
.step:last-child { border-bottom: 0; }
.num {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--mine-tint); color: var(--mine);
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  display: grid; place-items: center;
}
.step-body { flex: 1; min-width: 0; }
.instruction { font-size: 17.5px; line-height: 1.25; color: var(--is); }
.detail { font-size: 14.5px; line-height: 1.35; color: var(--is-60); margin-top: 7px; }
.timer { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.timer .said { flex: 1; font-size: 13.5px; line-height: 1.3; color: var(--is-60); }
.timer-word { flex: 1; font-size: 13px; color: var(--is-60); }
.timer .got { font-size: 14.5px; color: var(--is); }
.beside { background: var(--mine-tint); border-radius: var(--r-md); padding: 10px 12px 11px; margin-top: 12px; }
.beside-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--mine); margin-bottom: 5px; }
.beside .said { font-size: 14.5px; line-height: 1.35; color: var(--is-72); }

/* ---- asides ---- */
.aside {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--safran-wash);
  border-left: 3px solid var(--safran);
  border-radius: 0 18px 18px 0;
  font-size: 15.5px; line-height: 1.45;
  color: var(--is);
}

/* ---- where it came from: a credit, at the foot ---- */
.source { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 4px 0; text-decoration: none; }
.source .soft-icon { width: 32px; height: 32px; }
.source-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.source .got { font-size: 14.5px; line-height: 1.3; color: var(--is); overflow-wrap: anywhere; }
.source-verb { font-size: 12.5px; line-height: 1.3; color: var(--is-60); }
.source:hover .source-verb { text-decoration: underline; }

/* ---- the call ---- */
.cta { padding: 20px 18px 18px; margin: 26px var(--gutter) 0; }
.cta-title { font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--is); margin-bottom: 8px; }
.body { font-size: 14px; line-height: 1.55; color: var(--is-60); margin-bottom: 16px; }
.body .said { color: var(--is-72); }
.btn {
  display: block; text-align: center;
  background: var(--mine); color: var(--un);
  font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em;
  padding: 15px; border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 107, 69, .28);
}
.btn.ghost { background: transparent; color: var(--mine); box-shadow: none; border: 1.5px solid var(--is-14); }
.fine { font-size: 11.5px; line-height: 1.55; color: var(--is-38); margin-top: 14px; }

/* ---- the stores ---- */
/* Two badges, drawn here rather than loaded: the CSP admits no image from
 * elsewhere, and the mark of a store is one shape on a dark ground. Ink is
 * the page's own soot, not the stores' black, so the row sits in the palette
 * instead of beside it. */
.stores { margin-top: 18px; }
.stores-label { margin: 0 0 10px; }
.store-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Sized so that two fit inside the card on a 360 px phone with the store's
 * name whole — "Google Play" in bold is 80 px at this size, and a badge that
 * truncates the name of the store is worse than a smaller badge. */
.store {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--is); color: var(--un);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.store-glyph { flex: 0 0 20px; width: 20px; height: 20px; fill: currentColor; }
.store-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.store-cap, .store-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-cap { font-size: 10px; letter-spacing: .01em; opacity: .72; }
.store-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
/* Not in the store yet: the same badge, outlined, and it says so. It is a
 * span and not a link — a button that goes nowhere is found out by tapping. */
.store.soon { background: transparent; color: var(--is-60); box-shadow: none; border: 1.5px solid var(--is-14); }

/* ---- pages with no recipe on them ---- */
.plain { padding-top: 36px; }
.plain-title { font: 600 28px/1.1 var(--serif); letter-spacing: -.02em; color: var(--is); margin-bottom: 12px; }
.landing .plain-title { font-size: 32px; max-width: 14ch; }
.landing .body { font-size: 15px; max-width: 46ch; }
.landing .stores { margin-top: 4px; max-width: 360px; }

/* ---- the policy and the terms ----
 * Interface copy, so Noto Sans throughout: nothing on these pages was said
 * by a person or worked out by the phone, and the two marked faces would
 * claim a provenance the text does not have. Only the title keeps the serif
 * the other plain pages use. The fill marks are the drafts' own ■ — set on
 * the saffron wash the uncertainty dot uses, for the same reason: a value
 * that is not settled yet should look unsettled. */
.legal { padding-top: 28px; }
.legal h1 { font: 600 28px/1.12 var(--serif); letter-spacing: -.02em; color: var(--is); margin: 0 0 16px; overflow-wrap: anywhere; }
.legal h2 { font: 700 17px/1.25 var(--sans); letter-spacing: -.01em; color: var(--is); margin: 34px 0 8px; }
.legal h3 { font: 700 14.5px/1.3 var(--sans); color: var(--is-72); margin: 22px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--is-72); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 5px; }
.legal strong { color: var(--is); font-weight: 700; }
.legal code { font-family: var(--mono); font-size: .92em; color: var(--is); overflow-wrap: anywhere; }
.legal a { color: var(--mine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal mark.fill { background: var(--safran-tint); color: var(--is); border-radius: 4px; padding: 0 4px; }
.legal table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--is-72); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--is-14); }
.legal th:last-child, .legal td:last-child { padding-right: 0; }
.legal thead th { padding-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--is-38); }
.legal tbody th { font-weight: 700; color: var(--is); }
.legal .kv th { width: 38%; }

@media (max-width: 600px) {
  /* Four columns do not fit a phone. Each row becomes a card, with the
   * column's name above its cell from the same header the wide layout
   * draws — `data-label`, written by the renderer — and no script. */
  .legal .cols thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal .cols tr { display: block; padding: 10px 0 6px; border-bottom: 1px solid var(--is-14); }
  .legal .cols td { display: block; border: 0; padding: 0 0 8px; }
  .legal .cols td::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--is-38); margin-bottom: 1px; }
  .legal .cols td:first-child { color: var(--is); }
}

@media (max-width: 340px) {
  .conv .got { font-size: 15.5px; }
  .conv .said { font-size: 15px; }
  /* Side by side the badges would clip their own names; one under the other. */
  .store-row { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 640px) {
  /* From a tablet up the card is an object lying on the flour: all four
   * corners, a deeper shadow, and the column's own gutters back. */
  .page.recipe { padding-left: var(--gutter); padding-right: var(--gutter); }
  .recipe-card { border-radius: var(--r-sheet); box-shadow: var(--shadow-raised); }
  .hero { height: 280px; }
  .sheet { padding: 30px 32px 36px; }
  .title { font-size: 34px; }
  .cta { padding: 24px 22px 20px; margin-left: 0; margin-right: 0; }
}

/* A generated recipe's lines keep the derived face after review and sharing;
 * its name does not — a name is a title (the card's rule, 15 September 2026). */
.generated-phrase { font-size: 16px; line-height: 1.35; color: var(--is-72); overflow-wrap: anywhere; }