/* Labelwise: design tokens, then the app.
   Calm and clean: a bar across the top, the work on the left, and the label
   on the right, flat or on a mock-up pack. */
:root {
  color-scheme: light dark;
  --paper: #f4f6f0;
  --paper-2: #e9ede3;
  --card: #ffffff;
  --card-2: #f7f9f4;
  --ink: #15231c;
  --ink-soft: #5b6b62;
  --line: #e1e6dc;
  --line-strong: #c6cfc1;
  --brand: #1f7a4d;
  --brand-strong: #14603a;
  --brand-soft: #e0f2e6;
  --on-brand: #ffffff;
  --mustard: #f0b23e;
  --mustard-soft: #fdf1d2;
  --sage: #7fb394;
  --sage-soft: #e6f2ea;
  --forest: #15402c;
  --stage: #e8eee3;
  --stage-dot: rgba(21, 35, 28, .16);
  --sky: #2f7fc1;
  --ok: #1f7a4d;
  --ok-soft: #e0f2e6;
  --warn: #8a5a00;
  --warn-soft: #fff3d3;
  --danger: #b3261e;
  --danger-soft: #fbe4e1;
  --info: #35577f;
  --info-soft: #e8eff9;
  --shadow: 0 1px 2px rgba(21, 35, 28, .06), 0 12px 32px rgba(21, 35, 28, .09);
  --shadow-sm: 0 1px 2px rgba(21, 35, 28, .08), 0 4px 10px rgba(21, 35, 28, .07);
  --shadow-lg: 0 3px 6px rgba(21, 35, 28, .1), 0 24px 50px rgba(21, 35, 28, .16);
  --glow: 0 8px 20px rgba(31, 122, 77, .32);
  --radius: 18px;
  --bar: 132px;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --spring: cubic-bezier(.2, 1.4, .4, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1512;
    --paper-2: #151f1a;
    --card: #17211c;
    --card-2: #1d2a23;
    --ink: #ecf3ee;
    --ink-soft: #9db0a5;
    --line: #26332c;
    --line-strong: #3b4d43;
    --brand: #23885a;
    --brand-strong: #74d6a1;
    --brand-soft: #163425;
    --mustard: #f2b544;
    --mustard-soft: #3a2c12;
    --sage: #4f8768;
    --sage-soft: #172a20;
    --forest: #15402c;
    --stage: #0a100d;
    --stage-dot: rgba(236, 243, 238, .13);
    --sky: #7db8ea;
    --ok: #74d6a1;
    --ok-soft: #163425;
    --warn: #ffd479;
    --warn-soft: #3a2e10;
    --danger: #ff8f86;
    --danger-soft: #3b1a17;
    --info: #a8c5ec;
    --info-soft: #1c2736;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .25);
    --shadow-lg: 0 3px 6px rgba(0, 0, 0, .4), 0 24px 50px rgba(0, 0, 0, .5);
    --glow: 0 8px 20px rgba(35, 136, 90, .4);
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar) + 16px); }
body { margin: 0; font: 16px/1.5 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
a { color: var(--brand-strong); }
small { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
em { font-style: normal; color: var(--ink-soft); font-weight: 400; }
.muted { color: var(--ink-soft); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; }
.kicker { display: block; font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
[hidden] { display: none !important; }
::selection { background: var(--mustard); color: #15231c; }

/* ---------- the parts: bar, work, stage ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) clamp(430px, 36vw, 580px); grid-template-rows: auto 1fr; min-height: 100vh; }

/* ---------- top bar: brand, saved recipes, steps ---------- */
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; min-height: var(--bar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 22px;
  align-items: center; padding: 10px 28px; background: var(--card); border-bottom: 1px solid var(--line-strong); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; transition: transform .4s var(--spring); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
.brand-name { font: 700 22px var(--display); letter-spacing: -.03em; }
.brand-name em { color: var(--brand); font-weight: 700; }
.now { min-width: 0; }
.now .kicker { display: none; }
.product-top { display: block; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

.stepper { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper li { flex: 1 1 0; }
.stepper a { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 6px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--ink-soft); font-weight: 600; font-size: 15px; border: 1.5px solid transparent; transition: background .15s, border-color .15s; }
.stepper a:hover { background: var(--card-2); }
.stepper .step-num { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--line-strong); font: 500 13px var(--mono); color: var(--ink-soft); transition: transform .3s var(--spring), background .2s; }
.stepper .step-num .icon { width: 16px; height: 16px; animation: pop .45s var(--spring); }
.stepper .step-name small { display: block; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-top: 1px; }
.stepper a.done { color: var(--ink); }
.stepper a.done .step-num { background: var(--ok); border-color: var(--ok); color: var(--card); }
.stepper a.current { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.stepper a.current .step-num { transform: scale(1.08); }
.stepper a.current:not(.done) .step-num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.recipes { display: flex; gap: 8px; }
.recipes select { width: 220px; }
.recipes-row { display: flex; gap: 8px; }

/* ---------- work ---------- */
.work { min-width: 0; width: 100%; max-width: 860px; margin: 0 auto; padding: 30px clamp(20px, 3.4vw, 52px) 96px; }
.card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.step { padding: clamp(22px, 2.6vw, 36px); }
.step > div > * + *, #coo-body > * + *, #hsr-body > * + * { margin-top: 22px; }
.step-head .kicker { color: var(--brand-strong); margin-bottom: 10px; }
.step-head .kicker b { font-weight: 500; color: var(--ink-soft); }
.step-head h2 { font-size: clamp(34px, 3.4vw, 50px); font-weight: 700; letter-spacing: -.04em; }
.step-head p { color: var(--ink-soft); margin-top: 10px; max-width: 58ch; font-size: 17px; }
.step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.step-nav .btn.primary { min-height: 54px; padding: 0 26px; font-size: 17px; }
.step-nav .btn.primary .icon { transition: transform .25s var(--spring); }
.step-nav .btn.primary:hover .icon { transform: translateX(4px); }
.attribution, .fineprint { font-size: 12.5px; color: var(--ink-soft); margin-top: 22px; }
.licence { margin-top: 6px; }
.licence > summary { cursor: pointer; }
.licence p { margin-top: 8px; max-width: 78ch; }

/* arriving at a step: everything settles into place */
.step.entering > div > * { animation: settle .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.step.entering > div > :nth-child(2) { animation-delay: .05s; }
.step.entering > div > :nth-child(3) { animation-delay: .1s; }
.step.entering > div > :nth-child(4) { animation-delay: .15s; }
.step.entering > div > :nth-child(5) { animation-delay: .2s; }
.step.entering > div > :nth-child(n+6) { animation-delay: .25s; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }

.welcome { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #1f7a4d, #15402c); color: #f4fbf6; border-radius: 16px; padding: clamp(24px, 3vw, 40px); }
/* a roll of blank labels running off the corner */
.welcome::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -50px; width: 330px; height: 330px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 17px, rgba(255, 255, 255, .1) 17px 19px); }
.welcome::after { content: ""; position: absolute; z-index: -1; right: 34px; bottom: -34px; width: 120px; height: 150px; border-radius: 10px; transform: rotate(14deg);
  background: linear-gradient(#15231c, #15231c) 16px 22px / 60px 7px no-repeat, linear-gradient(rgba(21,35,28,.3), rgba(21,35,28,.3)) 16px 40px / 88px 4px no-repeat,
    linear-gradient(rgba(21,35,28,.3), rgba(21,35,28,.3)) 16px 52px / 74px 4px no-repeat, linear-gradient(rgba(21,35,28,.3), rgba(21,35,28,.3)) 16px 64px / 82px 4px no-repeat, #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(10deg) translateY(-8px); } }
.welcome .kicker { color: #bfe6cf; margin-bottom: 12px; }
.welcome h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: 1; max-width: 13ch; }
.welcome h1 .accent { color: #ffd98a; }
.welcome p { margin: 16px 0 18px; max-width: 46ch; font-size: 17px; }
.welcome .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; max-width: 480px; }
.welcome .chips li { padding: 4px 11px; border-radius: 999px; background: rgba(0, 0, 0, .22); font: 500 12px var(--mono); letter-spacing: .02em; }
.welcome .btn.ghost { color: #15231c; border-color: transparent; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.welcome .btn.ghost:hover { background: #ffd98a; }
h3.group { font-size: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.hint { font-size: 14px; color: var(--ink-soft); }
.empty { color: var(--ink-soft); padding: 22px; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 14px; }

/* ---------- form controls ---------- */
input, select, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]), select { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
input:not([type=checkbox]):not([type=radio]):hover, select:hover { border-color: var(--ink-soft); }
input:not([type=checkbox]):not([type=radio]):focus, select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); position: relative; z-index: 1; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
input::placeholder { color: var(--ink-soft); opacity: .6; }
input[type=number] { font-variant-numeric: tabular-nums; }
.field { display: block; }
.field > span { display: block; font-weight: 600; margin-bottom: 6px; }
.field > small { display: block; margin-top: 6px; }
.field.narrow { max-width: 240px; }
.row { display: flex; flex-wrap: wrap; gap: 18px; }
.row > .field { flex: 1 1 200px; }
.row > .field.grow { flex: 2 1 300px; }
.row > .field.narrow { flex: 0 1 200px; }
.affix, .combo { display: flex; align-items: stretch; }
.affix input { border-radius: 12px 0 0 12px; }
.affix i { font: 500 13px var(--mono); display: grid; place-items: center; padding: 0 13px; background: var(--paper-2); border: 1.5px solid var(--line-strong);
  border-left: 0; border-radius: 0 12px 12px 0; color: var(--ink-soft); white-space: nowrap; }
.combo input { border-radius: 12px 0 0 12px; }
.combo select { width: auto; border-left: 0; border-radius: 0 12px 12px 0; background: var(--paper-2); font: 500 14px var(--mono); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 18px; border-radius: 12px;
  border: 1.5px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; background: none;
  transition: transform .12s, box-shadow .15s, background .15s; }
.btn.primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn.primary:hover { filter: brightness(.9); transform: translateY(-2px); box-shadow: var(--glow); }
.btn.primary:active, .welcome .btn.ghost:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { border-color: var(--line-strong); color: var(--ink); background: var(--card); }
.btn.ghost:hover { background: var(--card-2); border-color: var(--ink-soft); }
.btn.link { min-height: 0; padding: 0; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; border: 0; }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.btn.big { min-height: 60px; font-size: 18px; }
.btn.block { width: 100%; }
.btn.icon-only { padding: 9px; min-width: 46px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.check small { display: block; }
.check.big { padding: 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card-2); font-weight: 600; transition: border-color .15s; }
.check.big:hover, .check.big:has(input:checked) { border-color: var(--brand); }
.check.big small { font-weight: 400; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.choice.stack { grid-template-columns: 1fr; gap: 8px; }
.choice legend { grid-column: 1 / -1; }
.choice label, .tile { position: relative; display: block; cursor: pointer; }
.choice input, .tile input, .seg input, .packs input { position: absolute; opacity: 0; }
.choice label > span, .tile > span { display: block; height: 100%; padding: 13px 16px 13px 46px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card);
  transition: transform .2s var(--spring), box-shadow .2s, border-color .15s, background .15s; }
.choice label:hover > span, .tile:hover > span { border-color: var(--ink-soft); transform: translateY(-1px); }
.choice label > span::before, .tile > span::before { content: ""; position: absolute; left: 15px; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--card); transition: transform .3s var(--spring); }
.choice small, .tile small { display: block; }
.choice input:checked + span, .tile input:checked + span { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--shadow-sm); }
.choice input:checked + span::before, .tile input:checked + span::before { border-color: var(--brand); background: radial-gradient(var(--brand) 0 42%, var(--card) 46%); transform: scale(1.1); }
.choice input:focus-visible + span, .tile input:focus-visible + span, .seg input:focus-visible + span, .packs input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg legend { width: 100%; }
.seg label { position: relative; cursor: pointer; }
.seg span { display: block; padding: 8px 15px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--card); transition: background .15s, color .15s; }
.seg input:checked + span { background: var(--ink); color: var(--card); border-color: var(--ink); }

details.more { border-top: 1px solid var(--line); padding-top: 14px; }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); }
details.more[open] > summary { margin-bottom: 12px; }
details.more > * + * { margin-top: 12px; }

.computed { padding: 14px 16px; border-radius: 14px; background: var(--sage-soft); font-size: 15px; border-left: 5px solid var(--sage); }
.computed:empty { display: none; }
.computed strong { font: 700 19px var(--display); }
.computed span { color: var(--ink-soft); }
.box { border: 1px solid var(--line-strong); border-radius: 16px; padding: 20px; background: var(--card-2); }
.box > * + * { margin-top: 14px; }
.box h3 { font-size: 22px; }
.box-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.box-head p { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.box.result { background: var(--card); box-shadow: var(--shadow-sm); }
.box.blocked .tiles, .box.blocked #print-opts { opacity: .5; }
.meter, .meters div { text-align: right; line-height: 1.1; }
.meter strong, .meters strong { display: block; font: 700 40px/1 var(--display); letter-spacing: -.04em; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.meter span, .meters span { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.meters { display: flex; gap: 32px; }
.meters div { text-align: left; }
.quick { display: flex; gap: 8px; }

.notice { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 14px;
  background: var(--info-soft); color: var(--info); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- recipe ---------- */
.search { position: relative; }
.search > .icon { position: absolute; z-index: 2; left: 18px; top: 21px; width: 20px; height: 20px; color: var(--ink-soft); }
.search input { padding-left: 50px !important; min-height: 62px !important; font-size: 18px; border-radius: 16px !important; box-shadow: var(--shadow-sm); }
.search input:focus { box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow) !important; }
.results { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 10px); margin: 0; padding: 6px; list-style: none; max-height: 340px; overflow: auto;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); animation: settle .18s ease-out; }
.results li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.results li:hover, .results li.active { background: var(--brand-soft); }
.results .r-name { flex: 1; }
.results .r-meta { font: 500 12px var(--mono); color: var(--ink-soft); white-space: nowrap; }
.results .r-none { cursor: default; color: var(--ink-soft); }
.ingredients, .acards, .coo-ings, .star-ings, .checks { list-style: none; margin: 0; padding: 0; }
.ingredient { border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card); transition: border-color .15s, box-shadow .2s; animation: settle .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.ingredient:hover, .ingredient:focus-within, .ingredient.open { border-color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.ingredient + .ingredient { margin-top: 10px; }
.ing-row { display: flex; align-items: center; gap: 8px; padding: 9px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--mustard-soft); font-size: 22px; }
.ingredient:hover .avatar { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 30% { transform: rotate(-12deg) scale(1.1); } 65% { transform: rotate(9deg) scale(1.1); } }
.ing-name-wrap { flex: 1; min-width: 0; }
.ing-name { background: transparent !important; border-color: transparent !important; font-weight: 600; font-size: 17px; box-shadow: none !important; }
.ing-name:hover, .ing-name:focus { border-color: var(--line-strong) !important; background: var(--card) !important; }
.amount { width: 170px; flex: none; }
.share { width: 50px; text-align: right; font: 500 12px var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ing-row .btn.icon-only { border-color: transparent; background: transparent; color: var(--ink-soft); }
.ing-row .btn.icon-only:hover { background: var(--paper-2); color: var(--ink); }
.ing-row .ing-remove:hover { background: var(--danger-soft); color: var(--danger); }
.ing-toggle .icon { transition: transform .25s var(--spring); }
.ingredient.open .ing-toggle .icon { transform: rotate(90deg); }
.ing-details { padding: 16px; border-top: 1px solid var(--line); animation: settle .25s ease-out; }
.ing-details > * + * { margin-top: 14px; }
.nut-title { font-weight: 600; }
.nutrients { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nutrients .field > span { font-weight: 500; font-size: 14px; }
.batch { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--forest); color: #f1f7f3; }
.batch-total { line-height: 1.1; }
.batch-total span { display: block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #a9cdb9; margin-bottom: 6px; }
.batch-total strong { font: 700 40px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.batch .field { flex: 1 1 280px; }
.batch .field small { color: #b9d3c4; }
.batch input { color: var(--ink); }

/* ---------- allergens ---------- */
.contains-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px;
  background: var(--warn-soft); border: 1px solid var(--mustard); }
.contains-box:empty { display: none; }
.contains-box.ok { background: var(--ok-soft); border-color: var(--ok); }
.contains-box strong { font: 700 20px/1.2 var(--display); }
.contains-box .kicker { margin-bottom: 4px; }
.contains-box .count { display: inline-flex; gap: 6px; align-items: center; font: 500 12px var(--mono); padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); }
.acard { border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px; background: var(--card); box-shadow: var(--shadow-sm); border-left: 8px solid var(--mustard); }
.acard + .acard { margin-top: 12px; }
.acard > * + * { margin-top: 12px; }
.acard.confirmed { border-color: var(--line); border-left: 8px solid var(--ok); padding: 10px 18px; box-shadow: none; animation: tuck .4s var(--spring); }
@keyframes tuck { from { transform: scale(1.025); } }
.acard-head { display: flex; gap: 12px; align-items: center; }
.acard-head > div { flex: 1; min-width: 0; }
.acard-head strong { display: block; font-size: 17px; }
.acard-result { display: inline-flex; gap: 5px; align-items: center; color: var(--ok); font-size: 14px; font-weight: 600; }
.acard-result .icon { width: 15px; height: 15px; }
.allergen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.allergen-grid legend { grid-column: 1 / -1; font-size: 14px; }
.tick { position: relative; cursor: pointer; }
.tick input { position: absolute; opacity: 0; }
.tick span { display: flex; gap: 6px; align-items: center; min-height: 42px; padding: 6px 11px; border: 1.5px solid var(--line-strong); border-radius: 11px; font-size: 14px; background: var(--card);
  transition: transform .2s var(--spring), background .15s, border-color .15s; }
.tick:hover span { border-color: var(--ink-soft); }
.tick i { font-style: normal; }
.tick input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; transform: scale(1.03); }
.tick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---------- origin and stars ---------- */
.coo-ings li, .star-ings li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.coo-ings li:first-child, .star-ings li:first-child { border-top: 0; }
.coo-ing-name, .star-name { flex: 1 1 160px; font-weight: 600; }
.coo-ing-name small { display: block; }
.coo-ings select { width: 210px; }
.coo-ings .affix { width: 110px; }
.star-ings select { width: 230px; }
.star-ings .fibre { width: 176px; }
.coo-ings li.missing select, .star-ings li.missing .fibre input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.coo-preview svg { display: block; max-width: 100%; height: auto; min-width: 200px; background: #fff; }
.hsr-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hsr-top .big { font: 700 64px/1 var(--display); letter-spacing: -.05em; }
.stars { font-size: 32px; letter-spacing: 2px; color: var(--line-strong); }
.stars .s { display: inline-block; animation: pop .5s var(--spring) backwards; }
.stars .s:nth-child(2) { animation-delay: .06s; } .stars .s:nth-child(3) { animation-delay: .12s; }
.stars .s:nth-child(4) { animation-delay: .18s; } .stars .s:nth-child(5) { animation-delay: .24s; }
.stars .s.full { color: var(--mustard); }
.stars .s.half { background: linear-gradient(90deg, var(--mustard) 50%, var(--line-strong) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hsr-mark svg { display: block; width: 130px; height: auto; background: #fff; border-radius: 50%; }
.points { width: 100%; border-collapse: collapse; font-size: 14px; }
.points td { padding: 6px 0; border-top: 1px solid var(--line); }
.points .n { text-align: right; font: 500 14px var(--mono); }
.points .group td { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); border-top: 0; padding-top: 14px; }
.points .total td { font-weight: 700; border-top: 2px solid var(--ink); }
.points .muted-row { color: var(--ink-soft); }

/* ---------- check and print ---------- */
.verdict { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 16px; background: var(--warn-soft); color: var(--warn); }
.verdict .icon { width: 40px; height: 40px; }
.verdict strong { display: block; font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.verdict span { color: var(--ink); font-size: 14px; }
.verdict.ready { background: var(--ok-soft); color: var(--ok); }
.verdict.ready .icon { animation: pop .6s var(--spring); }
.verdict.blocked { background: var(--danger-soft); color: var(--danger); }
.checks { margin-top: 14px; }
.checks li { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); font-size: 15px; }
.checks li + li { margin-top: 6px; }
.checks li > span { flex: 1; }
.checks li.error { border-color: var(--danger); background: var(--danger-soft); }
.checks li.error .icon { color: var(--danger); }
.checks li.warning .icon { color: var(--warn); }
.checks li.info .icon { color: var(--info); }
small.bad { color: var(--danger); font-weight: 600; }
input[aria-invalid="true"] { border-color: var(--danger) !important; }

/* ---------- stage: where the label is shown ---------- */
.stage { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); display: flex; flex-direction: column; border-left: 1px solid var(--line-strong);
  background: radial-gradient(circle, var(--stage-dot) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--stage); }
.stage-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 30px 0; }
.stage-head .kicker { color: var(--ok); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.stage-head .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; transform: scale(.7); } }
.stage-head h2 { font-size: 30px; letter-spacing: -.04em; }

.ring { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke: var(--stage-dot); }
.ring circle.fill { stroke: var(--mustard); stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.2, .8, .2, 1), stroke .3s; }
.ring.full circle.fill { stroke: var(--ok); }
.ring b { position: relative; font: 500 14px var(--mono); }
.ring b small { color: var(--ink-soft); font-size: 11px; }

/* what the label is shown on */
.packs { display: flex; gap: 4px; align-self: flex-start; margin: 14px 30px 0; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.packs label { position: relative; cursor: pointer; }
.packs span { display: block; padding: 6px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: background .15s, color .15s; }
.packs label:hover span { color: var(--ink); }
.packs input:checked + span { background: var(--ink); color: var(--card); }

.mat { flex: 1; min-height: 0; overflow: hidden auto; padding: 14px 30px 20px; display: flex; flex-direction: column; align-items: center; perspective: 1400px; scrollbar-width: thin; }
.mat::before, .mat::after { content: ""; flex: 1 0 0; }  /* centres the pack, and still lets a tall one scroll */
.pack { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; flex: none; width: min(100%, 430px); display: flex; flex-direction: column; align-items: center;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.pack.tilting { transition: transform .08s linear; }
.pack.swap { animation: swap .5s var(--spring); }
@keyframes swap { from { opacity: 0; transform: translateY(26px) scale(.94) rotate(-2deg); } }
.pack-body { position: relative; width: 100%; }
/* crop marks at the corners of the flat label */
.crop { --m: 22px; --c: color-mix(in srgb, var(--ink) 45%, transparent); padding: var(--m);
  background:
    linear-gradient(var(--c), var(--c)) 0 var(--m) / 13px 1px, linear-gradient(var(--c), var(--c)) 100% var(--m) / 13px 1px,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - var(--m)) / 13px 1px, linear-gradient(var(--c), var(--c)) 100% calc(100% - var(--m)) / 13px 1px,
    linear-gradient(var(--c), var(--c)) var(--m) 0 / 1px 13px, linear-gradient(var(--c), var(--c)) calc(100% - var(--m)) 0 / 1px 13px,
    linear-gradient(var(--c), var(--c)) var(--m) 100% / 1px 13px, linear-gradient(var(--c), var(--c)) calc(100% - var(--m)) 100% / 1px 13px;
  background-repeat: no-repeat; }
.label-obj { position: relative; border-radius: 5px; transition: box-shadow .5s;
  box-shadow: 0 1px 1px rgba(21, 35, 28, .1), 0 10px 20px rgba(21, 35, 28, .1), 0 30px 60px rgba(21, 35, 28, .14); }
.pack.tilting .label-obj { box-shadow: 0 2px 2px rgba(21, 35, 28, .1), 0 18px 30px rgba(21, 35, 28, .13), 0 50px 80px rgba(21, 35, 28, .18); }
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%); }
.pack.tilting .sheen { opacity: 1; }
.pack-note { flex: none; margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--ink-soft); }
/* beside a pack, the stamp sits over its corner, so the pack can be bigger */
.mat { position: relative; }
.mat:has(.pack:not([data-pack="flat"])) .stamp { position: absolute; right: 22px; bottom: 58px; margin: 0; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow-sm); }

/* ---------- mock-up packs: pictures only, to see the label in place ---------- */
.pack:not([data-pack="flat"]) .crop { padding: 0; background: none; width: 386px; margin: 0 auto; }
.pack:not([data-pack="flat"]) .label-obj, .pack:not([data-pack="flat"]).tilting .label-obj { box-shadow: 0 1px 2px rgba(40, 25, 10, .35), 0 5px 12px rgba(40, 25, 10, .2); }
/* the label curves away at the sides of a jar or bottle */
.pack:is([data-pack="jar"], [data-pack="bottle"]) .label-obj::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 40, 30, .16), rgba(0, 0, 0, 0) 12%, rgba(255, 255, 255, .35) 19%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 86%, rgba(20, 40, 30, .14)); }

/* pouch: kraft paper, a heat seal and a hang hole */
.pack[data-pack="pouch"] { width: 440px; }
.pack[data-pack="pouch"] .pack-body { padding: 92px 0 54px; border-radius: 10px 10px 34px 34px;
  background: linear-gradient(90deg, rgba(60, 35, 10, .16), rgba(255, 255, 255, .1) 14%, transparent 50%, rgba(60, 35, 10, .06) 86%, rgba(60, 35, 10, .2)),
    linear-gradient(#d6b07e, #c2965f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -10px 20px rgba(60, 35, 10, .15), 0 3px 4px rgba(60, 35, 10, .2), 0 26px 44px rgba(60, 35, 10, .3); }
.pack[data-pack="pouch"] .pack-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, rgba(60, 35, 10, .1) 0 2px, transparent 2px 7px), rgba(60, 35, 10, .07); border-bottom: 2px dashed rgba(60, 35, 10, .35); }
.pack[data-pack="pouch"] .pack-body::after { content: ""; position: absolute; top: 20px; left: 50%; width: 50px; height: 16px; margin-left: -25px; border-radius: 999px;
  background: var(--stage); box-shadow: inset 0 3px 3px rgba(60, 35, 10, .5); }

/* jar and bottle: drawn to the height of the label by fx.js */
.pack-art { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pack:is([data-pack="jar"], [data-pack="bottle"]) .pack-art { display: block; }
.pack:is([data-pack="jar"], [data-pack="bottle"]) .crop { position: relative; }
.pack[data-pack="jar"] { width: 372px; }
.pack[data-pack="jar"] .pack-body { padding: 186px 0 64px; }
.pack[data-pack="jar"] .crop { zoom: .8; }
.pack[data-pack="bottle"] { width: 310px; }
.pack[data-pack="bottle"] .pack-body { padding: 268px 0 62px; }
.pack[data-pack="bottle"] .crop { zoom: .62; }

/* ---------- the label ---------- */
.paper { background: #fff; color: #000; border-radius: 5px; padding: 18px; text-align: left; font: 12px/1.35 Arial, Helvetica, sans-serif; }
.paper a { color: inherit; }
.paper p, .paper .title { overflow-wrap: anywhere; }
.paper.printing { animation: feed .8s cubic-bezier(.3, .7, .2, 1); }
@keyframes feed { from { clip-path: inset(0 0 100% 0); transform: translateY(-16px); } to { clip-path: inset(0); } }
/* what has just changed is marked, like a highlighter, and fades */
.paper .changed { animation: mark 1.4s ease-out; }
@keyframes mark { 0%, 25% { background: #ffe27a; box-shadow: 0 0 0 2px #ffe27a; } to { background: transparent; box-shadow: 0 0 0 2px transparent; } }
.nip td:first-child { white-space: nowrap; }
.paper.empty { color: #5b6b62; }
.paper-empty { text-align: center; padding: 8px 10px 14px; font: 700 17px/1.25 var(--display); color: #15231c; }
.paper-todo { margin: 0; padding: 0 6px 6px 24px; font: 13px/1.5 var(--sans); }
.paper-todo li + li { margin-top: 4px; }
.ghost-lines { display: grid; gap: 7px; padding: 4px 0 18px; }
.ghost-lines span { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #e9ede3 25%, #f7f9f4 45%, #e9ede3 65%) 0 0 / 300% 100%; animation: shimmer 2.2s linear infinite; }
.ghost-lines span:nth-child(1) { width: 58%; height: 15px; margin-bottom: 5px; }
.ghost-lines span:nth-child(3) { width: 84%; }
.ghost-lines span:nth-child(4) { width: 40%; }
.ghost-lines .ghost-box { height: 96px; margin-top: 6px; border-radius: 3px; border: 1.5px solid #dde3d6; background: repeating-linear-gradient(#fff 0 15px, #e9ede3 15px 16px); animation: none; }
@keyframes shimmer { to { background-position: -300% 0; } }
.paper .title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.paper p { margin: 0 0 4px; }
.paper .contains { font-weight: 700; }
.nip { width: 100%; border-collapse: collapse; border: 1.6px solid #000; margin: 8px 0; }
.nip th, .nip td { padding: 2px 6px; text-align: left; font-weight: 400; }
.nip .head { font-weight: 700; border-bottom: 1.6px solid #000; font-size: 13px; }
.nip .cols th { text-align: right; border-bottom: 1px solid #000; font-size: 10.5px; vertical-align: bottom; }
.nip td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nip tr.sub td:first-child { padding-left: 14px; }
.paper .extra { margin-top: 6px; }
.paper .coo-mark { margin: 6px 0 2px; }
.paper .coo-mark svg { display: block; width: 62%; max-width: 100%; height: auto; }

.stamp { flex: none; margin: 16px 0 4px; padding: 8px 18px 9px; text-align: center; color: var(--ok); border: 3px double var(--ok); border-radius: 10px; transform: rotate(-5deg);
  font-family: var(--mono); text-transform: uppercase; line-height: 1.15; background: color-mix(in srgb, var(--card) 75%, transparent); }
.stamp span { display: block; font-size: 10px; letter-spacing: .3em; }
.stamp strong { font-size: 19px; font-weight: 500; letter-spacing: .14em; }
.stamp.slam { animation: slam .55s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-16deg) scale(2.6); } 55% { opacity: 1; } }

.preview-status { margin: 0 30px 24px; padding: 13px 16px; border-radius: 14px; font-size: 14px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.preview-status a { font-weight: 600; text-underline-offset: 3px; }
.preview-status.ready { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.preview-status.ready a { color: var(--on-brand); }

/* ---------- menu, toast, confetti ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 230px; padding: 6px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); animation: settle .18s ease-out; }
.menu-body button, .menu-body label { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 9px; cursor: pointer; font-size: 15px; }
.menu-body button:hover, .menu-body label:hover { background: var(--card-2); }
.menu-body .danger { color: var(--danger); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 50; padding: 13px 20px; border-radius: 999px; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); animation: rise .35s var(--spring); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px) scale(.92); } }
#confetti { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
.fab { display: none; }

/* ---------- medium screens ---------- */
@media (max-width: 1240px) {
  .app { grid-template-columns: minmax(0, 1fr) clamp(350px, 35vw, 460px); }
  .topbar { padding-inline: 20px; gap: 8px 18px; }
  .stepper { gap: 6px; }
  .stepper li { flex: 1 0 auto; }
  .stepper a { padding-right: 12px; font-size: 14px; gap: 8px; }
  .amount { width: 150px; }
  .share { width: 40px; }
  .work { padding-top: 26px; }
  .stage-head { padding: 18px 22px 0; }
  .packs { margin-inline: 22px; }
  .mat { padding-inline: 14px; }
  .preview-status { margin: 0 22px 20px; }
}

/* ---------- small screens: one thing at a time ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; height: auto; min-height: calc(100vh - var(--bar)); display: none; border-left: 0; }
  body.show-preview .stage { display: flex; }
  body.show-preview .work { display: none; }
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 40; min-height: 54px; padding: 0 22px;
    border: 0; border-radius: 999px; background: var(--forest); color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; }
  .product-top, .recipes select { display: none; }
  .topbar { padding-inline: 16px; }
  .work { padding: 18px 14px 96px; }
  .step { padding: 22px 16px; }
  .stepper .step-name { display: none; }
  .stepper a { padding: 5px; }
  .stepper a.current { padding-right: 12px; }
  .stepper a.current .step-name { display: block; }
  .stepper li { flex: 0 0 auto; }
  .welcome::after { opacity: .35; }
  .ing-row { flex-wrap: wrap; }
  .ing-name-wrap { flex: 1 1 calc(100% - 170px); }
  .ing-toggle { order: 1; }
  .ing-remove { order: 2; }
  .amount { order: 3; flex: 1; width: auto; min-width: 0; margin-left: 52px; }
  .share { order: 4; margin-right: 8px; }
  .coo-ings select, .star-ings select { width: 100%; }
  .step-nav .btn.primary { padding: 0 18px; font-size: 16px; }
  .preview-status { margin-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }