/* The free web planner (/apps/gustamo/grocery-list/), on top of ../gustamo.css: same fridge door,
   same paper and magnets. Editors stay upright (nobody types on a tilted card); the list sheet
   carries the pin. Motion tokens follow the app: decelerating entry, faster accelerating exit,
   opacity on its own curve; reduced motion lands on the same final state at once. */

:root {
  --ease-in: cubic-bezier(.16, 1, .3, 1);      /* entry: easeOutExpo-like */
  --ease-out: cubic-bezier(.32, 0, .67, 0);    /* exit: easeInCubic */
  --ease-fade: cubic-bezier(.5, 1, .89, 1);    /* opacity: easeOutQuad */
  --danger-ink: #A3311C;                       /* 5.97:1 on --danger-tint */
  --danger-tint: #FBEAE5;
}

[hidden] { display: none !important; }

.tool-hero { padding: 34px 0 10px; }
@media (min-width: 940px) { .tool-hero { padding: 54px 0 14px; } }
.tool-hero h1 { margin: 12px 0 14px; max-width: 52rem; }
.tool-hero .lead { max-width: 46rem; }

.tool { padding: 22px 0 56px; }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 980px) { .tool-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 34px; } }

.col-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.col-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* units: a two-way switch, the selected side is a filled magnet */
.units { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--well); box-shadow: inset 0 2px 3px var(--well-shade); }
.units input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.units label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; font: 700 .9375rem/1.15 var(--sans); color: var(--ink); cursor: pointer;
  transition: background-color .25s var(--ease-fade), color .25s var(--ease-fade); }
.units input:checked + label { background: var(--plate); color: #FFFFFF; }
.units input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

/* the dinners: each one grows in and folds away, siblings glide (height travels, never a jump) */
.dinners { list-style: none; display: grid; gap: 0; }
.fold { display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .42s var(--ease-in), opacity .3s var(--ease-fade); }
.fold > .in { min-height: 0; }
.fold.anim > .in, .fold.enter > .in, .fold.leave > .in { overflow: hidden; }
#planner, #list-sheet, #how { scroll-margin-top: 80px; }
.fold.enter, .fold.leave { grid-template-rows: 0fr; opacity: 0; }
.fold.leave { transition: grid-template-rows .26s var(--ease-out), opacity .2s var(--ease-out); }
.dinners > .fold > .in { padding: 12px 2px 10px; }

.dinner { padding: 22px 18px 16px; }
.dinner-head { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 10px; align-items: end; }
@media (max-width: 420px) { .dinner-head { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field > span { font: 800 .8125rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.tool input[type="text"], .tool input[type="number"], .tool select, .tool textarea {
  width: 100%; font: 600 1rem/1.4 var(--sans); color: var(--ink); background: var(--well); border: 1px solid transparent; border-radius: 12px;
  box-shadow: inset 0 2px 3px var(--well-shade); padding: 10px 12px; min-height: 46px; }
.tool select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--quiet) 50%), linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.tool textarea { resize: vertical; min-height: 9.5rem; max-height: 70vh; line-height: 1.5; font-weight: 500; overflow-y: auto; }
.tool input::placeholder, .tool textarea::placeholder { color: var(--quiet); opacity: 1; }
.tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.dinner .ingredients { margin-top: 12px; }
.serves { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; align-items: end; }
.serves .field { grid-template-columns: auto 5.25rem; align-items: center; gap: 10px; }
.serves .field > span { text-transform: none; letter-spacing: 0; font: 700 .9375rem/1.2 var(--sans); color: var(--ink); }
.dinner-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; }
.read { font: 600 .9375rem/1.35 var(--sans); color: var(--quiet); }

/* small magnets */
.mag.sm { min-height: 44px; padding: 0 16px; --r: 13px; --t: 4px; font-size: .9375rem; }
/* destructive: red ink AND a red edge on a red tint, so it reads red before the word */
/* nothing to copy or print yet: a flat well, quieter than a live magnet (quiet ink on the well 5.85:1) */
.mag:disabled { --face: var(--well); --top: var(--well); --fg: var(--quiet); cursor: default; box-shadow: inset 0 1px 2px var(--well-shade); background: var(--well); transform: none; }
.mag.danger { --face: var(--danger-tint); --top: #FFF2EE; --base: #E2B4A8; --fg: var(--danger-ink); border: 2px solid var(--tomato-face); }
.adders { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 18px; align-items: center; }
.adders .spacer { flex: 1 1 auto; }

/* the list sheet */
.sheet-list { padding: 22px 18px 18px; }
@media (min-width: 560px) { .sheet-list { padding: 26px 24px 22px; } }
.sheet-list .card-head h2, .sheet-list .card-head h3 { font-size: 1.5rem; }
.plan { list-style: none; display: grid; gap: 4px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--hair); }
.plan li { display: flex; gap: 10px; font: 600 .9375rem/1.35 var(--sans); }
.plan b { flex: none; width: 2.6rem; font-weight: 800; color: var(--quiet); letter-spacing: .04em; }
.plan small { color: var(--quiet); font-weight: 600; }
.aisle-block .aisle { margin: 14px 0 2px; font-size: 1.0625rem; }
.aisle-block:first-of-type .aisle { margin-top: 4px; }
.rows { list-style: none; }
.rows .row-line { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); cursor: pointer; }
.rows > .fold:first-child .row-line { border-top: 0; }
.rows .t { flex: 1; min-width: 0; }
.rows .t strong { display: block; font: 700 1rem/1.3 var(--sans); overflow-wrap: anywhere; }
.rows .t small { display: block; font: 600 .875rem/1.35 var(--sans); color: var(--quiet); overflow-wrap: anywhere; }
.rows .q { flex: none; max-width: 46%; text-align: right; font: 700 .9375rem/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rows input.tick { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 2px solid rgba(95, 82, 73, .7);
  background: var(--paper); cursor: pointer; transition: background-color .2s var(--ease-fade), box-shadow .2s var(--ease-fade); }
.rows input.tick:checked { background: var(--basil); border-color: var(--basil); box-shadow: inset 0 0 0 4px var(--paper); }
.rows input.tick:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.rows .done .t strong { text-decoration: line-through; text-decoration-thickness: .1em; color: var(--quiet); }
.rows .done .q { color: var(--quiet); }
/* the server-rendered example uses the landing's static tick */
.rows .tick-static { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(95, 82, 73, .7); background: var(--paper); }
.empty { padding: 18px 2px 8px; color: var(--quiet); }
.empty strong { color: var(--ink); }
.list-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 18px; }
.notice { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--hair); color: var(--ink); font-size: .9375rem; }

.get-app { margin-top: 26px; padding: 24px 20px 20px; }
.get-app h3 { font-size: 1.3rem; }
.get-app p { margin-top: 8px; color: var(--quiet); }
.get-app .stores { margin-top: 16px; }

/* toast (copied, removed + undo) and the phone shortcut to the list: opaque plates with a relief shadow */
.toast-dock { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 var(--gutter); }
.toast-dock .toast { pointer-events: auto; transform: translateY(0); opacity: 1; max-width: 34rem;
  transition: transform .4s var(--ease-in), opacity .3s var(--ease-fade); }
.toast-dock .toast.hide { transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .22s var(--ease-out), opacity .18s var(--ease-out); }
.toast button { margin-left: auto; background: none; border: 0; color: #FFFFFF; font: 800 .875rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 32px; padding: 0 4px; }
.jump { position: fixed; right: var(--gutter); bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 16px;
  background: var(--plate); color: #FFFFFF; font: 800 .9375rem/1 var(--sans); text-decoration: none; box-shadow: 0 10px 22px rgba(30, 18, 10, .28);
  transition: transform .4s var(--ease-in), opacity .3s var(--ease-fade); }
.jump.hide { transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .22s var(--ease-out), opacity .18s var(--ease-out); }
@media (min-width: 980px) { .jump { display: none; } }

/* example week, server-rendered */
.example .split { align-items: start; }
.example-week { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
.example-week li { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair); box-shadow: var(--shadow); }
.example-week img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.example-week strong { display: block; font: 700 1rem/1.3 var(--sans); }
.example-week small { display: block; font: 600 .875rem/1.35 var(--sans); color: var(--quiet); }
.example-week .day { width: 48px; }
.example .sheet-list { transform: rotate(.8deg); }
.example .mag { margin-top: 20px; }

.features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 22px; }
.features li { padding: 22px 20px 18px; }
.features img { width: 44px; height: 44px; margin-bottom: 10px; }
.features h3 { font-size: 1.15rem; margin-bottom: 6px; }
.features p { color: var(--quiet); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .fold, .fold.leave, .units label, .toast-dock .toast, .toast-dock .toast.hide, .jump, .jump.hide, .rows input.tick { transition: none; }
}

@media print {
  .tool-hero .lead, .tool .col-week, .adders, .list-actions, .sheet-list .notice, .get-app, .toast-dock, .jump, .after-tool, noscript { display: none !important; }
  .tool { padding: 0; }
  .tool-grid { display: block; }
  .tool-hero { padding: 0 0 8px; }
  .tool-hero h1 { font-size: 1.4rem; }
  .tool-hero .eyebrow { display: none; }
  .sheet-list { border: 0; padding: 0; }
  .sheet-list .pin { display: none; }
  .rows .row-line { break-inside: avoid; padding: 5px 0; }
  .aisle-block { break-inside: avoid-page; }
  .rows input.tick { border-color: #555555; }
  .fold.enter, .fold.leave { grid-template-rows: 1fr; opacity: 1; }
}