/* Tarifiniz — the shared recipe page.
 *
 * 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, the hero, primary actions. */
  --mine: #0F6B45;
  --mine-3: #27A26B;
  --mine-deep: #06291C;
  --mine-tint: #E6F2EB;

  /* Un — flour: the ground, and the ink on green. */
  --un: #F4F7F5;
  --un-72: rgba(244, 247, 245, .72);
  --un-55: rgba(244, 247, 245, .55);
  --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 and the gutter. */
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --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: 16px var(--gutter) 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 34px; height: 34px; border-radius: 8px; display: block; }
.wordmark { height: 24px; width: auto; display: block; }

.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 hero: the app's enamel header ---- */
.hero {
  background: var(--mine);
  color: var(--un);
  border-radius: var(--r-xl);
  padding: 24px var(--gutter) 34px;
  margin-top: 6px;
}
.tile {
  width: 84px; height: 84px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
  display: grid; place-items: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-raised);
}
.tile span {
  font: 600 42px/1 var(--serif);
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .9);
}
.title {
  font: 600 30px/1.08 var(--serif);
  letter-spacing: -.02em;
  color: var(--un);
  overflow-wrap: anywhere;
}
.who { margin-top: 12px; font-size: 14px; color: var(--un-72); }
.who .said { font-size: 16px; color: var(--un); }
.desc { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--un-72); }
.meta { margin-top: 16px; font-size: 10.5px; letter-spacing: .02em; color: var(--un-55); display: flex; flex-wrap: wrap; gap: 6px 0; }
.meta .sep { font-style: normal; margin: 0 8px; }
.origin { margin-top: 10px; font-size: 12.5px; color: var(--un-72); }
.origin a { color: var(--un); }

/* ---- stat chips, resting half over the hero's edge ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: -20px 8px 0;
}
.chip {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.chip .got { font-size: 14.5px; line-height: 1.3; color: var(--is); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The label may wrap where the phone's chip would clip it: a truncated word
 * is worse than a second line. */
.chip .label { font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--is-38); }

/* ---- cards ---- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 8px 16px 14px;
  margin-top: 22px;
}
.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: 12px 0 4px;
}
.slabel-note { letter-spacing: .02em; font-size: 10.5px; }
section > .slabel:first-child { margin-top: 22px; }

/* ---- 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: 16px 0; border-bottom: 1px solid var(--is-06); }
.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-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--safran-tint); color: var(--safran);
  display: grid; place-items: center; font-size: 17px; line-height: 1;
}
.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: 12px;
  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);
}

/* ---- the call ---- */
.cta { padding: 20px 18px 18px; margin-top: 26px; }
.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) {
  .hero { padding: 30px 28px 38px; }
  .title { font-size: 34px; }
  .card { padding: 10px 20px 16px; }
  .cta { padding: 24px 22px 20px; }
}

/* A generated recipe keeps the derived face after review and sharing. */
.title.got { font-family: var(--mono); font-style: normal; font-weight: 500; }
.generated-phrase { font-size: 16px; line-height: 1.35; color: var(--is-72); overflow-wrap: anywhere; }