/* Vorratsplaner (docs/design/referenz/06-vorratsplaner.html). Hamish bubble from blocks/hamstern_hinweis_box.css,
   .rail from components.css. Mobile first, desktop from 900 px. */

.btn-ghost-s { font-size: 13px; padding: 8px 12px; border-color: var(--ink); color: var(--ink); background: transparent; }

.pl-hero { background: var(--brand); padding-block: 18px 56px; }
.pl-hero h1 { font-size: 40px; font-weight: 900; letter-spacing: -.025em; margin-top: 10px; }
.pl-lede { font-size: 16px; margin-top: 8px; max-width: 36em; }

.pl-grid { display: grid; gap: 20px; padding-bottom: 40px; }
.pl-side { display: grid; gap: 12px; margin-top: -36px; position: relative; z-index: 2; min-width: 0; }
.pl-form, .pl-sum { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.pl-form { box-shadow: 0 8px 24px rgba(138, 75, 0, .08); }
.pl-h { font-size: 18px; font-weight: 800; margin-bottom: 12px; }

.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st { background: var(--sunk); border-radius: var(--r); padding: 8px 10px; display: grid; gap: 4px; }
.st-l { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.st-c { display: flex; align-items: center; justify-content: space-between; }
.st-c button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); font: 700 20px/1 var(--f-display); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.st-c button:disabled { opacity: .35; cursor: default; }
.st-c output { font-family: var(--f-display); font-weight: 500; font-size: 26px; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }

.seg { border: 0; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; }
.seg legend { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.seg label { cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; text-align: center; border: 2px solid var(--line); border-radius: var(--r); padding: 8px 4px; font-weight: 700; font-size: 15px; font-family: var(--f-display); line-height: 1.1; }
.seg small { font-family: var(--f-body); font-weight: 500; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.seg input:checked + span { border-color: var(--ink); background: var(--brand-soft); }
.seg input:focus-visible + span { outline: 3px solid var(--brand-deep); outline-offset: 2px; }

.tgl { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; }
.tgl input { position: absolute; opacity: 0; }
.tgls { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.tgls .tgl { margin-top: 0; }
.tg { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.tgl input:checked + .tg { background: var(--t-yg); }
.tgl input:checked + .tg::after { transform: translateX(18px); }
.tgl input:focus-visible + .tg { outline: 3px solid var(--brand-deep); outline-offset: 2px; }

.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sum-grid > div { display: grid; gap: 2px; align-content: start; }
.sum-grid .v { font-family: var(--f-display); font-weight: 900; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.sum-grid .u { font-size: 13px; font-weight: 600; }
.sum-grid .sum-x { font-size: 11px; color: var(--ink-3); }
.prog { padding-block: 12px; }
.prog-top { display: flex; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.prog-top strong { color: var(--ink); font-weight: 700; }
.prog-top .pct { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.prog .bar { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.prog .bar i { display: block; height: 100%; width: 0; background: #5DBB46; transition: width .3s; }
.pl-sum .hint { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.pl-sum .hint img { width: 52px; height: 52px; }
.pl-sum .bubble { padding: 10px 12px; }
.pl-sum .bubble p { font-size: 13px; }

.pl-list { min-width: 0; }
.pl-tabs { --w: auto; grid-auto-columns: max-content; gap: 6px; margin-bottom: 8px; position: sticky; top: calc(60px + var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg); padding-block: 8px; }
.pl-tabs:empty { display: none; }
.pl-tabs a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; }
.pl-tabs a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.grp { margin-top: 18px; scroll-margin-top: calc(130px + var(--wp-admin--admin-bar--height, 0px)); }
.grp header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 3px solid var(--c); }
.grp h3 { font-size: 20px; font-weight: 800; }
.grp header span { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grp ul { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--line); scroll-margin-top: calc(130px + var(--wp-admin--admin-bar--height, 0px)); }
/* Deep link #zeile-<id> (planner.js jump()): one short highlight in the group colour, fading out. */
.row.is-flash { border-radius: 6px; animation: pl-flash 1.6s ease-out both; }
@keyframes pl-flash {
  0%, 35% { background: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
.row label { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; cursor: pointer; }
.row input { appearance: none; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 6px; margin: 0; display: grid; place-items: center; cursor: pointer; background: var(--surface); }
.row input:checked { background: var(--pos); border-color: var(--pos); }
.row input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.row input:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.nm { font-size: 15px; font-weight: 600; line-height: 1.35; }
.nm small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.q { font-family: var(--f-display); font-weight: 800; font-size: 15px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row.is-done .nm { color: var(--ink-3); text-decoration: line-through; }
.row.is-done .nm small { text-decoration: none; }
.row.is-done .q { color: var(--ink-3); }
.rec { display: inline-block; margin: -4px 0 12px 36px; font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--brand); }
.row.is-done .rec { display: none; }
/* Product line under a recommended row (template-parts/products/planner-line.php). */
.pl-prod { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px 36px; padding: 8px 10px; background: var(--sunk); border-radius: var(--r); }
.pl-prod-img { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface); }
.pl-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.pl-prod-n { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.pl-prod .badge-s { font-size: 9px; padding: 2px 6px; }
.pl-prod .btn { flex: none; font-size: 12px; padding: 7px 10px; }
.rec + .pl-prod { margin-top: 0; }
.row.is-done .pl-prod { display: none; }

.pl-done { background: #D3F2CB; color: #2D6A27; border-radius: var(--r); padding: 12px 14px; margin-top: 16px; font-size: 15px; font-weight: 600; transform-origin: 50% 0; animation: pl-fupp .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pl-fupp { 0% { opacity: 0; transform: scale(.6) translateY(-6px); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.copied { flex-basis: 100%; font-size: 13px; color: var(--pos); min-height: 1.2em; }

.pl-how { margin-top: 32px; background: var(--sunk); border-radius: var(--r-lg); padding: 18px 16px; }
.pl-how h2 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.how-grid { display: grid; gap: 14px; }
.how-grid h3 { font-size: 14px; font-weight: 700; }
.how-grid p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.pl-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--bg); padding: 10px max(var(--gut), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gut), env(safe-area-inset-left, 0px)); font-size: 14px; }
.pl-bar strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-bar .btn { font-size: 13px; padding: 9px 12px; }

/* Copy feedback for the mobile bar: a pill just above it. */
.pl-toast { position: fixed; z-index: 40; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 8px; background: var(--pos-soft); color: var(--pos); border: 1px solid color-mix(in srgb, var(--pos) 25%, transparent); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 24px rgba(38, 33, 27, .18); }
.pl-toast::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pos); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pl-toast.is-fail { background: var(--neg-soft); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 25%, transparent); border-radius: var(--r-lg); }
.pl-toast.is-fail::before { content: "!"; background: var(--neg); }
.pl-toast.in { animation: pl-toast-up .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pl-toast-up { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .pl-toast.in { animation: none; }
  .pl-done { animation: none; }
  .row.is-flash { animation: none; background: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent); }
  .prog .bar i, .tg, .tg::after { transition: none; }
}

@container page (min-width: 900px) {
  .pl-hero { padding-block: 32px 88px; }
  .pl-hero h1 { font-size: 72px; }
  .pl-lede { font-size: 20px; }
  .pl-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 72px; }
  /* The pill bar sticks right under the header (72 px) and pads its pills down to 96 px, the sticky top of
     the form column, so both stop on one line and nothing shows through above the pills. */
  .pl-side { position: sticky; top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); margin-top: -56px; }
  .pl-tabs { top: calc(72px + var(--wp-admin--admin-bar--height, 0px)); overflow: visible; margin-inline: 0; padding-inline: 0; padding-top: 24px; }
  .grp { scroll-margin-top: calc(130px + var(--wp-admin--admin-bar--height, 0px)); }
  .grp h3 { font-size: 24px; }
  .nm { font-size: 16px; }
  .q { font-size: 17px; }
  .how-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pl-how { padding: 24px; }
  .pl-bar { display: none; }
}

/* The toast lives outside .page (no container there): hide it from the desktop width on. */
@media (min-width: 900px) {
  .pl-toast { display: none; }
}

/* Reminder box (planner/erinnerung): the .save card of the reference, form only, separate from the plan. */
.save { margin-top: 28px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.save-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--avatar); padding: 14px 16px; }
.save-head img { width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.save-head h2 { font-size: 19px; font-weight: 800; }
.save-head p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.save-body { padding: 16px; display: grid; gap: 14px; }
.save-form { display: grid; gap: 10px; }
.save-form label.f { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.save-form input[type=email] { font: 500 16px var(--f-body); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); width: 100%; }
.save-form .btn { width: 100%; }
.save-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.save-small { font-size: 11px; color: var(--ink-3); }
.save-err { background: var(--neg-soft); color: var(--neg); border-radius: var(--r); padding: 10px 12px; font-size: 13px; font-weight: 600; }
.save-ok { background: var(--pos-soft); color: var(--pos); border-radius: var(--r); padding: 12px 14px; font-size: 14px; font-weight: 600; animation: pl-fupp .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) { .save-ok { animation: none; } }
@container page (min-width: 640px) {
  .pl-cal { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .save-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .save-form .btn { width: auto; }
  .save-err, .save-small { grid-column: 1 / -1; }
}
@container page (min-width: 900px) {
  .save-head { padding: 16px 24px; }
  .save-body { padding: 20px 24px; }
}

/* ---------- Purchase list phase 2 (docs/anschaffungen.md) ---------- */
/* Two blocks: weekly shop, then one-time purchases. */
.pl-block + .pl-block { margin-top: var(--space-4); }
.pl-block-h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 18px; }
.pl-block-h + .grp { margin-top: 8px; }

/* Inline recommendation under an open one-time row (template-parts/planner/empfehlung.php). */
.pl-rec { margin: -4px 0 12px 36px; }
.pl-rec-tog { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; font: 600 12px var(--f-body); color: var(--ink); cursor: pointer; border-bottom: 2px solid var(--brand); }
.pl-rec-tog .arr { width: 7px; height: 7px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.pl-rec-tog[aria-expanded="true"] .arr { transform: translateY(1px) rotate(-135deg); }
.pl-rec-panel { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; margin-top: 10px; padding: 12px; background: var(--sunk); border-radius: var(--r); }
.pl-rec-panel[hidden] { display: none; }
.pl-rec-img { width: 72px; height: 72px; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.pl-rec-img img { width: 100%; height: 100%; object-fit: contain; }
.pl-rec-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.pl-rec-body .badge-s { font-size: 9px; padding: 2px 6px; }
.pl-rec-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.pl-rec-why { font-size: 13px; color: var(--ink-2); }
.pl-rec-body .price { font: 800 18px var(--f-display); font-variant-numeric: tabular-nums; }
.pl-rec-body .price small { display: block; font: 400 11px var(--f-body); color: var(--ink-3); }
.pl-rec-body .price-ext { font: 600 13px var(--f-body); }
.pl-rec-buy { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-rec-buy .btn { font-size: 12px; padding: 7px 10px; }
.pl-rec-list { margin: 2px 0 0; }

/* „Offene Anschaffungen“ */
.pl-open { margin-top: var(--space-4); padding: var(--space-2); border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: 12px; }
.pl-open[hidden] { display: none; }
.pl-open h2 { font-size: 22px; font-weight: 800; }
.pl-open-rows { list-style: none; margin: 0; padding: 0; }
.pl-open-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-open-row .pl-rec-img { width: 48px; height: 48px; }
.pl-rec-n { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.3; }
.pl-rec-n a { font-weight: 600; color: var(--ink); text-decoration: none; }
.pl-rec-n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-rec-n small { font-size: 12px; color: var(--ink-3); }
.pl-open-for { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pl-open-q { font: 800 15px var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-open-row .li-add { grid-column: 2 / -1; justify-self: start; }

/* Calendar reminder (template-parts/planner/kalender.php): the second way in the reminder box, below „oder“;
   without the box a card of its own. */
.save-or { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.save-or::before, .save-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.save-alt { display: grid; gap: 14px; }
.pl-cal { display: grid; gap: 8px; justify-items: stretch; }
.pl-cal .btn { gap: 10px; }
.pl-cal .cal-ic { width: 20px; height: 20px; flex: none; }

@container page (min-width: 900px) {
  .pl-open { padding: var(--space-3); }
  .pl-open-row { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
  .pl-open-row .li-add { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-rec-tog .arr { transition: none; }
}