/* Shared cross-app dock — "dok warsztatowy", nav v3.0 (Hooome / Moneeey /
   Meeedia / Admin / future apps). One left surface holds the app list AND the
   active app's sections as an accordion; markup in src/views/railNav.js,
   behaviour in public/rail-nav.js.

   Tokens fall back through each page's own theme vars, so this file needs no
   per-app edits: shell.css/meeedia.css define --surface/--text/--accent etc;
   money-theme.css defines --paper-raised/--ink/--accent instead.

   --rail-w-collapsed is kept as an alias of the dock width because
   meeedia.css positions its fixed header with it. */
:root {
  --rail-bg: var(--surface, var(--paper-raised, #1f2126));
  --rail-hover: var(--surface2, var(--paper, rgba(127, 127, 127, .12)));
  --rail-border: var(--border, var(--line, #33363c));
  --rail-text: var(--text, var(--ink, #eaeaea));
  --rail-muted: var(--muted, var(--ink-soft, #8a8d93));
  --rail-accent: var(--accent, #4fb3c9);
  --dock-full: 208px;   /* the frozen inner width — .d-inner is always this wide */
  --dock-w: var(--dock-full);   /* the visible viewport width — animates on collapse */
  --rail-w-collapsed: var(--dock-w);
  --dock-mbar-h: 62px;
}
:root.dock-mini { --dock-w: 60px; }

body { padding-left: var(--dock-w); }

/* .dock-ready is set on the first frame by rail-nav.js — before it, width
   changes must not animate, or restoring a collapsed dock on page load would
   play the collapse animation every time. */
:root.dock-ready body { transition: padding-left .34s cubic-bezier(.4, 0, .2, 1); }
:root.dock-ready .dock { transition: width .34s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1); }

/* Self-contained box model: money-theme.css has no global border-box reset, so
   without this the dock's own padding is added to --dock-w and it overlaps the
   content column that body's padding-left reserved. */
.dock, .dock *, .dock-mbar, .dock-mbar * { box-sizing: border-box; }

/* The dock's buttons must not inherit a page's primary-button styling
   (shell.css styles every button[type="submit"] as a filled accent block). */
.dock button.d-row, .dock-mbar button.mb {
  background: none; border: 0; box-shadow: none; font-weight: 600; letter-spacing: 0;
}
.dock button.d-row { color: var(--rail-muted); border-radius: 10px; }
.dock button.d-row:hover { background: var(--rail-hover); color: var(--rail-text); filter: none; }

/* .dock is only a clipping viewport: its width animates, but nothing inside it
   moves — the inner is frozen at --dock-full and simply gets clipped on the
   right as the viewport narrows. That is what makes collapse (animation 04)
   smooth: no per-row reflow, just one width change plus the label fade. */
.dock {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: var(--dock-w);
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  overflow: hidden;
  transition: width .34s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.d-inner {
  width: var(--dock-full);
  height: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 8px; gap: 2px;
  overflow-x: hidden; overflow-y: auto;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ---- brand ---- */
.d-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; min-height: 34px; }
.d-chip {
  width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--rail-accent);
  color: var(--rail-bg); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; text-decoration: none;
}
.d-brand .lbl { font-size: 13px; font-weight: 700; color: var(--rail-text); }

/* ---- rows ---- */
.d-modrow { display: flex; align-items: center; gap: 2px; }
.d-row {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 6px;
  min-height: 40px; border-radius: 10px; color: var(--rail-muted); text-decoration: none;
  cursor: pointer; border: 0; background: none; font: inherit; font-size: 13px; text-align: left;
  transition: background .2s ease, color .2s ease;
}
.d-row:hover { background: var(--rail-hover); color: var(--rail-text); }
.d-ico {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.d-ico svg {
  width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.lbl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600;
  opacity: 1; transform: translateX(0);
  transition: opacity .18s ease .06s, transform .26s cubic-bezier(.4, 0, .2, 1) .06s;
}

/* active module branch — quiet; the section row below carries the accent */
.d-row.on { color: var(--rail-text); font-weight: 650; }
.d-row.on .d-ico { color: var(--rail-accent); }

/* ---- 03 accordion: sections fold in place, no JS height math ---- */
.d-caret {
  flex: none; width: 26px; height: 32px; border: 0; background: none; cursor: pointer;
  color: var(--rail-muted); display: flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 0;
  transition: rotate .3s cubic-bezier(.4, 0, .2, 1), background .2s ease, color .2s ease;
}
.d-caret svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-caret:hover { background: var(--rail-hover); color: var(--rail-text); }
.d-group.open > .d-modrow > .d-caret { rotate: 90deg; }

.d-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1); }
.d-fold > div { overflow: hidden; min-height: 0; }
.d-group.open > .d-fold { grid-template-rows: 1fr; }
.d-sect {
  margin: 2px 0 6px 21px; padding-left: 9px; border-left: 1px solid var(--rail-border);
  display: flex; flex-direction: column; gap: 1px;
}
.d-sub {
  position: relative; display: flex; align-items: center; gap: 9px; min-height: 32px;
  padding: 0 8px; border-radius: 8px; color: var(--rail-muted); text-decoration: none;
  font-size: 12.5px; opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.4, 0, .2, 1), background .2s ease, color .2s ease;
}
.d-group.open > .d-fold .d-sub { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 45ms); }
.d-sub:hover { background: var(--rail-hover); color: var(--rail-text); }
.d-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rail-border); flex: none; transition: background .2s ease; }

/* ---- 02 tubelight: the current page glows, nothing else does ---- */
.d-sub.on {
  color: var(--rail-text); font-weight: 650;
  background: color-mix(in oklab, var(--rail-accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rail-accent) 26%, transparent);
}
.d-sub.on .d-dot { background: var(--rail-accent); box-shadow: 0 0 8px 2px color-mix(in oklab, var(--rail-accent) 45%, transparent); }
.d-sub.on::before {
  content: ""; position: absolute; left: -10px; top: 50%; translate: 0 -50%;
  width: 2px; height: 17px; border-radius: 2px; background: var(--rail-accent);
  box-shadow: 0 0 10px 3px color-mix(in oklab, var(--rail-accent) 38%, transparent);
}

/* ---- footer ---- */
.d-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rail-border); display: flex; flex-direction: column; gap: 2px; }
.d-who {
  width: 24px; height: 24px; border-radius: 50%; background: var(--rail-hover);
  border: 1px solid var(--rail-border); font-size: 11px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--rail-text);
}
.d-chev { transition: rotate .34s cubic-bezier(.4, 0, .2, 1); }
.d-logout { margin: 0; padding: 0; }
.d-logout .d-row { width: 100%; }

/* ---- 04 collapse to icons ----
   The inner is frozen, so the viewport narrowing to 60px already clips
   everything past the icon — no per-row layout change is needed. All this does
   is fade the labels (so no sliver of text shows at the clip edge), fold the
   open sections away, and flip the collapse chevron. */
:root.dock-mini .lbl { opacity: 0; transform: translateX(-6px); transition-delay: 0s; transition-duration: .12s; }
:root.dock-mini .d-caret { opacity: 0; }
:root.dock-mini .d-fold { grid-template-rows: 0fr; }
:root.dock-mini .d-chev { rotate: 180deg; }

/* ---- 07 staggered entrance, once per session (class set in rail-nav.js) ---- */
.dock.intro .d-inner > * { opacity: 0; animation: d-rise .42s cubic-bezier(.22, 1, .36, 1) forwards; }
.dock.intro .d-inner > *:nth-child(1) { animation-delay: 0ms; }
.dock.intro .d-inner > *:nth-child(2) { animation-delay: 45ms; }
.dock.intro .d-inner > *:nth-child(3) { animation-delay: 90ms; }
.dock.intro .d-inner > *:nth-child(4) { animation-delay: 135ms; }
.dock.intro .d-inner > *:nth-child(5) { animation-delay: 180ms; }
.dock.intro .d-inner > *:nth-child(6) { animation-delay: 225ms; }
.dock.intro .d-inner > *:nth-child(7) { animation-delay: 270ms; }
@keyframes d-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---- 08 cross-document view transitions: the dock stays put, only the
   content cross-fades. Browsers without support just do a normal load. ---- */
@view-transition { navigation: auto; }
.dock { view-transition-name: dock; }
.dock-mbar { view-transition-name: dock-mbar; }
/* True dissolve: the OLD snapshot is held fully opaque for the whole transition
   and the NEW one fades in on top of it. Fading the old one out instead (the
   browser default, and what this file used to do over a shorter .16s window)
   briefly shows neither page at full opacity — a luminance dip that reads as
   the white flash of a normal reload, and is worst going between apps whose
   themes differ most (dark Meeedia <-> white Moneeey/Foood). */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* The dock/mbar are named so they persist as one continuous element instead of
   being redrawn with the page. They dissolve like the root but never slide —
   the nav is the fixed thing you navigate from, so it must not move. Between
   sections of one app the two snapshots are near-identical and the dissolve is
   invisible; between apps it blends the theme swap (the dock reads each page's
   own --surface/--paper-raised) instead of snapping black to white on frame 1. */
::view-transition-old(dock), ::view-transition-old(dock-mbar) { animation: none; }
::view-transition-new(dock), ::view-transition-new(dock-mbar) { animation: vt-fade .42s ease both; }
@keyframes vt-fade { from { opacity: 0; } }

/* The active section pill is the one marker of "where you are" that exists on
   every page, so it gets its own name and MORPHS between positions instead of
   being redrawn with the dock: going Meeedia -> Foood the highlight slides down
   the dock and blends accent colours on the way, which is what makes the apps
   read as one product rather than four sites sharing a sidebar.

   The selector must match AT MOST ONE element per document — two elements
   sharing a view-transition-name makes the browser abort the entire transition,
   and .d-row.on alone would do exactly that on /settings, where both the Hooome
   group row and the footer settings row carry .on. .d-sub.on is set by
   sectionRows() on the single section whose href === activePath, so it is always
   0 or 1 (0 on pages with no matching section, e.g. a Meeedia detail page —
   which is fine, the pill then just fades instead of sliding). */
.d-sub.on { view-transition-name: dock-active; }
::view-transition-group(dock-active) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* ---- mobile: dock becomes a drawer, sections move to a bottom bar ---- */
.dock-scrim { display: none; }
.dock-mbar { display: none; }

@media (max-width: 640px) {
  /* On mobile the dock is a full-width drawer that slides in/out with transform;
     it is never in the collapsed-icon state, so neutralise .dock-mini here. */
  body { padding-left: 0; padding-bottom: calc(var(--dock-mbar-h) + env(safe-area-inset-bottom)); }
  :root { --dock-full: 240px; --dock-w: 240px; }
  .dock { width: 240px; transform: translateX(-100%); box-shadow: 4px 0 30px rgb(0 0 0 / .35); }
  .dock.open { transform: translateX(0); }
  :root.dock-mini { --dock-w: 240px; }
  :root.dock-mini .lbl { opacity: 1; transform: none; }
  :root.dock-mini .d-caret { opacity: 1; }
  :root.dock-mini .d-chev { rotate: 0deg; }
  :root.dock-mini .d-group.open > .d-fold { grid-template-rows: 1fr; }
  #dockMini { display: none; }

  .dock-scrim {
    display: block; position: fixed; inset: 0; z-index: 49;
    background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .3s ease;
  }
  .dock-scrim[hidden] { display: none; }
  .dock-scrim.show { opacity: 1; }

  /* ---- 10 bottom bar: indicator slides, active icon lifts ---- */
  .dock-mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
    height: calc(var(--dock-mbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; align-items: stretch;
    background: var(--rail-bg); border-top: 1px solid var(--rail-border);
    font-family: system-ui, -apple-system, sans-serif;
  }
  .mdot {
    position: absolute; top: -1px; left: 0; height: 2px; width: 26px; border-radius: 2px;
    background: var(--rail-accent);
    box-shadow: 0 0 9px 2px color-mix(in oklab, var(--rail-accent) 40%, transparent);
    transform: translateX(var(--x, 0)); opacity: 0;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  }
  .mdot.ready { opacity: 1; }
  .mb {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; text-decoration: none; color: var(--rail-muted);
    border: 0; background: none; font: inherit; font-size: 10.5px; cursor: pointer; padding: 0;
  }
  .mb-ico {
    width: 22px; height: 22px; border-radius: 8px; background: var(--rail-hover);
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s ease;
  }
  .mb-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mb-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .mb.on { color: var(--rail-accent); }
  .mb.on .mb-ico {
    background: color-mix(in oklab, var(--rail-accent) 28%, transparent);
    transform: translateY(-2px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .dock, .lbl, .d-fold, .d-sub, .d-caret, .d-chev, .mdot, .mb-ico, .dock-scrim { transition: none; }
  .dock.intro .d-inner > * { animation: none; opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(dock), ::view-transition-new(dock),
  ::view-transition-old(dock-mbar), ::view-transition-new(dock-mbar),
  ::view-transition-group(dock-active),
  ::view-transition-old(dock-active), ::view-transition-new(dock-active) { animation: none; }
}

/* Foood menu entry — avocado #8fae3f (user-picked accent for this app's dock
   entry; on Foood pages foood.css also sets --accent to the same value).
   Only tinted while the Foood branch is the active one — same rule as every
   other app (line 103: .d-row.on .d-ico), which is why the avocado used to be
   the one icon that stayed coloured on every page. */
.d-group[data-app="foood"] .d-row.on .d-ico { color: #8fae3f; }
.d-group[data-app="foood"] .d-sub.on .d-dot { background: #8fae3f; box-shadow: 0 0 8px 2px color-mix(in oklab, #8fae3f 45%, transparent); }