/* dashboard — the shell's landing block (not a standalone page). Base body, skin
   tokens and chrome come from shared/theme.css; the app list below it is styled by
   assets/shell.css. All colours are skin tokens.

   NOTE: .btn/.btn-primary are deliberately NOT used here — they belong to the
   shell (login). The quick-entry dialog uses .dlg-btn instead, so both sheets can
   sit on the same page without fighting. */

.dash { margin-bottom: 2rem; }

/* The UA rule for [hidden] is display:none at zero specificity, so any author
   `display: flex/grid` below would silently beat it and the element would stay
   visible — e.g. the hidden verdicts panel. Restore the intent once, globally. */
[hidden] { display: none !important; }

.zone { margin-bottom: 1.5rem; }
.muted { color: var(--ink-faint); }

.panel {
  background: var(--panel); border: var(--border-w) solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.panel h2 {
  font-family: var(--font-head); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.85rem;
}
.panel-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.panel-head h2 { margin-bottom: 0.85rem; }
.panel-head .chips { margin-left: auto; margin-bottom: 0.85rem; }

.note {
  font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5;
  margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: var(--border-w) solid var(--line);
}

.dlg-btn {
  font-family: var(--font-head); font-size: 0.78rem; padding: 8px 14px;
  border-radius: var(--radius); border: var(--border-w) solid var(--line);
  background: var(--panel-2); color: var(--ink); cursor: pointer; transition: all .12s;
}
.dlg-btn:hover { border-color: var(--accent); color: var(--accent); }
.dlg-btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: bold; border-color: var(--accent); }
.dlg-btn-primary:hover { filter: brightness(1.1); color: var(--accent-ink); box-shadow: var(--glow); }

.chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-head); font-size: 0.7rem; padding: 4px 10px;
  border-radius: var(--radius); border: var(--border-w) solid var(--line);
  background: var(--panel-2); color: var(--ink-dim); cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: bold; }

/* --- head: date, time, weather --- */

/* Date left, weather right, the day's progress centred between them. The two
   outer blocks are given equal basis so the centre block sits optically centred
   rather than pushed around by whichever side happens to be wider. */
.now {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 0 0.25rem 1.1rem; margin-bottom: 1.25rem;
  border-bottom: var(--border-w) solid var(--line);
}
.now-left { flex: 1 1 0; min-width: 150px; }
.now-date {
  font-family: var(--font-head); font-size: 1.05rem; margin: 0;
  text-transform: capitalize; /* cs-CZ yields lowercase weekday names */
}
.now-time { font-family: var(--font-head); font-size: 2.2rem; color: var(--accent); margin: 0.1rem 0 0; line-height: 1; }
.now-weather {
  flex: 1 1 0; min-width: 150px;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
}
.w-glyph { font-size: 1.9rem; line-height: 1; }
.w-temp { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); }
.w-meta { font-size: 0.72rem; color: var(--ink-faint); line-height: 1.35; }

/* --- public zone --- */

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 1.25rem; }
.card {
  background: var(--panel); border: var(--border-w) solid var(--line);
  border-radius: var(--radius); padding: 0.9rem 1rem;
}
.c-label {
  display: block;
  font-family: var(--font-head); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint); margin: 0 0 0.5rem;
}
.c-big { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--accent); margin: 0; line-height: 1.1; }
.c-unit, .c-sub { font-family: var(--font); font-size: 0.75rem; color: var(--ink-faint); font-weight: normal; }
.c-sub { display: block; margin: 0.3rem 0 0; }

/* Semi-active tile: the number is the point, the sparkline is context behind it,
   and the whole card is the button (a <button>, so it is keyboard-reachable). */
.card-steps {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  color: var(--accent); /* the sparkline paints with currentColor */
  font: inherit; cursor: pointer; transition: border-color .12s;
}
.card-steps:hover, .card-steps:focus-visible { border-color: var(--accent); outline: none; }
.card-steps > :not(.spark) { position: relative; } /* above the sparkline */
.spark { position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; display: block; }

.act { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.act th, .act td { padding: 0.22rem 0; text-align: right; font-weight: normal; }
.act thead th {
  font-family: var(--font-head); font-size: 0.62rem; text-transform: uppercase;
  color: var(--ink-faint); letter-spacing: 0.05em; border-bottom: var(--border-w) solid var(--line);
  padding-bottom: 0.35rem;
}
.act tbody th { text-align: left; color: var(--ink-dim); }
.act tbody td { font-family: var(--font-head); color: var(--ink); }
.act tbody tr td:last-child { color: var(--ink-dim); }

/* --- quick entry dialog --- */

.dlg {
  border: var(--border-w) solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); padding: 0; box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.dlg-body { padding: 1.25rem; min-width: 260px; }
.dlg-body h2 {
  font-family: var(--font-head); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.75rem;
}
.dlg-body input {
  width: 100%; box-sizing: border-box; font-family: var(--font-head); font-size: 1.4rem;
  padding: 0.5rem 0.6rem; background: var(--panel-2); color: var(--ink);
  border: var(--border-w) solid var(--line); border-radius: var(--radius);
}
.dlg-body input:focus { outline: none; border-color: var(--accent); }
.dlg-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.split > .panel { margin-bottom: 0; }
.split-ls { grid-template-columns: 1fr 1.4fr; margin-bottom: 1.25rem; align-items: start; }

.ya-date { font-family: var(--font-head); font-size: 0.8rem; color: var(--ink-dim); margin: 0 0 0.35rem; }
.ya-body { font-size: 1rem; margin: 0; }

.up-row {
  display: flex; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0;
  border-bottom: var(--border-w) solid var(--line); text-decoration: none; color: var(--ink);
}
.up-row:last-child { border-bottom: 0; }
.up-row:hover .up-what { color: var(--accent); }
.up-when { font-family: var(--font-head); font-size: 0.75rem; color: var(--accent); min-width: 5.5rem; }
.up-what { font-size: 0.92rem; }

/* Reference lines in the sparkline: the daily goal and the 30-day average.
   Dashed and low-contrast — they are context under the number, not a chart. */
.sp-goal { stroke: var(--ok); stroke-width: 0.8; stroke-dasharray: 3 2; opacity: 0.75; }
.sp-avg  { stroke: var(--ink); stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.45; }

.panel-tag {
  font-family: var(--font-head); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ok); margin-left: auto; margin-bottom: 0.85rem;
}
/* Not today's data — say so, do not pass it off as current. */
.panel-tag.stale { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* --- "dnes vs. obvykle" (deviation bars) --- */

.vitals { display: flex; flex-direction: column; gap: 0.9rem; }
.vt-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-head); font-size: 0.78rem; color: var(--ink-dim);
  margin-bottom: 0.35rem;
}
.vt-pct { font-size: 0.82rem; }
/* The bar's end-to-end range, so the dot's position is readable at all. */
.vt-range { color: var(--ink-faint); font-size: 0.68rem; font-family: var(--font); }
.vt-off {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--danger); margin-left: 0.35rem;
}
/* The bar is a scale, not a fill: the centre is "as usual for me", the dot is today. */
.vt-bar {
  position: relative; height: 8px; background: var(--panel-2);
  border-radius: 4px; border: var(--border-w) solid var(--line);
}
.vt-mid {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--ink-faint); opacity: 0.6;
}
.vt-dot {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--ink);
}
.vt-good { color: var(--ok); }
.vt-dot.vt-good { background: var(--ok); }
.vt-bad { color: var(--danger); }
.vt-dot.vt-bad { background: var(--danger); }
.vt-flat { color: var(--ink-faint); }
.vt-dot.vt-flat { background: var(--ink-faint); }

/* --- nutrition --- */

.nutri { display: flex; flex-direction: column; gap: 0.55rem; }
.nu { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.6rem; }
.nu-label { font-size: 0.82rem; color: var(--ink-dim); }
.nu-bar {
  height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden;
  border: var(--border-w) solid var(--line);
}
/* width: 0 by default — if the width ever fails to apply, an empty bar is a
   safer lie than a full one (a block-level <i> with no width fills its parent). */
.nu-bar i { display: block; height: 100%; width: 0; border-radius: 4px; }
.nu-pct { font-family: var(--font-head); font-size: 0.8rem; min-width: 5.5rem; text-align: right; }
.nu-of { color: var(--ink-faint); font-size: 0.68rem; }

/* Colour carries the verdict, because the percentage alone is ambiguous:
   58 % of a protein target is bad, 58 % of the saturated-fat cap is good.
   The state comes from metricScore(), which knows each metric's direction. */
/* Over 100 % of a target/cap: the bar is full, so the overshoot is shown by a
   stripe instead of extra length — otherwise 100 % and 150 % look identical. */
.nu-bar i.over {
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--bg) 45%, transparent) 3px,
    color-mix(in srgb, var(--bg) 45%, transparent) 6px);
}
.nu-ok   { background: var(--ok); }
.nu-warn { background: var(--accent); }
.nu-bad  { background: var(--danger); }
.nu-t-ok   { color: var(--ok); }
.nu-t-warn { color: var(--accent); }
.nu-t-bad  { color: var(--danger); }

/* --- verdicts --- */

.verdicts { display: flex; flex-direction: column; gap: 0.5rem; }
.vd {
  border-left: 3px solid var(--line); background: var(--panel-2);
  border-radius: var(--radius); padding: 0.6rem 0.8rem;
}
.vd-main { display: flex; align-items: baseline; gap: 0.75rem; }
.vd-claim { font-size: 0.95rem; }
.vd-tag {
  margin-left: auto; font-family: var(--font-head); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.vd-detail { font-size: 0.74rem; color: var(--ink-faint); margin-top: 0.25rem; }

/* Confirmed = it holds. Disproved = it does NOT hold, and that is a finding too,
   not a failure — so it gets its own colour, never the danger red. */
.vd-confirmed { border-left-color: var(--ok); }
.vd-confirmed .vd-tag { color: var(--ok); }
.vd-disproved { border-left-color: var(--accent); }
.vd-disproved .vd-tag { color: var(--accent); }
.vd-inverted { border-left-color: var(--danger); }
.vd-inverted .vd-tag { color: var(--danger); }
/* "náznak" (|r| 0.1–0.2): right direction, too weak to claim. Deliberately drab —
   it must not read as a finding. */
.vd-hint { border-left-color: var(--ink-faint); }
.vd-hint .vd-tag { color: var(--ink-dim); }
.vd-unclear .vd-tag, .vd-nodata .vd-tag { color: var(--ink-faint); }
.vd-unclear .vd-claim, .vd-nodata .vd-claim { color: var(--ink-dim); }

@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split, .split-ls { grid-template-columns: 1fr; }
  .split > .panel { margin-bottom: 1.25rem; }
  .trends { grid-template-columns: repeat(2, 1fr); }
  .vd-main { flex-wrap: wrap; }
  .vd-tag { margin-left: 0; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .now-left, .now-weather { flex: 1 1 auto; }
  .bucket { flex: 1 1 100%; order: 3; }
  .now-time { font-size: 1.8rem; }
}

/* --- náplň dne (the day's progress) ----------------------------------------
   Sits in the gap between the date and the weather. Two stacked segments (time,
   then steps) and a pacing mark. The mark is the point: it says "this is where an
   evenly-filled day would be by now", so falling behind is visible at a glance. */
/* Centre block: fixed share, so it stays optically centred. */
.bucket { flex: 0 1 340px; }
.bk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.bk-title {
  font-family: var(--font-head); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint);
}
.bk-score { font-family: var(--font-head); font-size: 0.82rem; color: var(--ink-dim); }
.bk-score b { color: var(--accent); font-size: 1rem; }

.bk-bar {
  position: relative; height: 12px; overflow: hidden;
  background: var(--panel-2); border: var(--border-w) solid var(--line);
  border-radius: 6px;
}
.bk-fill { position: absolute; top: 0; bottom: 0; }
/* Time is the "free" part — deliberately drab, so it never looks like an
   achievement. Steps are the earned part and get the accent. */
.bk-time  { left: 0; background: var(--ink-faint); opacity: 0.35; }
.bk-steps { background: var(--accent); }
/* Pacing mark: where the day should be by now. */
.bk-pace {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ink); opacity: 0.75;
}

.bk-parts {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--ink-dim); margin: 0.4rem 0 0;
}
.bk-part b { font-family: var(--font-head); color: var(--ink); }
.bk-part .muted { color: var(--ink-faint); }

.bucket.behind .bk-pace { background: var(--danger); opacity: 1; }
.bucket.done .bk-score b { color: var(--ok); }
.bucket.done .bk-steps { background: var(--ok); }