/* rail.css — the places rail (R9 plan §2.1.2, D-7; the approved comp docs/redesign/comps/rail.html is the authority).
   72 px wide (64 compact, 80 / 88 at 115 / 130 % text, 48 collapsed to glyphs), left of the desk, above the dock. Every
   size is the comp's and the same in every design world; colour, radius and type come from tokens only. The active pill is
   a slider that glides 200 ms --ease-out between items (transform only); reduced motion shortens every duration. */

:root[data-rail="collapsed"] { --rail-w: 48px; }

.w2-rail {
  --k-label: var(--fs-xs); --k-count: var(--fs-2xs); --k-name: var(--fs-xs);
  --k-igap: 2px; --k-cgap: 16px;
  position: absolute; left: 0; top: 0; bottom: calc(var(--taskbar-h) + 16px); z-index: 95;
  width: var(--rail-w); display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  background: var(--surface-solid); border-right: 1px solid var(--line-1);
  font-family: var(--font-ui); color: var(--text-2);
}
:root[data-density="compact"] .w2-rail { --k-igap: 0px; }
.w2-rail[hidden] { display: none; }
.w2-locked .w2-rail, .w2-locked .w2-rail * { visibility: hidden !important; }

/* ── identity: the seal, the matter's short name, the generation ── */
.w2-rail__id { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; flex: none; }
.w2-rail__seal { width: 32px; height: 32px; }
.w2-rail__seal .s-ring { fill: var(--accent-weak); stroke: var(--accent); stroke-width: 1.6; }
.w2-rail__seal .s-dash { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 2.2 2.4; }
.w2-rail__seal .s-core { fill: var(--accent); }
.w2-rail__matter {
  font-size: var(--k-name); line-height: 1.2; font-weight: var(--fw-semibold); color: var(--text-1); text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%;
  overflow-wrap: anywhere;
}
.w2-rail__gen {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--bg-1);
  font-size: var(--k-label); font-weight: var(--fw-medium); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.w2-rail__gen[hidden] { display: none; }

/* ── the three clusters ── */
.w2-rail__scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0 8px;
  display: flex; flex-direction: column; align-items: center; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.w2-rail__cluster { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--k-igap); position: relative; z-index: 1; }
.w2-rail__cluster + .w2-rail__cluster { margin-top: var(--k-cgap); }
.w2-rail__cluster + .w2-rail__cluster::before {
  content: ""; position: absolute; top: calc(var(--k-cgap) / -2); left: 50%; width: 24px; height: 1px; margin-left: -12px; background: var(--line-1);
}
.w2-rail__cluster > li { width: 100%; display: flex; justify-content: center; }

.w2-rail__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 2px 0;
  color: var(--text-2); border-radius: var(--r-3); text-align: center;
}
.w2-rail__pill {
  position: relative; width: 48px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  color: var(--text-2); background: transparent; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.w2-rail__pill .ui-icon { width: 22px; height: 22px; }
.w2-rail__lbl { font-size: var(--k-label); line-height: 1.2; font-weight: var(--fw-medium); color: var(--text-2); letter-spacing: 0; max-width: 100%; }
.w2-rail__item:hover .w2-rail__pill { background: var(--w2-hover); color: var(--text-1); }
.w2-rail__item:hover .w2-rail__lbl { color: var(--text-1); }
.w2-rail__item:active .w2-rail__pill { background: var(--w2-press); color: var(--text-1); }
.w2-rail__item:focus-visible, .w2-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.w2-rail__item.is-active .w2-rail__pill { color: var(--accent-strong); }
.w2-rail__item.is-active:hover .w2-rail__pill, .w2-rail__item.is-active:active .w2-rail__pill { background: transparent; }
.w2-rail__item.is-active .w2-rail__lbl { color: var(--text-1); font-weight: var(--fw-semibold); }
/* until the slider has measured itself the active pill paints its own ground */
.w2-rail:not([data-slider="on"]) .w2-rail__item.is-active .w2-rail__pill { background: var(--accent-weak); }

/* the sliding ground of the active pill */
.w2-rail__slider {
  position: absolute; z-index: 0; left: 50%; top: 0; width: 48px; height: 32px; margin-left: -24px; border-radius: var(--r-pill);
  background: var(--accent-weak); pointer-events: none; opacity: 0; transform: translateY(var(--y, 0px));
}
.w2-rail[data-slider="on"] .w2-rail__slider { opacity: 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.w2-rail[data-slider="on"][data-slide="none"] .w2-rail__slider { opacity: 0; }
.w2-rail[data-slider="on"][data-instant] .w2-rail__slider { transition: none; }

/* counts: 16 px pills, 10.5 px tabular figures; the words are in aria-label */
.w2-rail__count {
  position: absolute; top: -5px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--k-count); line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface-solid) 70%, var(--text-1) 14%); color: var(--text-1);
  outline: 2px solid var(--surface-solid); box-shadow: inset 0 0 0 1px var(--line-2);
}
.w2-rail__count.is-warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
/* nothing to count: the pill stays for assistive technology ("0 due today") and is not drawn */
.w2-rail__count[data-n="0"] { position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; outline: 0; box-shadow: none; }

/* ── the foot: the tree, the health light, help, collapse ── */
.w2-rail__foot { margin-top: auto; flex: none; display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; border-top: 1px solid var(--line-1); }
.w2-rail__tree {
  display: grid; justify-items: center; gap: 4px; padding: 4px 2px; border-radius: var(--r-2); width: 100%;
  color: var(--text-2); font-size: var(--k-label); line-height: 1.2; text-align: center; overflow-wrap: anywhere;
}
.w2-rail__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.w2-rail [data-tone="ok"] > .w2-rail__dot, .w2-rail__dot[data-tone="ok"] { background: var(--ok); }
.w2-rail [data-tone="warn"] > .w2-rail__dot, .w2-rail__dot[data-tone="warn"] { background: var(--warn); }
.w2-rail [data-tone="live"] > .w2-rail__dot, .w2-rail__dot[data-tone="live"] { background: var(--flag-live); }
.w2-rail [data-tone="danger"] > .w2-rail__dot, .w2-rail__dot[data-tone="danger"] { background: var(--danger); }
.w2-rail__tofile {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; height: 24px; padding: 0 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--accent-weak); color: var(--accent-strong); font-size: var(--k-label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.w2-rail__tofile:hover { background: var(--accent-ring); color: var(--text-on-accent); }
.w2-rail__tofile[hidden] { display: none; }
.w2-rail__row { display: flex; gap: 4px; justify-content: center; }
.w2-rail__ib {
  width: 24px; height: 24px; border-radius: var(--r-pill); display: inline-grid; place-items: center; color: var(--text-2);
  font-size: var(--k-label); font-weight: var(--fw-semibold); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.w2-rail__ib:hover { background: var(--w2-hover); color: var(--text-1); }
.w2-rail__ib.is-help { box-shadow: inset 0 0 0 1px var(--line-2); }
.w2-rail__ib .ui-icon { width: 16px; height: 16px; }

/* ── collapsed to glyphs: 48 px, labels kept for assistive technology, the seal alone on top ── */
.w2-rail[data-collapsed="true"] { --rail-w: 48px; }
.w2-rail[data-collapsed="true"] .w2-rail__lbl, .w2-rail[data-collapsed="true"] .w2-rail__matter,
.w2-rail[data-collapsed="true"] .w2-rail__gen, .w2-rail[data-collapsed="true"] .w2-rail__tree-w, .w2-rail[data-collapsed="true"] .w2-rail__tf-w {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.w2-rail[data-collapsed="true"] .w2-rail__id { padding: 10px 0 8px; }
.w2-rail[data-collapsed="true"] .w2-rail__seal { width: 28px; height: 28px; }
.w2-rail[data-collapsed="true"] .w2-rail__item { gap: 0; }
.w2-rail[data-collapsed="true"] .w2-rail__count { right: 1px; top: -4px; }
.w2-rail[data-collapsed="true"] .w2-rail__tofile { padding: 0; width: 24px; }
.w2-rail[data-collapsed="true"] .w2-rail__foot { padding: 8px 0 10px; }
.w2-rail[data-collapsed="true"] .w2-rail__row { flex-direction: column; align-items: center; }

/* ── a short screen (1024 × 700 is a 628 px rail): the same measurements — the pill, the 16 px between clusters, the 24 px hairline,
   the 22 px chip, the type — with the identity block and the foot tightened so the three clusters need no scrolling (and, below
   695 px, the gaps between items too). Below that the cluster list scrolls inside the rail (the identity block and the foot stay). ── */
@media (max-height: 760px) {
  .w2-rail__id { gap: 2px; padding: 6px 6px 4px; }
  .w2-rail__seal { width: 28px; height: 28px; }
  .w2-rail__scroll { padding: 4px 0; }
  .w2-rail__foot { gap: 2px; padding: 6px 6px 6px; }
  .w2-rail__tree { padding: 1px 2px; gap: 3px; }
  /* the larger text sizes need every pixel here: their items stay pressed together (measured: 115 % fits at 1024 x 700) */
  :root:is([data-text="115"], [data-text="130"]) .w2-rail { --k-igap: 0px; }
  :root:is([data-text="115"], [data-text="130"]) .w2-rail__item { padding: 1px 0; }
}
/* G6.Q Q1: at 1024 x 700 and 100 % text the tightened items left a place's label 2 px above the next place's glyph, so a label
   read as the caption of the pill below it; the rail has the room there, so the items keep the comp's 2 px gap and padding
   (6 px from a label to the next glyph, as at 1440 x 900) down to a 695 px viewport and are pressed together only below that
   (measured at every height from 689 to 700 px: at 690–694 the open gap made the list scroll by 1–5 px — the lead's gate). */
@media (max-height: 694px) {
  .w2-rail { --k-igap: 0px; }
  .w2-rail__item { padding: 1px 0; }
}

@media (forced-colors: active) {
  .w2-rail { border-right-color: CanvasText; }
  .w2-rail__item.is-active .w2-rail__pill { outline: 2px solid Highlight; }
  .w2-rail__slider { display: none; }
}