/* Kontrolna plošča (home dashboard) — the locked design rev 5.1
   (docs/domain/dashboard.md). Scoped under
   .db so nothing leaks. Colour families by loudness: severity > phase >
   domain > location; surfaces, text and lines are the app's neutral tokens
   and links/buttons its primary, so palettes and dark mode just work. */

.db {
  --db-card: var(--color-white);
  --db-sub: var(--color-neutral-50);
  --db-line: var(--color-neutral-200);
  --db-line2: var(--color-neutral-300);
  --db-track: var(--color-neutral-200);
  --db-tx: var(--color-neutral-900);
  --db-tx2: var(--color-neutral-600);
  --db-tx3: var(--color-neutral-500);
  --db-ring: color-mix(in oklch, var(--color-neutral-900) 22%, transparent);
  --db-disp: var(--font-display), ui-sans-serif, sans-serif;

  /* 1 severity */
  --db-crit: oklch(53% .21 27);
  --db-crit-ink: oklch(100% 0 0);
  --db-warn: oklch(82% .15 78);
  --db-warn-ink: oklch(30% .07 60);
  --db-info: var(--color-neutral-200);
  --db-info-ink: var(--color-neutral-700);
  --db-ok: oklch(59.6% .145 163.2);

  /* 2 phase: strong / tint / ink */
  --db-ph-start: oklch(55% .13 150); --db-ph-start-t: oklch(95.5% .04 150); --db-ph-start-i: oklch(32% .07 150);
  --db-ph-mid: oklch(54% .07 230); --db-ph-mid-t: oklch(95.5% .02 230); --db-ph-mid-i: oklch(32% .04 230);
  --db-ph-end: oklch(55% .14 355); --db-ph-end-t: oklch(95.5% .03 355); --db-ph-end-i: oklch(33% .08 355);
  --db-ph-summer: oklch(58% .11 95); --db-ph-summer-t: oklch(96.5% .05 95); --db-ph-summer-i: oklch(34% .06 95);

  /* 3 domain */
  --db-dm-lockers: oklch(50% .09 195);
  --db-dm-assets: oklch(48% .14 305);
  --db-dm-networks: oklch(52% .11 130);
  --db-dm-students: oklch(46% .14 335);
  --db-dm-reversals: oklch(46% .07 280);

  color: var(--db-tx);
  font-variant-numeric: tabular-nums;
  /* The dashboard responds to its own width (the sidebar takes a share). */
  container-type: inline-size;
}

.dark .db {
  --db-card: var(--color-neutral-800);
  --db-sub: color-mix(in oklch, var(--color-neutral-700) 45%, var(--color-neutral-800));
  --db-line: var(--color-neutral-700);
  --db-line2: var(--color-neutral-600);
  --db-track: var(--color-neutral-700);
  --db-tx: var(--color-neutral-50);
  --db-tx2: var(--color-neutral-300);
  --db-tx3: var(--color-neutral-400);
  --db-ring: color-mix(in oklch, white 28%, transparent);
  --db-crit: oklch(70% .18 24); --db-crit-ink: oklch(18% .03 24);
  --db-warn: oklch(80% .15 80); --db-warn-ink: oklch(25% .06 60);
  --db-info: var(--color-neutral-700); --db-info-ink: var(--color-neutral-200);
  --db-ok: oklch(76.5% .177 163.2);
  --db-ph-start: oklch(78% .14 150); --db-ph-start-t: oklch(29% .045 150); --db-ph-start-i: oklch(93% .05 150);
  --db-ph-mid: oklch(78% .07 230); --db-ph-mid-t: oklch(29% .03 230); --db-ph-mid-i: oklch(93% .03 230);
  --db-ph-end: oklch(78% .12 355); --db-ph-end-t: oklch(29% .045 355); --db-ph-end-i: oklch(93% .04 355);
  --db-ph-summer: oklch(84% .12 95); --db-ph-summer-t: oklch(30% .04 95); --db-ph-summer-i: oklch(94% .05 95);
  --db-dm-lockers: oklch(78% .09 195);
  --db-dm-assets: oklch(76% .12 305);
  --db-dm-networks: oklch(80% .11 130);
  --db-dm-students: oklch(74% .12 335);
  --db-dm-reversals: oklch(76% .06 280);
}

/* The current phase's strong / tint / ink as --pm / --pt / --pi. */
.db .ph-start { --pm: var(--db-ph-start); --pt: var(--db-ph-start-t); --pi: var(--db-ph-start-i); }
.db .ph-mid { --pm: var(--db-ph-mid); --pt: var(--db-ph-mid-t); --pi: var(--db-ph-mid-i); }
.db .ph-end { --pm: var(--db-ph-end); --pt: var(--db-ph-end-t); --pi: var(--db-ph-end-i); }
.db .ph-summer { --pm: var(--db-ph-summer); --pt: var(--db-ph-summer-t); --pi: var(--db-ph-summer-i); }
/* each stage's next one in the year's fixed order (… → Poletje → Začetek), for
   today's ribbon segment's blend */
.db .ph-start { --pn: var(--db-ph-mid); }
.db .ph-mid { --pn: var(--db-ph-end); }
.db .ph-end { --pn: var(--db-ph-summer); }
.db .ph-summer { --pn: var(--db-ph-start); }

@layer components {
  .db a { color: inherit; }
  .db .db-disp { font-family: var(--db-disp); letter-spacing: -.01em; }
  .db .db-kick { font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--db-tx3); }
  .db .db-muted { color: var(--db-tx2); }
  .db .db-faint { color: var(--db-tx3); }

  /* --- header ------------------------------------------------------------ */
  .db-head { display: block; }
  .db-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
  .db-head .db-kick { color: var(--pi); }
  .db-greet { font-family: var(--db-disp); font-size: 2.5rem; line-height: 2.75rem; font-weight: var(--font-weight-display); letter-spacing: -.02em; margin-top: .5rem; }
  .db-brief { font-family: var(--db-disp); font-size: 1.5rem; line-height: 2.125rem; font-weight: 400; letter-spacing: -.01em; max-width: 67.5rem; margin-top: .75rem; text-wrap: pretty; }
  .db-brief a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in oklch, var(--pm) 60%, transparent); }
  .db-brief a:hover, .db-brief a:focus-visible { color: var(--color-primary); text-decoration-color: var(--color-primary); }
  .db-brief .db-crit-mark { display: inline-flex; vertical-align: 3px; width: 1.25rem; height: 1.25rem; border-radius: 5px; background: var(--db-crit); color: var(--db-crit-ink); align-items: center; justify-content: center; margin-right: .375rem; }
  /* The brief's one emoji: colour glyphs fill the whole em box, so at the brief's size they tower
     over the letters — sized to the letters' height (and the severity mark's scale) instead. */
  .db-brief-emoji { display: inline-block; font-size: 1rem; line-height: 1; vertical-align: 3px; letter-spacing: 0; }
  /* "Skrij pregled": a quiet text button at the end of the brief. */
  .db-brief-hide { margin-left: .5rem; font-family: var(--app-font); font-size: .875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0;
    color: var(--db-tx2); text-decoration: underline; text-underline-offset: 3px; vertical-align: 2px; }
  .db-brief-hide:hover { color: var(--db-tx); }
  .db-seen { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; font-size: 1rem; line-height: 1.5rem; color: var(--db-tx2); }
  .db-seen button { font-weight: 500; color: var(--db-tx); text-decoration: underline; text-underline-offset: 3px; }
  /* the split button: action + attached "Dodaj …" caret, no gap */
  .db-actions { display: flex; align-items: stretch; flex-shrink: 0; }

  /* --- year ribbon ------------------------------------------------------- */
  /* --db-gap-x between segments, --db-gap-y under them (to the card): a
     touch narrower across, so the two read as equal */
  .db-rb { --db-gap-x: 6px; --db-gap-y: 7px; position: relative; margin-top: 1.5rem; padding-top: 1.875rem; }
  .db-rb-ax { display: flex; gap: var(--db-gap-x); height: 1.25rem; align-items: flex-end; padding-bottom: .375rem; }
  .db-rb-ax span { display: flex; font-size: .75rem; line-height: 1rem; color: var(--db-tx3); }
  .db-rb-ax i { font-style: normal; flex: 1; border-left: 1px solid var(--db-line); padding-left: .375rem; white-space: nowrap; overflow: hidden; }
  .db-rb-tr { display: flex; gap: var(--db-gap-x); align-items: flex-start; }
  .db-seg { position: relative; box-sizing: border-box; height: 4rem; margin-bottom: var(--db-gap-y); border-radius: 8px; padding: .625rem .75rem;
    display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--db-sub); border: 1px solid var(--db-line); color: var(--db-tx2); cursor: pointer; }
  .db-seg:hover { color: var(--db-tx); border-color: var(--db-line2); }
  .db-seg:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
  .db-seg .db-sn { font-size: .875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; }
  .db-seg .db-sd { font-size: .75rem; line-height: 1rem; color: var(--db-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-seg::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pm); opacity: .45; }
  .db-seg.is-past { background: transparent; border-style: dashed; }
  .db-seg.is-now { height: calc(4rem + var(--db-gap-y)); margin-bottom: 0; border: 0; border-radius: 12px 12px 0 0; background: var(--pt); color: var(--pi); padding: .75rem 1rem; }
  /* the line stops where the tab's corners start to round, like the others' */
  .db-seg.is-now::before { opacity: 1; left: 12px; right: 12px; top: 0; height: 4px; border-radius: 0 0 3px 3px; }
  .db-seg.is-now .db-sn { font-family: var(--db-disp); font-size: 1.125rem; line-height: 1.5rem; }
  .db-seg.is-now .db-sd { color: var(--pi); opacity: .85; }
  /* the blend: today's segment only (data-state — a previewed segment shows its
     full colour, and today's loses it while another is previewed). Its end
     shades towards the next stage, growing with the stage (YearRibbonComponent
     #blend_style): nothing on the first day, the last third at a quarter of the
     next stage's strong colour on the last, the top bar then reaching that
     colour. It fades out over the lower half, so the bottom edge stays the
     focus card's colour (the card itself never blends). Background only: the
     "→ čez N tednov" and the tooltips say it in words. */
  .db-seg.is-now[data-state="is-now"] {
    background:
      linear-gradient(to bottom, transparent 50%, var(--pt) 100%),
      linear-gradient(to right, var(--pt) calc(100% - var(--blend-w, 0%)), color-mix(in oklch, var(--pn) var(--blend-mix, 0%), var(--pt)));
  }
  .db-seg.is-now[data-state="is-now"]::before {
    background: linear-gradient(to right, var(--pm) calc(100% - var(--blend-w, 0%)), color-mix(in oklch, var(--pn) var(--blend-bar, 0%), var(--pm)));
  }
  /* Where the active tab meets the card, its sides curve out into the card's
     top edge (inverted corners) — the size of the ribbon's gaps, so the curve
     fills exactly the corner between a neighbour and the card. The first
     and last tabs sit at the card's edge: only their inner side curves. */
  .db-seg.is-now { --fl: radial-gradient(var(--db-gap-x) var(--db-gap-y) at 0 0, transparent calc(100% - .5px), var(--pt) 100%) left bottom / var(--db-gap-x) var(--db-gap-y) no-repeat;
    --fr: radial-gradient(var(--db-gap-x) var(--db-gap-y) at 100% 0, transparent calc(100% - .5px), var(--pt) 100%) right bottom / var(--db-gap-x) var(--db-gap-y) no-repeat; }
  .db-seg.is-now::after { content: ""; position: absolute; bottom: 0; left: calc(-1 * var(--db-gap-x)); right: calc(-1 * var(--db-gap-x)); height: var(--db-gap-y);
    pointer-events: none; background: var(--fl), var(--fr); }
  .db-seg.is-now:first-child::after { left: 0; background: var(--fr); }
  .db-seg.is-now:last-child::after { right: 0; background: var(--fl); }
  .db-wk { display: flex; gap: 3px; margin-top: auto; }
  .db-wk i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--pm) 22%, transparent); }
  .db-wk i.is-done { background: var(--pm); }
  /* Inside the current segment, reaching up over the axis to the ribbon's top;
     left follows the week ticks (1rem padding, 3px gaps). */
  .db-today { position: absolute; top: calc(-1 * (1.875rem + 1.25rem)); bottom: 0; width: 2px; margin-left: -1px; background: var(--db-tx); z-index: 2; pointer-events: none;
    left: calc(1rem + (100% - 2rem - (var(--n) - 1) * 3px) * var(--f) + var(--k) * 3px); }
  /* A flag on its pole: square where it meets the line, rounded at the free end. */
  .db-today span { position: absolute; top: 0; left: 0; white-space: nowrap; background: var(--db-tx); color: var(--db-card); font-size: .75rem; line-height: 1rem; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 0 999px 999px 0; }
  .db-today.is-right span { left: auto; right: 0; padding: 3px 7px 3px 9px; border-radius: 999px 0 0 999px; }
  .db-next { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--db-tx2); }
  .db-pin { position: absolute; bottom: .5rem; transform: translateX(-50%); outline: none; z-index: 3; }
  .db-pin .db-dia { display: block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--db-card); border: 1.5px solid var(--db-tx2); border-radius: 2px; }
  .db-pin.is-critical .db-dia { background: var(--db-crit); border-color: var(--db-crit); }
  .db-pin:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
  /* The ribbon's one floating tooltip (ribbon-tips): above the hovered
     element, clamped inside the ribbon, above every segment. */
  .db-tipf { position: absolute; z-index: 20; width: max-content; max-width: 18rem; box-sizing: border-box;
    background: var(--db-tx); color: var(--db-card); font-family: var(--app-font); font-size: .75rem; line-height: 1rem; font-weight: 500;
    padding: 7px 10px; border-radius: 6px; white-space: pre-line; pointer-events: none; }
  .db-tipf::after { content: ""; position: absolute; left: var(--arrow, 16px); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--db-tx); }
  .db-tipf[hidden] { display: none; }

  /* --- focus card: the current segment opened up ------------------------- */
  .db-fp { background: var(--pt); border-radius: 12px; padding: 1.75rem 2rem 2rem; display: grid; column-gap: 2.5rem; row-gap: 1.5rem; }
  .db-fp.is-first { border-top-left-radius: 0; }
  .db-fp.is-last { border-top-right-radius: 0; }
  /* First load of a session (focus-open): the card's bars fill one after
     another (--i) — a transform, so it stays smooth while the other
     sections are still arriving. */
  .db-fp.is-opening :is(.db-fbar, .db-lbar) > span { transform-origin: left; animation: db-bar-fill .7s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i, 0) * 50ms) backwards; }
  @keyframes db-bar-fill { from { transform: scaleX(0); } }
  .db-fp .db-col { min-width: 0; }
  /* The empty card's drawing: the phase's ink, quiet, bottom-right. */
  .db-fp .db-illo { display: flex; align-items: flex-end; justify-content: flex-end; min-width: 0; color: color-mix(in oklch, var(--pi) 62%, transparent); }
  .db-fp .db-illo svg { width: 100%; max-width: 340px; height: auto; }
  /* A previewed phase: a banner across the card with the way back. */
  .db-preview { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: -.5rem 0 .25rem;
    padding: .5rem .75rem; border-radius: 8px; background: color-mix(in oklch, var(--db-card) 70%, var(--pt)); font-size: .8125rem; line-height: 1.25rem; color: var(--pi); }
  .db-preview-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: var(--pm); color: var(--db-card); }
  .db-preview-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--pi); text-decoration: underline; text-underline-offset: 3px; }
  a.db-seg { text-decoration: none; }
  .db-fp .db-col + .db-col { border-left: 1px solid color-mix(in oklch, var(--pi) 14%, transparent); padding-left: 2.5rem; }
  .db-fp .db-lab { font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--pi); margin-bottom: .75rem; letter-spacing: .02em; }
  .db-fp .db-muted { color: color-mix(in oklch, var(--pi) 72%, var(--db-tx2)); }
  .db-fp h2 { font-family: var(--db-disp); font-size: 1.625rem; line-height: 2rem; font-weight: var(--font-weight-display); letter-spacing: -.015em; color: var(--pi); }
  .db-big { font-family: var(--db-disp); font-size: 5rem; line-height: 4.75rem; font-weight: var(--font-weight-display); letter-spacing: -.035em; }
  .db-big small { font-size: 1.875rem; letter-spacing: -.02em; font-weight: 500; color: var(--db-tx2); }
  .db-fbar { height: 10px; border-radius: 999px; background: color-mix(in oklch, var(--db-card) 75%, var(--pt)); overflow: hidden; display: flex; }
  .db-fbar span { display: block; height: 100%; border-radius: 999px; background: var(--pm); }
  .db-lr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(2.5rem, 1fr) auto; align-items: center; gap: 1rem; min-height: 2.25rem; color: var(--db-tx); }
  a.db-lr:hover .db-nm { text-decoration: underline; text-underline-offset: 3px; }
  /* A list of such rows shares one set of columns (subgrid): the count column
     is as wide as the list's widest count, so every bar starts and ends at
     the same place and the shares compare on equal tracks. */
  .db-lr-list { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(2.5rem, 1fr) auto; column-gap: 1rem; align-content: start; }
  .db-lr-list > * { grid-column: 1 / -1; }
  .db-lr-list > .db-lr { grid-template-columns: subgrid; }
  .db-lr-list > .db-more { justify-self: start; }
  .db-ln { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; }
  .db-ln .db-nm { overflow: hidden; text-overflow: ellipsis; color: var(--db-tx2); }
  .db-lbar { height: 6px; border-radius: 999px; background: color-mix(in oklch, var(--db-card) 75%, var(--pt)); overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pi) 8%, transparent); }
  .db-lbar span { display: block; height: 100%; border-radius: 999px; background: var(--pm); }
  .db-lbar span.db-loc-fill { background: oklch(from var(--loc, #999) clamp(.45, l, .62) min(c, .13) h); }
  .dark .db .db-lbar span.db-loc-fill { background: oklch(from var(--loc, #999) clamp(.62, l, .78) min(c, .12) h); }
  .db-yr { display: flex; flex-direction: column; gap: .375rem; padding: .4375rem 0; color: var(--db-tx); }
  .db-yr-top { display: flex; justify-content: space-between; gap: .5rem; }
  a.db-yr:hover .db-nm { text-decoration: underline; text-underline-offset: 3px; }
  /* A headline figure that links to its list. */
  a.db-figure:hover .db-muted { color: var(--db-tx); text-decoration: underline; text-underline-offset: 3px; }
  .db-inline-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.db-inline-link:hover { color: var(--db-tx); }
  .db-hist.is-compact { height: 4rem; gap: .75rem; }
  .db-hist.is-compact + .db-hax { gap: .75rem; padding-top: .25rem; }
  .db-hist { display: flex; align-items: flex-end; gap: 1rem; height: 8rem; border-bottom: 1px solid color-mix(in oklch, var(--pi) 18%, transparent); }
  .db-hist > * { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: .375rem; height: 100%; color: var(--db-tx); }
  .db-hist .db-c { display: block; border-radius: 6px 6px 0 0; background: color-mix(in oklch, var(--db-dm-assets) 60%, var(--db-card)); }
  .db-hist a:hover .db-c { background: var(--db-dm-assets); }
  .db-hax { display: flex; gap: 1rem; padding-top: .5rem; }
  .db-hax span { flex: 1; text-align: center; }
  .db-nl { display: flex; flex-direction: column; min-width: 0; gap: .375rem; padding: .5rem 0; border-bottom: 1px solid color-mix(in oklch, var(--pi) 12%, transparent); color: var(--db-tx); }
  .db-nl .db-top { display: flex; justify-content: space-between; gap: .5rem; }
  .db-mb { display: block; position: relative; height: 6px; border-radius: 999px; background: color-mix(in oklch, var(--db-card) 75%, var(--pt)); overflow: hidden; }
  .db-mb span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
  .db-mb .db-pool { background: color-mix(in oklch, var(--db-dm-networks) 30%, transparent); }
  .db-mb .db-used { background: var(--db-dm-networks); }
  .db-chk { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .875rem 0; border-top: 1px solid color-mix(in oklch, var(--pi) 14%, transparent); }
  .db-chk:first-of-type { border-top: 0; }
  .db-chk .db-n { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 600; box-sizing: border-box;
    border: 1.5px solid color-mix(in oklch, var(--pi) 35%, transparent); color: var(--pi); background: color-mix(in oklch, var(--db-card) 60%, transparent); }
  .db-chk.is-done .db-n { background: var(--pi); border-color: var(--pi); color: var(--pt); }
  .db-chk.is-next .db-n { border: 2px solid var(--pi); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pm) 35%, transparent); }
  .db-chk .db-tt { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
  .db-chk.is-done .db-tt { color: var(--db-tx2); }
  /* the summer checklist's two windows (Pospravljanje / Priprava) */
  .db-chk-group { font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--db-tx2); padding-top: 1rem; }
  .db-chk-group:first-child { padding-top: 0; }
  .db-chk-group + .db-chk { border-top: 0; }

  /* the summer track: one dot per wizard step, Pospravljanje's joined by a
     line (in order), Priprava's apart (any order); the current step below in
     a box (.db-current) */
  .db-track { display: flex; gap: 2.5rem; }
  .db-track-group { min-width: 0; }
  .db-track-group .db-chk-group { padding-top: 0; margin-bottom: .625rem; }
  /* the summer's window today (Pospravljanje / Priprava, by preparation_start) */
  .db-track-group .db-chk-group.is-current { color: var(--pi); font-weight: 600; }
  .db-track-steps { display: flex; list-style: none; margin: 0; padding: 0; }
  .db-tstep { position: relative; flex: 1 1 0; min-width: 0; }
  .db-track-group.is-joined .db-tstep + .db-tstep::before { content: ""; position: absolute; top: calc(.875rem - 1px); left: -50%; right: 50%; height: 2px;
    background: color-mix(in oklch, var(--pi) 22%, transparent); }
  .db-track-group.is-joined .db-tstep.is-done + .db-tstep::before { background: var(--pi); }
  .db-tlink { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; border-radius: 8px; }
  a.db-tlink:hover .db-n { box-shadow: 0 0 0 3px color-mix(in oklch, var(--pm) 35%, transparent); }
  a.db-tlink:focus-visible { outline: 2px solid var(--pi); outline-offset: 2px; }
  .db-tstep .db-n, .db-current .db-n { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .8125rem;
    font-weight: 600; box-sizing: border-box; border: 1.5px solid color-mix(in oklch, var(--pi) 35%, transparent); color: var(--pi); background: var(--pt); }
  .db-tstep.is-done .db-n { background: var(--pi); border-color: var(--pi); color: var(--pt); }
  .db-tstep.is-next .db-n { border: 2px solid var(--pi); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pm) 35%, transparent); }
  /* the step that is up now breathes a soft halo, all the time (opacity only) */
  .db-tstep.is-next .db-n { position: relative; }
  .db-tstep.is-next .db-n::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; pointer-events: none;
    box-shadow: 0 0 12px 4px color-mix(in oklch, var(--pm) 55%, transparent); animation: db-step-glow 2.4s ease-in-out infinite alternate; }
  @keyframes db-step-glow { from { opacity: .25; } to { opacity: 1; } }
  .db-tlabel { max-width: 100%; font-size: .6875rem; line-height: 1rem; color: var(--db-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-tstep.is-next .db-tlabel { color: var(--db-tx); font-weight: 600; }
  .db-current { margin-top: 1.5rem; padding: .875rem 1rem; border: 1px solid color-mix(in oklch, var(--pi) 20%, transparent); border-radius: 10px;
    background: color-mix(in oklch, var(--db-card) 60%, transparent); }
  .db-current .db-lab { margin-bottom: .25rem; }
  .db-cur-text { font-size: .9375rem; line-height: 1.375rem; }
  .db-cur-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
  /* "Opomniki" under the columns: the badge sits on the line, flush with the
     card's left edge (square there, rounded on the right, the phase's strong
     colour), so it moves with the line; the reminders flow along under it —
     hidden ones only when expanded, no list without open ones */
  .db-rem { position: relative; margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid color-mix(in oklch, var(--pi) 14%, transparent); }
  .db-rem-title { position: absolute; top: 0; left: 0; transform: translateY(-50%); display: flex; align-items: center; gap: .375rem;
    font-size: .75rem; line-height: 1rem; color: var(--db-tx2); }
  .db-rem-title > button { padding: 0 .375rem; background: var(--pt); }
  .db-rem-badge { display: inline-flex; align-items: center; gap: .375rem; margin-left: -2rem; padding: .3125rem .875rem .3125rem 2rem;
    border-radius: 0 999px 999px 0; background: var(--pi); color: var(--pt); font-weight: 600; letter-spacing: .02em; }
  .db-rem-list { display: flex; flex-wrap: wrap; column-gap: 2.25rem; row-gap: .125rem; }
  .db-rem-list:not(.has-open):not(.is-expanded) { display: none; }
  .db-rem:has(> .db-rem-list:not(.has-open):not(.is-expanded)) { padding-top: .5rem; }
  .db-rem-row { display: flex; align-items: flex-start; gap: .625rem; padding: .3125rem 0; font-size: .875rem; line-height: 1.25rem; }
  .db-rem-row.is-hidden { display: none; color: var(--db-tx2); }
  .db-rem-ahead { flex-basis: 100%; color: var(--db-tx2); }
  .db-rem-list.is-expanded .db-rem-row.is-hidden { display: flex; }
  .db-rem-hide { display: inline-flex; vertical-align: -2px; margin-left: .375rem; padding: .125rem; border-radius: 4px; color: color-mix(in oklch, var(--db-tx2) 70%, transparent); cursor: pointer; }
  .db-rem-hide:hover { color: var(--db-tx); background: color-mix(in oklch, var(--pi) 10%, transparent); }
  /* the summer card's right column: one figure per row, label over value */
  .db-fact { display: block; padding: .5rem 0; border-top: 1px solid color-mix(in oklch, var(--pi) 12%, transparent); }
  .db-lab + .db-fact { border-top: 0; padding-top: 0; }
  .db-fact .db-fact-k { display: block; font-size: .75rem; line-height: 1rem; color: var(--db-tx2); }
  .db-fact .db-fact-v { display: block; font-size: .9375rem; line-height: 1.375rem; font-weight: 600; }
  a.db-fact:hover .db-fact-v { text-decoration: underline; text-underline-offset: 4px; }

  /* location swatch: the user's colour, clamped to a readable range */
  .db-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; box-shadow: inset 0 0 0 1px var(--db-ring);
    background: oklch(from var(--loc, #999) clamp(.45, l, .62) min(c, .13) h); }
  .dark .db .db-sw, .dark .db .db-loc-fill { background: oklch(from var(--loc, #999) clamp(.62, l, .78) min(c, .12) h); }
  .db-loc-fill { background: oklch(from var(--loc, #999) clamp(.45, l, .62) min(c, .13) h); }

  /* --- lower half: attention | feed -------------------------------------- */
  .db-low { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 4rem; margin-top: 3rem; }
  .db-low.is-solo { grid-template-columns: minmax(0, 1fr); }
  .db-sh { display: flex; align-items: baseline; gap: .625rem; margin-bottom: .75rem; }
  .db-sh h2 { font-family: var(--db-disp); font-size: 1.5rem; line-height: 2rem; font-weight: var(--font-weight-display); letter-spacing: -.015em; }
  .db-sh .db-count { font-family: var(--db-disp); font-size: 1.5rem; line-height: 2rem; color: var(--db-tx3); font-weight: 500; }
  .db-sh .db-meta { margin-left: auto; font-size: .75rem; line-height: 1rem; color: var(--db-tx3); }
  .db-sv { width: 2rem; height: 2rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .db-sv.is-critical { background: var(--db-crit); color: var(--db-crit-ink); }
  .db-sv.is-warning { background: var(--db-warn); color: var(--db-warn-ink); }
  .db-sv.is-info { background: var(--db-info); color: var(--db-info-ink); }
  .db-sv.is-ok { background: color-mix(in oklch, var(--db-ok) 18%, var(--db-card)); color: var(--db-ok); }
  .db-sv.is-sm { width: 1.5rem; height: 1.5rem; }
  .db-ar { display: flex; align-items: center; gap: .875rem; padding: .75rem 0; border-top: 1px solid var(--db-line); color: var(--db-tx); border-radius: 0; }
  a.db-ar:hover .db-at { text-decoration: underline; text-underline-offset: 3px; }
  /* A row with its own action (Dashboard::BackupRowComponent): the link is
     stretched under the content, the action sits above it. */
  .db-ar.has-link { position: relative; }
  .db-ar.has-link .db-ar-link { position: absolute; inset: 0; }
  .db-ar.has-link:has(.db-ar-link:hover) .db-at { text-decoration: underline; text-underline-offset: 3px; }
  .db-ar.has-link .db-ar-action { position: relative; flex-shrink: 0; }
  .db-ar .db-ab { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
  .db-ar b { font-weight: 600; }
  .db-ar .db-cv { color: var(--db-tx3); display: flex; flex-shrink: 0; }
  .db-due { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--db-tx2); white-space: nowrap;
    padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--db-line); }
  /* "Manjše": the same rows, smaller and washed out, so they read as less important. */
  .db-minor { margin-top: 1.25rem; }
  .db-minor-h { font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--db-tx3); padding-bottom: .25rem; }
  .db-ar.is-minor { gap: .75rem; padding: .5rem 0; font-size: .875rem; line-height: 1.25rem; color: var(--db-tx2); }
  .db-ar.is-minor b { color: var(--db-tx); }
  .db-sv.is-minor { width: 1.5rem; height: 1.5rem; border-radius: 5px; background: color-mix(in oklch, var(--db-info) 55%, var(--db-card)); color: var(--db-tx3); }
  .db-more { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; font-weight: 500; color: var(--db-tx2); margin-top: .5rem; cursor: pointer; list-style: none; }
  .db-more::-webkit-details-marker { display: none; }
  .db-clear { display: flex; align-items: center; gap: .75rem; padding: .875rem 0; border-top: 1px solid var(--db-line); color: var(--db-tx2); }
  /* brief figure → matching row: a soft patch behind the content, no border.
     Drawn by ::before a little outside the element (--hl-x / --hl-y), so
     nothing moves; an attention row's dividers fade under it. On the focus
     card the target is the column's content (.db-hl), never the stretched
     column, so the patch ends where the content does. */
  .db [data-brief-target] { --hl-x: 1rem; --hl-y: .75rem; position: relative; isolation: isolate; }
  .db [data-brief-target]::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--hl-y) * -1) calc(var(--hl-x) * -1);
    border-radius: 12px; background: color-mix(in oklch, var(--db-tx) 5%, transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .db [data-brief-target].is-highlighted::before { opacity: 1; }
  .db .db-ar[data-brief-target] { --hl-x: .75rem; --hl-y: 0px; transition: border-color .2s; }
  .db .db-ar.is-highlighted, .db .db-ar.is-highlighted + .db-ar { border-top-color: transparent; }

  /* feed: a day-grouped timeline */
  .db-tl { position: relative; padding-left: 1.375rem; }
  .db-tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--db-line); }
  .db-tl .db-day { font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--db-tx3); padding: .625rem 0 .25rem; position: relative; }
  .db-tl .db-day::before { content: ""; position: absolute; left: -1.375rem; top: .875rem; width: 9px; height: 9px; border-radius: 999px; background: var(--db-card); border: 1px solid var(--db-line2); box-sizing: border-box; }
  /* Under the timeline, in line with the day labels and entry icons. */
  .db-tl-more { padding-left: 1.375rem; }
  /* Zadnje spremembe on a new install: placeholder rows that fade out. */
  .db-ghost { margin-top: .25rem; mask-image: linear-gradient(to bottom, #000 30%, transparent); }
  .db-ghost .db-fe { align-items: center; }
  .db-ghost .db-fe::before { background: var(--db-track); }
  .db-ghost-bar { display: block; height: .5rem; border-radius: 999px; background: var(--db-track); }
  .db-ghost-ic { display: block; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 999px; background: var(--db-track); }
  .db-ghost .db-fx { flex: 1; align-items: center; }
  .db-day-ghost { width: 4.5rem; margin: .75rem 0 .5rem; }
  .db-fe { display: flex; justify-content: space-between; gap: .75rem; padding: .375rem 0; position: relative; }
  .db-fe::before { content: ""; position: absolute; left: -1.25rem; top: .75rem; width: 5px; height: 5px; border-radius: 999px; background: var(--dc, var(--db-tx3)); }
  .db-fe .db-fx { display: flex; gap: .5rem; align-items: flex-start; min-width: 0; }
  .db-fe .db-ic { color: var(--dc, var(--db-tx3)); display: flex; padding-top: 2px; }
  a.db-fe { color: var(--db-tx); border-radius: 6px; }
  a.db-fe:hover .db-fx > .min-w-0 { text-decoration: underline; text-underline-offset: 3px; }
  .db-fe.is-own b { color: var(--db-tx2); }
  .db-fresh { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--color-primary); vertical-align: 1px; margin-right: .375rem; }
  /* Others' changes since the last visit: a primary wash behind each new
     row that fades as the feed arrives (the "novo" dot stays). Inset
     top/bottom, so rows next to each other keep a small gap. */
  .db-fe.is-fresh { isolation: isolate; }
  .db-fe.is-fresh::after { content: ""; position: absolute; inset: 2px -8px; z-index: -1; border-radius: 6px; background: var(--db-wash);
    opacity: 0; animation: db-fresh-wash 5s ease-out .4s backwards; }
  @keyframes db-fresh-wash { from, 65% { opacity: 1; } }
  .db { --db-wash: color-mix(in oklch, var(--color-primary) 14%, transparent); }
  .db-fe .db-when { flex-shrink: 0; font-size: .75rem; line-height: 1.25rem; color: var(--db-tx3); white-space: nowrap; }

  /* domain colour carriers */
  .db .dm-lockers { --dc: var(--db-dm-lockers); }
  .db .dm-students { --dc: var(--db-dm-students); }
  .db .dm-assets { --dc: var(--db-dm-assets); }
  .db .dm-reversals { --dc: var(--db-dm-reversals); }
  .db .dm-networks { --dc: var(--db-dm-networks); }
  .db .dm-facilities { --dc: var(--db-tx3); }
  .db-dlab { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--dc); }

  /* --- Pregled: ledger rows ---------------------------------------------- */
  .db-ledger { margin-top: 3rem; }
  .db-lg { display: grid; grid-template-columns: 9.375rem 14.375rem minmax(0, 1fr) 16.25rem 1.25rem; align-items: center; gap: 2rem; padding: 1.125rem 0;
    border-top: 1px solid var(--db-line); color: var(--db-tx); }
  .db-lg a.db-hn:hover small, .db-lg a.db-dlab:hover { text-decoration: underline; text-underline-offset: 3px; }
  .db-lg .db-lg-legend a:hover { color: var(--db-tx); }
  .db-lg a.db-cv:hover { color: var(--db-tx); }
  .db-lg .db-hn { font-family: var(--db-disp); font-size: 2rem; line-height: 2.25rem; font-weight: var(--font-weight-display); letter-spacing: -.02em; }
  .db-lg .db-hn small { font-family: var(--app-font); font-size: .875rem; line-height: 1.25rem; font-weight: 400; color: var(--db-tx2); letter-spacing: 0; margin-left: .375rem; }
  .db-lg .db-cv { color: var(--db-tx3); display: flex; }
  .db-strip { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
  .db-strip > * { display: block; height: 100%; }
  /* Pregled before its data: the track the figure will fill, a quiet 0. */
  .db-strip.is-empty { background: var(--db-track); opacity: .6; }
  .db-lg.is-empty .db-hn { color: var(--db-tx3); }
  .db-minic { display: flex; align-items: flex-end; gap: .625rem; height: 3.5rem; }
  .db-minic > * { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; height: 100%; }
  .db-minic > * > *, .db-hist > * > * { flex-shrink: 0; }
  .db-minic .db-c { display: block; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--dc) 70%, var(--db-track)); }
  .db-mcap { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 1rem; }
  .db-mcap .db-mb { background: var(--db-track); margin: 4px 0; }
  .db-lg-legend { display: flex; flex-wrap: wrap; gap: 4px .75rem; margin-top: .375rem; }
  .db-lg-legend > * { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
  .db-lg-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

  /* --- Na kratko --------------------------------------------------------- */
  .db-nk { margin-top: 3rem; }
  .db-nk-g { display: grid; column-gap: 2.5rem; row-gap: 1.5rem; border-top: 1px solid var(--db-line); padding-top: 1.125rem; }
  .db-nk-e { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
  .db-nk-e .db-nh { font-family: var(--db-disp); font-size: 1.25rem; line-height: 1.75rem; font-weight: var(--font-weight-display); letter-spacing: -.01em; }
  .db-nk-e .db-nh small { font-family: var(--app-font); font-size: .875rem; line-height: 1.25rem; font-weight: 400; color: var(--db-tx2); letter-spacing: 0; margin-left: 4px; }
  .db-nk-list { display: flex; flex-direction: column; border-left: 1px solid var(--db-line); padding-left: 1.75rem; }
  .db-nk-l { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .375rem 0 .4375rem; font-size: .875rem; line-height: 1.25rem; color: var(--db-tx2); }
  .db-nk-l + .db-nk-l { border-top: 1px solid var(--db-line); }
  .db-nk-l .db-k { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--db-tx3); }
  .db-nk-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--dc); flex-shrink: 0; }
  .db-nk-e .db-nh a { color: var(--db-tx); }
  .db-nk-e .db-nh a small { color: var(--db-tx2); }
  .db-nk-l a { color: var(--db-tx); font-weight: 500; }
  .db-nk-l a:hover, .db-nk-e .db-nh a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .db-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
  .db-split > * { display: block; height: 100%; }
  .db-nk-e .db-muted a:hover { color: var(--db-tx); text-decoration: underline; text-underline-offset: 3px; }

  /* --- brief (brief-seen) -----------------------------------------------
     A new or reopened brief reads in: its sentences fade in one after
     another (--i). Opacity only — they are inline text. */
  .db-brief.is-revealing .db-sent { animation: db-sent-in .6s ease-out calc(.1s + var(--i, 0) * .15s) backwards; }
  @keyframes db-sent-in { from { opacity: 0; } }

  /* --- list stagger (list-stagger) --------------------------------------
     A list's rows come in one after another (--i) as its section arrives;
     the section itself then skips the frame fade, so its heading is there
     at once. */
  .db-stagger { animation: db-row-in .4s cubic-bezier(.16, 1, .3, 1) calc(.08s + var(--i, 0) * 40ms) backwards; }
  @keyframes db-row-in { from { opacity: 0; transform: translateY(6px); } }
  .db turbo-frame[data-arriving]:has(> .is-staggering) { animation: none; }

  /* the focus card's reminder chips come in after its bars have started */
  .db-rem .db-stagger { animation-delay: calc(.35s + var(--i, 0) * 50ms); }

  /* "Pokaži vse": the hidden rows ease open (where the browser can animate
     details), the caret turns. */
  .db details { interpolate-size: allow-keywords; }
  .db details::details-content { block-size: 0; overflow: clip;
    transition: block-size .3s cubic-bezier(.16, 1, .3, 1), content-visibility .3s allow-discrete; }
  .db details[open]::details-content { block-size: auto; }
  .db details > summary svg { transition: rotate .2s ease-out; }
  .db details[open] > summary svg { rotate: 180deg; }

  /* --- ribbon intro (ribbon-intro) --------------------------------------
     First load of a session: today's line grows down, then its flag slides
     out from the line; the weeks done fill one after another (--i); the
     pins pop in — row pins as soon as the attention list places them — and
     a critical one sends out one soft ring. */
  .is-intro .db-today { transform-origin: top; animation: db-today-grow .55s cubic-bezier(.16, 1, .3, 1) .15s backwards; }
  .is-intro .db-today span { animation: db-flag-out .35s cubic-bezier(.16, 1, .3, 1) .55s backwards; }
  .is-intro .db-today.is-right span { --flag-from: 6px; }
  .is-intro .db-wk i.is-done { animation: db-week-fill .35s ease-out calc(.25s + var(--i, 0) * 45ms) backwards; }
  .is-intro .db-pin .db-dia { animation: db-pin-pop .4s cubic-bezier(.16, 1, .3, 1) .7s backwards; }
  .is-intro .db-pin.is-row .db-dia { animation-delay: .1s; }
  .is-intro .db-pin.is-critical .db-dia { animation-name: db-pin-pop, db-pin-ring; animation-duration: .4s, 1s; animation-delay: .7s, 1.05s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-out; }
  .is-intro .db-pin.is-row.is-critical .db-dia { animation-delay: .1s, .45s; }
  @keyframes db-today-grow { from { transform: scaleY(0); } }
  @keyframes db-flag-out { from { opacity: 0; transform: translateX(var(--flag-from, -6px)); } }
  @keyframes db-week-fill { from { background: color-mix(in oklch, var(--pm) 22%, transparent); } }
  @keyframes db-pin-pop { from { transform: rotate(45deg) scale(0); } }
  @keyframes db-pin-ring { from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--db-crit) 55%, transparent); } to { box-shadow: 0 0 0 9px transparent; } }

  /* --- hover touches ----------------------------------------------------
     A segment's top bar firms up; a row's chevron steps forward; pointing at
     one part of a strip or the year columns dims the others. */
  .db-seg::before { transition: opacity .15s ease-out, height .15s ease-out; }
  .db-seg:not(.is-now):hover::before { opacity: .9; height: 4px; }
  .db :is(.db-cv, a.db-more svg) { transition: transform .15s ease-out, color .15s ease-out; }
  .db :is(a.db-ar:hover .db-cv, a.db-cv:hover, a.db-more:hover svg) { transform: translateX(2px); }
  :is(a.db-ar:hover, .db-ar.has-link:has(.db-ar-link:hover)) .db-cv { color: var(--db-tx); }
  .db :is(.db-strip, .db-split) > *, .db .db-minic .db-c { transition: opacity .15s ease-out; }
  .db :is(.db-strip, .db-split):has(> a:hover) > :not(:hover),
  .db .db-minic:has(> a:hover) > a:not(:hover) .db-c { opacity: .4; }

  /* --- bars fill (bars-fill) ---------------------------------------------
     Pregled's and Na kratko's bars fill one after another (--i) the first
     time the section scrolls into view: strips and capacity bars from the
     left, the year columns from the bottom. Transforms, so it stays smooth. */
  :is(.db-ledger, .db-nk) :is(.db-strip, .db-split, .db-mb > span) { transform-origin: left; }
  :is(.db-ledger, .db-nk) .db-minic .db-c { transform-origin: bottom; }
  .is-waiting :is(.db-strip, .db-split, .db-mb > span) { transform: scaleX(0); }
  .is-waiting .db-minic .db-c { transform: scaleY(0); }
  .is-filling :is(.db-strip, .db-split, .db-mb > span) { animation: db-bar-fill .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 50ms) backwards; }
  .is-filling .db-minic .db-c { animation: db-col-fill .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 50ms) backwards; }
  @keyframes db-col-fill { from { transform: scaleY(0); } }

  /* --- system health line ------------------------------------------------ */
  .db-health { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem 1.25rem; margin-top: 2.75rem; padding-top: .875rem; border-top: 1px solid var(--db-line);
    font-size: .75rem; line-height: 1rem; color: var(--db-tx2); }
  .db-health .db-hk { font-weight: 600; color: var(--db-tx); }
  .db-health a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .db-health .db-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--db-ok); display: inline-block; margin-right: .375rem; }
  .db-health .is-warning .db-dot { background: var(--db-warn); }

  /* --- skeletons --------------------------------------------------------- */
  .db-sk { background: var(--db-track); border-radius: 6px; display: block; }
  .db-sk.is-tint { background: color-mix(in oklch, var(--pm) 18%, var(--db-card)); }
  .db-shim { background: linear-gradient(90deg, var(--db-track) 0, color-mix(in oklch, var(--db-track) 50%, var(--db-card)) 50%, var(--db-track) 100%);
    background-size: 200% 100%; animation: db-shim 1.4s linear infinite; }
  @keyframes db-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* A section arriving in place of its skeleton settles in (frame-arrival). */
  .db turbo-frame { display: block; }
  .db turbo-frame[data-arriving] { animation: db-arrive .4s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes db-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* The summer segment's wizard progress beside its name ("3 / 8", the
     card's style), once a step is done. */
  .db-sprog { margin-left: .375rem; font-size: .75rem; font-weight: 500; color: var(--db-tx2); white-space: nowrap; }
  .db-sprog b { font-weight: 700; color: var(--db-tx); }

  /* --- narrow: stack everything, ribbon keeps only now ----------------- */
  @container (width < 62rem) {
    .db-fp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    .db-fp .db-col:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in oklch, var(--pi) 14%, transparent); padding-top: 1.25rem; }
    .db-low { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .db-lg { grid-template-columns: 8rem minmax(0, 1fr) 1.25rem; }
    .db-lg .db-lg-visual { grid-column: 2 / 3; }
    .db-lg .db-lg-context { grid-column: 2 / 3; }
    .db-nk-g { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .db-nk-list { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  }
  @container (width < 40rem) {
    .db-head { flex-direction: column; gap: 1rem; }
    .db-fp:has(.db-illo) { grid-template-columns: minmax(0, 1fr) !important; }
    .db-fp .db-illo { display: none; }
    .db-greet { font-size: 2rem; line-height: 2.25rem; }
    .db-brief { font-size: 1.25rem; line-height: 1.875rem; }
    .db-rb-ax { display: none; }
    .db-rb { padding-top: 1.5rem; }
    .db-seg.is-past, .db-seg.is-later { display: none; }
    .db-seg { flex: 1 1 0 !important; }
    .db-seg.is-now::after { display: none; }
    .db-today { top: -1.5rem; }
    .db-today.is-right span { left: 0; right: auto; padding: 3px 9px 3px 7px; border-radius: 0 999px 999px 0; }
    .db-today.is-right-narrow span { left: auto; right: 0; padding: 3px 7px 3px 9px; border-radius: 999px 0 0 999px; }
    .db-fp { grid-template-columns: minmax(0, 1fr) !important; padding: 1.25rem; border-top-left-radius: 0; border-top-right-radius: 12px; }
    .db-rem-badge { margin-left: -1.25rem; padding-left: 1.25rem; }
    .db-fp .db-col + .db-col { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in oklch, var(--pi) 14%, transparent); padding-top: 1.25rem; }
    .db-big { font-size: 3.5rem; line-height: 3.5rem; }
    .db-lg { grid-template-columns: minmax(0, 1fr) 1.25rem; gap: .75rem; }
    .db-lg > * { grid-column: 1 / 2 !important; }
    .db-lg .db-cv { grid-column: 2 / 3 !important; grid-row: 1; }
    .db-nk-g { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* --- phase switch (ribbon-preview) ------------------------------------
     While a previewed phase loads, the old card dims (only if it takes a
     moment). Then one View Transition: the active tab glides to its segment,
     the card's tint flows into the new phase's and it resizes, its old parts
     slip out and the new ones slide in the direction of time (--db-dir:
     1 later, -1 earlier), the "Predogled" banner drops in, and everything
     below the card moves instead of jumping. Names exist only while
     html.db-switching is set, so nothing else on the site transitions. */
  .db #dashboard_focus[aria-busy="true"] > .db-fp > * { opacity: .55; transition: opacity .2s ease .12s; }
  html.db-switching { --db-dir: 1; }
  html.db-switching-back { --db-dir: -1; }
  .db-switching .db .db-fp { view-transition-name: db-card; }
  .db-switching .db .db-seg.is-now { view-transition-name: db-tab; }
  .db-switching .db .db-today { view-transition-name: db-today; }
  .db-switching .db > .db-low { view-transition-name: db-low; }
  .db-switching .db > #dashboard_ledger { view-transition-name: db-ledger; }
  .db-switching .db > #dashboard_glance { view-transition-name: db-glance; }
  .db-switching .db > #dashboard_health { view-transition-name: db-health; }
  .db-switching::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  .db-switching::view-transition-group(root) { animation-duration: .2s; }
  .db-switching::view-transition-old(db-card), .db-switching::view-transition-new(db-card) { height: 100%; animation-duration: .38s; }
  /* the tab's text stays its size and is cropped, never stretched */
  .db-switching::view-transition-old(db-tab), .db-switching::view-transition-new(db-tab) { height: 100%; object-fit: none; object-position: left top; animation-duration: .3s; }
  .db-switching::view-transition-old(.db-out) { animation: db-sw-out .15s ease-in both; }
  .db-switching::view-transition-new(.db-in) { animation: db-sw-in .3s cubic-bezier(.16, 1, .3, 1) .07s both; }
  .db-switching::view-transition-old(.db-out-banner) { animation: db-sw-fade-out .12s ease-in both; }
  .db-switching::view-transition-new(.db-in-banner) { animation: db-sw-drop .26s cubic-bezier(.16, 1, .3, 1) .05s both; }
  @keyframes db-sw-out { to { opacity: 0; transform: translateX(calc(var(--db-dir) * -16px)); } }
  @keyframes db-sw-in { from { opacity: 0; transform: translateX(calc(var(--db-dir) * 24px)); } }
  @keyframes db-sw-fade-out { to { opacity: 0; } }
  @keyframes db-sw-drop { from { opacity: 0; transform: translateY(-6px); } }

  @media (prefers-reduced-motion: reduce) {
    .db-fp.is-opening :is(.db-fbar, .db-lbar) > span { animation: none; }
    .db [data-brief-target], .db [data-brief-target]::before { transition: none; }
    .db-shim { animation: none; }
    .db turbo-frame[data-arriving] { animation-name: db-arrive-fade; }
    @keyframes db-arrive-fade { from { opacity: 0; } to { opacity: 1; } }
    .db :is(a.db-ar:hover .db-cv, a.db-cv:hover, a.db-more:hover svg) { transform: none; }
    .db details::details-content { transition: none; }
    .db-tstep.is-next .db-n::after { animation: none; opacity: .6; }
    /* the switch keeps its fades, nothing travels */
    html.db-switching { --db-dir: 0; }
    .db-switching::view-transition-group(*) { animation: none; }
    .db-switching::view-transition-new(.db-in-banner) { animation-name: db-sw-fade-in; }
    @keyframes db-sw-fade-in { from { opacity: 0; } }
  }
}

/* Nastavitve aplikacije → Razvoj: the simulated day's strip — one school
   year's phases in the ribbon's colours (inside a .db wrapper for the phase
   variables), a marker on the chosen day. simulated_date_controller.js. */
@layer components {
  .sim-strip { position: relative; display: flex; gap: 3px; cursor: crosshair; user-select: none; }
  .sim-seg { display: flex; min-width: 0; flex-direction: column; gap: 2px; border-radius: 6px; padding: .5rem .625rem; background: var(--pt); color: var(--pi);
    box-shadow: inset 0 3px 0 var(--pm); }
  .sim-seg .sim-name { font-size: .8125rem; line-height: 1.125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sim-seg .sim-dates { font-size: .6875rem; line-height: 1rem; opacity: .8; white-space: nowrap; }
  .sim-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--color-neutral-900); pointer-events: none; }
  .sim-marker::after { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 999px; background: inherit; }
  .dark .sim-marker { background: var(--color-white); }
  /* the simulated-day notice's slim strip: names only, low; ‹ › beside it */
  .sim-strip.is-slim { gap: 2px; }
  .sim-strip.is-slim .sim-seg { padding: .125rem .5rem; border-radius: 4px; box-shadow: inset 0 2px 0 var(--pm); }
  .sim-strip.is-slim .sim-name { font-size: .6875rem; line-height: 1rem; }
  .sim-strip.is-slim .sim-dates { display: none; }
  .sim-strip.is-slim .sim-seg { position: relative; }
  .sim-strip.is-slim .sim-today { bottom: 0; top: 0; height: auto; width: 2px; background: var(--color-neutral-900); }
  .dark .sim-strip.is-slim .sim-today { background: var(--color-white); }
  .sim-nav { display: inline-flex; padding: .125rem; border-radius: 4px; opacity: .7; }
  .sim-nav:hover { opacity: 1; background: rgb(0 0 0 / .06); }
  /* Šolsko leto: the same strip to look at — no picking, a short mark on today */
  .sim-strip.is-static { cursor: default; }
  .sim-strip.is-static .sim-seg { position: relative; }
  .sim-today { position: absolute; bottom: 3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--pi); }
}