/* Generic layout and components for all products. Reads only tokens from tokens.css (and the
   self-hosted fonts below). Product stylesheets (style.css, kueche.css, nutri.css) add their own
   layouts on top. Typography rule of the family: Serif for what you own (recipe names, titles),
   Sans for what you do (buttons, labels), Plex Sans for what you measure (--font-num: kcal, g, %,
   weights; plain zero), Mono for what you compare or type (--font-mono: portion codes, raw text). */
@import url("./fonts.css");

*{box-sizing:border-box}
/* The hidden attribute always wins. A component rule with display (".n-inline{display:flex}")
   otherwise beats the browser's [hidden]{display:none} — NutriCoach showed the gram field of all
   20 search results at once. One rule at the root instead of a [hidden] patch per component. */
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font:16px/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
.serif,.disp{font-family:var(--font-display);font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-tracking)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap} /* a measured value inside running text: number and unit stay together */
.muted{color:var(--muted)}
/* CC BY 4.0 credit under every view that shows values computed from the BLS (public/shared/sources.js) */
.source-credit{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
/* Long German names break with hyphenation instead of running out of their box. */
.name,h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none} /* skip-link target, toast focus return */
/* Visually hidden, still read by screen readers and password managers. !important: field styles
   (width:100% on inputs) must not widen it — at 375 px that made the login page scroll sideways. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
/* "Zum Inhalt springen" (ui.js mountProductBar): first stop for keyboard users, visible on focus */
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;padding:10px 16px;border-radius:var(--r-control);background:var(--ink);color:var(--ground);font-weight:700;text-decoration:none}
.skip-link:focus{top:calc(8px + env(safe-area-inset-top))}
svg.ic{flex:none;stroke-width:var(--icon-stroke)}

/* ---- Brand: signet + wordmark (docs/design/MARKE.md; markup from ui.js brandMark()) ----
   The signet is the file public/shared/brand/signet.svg painted through a mask in the text colour:
   swapping that file changes it everywhere, the colour stays a token (--brand). The wordmark is live
   text in Vollkorn Italic, lower case, in every theme (Klar included: a logo does not follow the
   theme's title face). The wordmark's baseline is the lockup's baseline, the signet sits centred. */
.brandmark{
  display:inline-flex;align-items:baseline;gap:.3em;color:var(--brand);white-space:nowrap;
  font-family:var(--font-brand);font-style:italic;font-weight:var(--brand-weight);
  font-size:var(--brand-size);line-height:1.15;letter-spacing:0;
}
.signet{
  flex:none;align-self:center;display:inline-block;width:1.15em;height:1.15em;background:currentColor;
  -webkit-mask:url(./brand/signet.svg) center/contain no-repeat;mask:url(./brand/signet.svg) center/contain no-repeat;
}
@media (forced-colors:active){.signet{forced-color-adjust:none;background:CanvasText}}

/* ---- Product bar: name, switcher between the three products, Darstellung menu ---- */
.product-bar{
  position:relative;z-index:50;display:flex;flex-wrap:wrap-reverse;align-items:center;gap:6px 12px;
  min-height:60px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--card);border-bottom:var(--border-w) solid var(--line);
}
/* sender (signet + wordmark, small) and the place you are in (large); stacked on phones and in
   the Sammlung sidebar, side by side on a wide top bar */
.pb-brand{margin-right:auto;min-width:0;display:flex;align-items:baseline;gap:2px 12px}
.pb-place{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-style:var(--display-style);letter-spacing:var(--display-tracking);
  font-size:calc(24px * max(var(--title-scale), .9));line-height:1.1;white-space:nowrap;
}
.pb-switch{display:flex;gap:2px;flex:none;background:var(--card2);border-radius:calc(var(--r-control) + 2px);padding:2px}
.pb-switch a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--r-control);
  color:var(--ink2);text-decoration:none;font-weight:650;font-size:15px;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.pb-switch a:hover{color:var(--ink)}
.pb-switch a[aria-current="page"]{background:var(--card);color:var(--accent-ink);box-shadow:0 0 0 1px var(--line)}
/* each product keeps its colour as a small tick under its icon */
.pb-tick{position:absolute;bottom:5px;left:50%;width:6px;height:3px;margin-left:-3px;border-radius:2px;background:var(--pc)}
.pb-tools{display:flex;gap:4px;flex:none}
.pb-icon{
  width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:0;border-radius:var(--r-control);background:none;color:var(--ink2);
}
.pb-icon:hover,.pb-icon[aria-expanded="true"]{background:var(--card2);color:var(--ink)}
@media (max-width:760px){
  .pb-brand{flex-direction:column;align-items:flex-start}
  .pb-place{font-size:calc(22px * max(var(--title-scale), .9))}
  .pb-switch a{padding:0;width:44px}
  .pb-switch .pb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pb-switch a svg{margin-top:-3px}
}
@media (min-width:761px){.pb-switch a svg{margin-top:-2px}}

/* Darstellung menu: a small non-modal dialog under its button */
.pb-panel{
  position:absolute;top:calc(100% - 4px);right:max(12px,env(safe-area-inset-right));z-index:60;
  width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow-y:auto;
  background:var(--card);color:var(--ink);border:var(--border-w) solid var(--line);
  border-radius:min(var(--r-sheet),20px);padding:16px 16px 10px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.4),var(--shadow);
}
.pb-panel[hidden]{display:none}
.pb-panel-h{margin:0 0 4px;font:700 17px/1.3 var(--font-ui);hyphens:manual}
.pb-field{border:0;margin:12px 0 0;padding:0;min-width:0}
.pb-field legend{padding:0;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink2)}
.seg{display:flex;border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card)}
.seg label{position:relative;flex:1 1 0;min-width:0;display:flex}
.seg label+label{border-left:var(--border-w) solid var(--line)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;
  font-weight:650;font-size:14px;color:var(--ink2);text-align:center;pointer-events:none;
}
.seg input:checked+span{background:var(--ink);color:var(--ground)}
.seg input:focus-visible+span{outline:2px solid var(--accent-ink);outline-offset:-4px}
.seg-theme span{flex-direction:column;gap:0;min-height:62px;padding:6px 4px}
.pb-sample{font-size:24px;line-height:1.05;font-weight:700;color:inherit}
.pb-sample-landhaus{font-family:"Vollkorn Variable","Vollkorn",Georgia,serif;font-weight:760}
.pb-sample-klar{font-family:"Atkinson Hyperlegible Next Variable","Atkinson Hyperlegible Next",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.pb-sample-verspielt{font-family:"Vollkorn Variable","Vollkorn",Georgia,serif;font-weight:900;font-style:italic}
.pb-tone-sample{margin:10px 0 0;padding:10px 12px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);font-size:14px;line-height:1.45;color:var(--ink2)}
.pb-tone-k{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.pb-note{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.pb-err{margin:8px 0 0;font-size:13px;color:var(--risk)}
.pb-foot{display:flex;justify-content:flex-end;margin-top:6px;padding-top:6px;border-top:var(--border-w) solid var(--line2)}
.pb-foot .btn{color:var(--ink2)}

/* ---- Typography ---- */
h1{
  font-family:var(--font-display);font-weight:var(--display-weight);font-style:var(--display-style);
  letter-spacing:var(--display-tracking);font-size:calc(clamp(28px,4.4vw,36px) * var(--title-scale));
  line-height:var(--lh-tight);margin:0 0 6px;text-wrap:balance;
}
h2{font-size:17px;line-height:var(--lh-snug);margin:28px 0 10px;font-weight:700}
.sub{color:var(--ink2);font-size:15px;line-height:1.45;margin:0 0 22px}
.section-h{
  font-family:var(--font-display);font-weight:var(--display-weight);font-style:var(--display-style);
  letter-spacing:var(--display-tracking);font-size:calc(21px * var(--title-scale));margin:6px 0 12px;
}
code{font-family:var(--font-mono);font-size:.9em}

/* ---- Buttons, chips ---- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;align-items:center}
.toolbar input[type=search]{
  flex:1;min-width:160px;min-height:var(--tap);padding:0 14px;font-size:16px;
  border:var(--border-w) solid var(--line);border-radius:var(--r-chip);background:var(--card);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  min-height:var(--tap);padding:0 18px;cursor:pointer;
  border:var(--border-w) solid var(--line);border-radius:var(--r-control);background:var(--card);color:var(--ink);
  font-weight:650;font-size:15px;line-height:1.1;text-align:center;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.small{padding:0 14px;font-size:14px}
.btn.quiet{background:none;border-color:transparent;color:var(--accent-ink);padding:0 10px}
.btn.quiet:hover{background:var(--card2)}
.btn.sq{width:var(--tap);padding:0}
.btn.danger{color:var(--risk);border-color:var(--risk)}
.btn.danger:hover{background:var(--risk-soft)}
.btn.quiet.danger{border-color:transparent}
.btn:disabled{opacity:.55;cursor:default}
.btn svg.ic{width:18px;height:18px}
/* static tag (not a control): compact, no hit area promised */
.chip{
  display:inline-flex;align-items:center;gap:4px;background:var(--card2);border-radius:var(--r-chip);
  padding:2px 10px;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink2);margin:0 4px 4px 0;
}
.chip.green{background:var(--accent-soft);color:var(--accent-ink)}
.chip.amber{background:var(--econ-soft);color:var(--ink)}
.chip.red{background:var(--risk-soft);color:var(--risk)}
/* interactive chip: 34 px visible, 44 px hit area through a transparent border (design proposal) */
button.chip,a.chip{
  min-height:44px;padding:0 13px;margin:0;border:5px solid transparent;background-clip:padding-box;
  font-size:14px;cursor:pointer;text-decoration:none;
}
button.chip[aria-pressed="true"],a.chip[aria-current]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 var(--border-w) var(--accent)}

/* ---- States ---- */
.loading{color:var(--muted);padding:34px 0;text-align:center;margin:0}
.grid>.empty,.grid>.loading{grid-column:1/-1}
.empty{
  padding:18px 16px;border:1.5px dashed var(--line);border-radius:var(--r-card);
  color:var(--ink2);font-size:15px;line-height:1.45;text-align:left;
}
.error{background:var(--risk-soft);color:var(--risk);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;white-space:pre-wrap}
.empty-state{
  max-width:36rem;margin:8vh auto 0;padding:28px 26px;text-align:left;
  background:var(--card);border:var(--border-w) solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
}
.empty-state .eyebrow{font-size:13px;font-weight:700;color:var(--accent-ink);margin:0 0 10px}
.empty-state h1{margin-bottom:12px}
.empty-state p{margin:0 0 14px;color:var(--ink2);max-width:var(--measure)}
.empty-state ul{margin:0 0 18px;padding-left:20px;color:var(--ink2)}
.empty-state .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{
  background:var(--card);border:var(--border-w) solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;box-shadow:var(--shadow);
}
[data-theme="verspielt"] .card{border-color:var(--ink)}
a.card{display:block;text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--accent)}
.card h3{
  margin:0 0 6px;font-size:19px;line-height:1.15;font-family:var(--font-display);
  font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-tracking);
}
.card .meta{font-size:14px;color:var(--muted)}

/* ---- Forms ---- */
.form{display:grid;gap:12px;max-width:560px}
.form label{font-size:14px;font-weight:600;color:var(--ink2);display:block;margin-bottom:4px}
.form input,.form select,.form textarea{
  width:100%;min-height:var(--tap);padding:9px 12px;font-size:16px; /* 16px: no iOS zoom on focus */
  border:var(--border-w) solid var(--line);border-radius:var(--radius-sm);background:var(--card);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Dialog (a bottom sheet on phones: thumb zone) ---- */
dialog{
  border:var(--border-w) solid var(--line);border-radius:var(--r-sheet);background:var(--card);color:var(--ink);
  padding:22px;max-width:520px;width:92vw;box-shadow:var(--shadow);
}
dialog::backdrop{background:var(--scrim)}
dialog h3{
  margin:0 0 14px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-style:var(--display-style);letter-spacing:var(--display-tracking);font-size:calc(24px * var(--title-scale));line-height:1.15;
}
@media (max-width:560px){
  dialog{margin:auto 0 0;width:100%;max-width:none;max-height:88dvh;border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* ---- Toast (snackbar with undo, ui.js toast()) ---- */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;
  display:flex;align-items:center;gap:4px;width:max-content;max-width:min(560px,calc(100vw - 24px));
  padding:4px 4px 4px 16px;border-radius:calc(var(--r-card) * .8);background:var(--ink);color:var(--ground);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  opacity:0;transform:translate(-50%,10px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-msg{flex:1;margin:0;padding:10px 0;font-size:15px;line-height:1.35}
.toast button{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.toast-act{padding:0 10px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toast-x{width:44px;justify-content:center;flex:none;opacity:.8}
.toast button:focus-visible{outline:2px solid var(--ground);outline-offset:-4px;border-radius:var(--r-control)}
[data-theme="verspielt"] .toast{border-radius:22px}

/* ---- Simple product page (Küche, NutriCoach, Portionsseite until their packages land) ---- */
.surface{padding:26px clamp(16px,4vw,44px) calc(60px + env(safe-area-inset-bottom))}
.surface .page{max-width:960px;margin:0 auto}

@media (prefers-reduced-motion:reduce){
  .toast,.pb-switch a,.btn{transition:none}
}