/* ==========================================================================
   SLEDILNIK KALORIJ — stylesheet
   --------------------------------------------------------------------------
   Part 1 is the 'Classical' design system from Claude Design, copied verbatim
   from the handoff bundle (_ds/classical-1edb6e72…/styles.css). It is the
   source of truth for tokens and components — retune values there, not here.
   Part 2 is the app layer: the artboard's inline styles lifted into classes.
   ========================================================================== */

/* ┌──────────────────────────────────────────────────────────────────────┐
   │ PART 1 — design system (from Claude Design handoff, do not edit)      │
   └──────────────────────────────────────────────────────────────────────┘ */

/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ┌──────────────────────────────────────────────────────────────────────────┐
   │ PART 2 — app layer                                                        │
   │ Every rule below is the artboard's inline style, lifted into a class.      │
   │ No new colours, sizes or spacings are invented: all values come from the   │
   │ tokens above or are literal values taken from `Sledilnik kalorij.dc.html`. │
   └──────────────────────────────────────────────────────────────────────────┘ */

:root {
  /* The one literal the design uses outside the token set: its "over limit" red,
     used for exceeded macros, the error box and the destructive action. */
  --color-danger: #8f3327;
}

/* — shell — */
.app {
  min-height: 100vh; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); padding-bottom: 96px;
}
.container { max-width: 560px; margin: 0 auto; padding: 0 var(--space-4); }
input, select, textarea { font-family: var(--font-body); font-size: 15px; }

/* — masthead — */
.masthead { padding: var(--space-6) 0 var(--space-3); }
.kicker {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-accent-700);
  font-variant-numeric: tabular-nums;
}
.title {
  font-family: var(--font-heading); font-weight: 400; font-size: 38px;
  line-height: 1.05; letter-spacing: -0.02em; margin: var(--space-1) 0 0;
}

/* — top tabs — */
.tabs {
  display: flex; gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4);
}
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 var(--space-2); cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.02em;
  color: var(--color-neutral-600);
}
.tab:hover { color: var(--color-accent-700); }
.tab[aria-selected="true"] { border-bottom-color: var(--color-accent); color: var(--color-text); }

/* — day stepper — */
.daybar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.daybar-mid { text-align: center; flex: 1; }
.daybar-label { font-family: var(--font-heading); font-size: 20px; }
.daybar-iso {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}

/* — shared bits — */
.eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.grid-2-tight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.list-top { border-top: 1px solid var(--color-divider); }
.note-p { font-size: 12px; color: var(--color-neutral-700); margin: var(--space-3) 0 0; text-wrap: pretty; }
.sec-title { font-family: var(--font-heading); font-size: 20px; margin: 0 0 var(--space-2); }
.card-pad-4 { padding: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* — day totals card — */
.total-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
}
.total-kcal {
  font-family: var(--font-heading); font-size: 40px; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.total-kcal span { font-size: 16px; color: var(--color-neutral-600); }
.total-count {
  text-align: right; font-size: 13px; color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums;
}

/* — macro meters — */
.macro { margin-bottom: var(--space-3); }
.macro-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.macro-label { font-family: var(--font-heading); font-size: 15px; }
.macro-val {
  font-family: var(--font-heading); font-size: 17px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.macro-track {
  height: 5px; background: var(--color-neutral-200);
  border-radius: var(--radius-sm); overflow: hidden; margin-top: 6px;
}
.macro-fill { height: 100%; background: var(--color-accent); }
.macro-note {
  font-size: 11px; color: var(--color-neutral-600); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* Threshold colours: >85% of the limit warns in accent-600, over the limit turns danger. */
.macro[data-lv="near"] .macro-val { color: var(--color-accent-600); }
.macro[data-lv="over"] .macro-val { color: var(--color-danger); }
.macro[data-lv="over"] .macro-fill { background: var(--color-danger); }

/* — food rows — */
.frow {
  border-bottom: 1px solid var(--color-divider); padding: var(--space-3) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main kcal" "acts acts";
  column-gap: var(--space-3); align-items: start;
}
.frow-main { grid-area: main; min-width: 0; }
.frow-tags { display: flex; gap: var(--space-2); align-items: center; margin-bottom: 3px; }
.frow-src {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.frow-desc { font-size: 15px; text-wrap: pretty; }
.frow-macros {
  font-size: 12px; color: var(--color-neutral-700); margin-top: 3px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.frow-notes {
  font-size: 11px; color: var(--color-neutral-600); font-style: italic;
  margin-top: 2px; text-wrap: pretty;
}
.frow-right { grid-area: kcal; text-align: right; }
.frow-kcal {
  font-family: var(--font-heading); font-size: 22px; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.frow-acts { grid-area: acts; display: flex; gap: 2px; margin-top: 6px; justify-self: start; }
.btn-row { padding: 4px 8px; font-size: 12px; }
.btn-row-add { padding: 4px 10px; font-size: 12px; }
.btn-muted { color: var(--color-neutral-600); }

/* — averages — */
.avg-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px;
}
.avg-val {
  font-family: var(--font-heading); font-size: 18px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}

/* — charts — */
.chart { width: 100%; height: auto; display: block; }

/* — weight rows (Graf tab) — */
.wrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider);
  font-size: 14px; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.wrow-right { display: flex; align-items: center; gap: var(--space-3); }
.wrow-kg { font-family: var(--font-heading); font-size: 18px; }

/* — product rows — */
.prow {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.prow-main { flex: 1; min-width: 0; }
.prow-name { font-size: 15px; }
.prow-macros {
  font-size: 12px; color: var(--color-neutral-700); margin-top: 3px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.prow-acts { display: flex; gap: 2px; flex-shrink: 0; }

/* — settings — */
.set-label { display: block; font-size: 13px; margin-bottom: 4px; }
.storage-line {
  font-size: 12px; color: var(--color-neutral-600);
  margin-top: var(--space-2); font-variant-numeric: tabular-nums;
}
.btn-wipe { color: var(--color-danger); }
.btn-wrap { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* — floating new-entry button — */
.fab-wrap {
  position: fixed; right: 0; left: 0; bottom: 0; pointer-events: none;
  display: flex; justify-content: center; padding: 0 var(--space-4) var(--space-4);
  z-index: 30;
}
.fab-inner { max-width: 560px; width: 100%; display: flex; justify-content: flex-end; }

/* — modal — */
.backdrop {
  position: fixed; inset: 0; display: flex; align-items: flex-end;
  justify-content: center; padding: var(--space-3); overflow: auto; z-index: 40;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.sheet { width: 100%; max-width: 520px; padding: var(--space-4); max-height: 92vh; overflow: auto; }
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-3);
}
.sheet-title { font-family: var(--font-heading); font-size: 22px; margin: 0; }
.menu-grid { display: grid; gap: var(--space-2); }
.menu-grid .btn { justify-content: flex-start; }
.prod-pick {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) 0; cursor: pointer;
  font-family: var(--font-body); color: var(--color-text);
}
.prod-pick:hover { background: var(--color-accent-100); }
.prod-pick-name { display: block; font-size: 15px; }
.prod-pick-macros {
  display: block; font-size: 12px; color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums;
}
.pick-hint { font-size: 13px; color: var(--color-neutral-600); margin-top: var(--space-3); }
.busy {
  display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3);
  font-size: 13px; color: var(--color-accent-700);
}
.busy-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent); display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .busy-dot { animation: pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
}
.errbox {
  margin-top: var(--space-3); border: 1px solid var(--color-danger);
  border-radius: var(--radius-md); padding: var(--space-3);
  font-size: 13px; color: var(--color-danger); text-wrap: pretty;
}
.flabel {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 4px;
}
.flabel-mt { margin: var(--space-3) 0 4px; }
.sheet-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.img-preview { width: 100%; max-height: 220px; object-fit: contain; margin-top: var(--space-3); }

/* — Dnevnik (journal): one table per day, newest first — */
.j-day { margin-bottom: var(--space-8); }
.j-head {
  display: flex; justify-content: space-between; align-items: baseline;
  /* Full-strength text rule, not the usual divider — this is a day heading. */
  border-bottom: 1px solid var(--color-text); padding-bottom: var(--space-1);
}
.j-head h4 { font-family: var(--font-heading); font-size: 22px; margin: 0; }
.j-date {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
.j-table { width: 100%; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.j-table th, .j-table td { text-align: left; }
.j-table th.n, .j-table td.n { text-align: right; white-space: nowrap; }
.j-meal {
  display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.j-desc { display: block; font-size: 14px; text-wrap: pretty; }
.j-meta {
  display: block; font-size: 11px; font-style: italic;
  color: var(--color-neutral-600); text-wrap: pretty;
}
.j-total td {
  font-family: var(--font-heading); font-size: 16px;
  border-top: 1px solid var(--color-text);
}
.j-checks { margin-top: var(--space-2); display: grid; gap: 2px; }
.j-check { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }
.j-check[data-over="true"] { color: var(--color-danger); }
.j-extra {
  font-size: 12px; color: var(--color-neutral-600);
  margin-top: var(--space-2); font-variant-numeric: tabular-nums;
}
/* Five columns on a 390px phone: tighten the cells so the description keeps usable width. */
@media (max-width: 430px) {
  .j-table th, .j-table td { padding-inline: 3px; }
  .j-table th:first-child, .j-table td:first-child { padding-left: 0; }
  .j-table th:last-child, .j-table td:last-child { padding-right: 0; }
}

/* — explicit save affordances: a button that confirms the action happened — */
.btn-done {
  color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.savebar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.savehint { font-size: 12px; color: var(--color-accent-700); }
.savehint-idle { font-size: 12px; color: var(--color-neutral-600); }
/* Transient confirmation strip under the tabs, for actions that close their own view. */
.flashbar {
  font-size: 13px; color: var(--color-accent-700);
  border: 1px solid var(--color-accent); background: var(--color-accent-100);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
/* Inline tick for the two fields on Danes that have no button of their own. */
.savedtick { font-size: 11px; color: var(--color-accent-700); margin-left: var(--space-2); }
.eyebrow-row { display: flex; align-items: baseline; margin-bottom: 6px; }
.eyebrow-row .eyebrow { flex: 1; }
.notice-ok-box {
  margin-top: var(--space-3); border: 1px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-3);
  font-size: 13px; color: var(--color-accent-700); text-wrap: pretty;
}

/* — quick capture: file label + in-browser camera — */
.file-label { position: relative; overflow: hidden; }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hint-cam {
  font-size: 12px; color: var(--color-neutral-600);
  margin: var(--space-2) 0 0; text-wrap: pretty;
}
.cam-video {
  width: 100%; max-height: 300px; margin-top: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-neutral-900);
  display: block; object-fit: contain;
}
.cam-acts { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* — flash strip (with optional undo) — */
/* A `display` rule here outranks the UA's `[hidden] { display: none }`, so the
   hidden state has to be restated or the empty strip stays visible. */
[hidden] { display: none !important; }
.flashbar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; }
.flash-msg { font-size: 13px; color: var(--color-accent-700); text-wrap: pretty; }
.flash-acts { display: flex; gap: var(--space-1); flex-shrink: 0; }
.flash-btn { padding: 2px 8px; font-size: 12px; }
/* the upload preview is now a background-image box, so it needs its own size */
.img-preview {
  width: 100%; height: 220px; margin-top: var(--space-3);
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* — model chain diagnostics — */
.model-list { margin-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.model-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
}
.model-name { flex: 1; min-width: 0; word-break: break-all; }
.model-tag {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
}

/* — maintenance / daily expenditure — */
.tdee-hero { padding: var(--space-2) 0 var(--space-3); }
.tdee-num {
  font-family: var(--font-heading); font-size: 40px; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
.tdee-band { font-size: 20px; color: var(--color-neutral-600); }
.tdee-unit { font-size: 16px; color: var(--color-neutral-600); }
.tdee-cap {
  font-size: 12px; color: var(--color-neutral-700);
  margin-top: var(--space-1); text-wrap: pretty;
}
.tdee-rows { border-top: 1px solid var(--color-divider); }
.tdee-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px;
}
.tdee-row b {
  font-family: var(--font-heading); font-size: 15px; font-weight: var(--font-heading-weight);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; text-align: right;
}
.need-list { margin: 0 0 var(--space-3); padding-left: var(--space-4); font-size: 13px; }
.need-list li { margin-bottom: 2px; }
.warn-note { color: var(--color-accent-700); }

/* — plain-language maintenance card — */
.tdee-soon { font-family: var(--font-heading); font-size: 22px; line-height: 1.1; }
.tdee-sentence {
  font-size: 14px; margin: var(--space-3) 0 0; text-wrap: pretty;
  padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.tdee-sentence b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.how { margin-top: var(--space-3); }
.how > summary {
  cursor: pointer; font-size: 12px; color: var(--color-accent-700);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.how > summary::-webkit-details-marker { display: none; }
.how > summary::before { content: '▸'; font-size: 10px; }
.how[open] > summary::before { content: '▾'; }
.how > summary:hover { color: var(--color-accent); }
.how-body { margin-top: var(--space-2); }
.how-body p {
  font-size: 12px; color: var(--color-neutral-700);
  margin: 0 0 var(--space-2); text-wrap: pretty;
}
.how-body p:last-child { margin-bottom: 0; }

/* — in-flight feedback: which model, which attempt, and a way out — */
.busy { justify-content: space-between; }
.busy-text { flex: 1; min-width: 0; }
.busy-model {
  display: block; font-size: 11px; color: var(--color-neutral-600);
  word-break: break-all;
}

/* — camera-first action pair (design 2026-09-02 10:11) — */
.fab-group { display: flex; align-items: center; gap: var(--space-2); pointer-events: auto; }
.fab-pill {
  border: 1px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-neutral-700); border-radius: 999px;
  padding: 10px 16px; font-family: var(--font-body); font-size: 13px;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.fab-pill:hover { background: var(--color-accent-100); }
.fab-cam {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--color-accent); background: var(--color-bg);
  color: var(--color-accent-700); display: flex; align-items: center;
  justify-content: center; cursor: pointer; box-shadow: var(--shadow-md);
  padding: 0;
}
.fab-cam:hover { background: var(--color-accent-100); }
.fab-cam-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* — inline quick-capture banners on Danes — */
.qbanner, .qerror {
  display: flex; align-items: center; gap: var(--space-2);
  border-radius: var(--radius-md); padding: var(--space-3);
  margin-bottom: var(--space-4); font-size: 13px;
}
.qbanner { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.qerror {
  border: 1px solid var(--color-danger); color: var(--color-danger);
  justify-content: space-between; text-wrap: pretty;
}

/* — collapsed weight/sport — */
.extras-toggle {
  margin-bottom: var(--space-4); padding: 4px 0; font-size: 13px;
  color: var(--color-neutral-700); justify-content: flex-start;
}
.hint-small { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }
.empty-note {
  font-size: 14px; color: var(--color-neutral-600);
  border-top: 1px solid var(--color-divider); padding-top: var(--space-3);
}

/* Card header: title on the left, controls on the right. Was referenced by the
   maintenance and product cards but never defined, so both stacked instead. */
.card-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-head h2, .card-head .eyebrow { flex: 1; }

/* — kcal vs macros: offer, never overwrite — */
.kcal-hint {
  display: flex; align-items: center; gap: var(--space-2);
  justify-content: space-between; margin-top: var(--space-2);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 12px; color: var(--color-neutral-700); text-wrap: pretty;
}
/* Only a materially wrong total earns attention. */
.kcal-hint-warn {
  border-color: var(--color-accent); color: var(--color-accent-700);
  align-items: flex-start;
}
.kcal-hint b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.kcal-hint button { flex-shrink: 0; white-space: nowrap; }

/* — daily calorie gauge — */
.macro-kcal { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.macro-kcal .macro-label { font-size: 16px; }
.macro-kcal .macro-val { font-size: 18px; }
.macro-kcal .macro-track { height: 8px; }
.kcal-missing {
  font-size: 12px; color: var(--color-neutral-700); text-wrap: pretty;
  border: 1px dashed var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3);
}

/* ┌──────────────────────────────────────────────────────────────────────────┐
   │ Part 2 additions — QA/UX fix pass 2026-09-02                             │
   │ Still no new colours or sizes: every value is a token or an existing      │
   │ literal from the artboard.                                               │
   └──────────────────────────────────────────────────────────────────────────┘ */

/* — shared numeric validation: the message sits with the field it belongs to — */
.numwarn {
  font-size: 11px; color: var(--color-danger); margin-top: 4px; text-wrap: pretty;
}

/* — long unbroken tokens (a pasted URL) must not widen the page — */
.frow-desc, .j-desc, .prow-name, .prod-pick-name, .frow-notes, .j-meta {
  overflow-wrap: anywhere;
}
/* The five-column journal table gets its own scroller, so its width can never
   push .j-day — and with it <main>, .container and <html> — out sideways. */
.j-scroll { overflow-x: auto; }

/* — in-browser camera preview inside the quantity sheet — */
.img-preview-btn {
  display: block; width: 100%; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background-color: var(--color-neutral-100);
  cursor: zoom-in; padding: 0;
}
.zoomwrap {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  background: color-mix(in srgb, var(--color-neutral-900) 88%, transparent);
  padding: var(--space-4); cursor: zoom-out;
}
.zoomimg { max-width: 100%; max-height: 86vh; object-fit: contain; }
.zoomhint { font-size: 12px; color: var(--color-neutral-100); }

/* — Danes hero: headroom leads, the day's total becomes the eyebrow figure — */
.total-sub {
  font-family: var(--font-heading); font-size: 17px; line-height: 1.2;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
  margin-top: 2px;
}
.kcal-hero {
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.kcal-hero .total-kcal { margin-bottom: var(--space-2); }
.kcal-hero .macro-track { height: 8px; margin-top: 0; }
.kcal-hero .macro-note { margin-top: 6px; }
/* Same convention the macro meters use: near tints the number, over turns both
   the number and the bar. */
.kcal-hero[data-lv="near"] .total-kcal { color: var(--color-accent-600); }
.kcal-hero[data-lv="over"] .macro-fill { background: var(--color-danger); }
.total-kcal.is-over, .total-kcal.is-over span { color: var(--color-danger); }

/* — the field a prompt pointed at, so the user can see where they were sent — */
.field-pointed {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* — meal-row note: one line, opens on tap — */
.frow-notes {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 0; cursor: pointer; font-family: var(--font-body);
  font-size: 11px; color: var(--color-neutral-600); font-style: italic;
  margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.frow-notes-open { -webkit-line-clamp: unset; }

/* — sample-data strip — */
.demo-strip { margin-bottom: var(--space-4); }

/* — AI failures: one plain sentence, two ways forward, detail on demand — */
.err-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.err-more { margin-top: var(--space-2); }
.err-more > summary { color: var(--color-danger); }
.err-more > summary:hover { color: var(--color-danger); }
.errdetail {
  margin-top: var(--space-2); font-size: 12px; color: var(--color-neutral-700);
  white-space: pre-line; word-break: break-word;
}
.qerror { flex-direction: column; align-items: stretch; }
.qerror-msg { text-wrap: pretty; }
/* The disabled label carries the only in-button progress text; gold at 45 %
   opacity on cream is ~1.6:1 and effectively unreadable. */
.btn:disabled { opacity: 1; color: var(--color-neutral-700); border-color: var(--color-divider); }

/* — sheet: the commit button stays reachable, and confirmations land inside — */
/* dvh, not vh: iOS does not shrink vh when the keyboard opens, so the actions
   ended up under it. */
.sheet { max-height: 92dvh; }
.sheet-actions-sticky {
  position: sticky; bottom: calc(var(--space-4) * -1);
  background: var(--color-surface);
  padding: var(--space-3) 0 var(--space-4);
  margin-bottom: calc(var(--space-4) * -1);
}
.sheet-flash { margin: 0 0 var(--space-3); }
/* the value this recalculation moved */
.field-changed { background: var(--color-accent-100); border-color: var(--color-accent); }

/* — hr.sep was referenced from app.js and never defined, so the browser default
     rendered it as a stray 2x2px #808080 dot in the Dnevne meje card — */
.sep {
  border: 0; border-top: 1px solid var(--color-divider);
  margin: var(--space-3) 0;
}

/* — touch targets: 44px minimum hit area, at the density the bundle specifies —
     the visible type and padding are unchanged; the box grows around them. */
.btn-row, .btn-row-add, .flash-btn {
  position: relative; min-height: 24px;
}
.btn-row::after, .btn-row-add::after, .flash-btn::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
/* Uredi and Briši were 2px apart, exactly where a scrolling thumb lands. */
.frow-acts, .prow-acts { gap: var(--space-3); }
.wrow-right { gap: var(--space-3); }
.flash-acts { gap: var(--space-3); }
/* Primary navigation at a 44px row. */
.tab { padding: var(--space-2) 0 var(--space-3); min-height: 44px; }
.extras-toggle { min-height: 44px; }

/* — contrast: gold keeps borders, fills and bars; gold TEXT moves to
     accent-700 (5.6:1) which is the same colour family and passes AA.
     --color-accent is 3.02:1 on the warm ground and fails for 14px text. — */
.btn-primary, .btn-ghost { color: var(--color-accent-700); }
.btn-primary { border-color: var(--color-accent); }
.flash-msg, .savehint, .savedtick, .kicker { color: var(--color-accent-700); }
.hint-small, .savehint-idle { color: var(--color-neutral-700); }
.tab { color: var(--color-neutral-700); }
.btn-muted { color: var(--color-neutral-700); }
.btn-done { color: var(--color-accent-700); }

/* — product picker: tap to log, chevron to open the form — */
.prod-pick-row {
  display: flex; align-items: stretch; gap: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.prod-pick-row .prod-pick { flex: 1; border-bottom: 0; }
.prod-pick-edit { flex-shrink: 0; align-self: center; }

/* — first-run line, shown only while the sample data is still present — */
.intro-note {
  font-size: 12px; color: var(--color-neutral-700);
  margin: calc(var(--space-4) * -1 + 2px) 0 var(--space-4); text-wrap: pretty;
}

/* — keep the design's own quiet treatments where the contrast pass above would
     otherwise have promoted them to gold — */
.extras-toggle { color: var(--color-neutral-700); }
.menu-grid .btn-ghost { color: var(--color-accent-700); }

/* — averages rows: the label may wrap, the figure never does — */
.avg-row { gap: var(--space-3); }
.avg-row > span:first-child { flex: 1; min-width: 0; }
.avg-val { white-space: nowrap; flex-shrink: 0; }
.tdee-row b { white-space: nowrap; }

/* — camera with no key: same circle, without the gold, so being sent to
     Nastavitve is not a surprise — */
.fab-cam-off {
  border-color: var(--color-divider); color: var(--color-neutral-700);
  box-shadow: var(--shadow-sm);
}
.fab-cam-off:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — floating group: retreat while the list is scrolled — */
/* Measured at 430px: the 204px-wide group sat exactly on a meal row's
   Uredi/Briši. Sliding it out while scrolling down keeps the row reachable;
   it returns as soon as scrolling stops or reverses. */
/* Hidden outright where renderFab has nothing to put in it, so the mobile bar
   below does not leave an empty strip on Pregled and Nastavitve. */
.fab-wrap-empty { display: none !important; }

/* On a phone the 204px group floated in the middle of the right-hand edge and
   read as a rendering fault rather than as a control — that is the overlap in
   the report. Full-width bottom chrome reads as intentional, and .app's bottom
   padding keeps the last row clear of it when the page is at rest. */
@media (max-width: 560px) {
  .fab-wrap {
    padding: 0; pointer-events: auto;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
  }
  .fab-inner {
    max-width: none; justify-content: space-between; align-items: center;
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
  .fab-group { width: 100%; justify-content: space-between; }
  .fab-pill {
    box-shadow: none; background: transparent; border: 0;
    padding: 13px 4px; font-size: 15px; color: var(--color-text);
  }
  /* Smaller than the desktop 64px: the bar already carries the emphasis, so the
     shutter does not need a shadow to lift off the page. */
  .fab-cam { width: 50px; height: 50px; box-shadow: none; }
}

.fab-group { transition: transform .18s ease, opacity .18s ease; }
.fab-group.fab-away { transform: translateY(120%); opacity: 0; pointer-events: none; }
@media (max-width: 560px) {
  .fab-wrap { transition: transform .18s ease; }
  .fab-group.fab-away { transform: none; opacity: 1; pointer-events: auto; }
  .fab-wrap:has(.fab-group.fab-away) { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .fab-group { transition: none; }
}
/* Clear the group's full height so the last row is never stranded under it. */
.app { padding-bottom: 128px; }

/* ------------------------------------------------------ sinhronizacija naprav */
/* Whether the phone and the laptop actually share data is invisible otherwise,
   which is how two devices drifted apart unnoticed. State gets a permanent line. */
.sync-row {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.sync-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-neutral-600);
}
.sync-ok   { background: #4b7a4b; }
.sync-busy { background: var(--color-accent); }
.sync-err  { background: #a2473a; }
.sync-off  { background: var(--color-neutral-600); }
.sync-text { font-size: 13px; color: var(--color-neutral-700); flex: 1; min-width: 0; }

/* A two-line comment box: enough to see a whole "100 g kosmicev, 1 merica whey"
   without growing the sheet the way a full textarea does. */
.ta-2 { min-height: 62px; resize: vertical; }

/* Delete inside the edit sheet — the only way in on a phone, so it must not read
   as just another secondary button. */
.btn-danger { color: #a2473a; border-color: #a2473a; }

/* ------------------------------------------------ iOS: brez samodejne povečave */
/* iOS Safari zooms the whole page the moment a field with text under 16px takes
   focus, and it does NOT zoom back out afterwards — the page stays scaled and
   scrolled sideways, which is why content looked clipped on every tab, not just
   the one with the field in it. 16px is Safari's threshold, not a taste choice.

   Scoped to narrow screens so the design system's 14px stands on desktop, and
   done here in the app layer because the .input rule itself lives in the
   verbatim design-system block above and must not be edited.

   Deliberately NOT solved with maximum-scale=1 on the viewport tag: that would
   also block deliberate pinch-zoom, which people need. */
@media (max-width: 560px) {
  .input,
  input, select, textarea,
  input[type="number"], input[type="date"], input[type="password"] {
    font-size: 16px;
  }
  /* The date input renders its own text at the same size, and a hair more room
     keeps the 16px text off the border. */
  .input { min-height: 42px; padding: 8px 10px; }
}