/* Tuscan Harvest: a cypress-green farmhouse with olive, terracotta and ochre,
   limewash walls, and recipes on index cards. Fonts are self-hosted so the
   app looks right offline (licenses in fonts/LICENSES.txt). */

@font-face { font-family: 'Rye'; font-weight: 400; font-display: swap; src: url(fonts/rye-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url(fonts/cinzel-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url(fonts/cinzel-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-display: swap; src: url(fonts/lora-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/lora-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 600; font-display: swap; src: url(fonts/lora-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 700; font-display: swap; src: url(fonts/lora-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 500; font-display: swap; src: url(fonts/caveat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url(fonts/caveat-latin-600-normal.woff2) format('woff2'); }

/* ---------- Colors: daylight, then lamplight (dark) ---------- */
:root {
  color-scheme: light;
  --ground: #F2EBDA; /* limewash */
  --mottle-a: rgba(200, 172, 120, .16);
  --mottle-b: rgba(180, 155, 105, .13);
  --grain: rgba(92, 72, 55, .06);
  --band: #33482B; /* cypress */
  --hill-back: #3F5733;
  --hill-front: #4C6638;
  --tree: #1E301C;
  --band-ink: #FBF1DC;
  --gold: #E2B356;
  --tile: #B4532F;
  --tile-edge: #8E3F24;
  --card: #FFFBF0;
  --wash: #F6EFDD;
  --ink: #3A2A1E;
  --ink-soft: #5C4837;
  --ink-mute: #725F4D;
  --olive: #556B2F;
  --on-olive: #FFF8E7;
  --olive-deep: #3F4A1E;
  --olive-ink: #4B5E28;
  --olive-tint: #DFE4C6;
  --leaf: #6E7F3A;
  --fruit: #2E3516;
  --terra: #B4532F;
  --terra-ink: #A0462A;
  --num: #B4532F;
  --on-terra: #FFF8E7;
  --ochre: #D9A441;
  --ochre-ink: #8A5A0B;
  --ochre-tint: #F5E6C2;
  --grape-ink: #5B3A5E;
  --line: #C9D5DF;
  --field-border: #3F4A1E;
  --danger: #A33A22;
  --on-danger: #FFF8E7;
  --danger-tint: #F6DDD3;
  --focus: #3A2A1E;
  --toast-bg: #2B3622;
  --toast-ink: #FBF1DC;
  --shade: 58, 42, 30;
  --display: 'Rye', Georgia, serif;
  --label: 'Cinzel', Georgia, serif;
  --body: 'Lora', Georgia, serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --tag: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

/* Lamplight: warm dark wood, cream text. Follows the phone unless someone
   picks Daylight or Lamplight in the menu (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #191A12;
    --mottle-a: rgba(130, 140, 90, .07);
    --mottle-b: rgba(120, 110, 80, .06);
    --grain: rgba(255, 240, 200, .03);
    --band: #1F2C1B;
    --hill-back: #26361F;
    --hill-front: #2E4225;
    --tree: #111A0F;
    --band-ink: #F1E6CC;
    --tile: #9C4A2B;
    --tile-edge: #6E321D;
    --card: #28261B;
    --wash: #302D21;
    --ink: #F1E6CC;
    --ink-soft: #D4C5A5;
    --ink-mute: #B0A184;
    --olive: #8FA862;
    --on-olive: #16180E;
    --olive-deep: #A9BC7C;
    --olive-ink: #B3C686;
    --olive-tint: #363A25;
    --leaf: #9DB06C;
    --fruit: #D3DDA8;
    --terra: #D9744F;
    --terra-ink: #EE9A78;
    --num: #A9482A;
    --ochre-ink: #E8BE6A;
    --ochre-tint: #3E3420;
    --grape-ink: #D2AED5;
    --line: rgba(160, 185, 200, .2);
    --field-border: #7F8C5E;
    --danger: #F08A73;
    --on-danger: #1A1009;
    --danger-tint: #4A241B;
    --focus: #F1E6CC;
    --toast-bg: #F1E6CC;
    --toast-ink: #1F2C1B;
    --shade: 0, 0, 0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #191A12;
  --mottle-a: rgba(130, 140, 90, .07);
  --mottle-b: rgba(120, 110, 80, .06);
  --grain: rgba(255, 240, 200, .03);
  --band: #1F2C1B;
  --hill-back: #26361F;
  --hill-front: #2E4225;
  --tree: #111A0F;
  --band-ink: #F1E6CC;
  --tile: #9C4A2B;
  --tile-edge: #6E321D;
  --card: #28261B;
  --wash: #302D21;
  --ink: #F1E6CC;
  --ink-soft: #D4C5A5;
  --ink-mute: #B0A184;
  --olive: #8FA862;
  --on-olive: #16180E;
  --olive-deep: #A9BC7C;
  --olive-ink: #B3C686;
  --olive-tint: #363A25;
  --leaf: #9DB06C;
  --fruit: #D3DDA8;
  --terra: #D9744F;
  --terra-ink: #EE9A78;
  --num: #A9482A;
  --ochre-ink: #E8BE6A;
  --ochre-tint: #3E3420;
  --grape-ink: #D2AED5;
  --line: rgba(160, 185, 200, .2);
  --field-border: #7F8C5E;
  --danger: #F08A73;
  --on-danger: #1A1009;
  --danger-tint: #4A241B;
  --focus: #F1E6CC;
  --toast-bg: #F1E6CC;
  --toast-ink: #1F2C1B;
  --shade: 0, 0, 0;
}

/* ---------- Basics ---------- */
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 20%, var(--mottle-a), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 60%, var(--mottle-b), transparent 70%),
    radial-gradient(var(--grain) 1px, transparent 1.4px);
  background-size: 100% 760px, 100% 760px, 5px 5px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--ink-mute); opacity: 1; }
::selection { background: var(--ochre-tint); }

.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fi { fill: currentColor; flex-shrink: 0; }
.fi .ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.garland { flex-shrink: 0; }
.garland .stem { stroke: var(--leaf); stroke-width: 1.2; fill: none; }
.garland .lf { fill: var(--leaf); }
.garland .fr { fill: var(--fruit); }
.spacer { flex: 1; }
.hand { font-family: var(--hand); font-weight: 600; }
/* A private picture waiting for its signed link shows as an empty frame, not a broken image. */
img[data-photo]:not([src]) { visibility: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
[hidden] { display: none !important; }

@keyframes rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Buttons and fields ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--olive-deep);
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-primary { background: var(--olive); color: var(--on-olive); }
.btn-primary:hover:not(:disabled) { background: var(--olive-ink); }
.btn-soft { background: var(--card); color: var(--ink); }
.btn-soft:hover:not(:disabled) { background: var(--olive-tint); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--olive-tint); }
.btn-danger { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-icon { width: 44px; padding: 0; background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-icon:hover { background: var(--olive-tint); color: var(--ink); }
.btn-mini { min-height: 40px; padding: 4px 12px; gap: 6px; font-size: 15px; background: var(--card); }
.btn-mini:hover:not(:disabled) { background: var(--olive-tint); }

.field {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--field-border);
  border-radius: 6px;
  background: var(--card);
  font-size: 16px; /* 16px or more keeps iPhones from zooming in */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px var(--olive-tint); }
textarea.field { display: block; resize: vertical; line-height: 1.5; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.lbl { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.tick, .radio {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--card);
  flex-shrink: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.tick { border-radius: 4px; }
.tick::after {
  content: "";
  width: 12px;
  height: 6.5px;
  border-left: 3px solid var(--on-olive);
  border-bottom: 3px solid var(--on-olive);
  transform: translateY(-1.5px) rotate(-45deg) scale(0);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.tick:checked { background: var(--olive); border-color: var(--olive); }
.tick:checked::after { transform: translateY(-1.5px) rotate(-45deg) scale(1); }
.radio { border-radius: 50%; }
.radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--olive); transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.radio:checked::after { transform: scale(1); }
.tick:disabled, .radio:disabled { opacity: .45; cursor: default; }

/* An on/off switch (a real checkbox underneath). */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 16px;
  border: 2px solid var(--ink-mute);
  background: var(--wash);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-mute); transition: translate .2s ease, background-color .2s ease; }
.switch:checked { background: var(--olive); border-color: var(--olive); }
.switch:checked::after { translate: 20px 0; background: var(--on-olive); }

/* ---------- Masthead: cypress band, hills, roof tiles ---------- */
.masthead { position: relative; z-index: 2; }
.band {
  position: relative;
  display: flex;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 60px 38px;
  background: var(--band);
  color: var(--band-ink);
  overflow: hidden;
}
.band :focus-visible { outline-color: var(--band-ink); }
.brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: center;
}
/* The full name, always on two lines and never cut off: the lines shrink with
   the screen and may wrap rather than run past the edge. */
.brand-1 { font-family: var(--display); font-size: clamp(22px, 7vw, 32px); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.brand-2 { font-family: var(--label); font-weight: 700; font-size: clamp(12.5px, 4vw, 16px); line-height: 1.5; letter-spacing: .38em; margin-right: -.38em; color: var(--gold); text-transform: uppercase; }
.who {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top) + 12px);
  right: max(10px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--band-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--band-ink);
  font: 19px/1 var(--display);
}
.who:hover { background: rgba(255, 248, 231, .12); }
.hills, .trees { position: absolute; bottom: 0; height: 34px; pointer-events: none; }
.hills { left: 0; width: 100%; }
.hills .back { fill: var(--hill-back); }
.hills .front { fill: var(--hill-front); }
.trees { width: auto; fill: var(--tree); }
.trees-l { left: max(4px, env(safe-area-inset-left)); }
.trees-r { right: max(4px, env(safe-area-inset-right)); }
.roof { height: 13px; background: radial-gradient(circle at 50% 0, var(--tile) 0 8.5px, var(--tile-edge) 8.5px 9.5px, transparent 10px) center 0 / 19.5px 13px repeat-x; }
@media (min-width: 700px) {
  .band { padding-bottom: 46px; }
  .hills, .trees { height: 42px; }
}

/* Search and Add, under the masthead on the home screen. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
body:not([data-screen="home"]) .toolbar, body.gated .toolbar, body.gated .who { display: none; }
.search { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 13px; color: var(--ink-soft); pointer-events: none; }
.search .field { padding-left: 42px; }
.toolbar .btn-primary { flex: none; padding-inline: 12px 14px; }

.offline-note {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  background: var(--ochre-tint);
  border-bottom: 2px solid var(--ochre);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* ---------- Layout ---------- */
.view {
  flex: 1;
  width: 100%;
  padding: 14px max(14px, env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.screen { animation: rise .35s cubic-bezier(.2, .7, .2, 1) backwards; }
.screen.still { animation: none; }
.page {
  position: relative;
  background: var(--card);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(var(--shade), .14), 0 18px 30px -20px rgba(var(--shade), .65);
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bar > .btn-ghost:first-child { padding-left: 6px; }
.hint { color: var(--ink-soft); }
.tone-olive { --cat: var(--olive-ink); }
.tone-terra { --cat: var(--terra-ink); }
.tone-ochre { --cat: var(--ochre-ink); }
.tone-grape { --cat: var(--grape-ink); }
/* A rubber-stamped category label. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--cat, var(--olive-ink));
  font-family: var(--label);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  rotate: var(--stamp-tilt, -1.5deg);
}
.stamp .fi { width: 18px; height: 18px; }
/* A kraft shipping tag, used for categories, times and timers. */
.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 22px;
  clip-path: var(--tag);
  background: var(--olive-tint);
  color: var(--ink);
}
.tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--card); }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head h2 { font-family: var(--display); font-size: 23px; line-height: 1.3; }

/* ---------- Home ---------- */
.home { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tag { min-height: 44px; padding-right: 14px; border: 0; font-weight: 600; font-size: 15px; }
.cat-tag::before { background: var(--ground); }
.cat-tag .fi { width: 20px; height: 20px; color: var(--cat, var(--olive-ink)); }
.cat-tag .n { font-weight: 400; color: var(--ink-soft); }
.cat-tag:hover { background: var(--ochre-tint); }
.cat-tag.on { background: var(--olive); color: var(--on-olive); }
.cat-tag.on .fi, .cat-tag.on .n { color: inherit; }
/* The clipped tag shape would hide an outline, so focus shows inside it. */
.cat-tag:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
@media (max-width: 700px) {
  /* On a phone the categories scroll sideways in one row. */
  .cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cats::-webkit-scrollbar { display: none; }
  .cat-tag { flex: none; }
}
.home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 4px; }
.home-head h1 { font-family: var(--display); font-size: clamp(24px, 6.6vw, 30px); line-height: 1.15; }
.home-head .count { margin-left: auto; font-style: italic; font-size: 15px; color: var(--ink-soft); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }

.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 14px 16px 8px;
  border: 0;
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 1px 0 rgba(var(--shade), .14), 0 10px 18px -12px rgba(var(--shade), .6);
  animation: rise .45s cubic-bezier(.2, .7, .2, 1) backwards;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(var(--shade), .14), 0 18px 24px -16px rgba(var(--shade), .65); }
.grid.quiet .card { animation: none; }
.card-photo { display: block; margin: -14px -16px 12px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px 4px 0 0; background: var(--wash); }
.card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.card-top .stamp { min-width: 0; }
.card-time { flex: none; font-size: 14.5px; color: var(--ink-soft); }
.card-title { display: block; margin-top: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--terra); font-family: var(--display); font-size: 23px; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.card-lines { display: flex; flex-direction: column; background-image: repeating-linear-gradient(transparent 0 29px, var(--line) 29px 30px); }
.card-meta { font-size: 15px; line-height: 30px; color: var(--ink-soft); }
.card-who { font-family: var(--hand); font-weight: 600; font-size: 19px; line-height: 30px; color: var(--olive-ink); overflow-wrap: anywhere; }

.home-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 18px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; background: var(--card); border: 2px dashed var(--ink-mute); border-radius: 6px; }
.empty .title { font-family: var(--display); font-size: 24px; line-height: 1.2; }
.empty p { color: var(--ink-soft); }
.empty .btn { margin-top: 8px; }

/* ---------- Recipe card ---------- */
.recipe-screen { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.r-photos { display: flex; flex-direction: column; gap: 10px; }
.r-hero { display: block; padding: 0; border: 0; border-radius: 4px 4px 0 0; overflow: hidden; background: var(--wash); cursor: zoom-in; }
.r-hero img { display: block; width: 100%; height: auto; max-height: min(460px, 60vh); object-fit: cover; }
.r-strip { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px; }
.thumb { width: 76px; height: 76px; padding: 0; border: 3px solid #fff; border-radius: 3px; overflow: hidden; background: var(--wash); box-shadow: 0 6px 12px -8px rgba(var(--shade), .6); cursor: zoom-in; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 18px 16px; }
.r-head h1 { align-self: stretch; padding-bottom: 10px; border-bottom: 3px double var(--terra); font-family: var(--display); font-size: clamp(30px, 8.6vw, 46px); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags .tag { font-size: 15.5px; }
.tags dt { font-family: var(--label); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.tags dd { font-weight: 700; }
.edited { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14.5px; color: var(--ink-soft); }
.edited .hand { font-size: 21px; line-height: 1.2; color: var(--olive-ink); }
.linkish { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--olive-ink); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { background: var(--olive-tint); }
.wake { align-self: stretch; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border: 1.5px dashed var(--ink-mute); border-radius: 6px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.wake span { flex: 1; }

.r-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 44px; padding: 6px 18px 8px; }
.r-ings { flex: 1 1 280px; min-width: 0; }
.r-method { flex: 2 1 360px; min-width: 0; }
.r-cols.solo .r-ings, .r-cols.solo .r-method { flex-basis: 100%; }
.r-cols.solo .r-ings .list { columns: 280px; column-gap: 40px; }
.r-cols.solo .r-ings li { break-inside: avoid; }
.progress { margin-left: auto; font-size: 14.5px; font-weight: 700; color: var(--olive-ink); white-space: nowrap; }
.r-cols h3 { margin: 18px 0 2px; font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-ink); break-after: avoid; }
.r-ings .list { margin-top: 6px; }
.r-ings li { border-bottom: 1px solid var(--line); }
.r-ings label { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 11px 0 10px; font-size: 17.5px; line-height: 1.45; cursor: pointer; }
.r-ings .tick { margin-top: 1px; }
.ingtext { transition: color .2s ease; overflow-wrap: anywhere; }
.r-ings li.done .ingtext { color: var(--ink-mute); text-decoration: line-through; }
.r-method .sec-head { margin-bottom: 14px; }
.r-method ol { display: flex; flex-direction: column; gap: 18px; }
.r-method h3 + ol { margin-top: 10px; }
.r-method li { display: flex; align-items: flex-start; gap: 12px; }
.num { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--num); color: var(--on-terra); font-family: var(--display); font-size: 16px; line-height: 1; }
.step-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 3px; font-size: 17.5px; line-height: 1.55; text-wrap: pretty; overflow-wrap: anywhere; }
.step-body .tag { min-height: 30px; font-size: 14px; font-weight: 700; }
.r-note { display: flex; align-items: flex-start; gap: 10px; margin: 20px 18px 6px; padding: 14px 16px 16px; border-radius: 6px; background: var(--olive-tint); }
.r-note .fi { width: 34px; height: 34px; color: var(--leaf); }
.r-note .lbl { color: var(--ink); }
.r-note-t { font-family: var(--hand); font-weight: 600; font-size: 25px; line-height: 1.15; white-space: pre-line; overflow-wrap: anywhere; }
.r-original { display: flex; flex-direction: column; gap: 14px; padding: 22px 18px 26px; }
.orig-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.orig { flex: 1 1 240px; max-width: 520px; padding: 8px; border: 0; background: #fff; box-shadow: 0 8px 16px -10px rgba(var(--shade), .6); rotate: -1deg; cursor: zoom-in; }
.orig:nth-child(even) { rotate: .8deg; }
.orig img { display: block; width: 100%; height: auto; background: var(--wash); }
@media (min-width: 700px) {
  .r-head { padding: 28px 32px 18px; }
  .r-cols { padding: 6px 32px 8px; }
  .r-note { margin-inline: 32px; }
  .r-original { padding: 26px 32px 32px; }
  .r-strip { padding: 0 32px; }
}

/* ---------- Add / edit ---------- */
.edit-screen { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.form { display: flex; flex-direction: column; gap: 28px; padding: 20px 16px 0; }
.form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.form-head h1 { font-family: var(--display); font-size: clamp(28px, 7.4vw, 40px); line-height: 1.15; }
.form section { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.form h2 { font-family: var(--display); font-size: 22px; line-height: 1.25; }
.form .sub { margin-top: -6px; font-size: 14.5px; color: var(--ink-soft); }
.f { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.f-row { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rows { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.rows:empty { display: none; }
.row { display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr) 44px; align-items: center; gap: 8px; animation: rise .25s ease backwards; }
.row[data-kind="ing"] { grid-template-columns: minmax(76px, 30%) minmax(0, 1fr) 44px; }
.row-heading { grid-template-columns: minmax(0, 1fr) 44px; }
.row-heading .field { font-weight: 700; color: var(--olive-ink); background: var(--wash); }
.row-step { grid-template-columns: 32px minmax(0, 1fr) 44px; grid-template-areas: "num text x" "num time ."; align-items: start; }
.row-step .num { grid-area: num; margin-top: 7px; }
.row-step textarea { grid-area: text; }
.row-step .w-time { grid-area: time; max-width: 180px; }
.row-step .btn-icon { grid-area: x; }
#step-rows { counter-reset: step; }
#step-rows .row-heading { counter-reset: step; }
#step-rows .row-step .num::before { counter-increment: step; content: counter(step); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tiles { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.tiles:empty { display: none; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; border: 3px solid #fff; border-radius: 4px; background: var(--wash); box-shadow: 0 6px 12px -8px rgba(var(--shade), .6); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile.busy img { opacity: .5; }
#photos-tiles .tile:first-child::before { content: "On the card"; position: absolute; bottom: 6px; left: 6px; z-index: 1; padding: 0 8px; border-radius: 999px; background: var(--ochre-tint); color: var(--ink); font-size: 12.5px; font-weight: 700; }
#photos-tiles .tile.busy:first-child::before { display: none; }
.tile-note { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 1px 8px; border-radius: 999px; background: var(--card); font-size: 12.5px; font-weight: 600; text-align: center; }
.tile-x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); }
.tile-x:hover { background: var(--danger-tint); }
.notice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 14px 16px; background: var(--ochre-tint); border: 2px solid var(--ochre); border-radius: 6px; }
.notice .ic { margin-top: 3px; }
.notice p { flex: 1 1 180px; }
.danger-zone { padding-top: 6px; border-top: 1px solid var(--line); }

/* Scan a recipe: the card at the top of a new recipe. */
.form .scan { align-self: stretch; gap: 12px; padding: 16px; border: 2px dashed var(--olive-deep); border-radius: 8px; background: var(--olive-tint); }
.scan-head { display: flex; align-items: center; gap: 10px; color: var(--olive-ink); }
.scan-head h2 { color: var(--ink); text-wrap: balance; }
.scan p { text-wrap: pretty; }
.scan-sub { font-size: 14.5px; color: var(--ink-soft); }
.scan-picks { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.scan-picks .btn { min-height: 52px; }
.scan-picks.more .btn { min-height: 46px; font-size: 15.5px; }
.scan-go { align-self: stretch; min-height: 54px; font-size: 17px; }
.scan-tiles { margin-top: 2px; }
.scan-busy { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.scan-busy p { font-weight: 600; }
.spinner { width: 34px; height: 34px; flex: none; border: 4px solid var(--card); border-top-color: var(--olive); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.scan-problem { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--card); border-left: 4px solid var(--danger); font-weight: 600; }
.scan-problem .ic { margin-top: 2px; color: var(--danger); }
/* The loading screen while a recipe is read (reading.js): a fresh index card
   filling in line by line, a pencil following along, and a checklist. */
dialog.reading {
  --rd-rows: 6;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 20%, var(--mottle-a), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 60%, var(--mottle-b), transparent 70%),
    radial-gradient(var(--grain) 1px, transparent 1.4px);
  background-size: 100% 760px, 100% 760px, 5px 5px;
}
dialog.reading[open] { display: flex; flex-direction: column; animation: fade .25s ease backwards; }
dialog.reading::backdrop { background: var(--ground); }
.rd-top { flex: none; height: calc(env(safe-area-inset-top) + 10px); background: var(--band); }
.reading .roof { flex: none; }
.rd-wrap { flex: 1; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); text-align: center; }
.rd-land { position: relative; flex: none; height: calc(54px + env(safe-area-inset-bottom)); border-bottom: env(safe-area-inset-bottom) solid var(--hill-front); }
.rd-land .hills, .rd-land .trees { height: 54px; }

.rd-card { position: relative; flex: none; width: min(400px, 100%); margin-bottom: 8px; padding: 14px 20px 10px; text-align: left; background: var(--card); border-radius: 4px; box-shadow: 0 1px 0 rgba(var(--shade), .14), 0 18px 30px -20px rgba(var(--shade), .65); rotate: -1.2deg; }
.rd-card.turn { animation: turn .45s cubic-bezier(.3, .7, .3, 1) backwards; }
@keyframes turn { from { opacity: 0; translate: 28px 6px; } }
.rd-no { position: absolute; top: 16px; right: 18px; font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rd-card.numbered .rd-title { padding-right: 92px; }
.rd-title { height: 48px; border-bottom: 2px solid var(--terra); font-family: var(--hand); font-weight: 600; font-size: 31px; line-height: 44px; white-space: nowrap; overflow-x: clip; }
.rd-lines { position: relative; height: calc(34px * var(--rd-rows)); overflow: hidden; }
.rd-lines.scrolled { mask-image: linear-gradient(transparent, #000 26px); -webkit-mask-image: linear-gradient(transparent, #000 26px); }
.rd-lines ul { min-height: 100%; background-image: repeating-linear-gradient(transparent 0 33px, var(--line) 33px 34px); }
/* Handwriting reaches above and below its line, so long lines are cut off
   only at the side (overflow-x: clip leaves the tops of letters alone). */
.rd-lines li { height: 34px; font-family: var(--hand); font-weight: 500; font-size: 22.5px; line-height: 32px; white-space: nowrap; overflow-x: clip; }
.rd-lines li.sec { padding-top: 6px; font-family: var(--label); font-weight: 700; font-size: 12.5px; line-height: 24px; letter-spacing: .12em; text-transform: uppercase; color: var(--olive-ink); }
.rd-card .ink { display: inline-block; max-width: 100%; overflow-x: clip; text-overflow: ellipsis; vertical-align: top; }
.rd-card .ink.new { animation: ink .7s cubic-bezier(.4, 0, .6, 1) backwards; }
@keyframes ink { from { clip-path: inset(-12px 100% -12px 0); } to { clip-path: inset(-12px 0 -12px 0); } }
.rd-ghost, .rd-lines li.rd-ghost { display: block; width: 62%; height: 10px; margin: 13px 0 11px; border-radius: 6px; background: var(--line); animation: ghost 1.5s ease-in-out infinite; }
.rd-title .rd-ghost { width: 72%; height: 14px; margin: 18px 0 0; }
.rd-lines li.rd-ghost:nth-child(2) { width: 46%; animation-delay: .2s; }
.rd-lines li.rd-ghost:nth-child(3) { width: 55%; animation-delay: .4s; }
@keyframes ghost { 50% { opacity: .4; } }
.rd-pen { position: absolute; left: 0; top: 0; z-index: 1; translate: var(--px, 30px) var(--py, 40px); transition: translate .6s cubic-bezier(.3, .7, .3, 1); pointer-events: none; }
.rd-pencil { display: block; margin-top: -7px; transform-origin: 0 50%; rotate: -40deg; filter: drop-shadow(1px 3px 2px rgba(var(--shade), .35)); }
.rd-lead { fill: #3B352E; }
.rd-wood { fill: #E7C9A1; }
.rd-body { fill: var(--ochre); }
.rd-shine { fill: rgba(255, 255, 255, .28); }
.rd-band { fill: #A9A397; }
.rd-eraser { fill: var(--terra); }
.reading.thinking .rd-pencil { animation: tap 1.2s ease-in-out infinite; }
.reading.writing .rd-pencil { animation: scribble .3s ease-in-out infinite alternate; }
@keyframes tap { 0%, 100% { rotate: -40deg; } 40% { rotate: -31deg; } }
@keyframes scribble { from { rotate: -42deg; } to { rotate: -36deg; } }

.rd-head { font-family: var(--display); font-size: clamp(23px, 6.6vw, 30px); line-height: 1.15; text-wrap: balance; }
.rd-list { display: flex; flex-direction: column; gap: 4px; width: min(340px, 100%); text-align: left; }
.rd-list li { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--ink-mute); }
.rd-list li.now { color: var(--ink); font-weight: 600; }
.rd-list li.done { color: var(--ink-soft); }
.rd-dot { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink-mute); border-radius: 50%; color: transparent; }
.rd-dot .ic { stroke-width: 2.6; }
.rd-list li.now .rd-dot { border-color: var(--olive-tint); border-top-color: var(--olive); animation: spin .9s linear infinite; }
.rd-list li.done .rd-dot { background: var(--olive); border-color: var(--olive); color: var(--on-olive); animation: pop .3s ease backwards; }
.rd-note { margin-left: auto; font-weight: 400; font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
.rd-hint { max-width: 34ch; min-height: 2.9em; font-size: 14.5px; color: var(--ink-soft); text-wrap: balance; }
.rd-stop { min-width: 140px; }
@media (max-height: 760px) { dialog.reading { --rd-rows: 4; } .rd-wrap { gap: 8px; } }
@media (max-height: 620px) {
  dialog.reading { --rd-rows: 3; }
  .rd-hint { display: none; }
  .rd-wrap { gap: 6px; padding-top: 10px; padding-bottom: 12px; }
  .rd-title { height: 42px; font-size: 27px; line-height: 38px; }
  .rd-head { font-size: 22px; }
  .rd-list { gap: 0; }
  .rd-list li { min-height: 27px; }
  .rd-land, .rd-land .hills, .rd-land .trees { height: 40px; }
  .rd-land { height: calc(40px + env(safe-area-inset-bottom)); }
}

/* A spot that couldn't be read for sure: marked [?] and highlighted until fixed. */
.field.unsure { border-color: var(--ochre-ink); background: var(--ochre-tint); }
.field.unsure:focus { border-color: var(--ochre-ink); box-shadow: 0 0 0 3px var(--ochre); }
/* Save and Cancel stay in reach at the bottom of the screen while editing. */
.form-foot {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 2px solid var(--terra);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -10px 16px -14px rgba(var(--shade), .5);
}
.form-foot .btn-primary { flex: 1; }
@media (min-width: 700px) {
  .form { padding: 28px 32px 0; }
  .form-foot { margin: 0 -32px; padding-inline: 32px; justify-content: flex-end; }
  .form-foot .btn-primary { flex: none; min-width: 180px; }
}

/* ---------- Checking what a scan read, before adding ---------- */
.review { display: flex; flex-direction: column; gap: 16px; }
.rv-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 16px; }
.rv-pages { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
button.tile { padding: 0; cursor: zoom-in; }
.rv-top { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rv-no { font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rv-title { align-self: stretch; padding-bottom: 10px; border-bottom: 3px double var(--terra); font-family: var(--display); font-weight: 400; font-size: clamp(27px, 7.6vw, 38px); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.rv-unsure { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--ochre-tint); font-size: 15px; text-wrap: pretty; }
.rv-unsure .ic { flex: none; margin-top: 2px; color: var(--ochre-ink); }
mark.unsure { padding: 0 3px; border-radius: 3px; background: var(--ochre-tint); box-shadow: inset 0 0 0 1.5px var(--ochre-ink); color: var(--ochre-ink); font-weight: 700; }
.rv-unsure mark.unsure { background: var(--card); }
.r-cols .rv-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rv-card .r-ings li { padding: 10px 0 9px; font-size: 17px; line-height: 1.45; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 14px 16px 16px; border-top: 2px solid var(--terra); }
.rv-actions .btn { flex: 1 1 130px; }
.rv-actions .btn-primary { flex-basis: 100%; min-height: 52px; }
.rv-settled { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px 10px 16px; }
.rv-settled > .ic { color: var(--olive-ink); }
.rv-settled p { flex: 1 1 180px; }
.rv-foot { display: flex; justify-content: center; }
.rv-foot .btn { width: min(100%, 420px); min-height: 54px; font-size: 17px; }
@media (min-width: 700px) {
  .rv-intro { padding: 28px 32px; }
  .rv-actions { padding-inline: 32px; }
  .rv-actions .btn { flex: 0 1 auto; }
  .rv-actions .btn-primary { flex-basis: auto; min-width: 200px; }
}

/* ---------- History and Recently deleted ---------- */
.list-screen { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.list-page { display: flex; flex-direction: column; gap: 18px; padding: 20px 16px; }
.lead { color: var(--ink-soft); text-wrap: pretty; max-width: 62ch; }
.lead strong { color: var(--ink); }
.versions { display: flex; flex-direction: column; gap: 10px; }
.version { border: 2px solid var(--line); border-radius: 6px; background: var(--card); }
.version.open { border-color: var(--olive-deep); }
.v-head { width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 14px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.v-head:hover { background: var(--wash); }
.v-head > span { grid-column: 1; }
.v-head .ic { grid-column: 2; grid-row: 1 / span 3; align-self: center; transition: rotate .2s ease; }
.version.open .v-head .ic { rotate: 90deg; }
.v-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.v-what { font-size: 15px; }
.v-date { font-size: 14px; color: var(--ink-mute); }
.badge { margin-left: 4px; padding: 0 10px; border-radius: 999px; background: var(--olive-tint); color: var(--olive-ink); font-size: 13px; font-weight: 700; }
.v-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 16px; border-top: 1px solid var(--line); }
.v-title { margin-top: 8px; font-family: var(--display); font-size: 24px; line-height: 1.2; }
.v-sub { color: var(--ink-soft); font-size: 14.5px; }
.v-hint { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--ochre-tint); font-size: 14.5px; }
.v-hint .ic { margin-top: 3px; }
.v-body h3 { margin-top: 8px; font-family: var(--label); font-weight: 700; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-ink); }
.v-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 40px; padding: 5px 8px; border-radius: 6px; }
.v-list li + li { border-top: 1px solid var(--line); }
.v-list li.gone { background: var(--ochre-tint); outline: 2px dashed var(--ochre); outline-offset: -2px; border-top-color: transparent; }
.v-list .piece { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.v-list .sec { font-weight: 700; color: var(--olive-ink); }
.v-list em { color: var(--ink-soft); }
.v-list.pics { display: flex; flex-wrap: wrap; gap: 10px; }
.v-list.pics li { flex-direction: column; padding: 6px; border-top: 0; }
.v-list.pics img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 3px; background: var(--wash); }
.v-note { white-space: pre-line; }
.v-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }

.deleted-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.deleted-list li.hint { border-top: 0; }
.d-photo { width: 60px; height: 60px; flex-shrink: 0; overflow: hidden; border: 3px solid #fff; border-radius: 3px; background: var(--wash); box-shadow: 0 6px 12px -8px rgba(var(--shade), .6); }
.d-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.d-title { font-family: var(--display); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.d-meta { font-size: 14.5px; color: var(--ink-soft); }
@media (min-width: 700px) { .list-page { padding: 28px 32px; } }

/* ---------- Dialogs ---------- */
dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 24px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog[open] { animation: pop .25s cubic-bezier(.3, 1.3, .5, 1) backwards; }
dialog h2[tabindex]:focus { outline: none; }
dialog::backdrop { background: rgba(20, 18, 10, .55); animation: fade .2s ease backwards; }
dialog.small { width: min(440px, calc(100vw - 24px)); }
dialog h2 { font-family: var(--display); font-size: 27px; line-height: 1.15; overflow-wrap: anywhere; }
dialog p { color: var(--ink-soft); margin-top: 6px; }
.dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.switch-name { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 18px; }
.switch-name .f { flex: 1 1 200px; }
.menu-list { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--line); }
.menu-list > button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 600; font-size: 16px; text-align: left; }
.menu-list > button:hover { background: var(--wash); }
.menu-list > button .ic { color: var(--olive-ink); }
.looks { margin: 18px 0 0; padding: 0; border: 0; }
.looks legend { padding: 0; margin-bottom: 8px; }
.looks-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.looks-opts label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border: 2px solid var(--field-border); border-radius: 6px; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.looks-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.looks-opts input:checked + span { color: var(--on-olive); }
.looks-opts label:has(input:checked) { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.looks-opts label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.install-now { margin-top: 16px; }
.how { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.how h3 { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-ink); }
.how ol { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.how .ic { vertical-align: -4px; }
.how .name { font-weight: 700; white-space: nowrap; }
.print-opts { display: flex; flex-direction: column; margin-top: 14px; }
.print-opts legend { padding: 0; }
.print-opts fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.export-err { margin: 8px 0 0; color: var(--danger); font-weight: 600; }
.export-err:empty { display: none; }
dialog.photo { width: min(1000px, calc(100vw - 16px)); padding: 12px; }
dialog.photo figure { display: flex; flex-direction: column; align-items: center; gap: 10px; }
dialog.photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 170px); background: var(--wash); }
dialog.photo figcaption { font-weight: 600; color: var(--ink-soft); text-align: center; }
dialog.photo .dialog-foot { margin-top: 10px; }

/* ---------- Sign in and first name ---------- */
.gate { min-height: 55vh; display: grid; place-items: center; padding-top: 10px; }
.gate-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px clamp(18px, 6vw, 34px) 28px; text-align: center; }
.gate-icon { width: 92px; height: 92px; border-radius: 21px; box-shadow: 0 10px 18px -10px rgba(var(--shade), .7); }
.gate-card h1 { font-family: var(--display); font-size: clamp(26px, 8vw, 32px); line-height: 1.15; text-wrap: balance; }
.gate-card p { color: var(--ink-soft); text-wrap: pretty; }
.gate-card .f { text-align: left; margin-top: 4px; }
.gate-card .btn-primary { align-self: stretch; margin-top: 4px; }
.gate-err { color: var(--danger); font-weight: 600; }
.gate-err:empty { display: none; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; padding: 0 12px; display: flex; justify-content: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 560px; min-height: 48px; padding: 9px 10px 9px 16px; background: var(--toast-bg); color: var(--toast-ink); font-weight: 600; font-size: 15.5px; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); animation: rise .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.toast span { padding-right: 6px; }
.toast button { flex: none; min-height: 36px; padding: 3px 14px; border: 2px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font-weight: 700; font-size: 14.5px; }
.toast :focus-visible { outline-color: currentColor; }
/* Above the Save bar while editing. */
body[data-screen="edit"] .toast-wrap { bottom: calc(84px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}