/* Overclocked — ui.css (owner: js/ui.js)
 * Site chrome: reading progress, preview cards, mobile HUD strip, chapter rail,
 * scroll reveal, date-pill tick, About panel. Class prefix: ui-. */

.ui-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================== *
 * 4. top reading progress (2px accent, desktop + mobile)
 * ================================================================== */
.ui-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  pointer-events: none; transition: opacity .25s var(--ease);
}
.ui-progress > i {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
/* the mobile strip carries its own 3px bar */
html.ui-strip-in .ui-progress { opacity: 0; }

/* ================================================================== *
 * 1. preview cards
 * ================================================================== */
.ui-card {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: max-content; max-width: min(340px, calc(100vw - 20px));
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px;
  box-shadow: 0 14px 34px -18px rgba(17, 17, 17, .45), 0 2px 6px -2px rgba(17, 17, 17, .12);
  font-family: var(--serif); font-size: 16px; line-height: 23px; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(5px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms;
}
.ui-card.is-below { transform: translateY(-5px); }
.ui-card.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s;
}
/* arrow: a rotated square sitting on the border; its paper fill hides the border under the V */
.ui-card-arrow {
  position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--bg); border: 1.5px solid var(--ink); border-top: 0; border-left: 0;
  border-bottom-right-radius: 2px; transform: rotate(45deg);
}
.ui-card.is-below .ui-card-arrow {
  bottom: auto; top: -6px; border: 1.5px solid var(--ink); border-right: 0; border-bottom: 0;
  border-radius: 2px 0 0 0;
}
.ui-card-in { position: relative; padding: 10px 14px 11px; }
.ui-card-kicker {
  display: flex; align-items: center; gap: 7px; margin: 1px 0 7px;
  font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ui-card-kicker::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); }
.ui-card-body { max-height: min(260px, 42vh); overflow: auto; overscroll-behavior: contain; }
.ui-card-body p { margin: 0 0 8px; }
.ui-card-body > :last-child { margin-bottom: 0; }
.ui-card-body a { color: var(--accent); }
.ui-card-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ui-card-jump {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.ui-card-jump:hover { color: var(--accent); }

/* external-link card */
.ui-card--link { min-width: 220px; }
.ui-card--link .ui-card-in { padding: 10px 12px; }
.ui-link-head { display: flex; align-items: center; gap: 8px; }
.ui-link-badge {
  flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: var(--bg);
  font: 700 11px/22px var(--mono); text-align: center;
}
.ui-link-domain {
  flex: 1 1 auto; min-width: 0; font: 700 12.5px/1.2 var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-link-ext { flex: none; font: 12px/1 var(--mono); color: var(--muted); }
.ui-link-desc {
  margin-top: 6px; font-size: 15.5px; line-height: 21px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-link-url {
  margin-top: 3px; font: 10.5px/1.4 var(--mono); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* trigger feedback */
.sn-ref.ui-on a { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 2px; }
.ch-notes li.ui-flash { animation: ui-flash 1.8s var(--ease); }
@keyframes ui-flash {
  0%, 35% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}

/* ================================================================== *
 * 2. mobile HUD strip (#hud-strip, <960px)
 * ================================================================== */
#hud-strip { display: none; }
@media (max-width: 960px) {
  html { scroll-padding-top: 60px; }
  #hud-strip {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(calc(-100% - 6px)); visibility: hidden;
    transition: transform 280ms var(--ease), box-shadow 200ms var(--ease), visibility 0s linear 280ms;
  }
  #hud-strip.is-in {
    transform: none; visibility: visible;
    transition: transform 280ms var(--ease), box-shadow 200ms var(--ease), visibility 0s;
  }
  #hud-strip.is-open { box-shadow: 0 14px 28px -18px rgba(17, 17, 17, .45); }
}

.ui-strip-row {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin: 0; padding: 0 16px;
  border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-strip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ui-strip-date {
  flex: none; min-width: 66px; padding: 5px 6px 4px; border-radius: 4px;
  background: var(--ink); color: var(--bg); text-align: center; white-space: nowrap;
  font: 700 11px/1 var(--mono); letter-spacing: .02em;
}
.ui-strip-model { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ui-strip-k {
  font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ui-strip-v {
  font: 700 12px/1 var(--mono); color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ui-strip-model-v { overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: .01em; }
.ui-strip-stats { flex: none; display: flex; gap: 12px; }
.ui-strip-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ui-strip-x { font-weight: 400; color: var(--accent); }
.ui-strip-chev {
  flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
#hud-strip.is-open .ui-strip-chev { transform: translateY(2px) rotate(225deg); }
@media (max-width: 400px) {
  .ui-strip-row { gap: 8px; padding: 0 12px; }
  .ui-strip-stat--rev { display: none; }
}
.ui-strip-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.ui-strip-progress > i {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* expandable mini dashboard (0fr -> 1fr grid-row trick animates height: auto) */
.ui-strip-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease); }
#hud-strip.is-open .ui-strip-panel { grid-template-rows: 1fr; }
.ui-sp-clip { min-height: 0; overflow: hidden; }
.ui-sp-in { padding: 0 16px 14px; border-top: 1px dashed var(--rule); }
.ui-sp-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px;
  font: 11px/1.3 var(--mono);
}
.ui-sp-head b { font-weight: 700; }
.ui-sp-orig { flex: none; font-size: 10px; color: var(--muted); white-space: nowrap; }
.ui-sp-copies { margin-top: 3px; font: 10.5px/1.35 var(--mono); color: var(--ink-2); }
.ui-sp-label {
  margin: 12px 0 6px; font: 500 9px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ui-sp-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
/* ai-2027 label bar: accent fill grows left→right; a clipped twin layer turns the label paper-coloured */
.ui-cap {
  position: relative; height: 22px; overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: 4px;
  font: 600 9.5px/19px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.ui-cap > span { position: absolute; inset: 0; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.ui-cap-base { color: var(--ink); }
.ui-cap-fill {
  background: var(--accent); color: var(--bg);
  clip-path: inset(0 calc(100% - var(--v, 0) * 100%) 0 0);
  transition: clip-path 500ms var(--ease);
}
.ui-sp-bar {
  display: flex; height: 12px; overflow: hidden; background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: 4px;
}
.ui-seg { display: block; height: 100%; flex: 0 1 0; min-width: 0; transition: flex-grow 500ms var(--ease); }
.ui-sp-bar .ui-seg + .ui-seg { box-shadow: inset 1px 0 0 var(--bg); }
.ui-seg-ob { background: var(--accent); }
.ui-seg-us { background: var(--ink); }
.ui-seg-cn { background: repeating-linear-gradient(-45deg, var(--china) 0 2px, #8a8a82 2px 4px); }
.ui-seg-rest { background: var(--rule); }
.ui-sp-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px;
  font: 10px/1.2 var(--mono); color: var(--ink-2);
}
.ui-sp-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.ui-sp-legend .ui-seg { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.ui-sp-legend b { font-weight: 700; color: var(--ink); }

/* ================================================================== *
 * 3. chapter rail (#rail, >=1280px)
 * ================================================================== */
#rail { display: none; }
@media (min-width: 1280px) {
  #rail {
    display: block; position: fixed; left: 0; top: 50%; z-index: 40; width: 84px;
    pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-8px, -50%);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
  }
  #rail.is-in {
    opacity: 1; visibility: visible; transform: translate(0, -50%);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
  }
}
.ui-rail-track { position: relative; --x: 18px; }   /* --x must match X in js/ui.js */

/* the future: dotted */
.ui-rail-line {
  position: absolute; left: calc(var(--x) - .5px); width: 1px;
  background: linear-gradient(var(--muted) 55%, transparent 0) 0 0 / 1px 4px repeat-y;
}
/* the path read so far: solid accent */
.ui-rail-done {
  position: absolute; left: calc(var(--x) - 1px); width: 2px; border-radius: 1px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 0;
}
.ui-rail-stubs { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ui-rail-stubs path { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.ui-rail-stubs circle { fill: var(--bg); stroke: var(--muted); stroke-width: 1.25; }

.ui-rail-dot, .ui-rail-fork {
  position: absolute; left: var(--x); transform: translate(-50%, -50%);
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.ui-rail-dot { width: 22px; height: 10px; }
.ui-rail-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.25px var(--ink);
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ui-rail-dot.is-past::before { background: var(--ink); }
.ui-rail-dot:hover::before { transform: scale(1.45); }
.ui-rail-dot.is-active::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--bg); transform: scale(1.75); }
.ui-rail-dot:focus-visible, .ui-rail-fork:focus-visible { outline: none; }
.ui-rail-dot:focus-visible::after, .ui-rail-fork:focus-visible::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; box-shadow: 0 0 0 1.5px var(--accent);
}
.ui-rail-fork { width: 18px; height: 18px; display: grid; place-items: center; }
.ui-rail-fork svg { width: 13px; height: 13px; overflow: visible; transition: transform .3s var(--ease); }
.ui-rail-fork path {
  fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}
.ui-rail-fork:hover svg { transform: scale(1.2); }
.ui-rail-fork.is-past path { fill: var(--ink); }
.ui-rail-fork.is-active path { fill: var(--accent); stroke: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ui-rail-fork.is-active svg { animation: ui-fork-pulse 1.8s var(--ease) infinite; }
}
@keyframes ui-fork-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.ui-rail-end {
  position: absolute; left: calc(var(--x) - 4px); width: 8px; height: 1.5px; margin-top: -.75px;
  background: var(--ink); pointer-events: none;
}

.ui-rail-today {
  position: absolute; left: calc(var(--x) - 6px); width: 12px; height: 0; margin-top: -.75px;
  border-top: 1.5px solid var(--ink); pointer-events: none;
}
.ui-rail-today > span {
  position: absolute; left: 16px; top: -5px; white-space: nowrap;
  font: 600 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  transition: opacity .2s var(--ease);
}
.ui-rail-today.is-quiet > span { opacity: 0; }

/* active chapter's short date */
.ui-rail-now {
  position: absolute; left: calc(var(--x) + 11px); top: 0; transform: translateY(-50%);
  padding: 3px 4px 2px; border-radius: 3px; background: var(--accent); color: var(--bg);
  font: 700 9px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: top .35s var(--ease), opacity .2s var(--ease);
}
.ui-rail-now.is-on { opacity: 1; }
.ui-rail-track.is-tipping .ui-rail-now { opacity: 0; }

/* hover tooltip: "Mon YYYY — Title" */
.ui-rail-tip {
  position: absolute; left: calc(var(--x) + 14px); top: 0; z-index: 2; max-width: 360px;
  padding: 5px 8px; border-radius: 4px; background: var(--ink); color: var(--bg);
  font: 11px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 16px -8px rgba(17, 17, 17, .5);
  pointer-events: none; opacity: 0; transform: translate(-4px, -50%);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.ui-rail-tip.is-on { opacity: 1; transform: translate(0, -50%); }
.ui-rail-tip b { font-weight: 700; }

/* ================================================================== *
 * 5. scroll reveal + chapter date tick
 * ================================================================== */
.ui-rv {
  opacity: 0; transform: translateY(12px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.ui-rv.ui-in { opacity: 1; transform: none; }
@media print { .ui-rv { opacity: 1 !important; transform: none !important; } }

.ch-date { display: inline-block; transition: background-color .35s var(--ease); }
.ch-date.ui-tick { animation: ui-tick 460ms var(--ease); }
@keyframes ui-tick {
  0% { transform: none; }
  28% { transform: translateY(-2px) scale(1.12); }
  62% { transform: translateY(0) scale(.97); }
  100% { transform: none; }
}

/* ================================================================== *
 * (+) About panel
 * ================================================================== */
.ui-panel {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(17, 17, 17, .28); opacity: 0; transition: opacity .2s var(--ease);
}
.ui-panel[hidden] { display: none; }
.ui-panel.is-open { opacity: 1; }
.ui-sheet {
  position: relative; width: min(580px, 100%);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 24px 26px 22px; background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px; outline: none;
  box-shadow: 0 24px 60px -24px rgba(17, 17, 17, .55);
  font-size: 18px; line-height: 26px;
  transform: translateY(10px); transition: transform .26s var(--ease);
}
.ui-panel.is-open .ui-sheet { transform: none; }
.ui-sheet-kicker {
  margin: 0 0 4px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ui-sheet h2 { margin: 0 0 14px; font-weight: 400; font-size: 34px; line-height: 38px; }
.ui-sheet h3 {
  margin: 20px 0 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ui-sheet p { margin: 0 0 12px; }
.ui-sheet .mono { font-size: .8em; }
.ui-close {
  position: absolute; top: 14px; right: 14px; padding: 5px 8px; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink);
  font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.ui-close:hover { background: var(--ink); color: var(--bg); }
.ui-keys { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 4px 0 0; font: 12px/1.6 var(--mono); }
.ui-keys dt { white-space: nowrap; }
.ui-keys dd { margin: 0; color: var(--ink-2); }
.ui-kbd {
  display: inline-block; min-width: 20px; padding: 2px 5px; text-align: center;
  border: 1.5px solid var(--ink); border-bottom-width: 2.5px; border-radius: 4px;
  background: var(--bg); font: 700 11px/1.2 var(--mono);
}
@media (max-width: 960px) {
  .ui-sheet { padding: 20px 18px 18px; font-size: 17px; line-height: 25px; }
  .ui-sheet h2 { font-size: 28px; line-height: 32px; }
}

/* ================================================================== *
 * Act III — "Galaxy Brain" (deep time, night palette)
 * Everything above already uses palette tokens (--bg, --ink, --muted, --accent …), which
 * css/act3.css re-defines under :root[data-act='3'] and blends with --act-blend.
 * ================================================================== */

/* ---------- mobile strip: Act II / Act III variants ---------- */
.ui-strip-a2 { display: contents; }
.ui-strip-a3, .ui-sp-a3 { display: none; }
#hud-strip.is-deep .ui-strip-a2, #hud-strip.is-deep .ui-sp-a2 { display: none; }
#hud-strip.is-deep .ui-strip-a3 { display: contents; }
#hud-strip.is-deep .ui-sp-a3 { display: block; }
@media (prefers-reduced-motion: no-preference) {
  #hud-strip.is-deep .ui-strip-a3 > *, #hud-strip.is-deep .ui-sp-a3 { animation: ui-swap 520ms var(--ease) both; }
  #hud-strip.is-deep .ui-strip-a3 > .ui-strip-stats { animation-delay: 70ms; }
}
@keyframes ui-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ui-strip-when { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ui-strip-date--deep { min-width: 0; max-width: 100%; padding: 4px 6px 3px; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.ui-strip-mind {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
#hud-strip.is-deep .ui-strip-stats { gap: 13px; }

/* expanded deep panel */
.ui-sp-event { margin-top: 5px; font: italic 15.5px/21px var(--serif); color: var(--ink); }
.ui-sp-label--split { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ui-sp-label--split > span:first-child { flex: none; white-space: nowrap; }
.ui-sp-label--split > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) { .ui-sp-xs-hide { display: none; } }
.ui-kd-read, .ui-lt-read {
  font: 10px/1 var(--mono); letter-spacing: .02em; text-transform: none; color: var(--ink-2); white-space: nowrap;
}
.ui-kd-read b, .ui-lt-read b { font-weight: 700; color: var(--ink); }

/* mini Kardashev bar: K0 … K4, ticks at types I / II / III */
.ui-kd { position: relative; height: 10px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 4px; }
.ui-kd-fill {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transition: transform 600ms var(--ease);
}
.ui-kd-tick { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--ink); opacity: .45; }
.ui-kd-scale { position: relative; height: 11px; margin-top: 4px; font: 9px/1 var(--mono); letter-spacing: .03em; color: var(--muted); }
.ui-kd-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ui-kd-scale b { font-weight: 700; color: var(--ink-2); }

/* log-time ruler: a tick per power of ten years after 2025; solid = read so far, dotted = to come */
.ui-lt { position: relative; height: 18px; margin: 0 3px; }
.ui-lt-line, .ui-lt-done { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.ui-lt-line { background: linear-gradient(90deg, var(--muted) 50%, transparent 0) 0 0 / 4px 1px repeat-x; }
.ui-lt-done { height: 2px; margin-top: -1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.ui-lt-tick { position: absolute; top: 50%; width: 1px; height: 6px; margin: -3px 0 0 -.5px; background: var(--muted); }
.ui-lt-tick.is-major { height: 10px; margin-top: -5px; background: var(--ink-2); }
.ui-lt-pips { position: absolute; inset: 0; }
.ui-lt-pip {
  position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.25px var(--ink);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.ui-lt-pip.is-past { background: var(--ink); }
.ui-lt-pip.is-on { background: var(--accent); box-shadow: 0 0 0 1.5px var(--bg); transform: scale(1.35); }
.ui-lt-mark {
  position: absolute; top: 50%; left: 0; width: 2px; height: 16px; margin: -8px 0 0 -1px; border-radius: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--glow, color-mix(in srgb, var(--accent) 45%, transparent));
  transition: left .35s var(--ease);
}
.ui-lt-scale { position: relative; height: 11px; margin: 4px 3px 0; font: 9px/1 var(--mono); color: var(--muted); }
.ui-lt-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ui-lt-scale span:first-child { transform: translateX(-3px); }
.ui-lt-scale span:last-child { transform: translateX(calc(-100% + 3px)); }
.ui-sp-thought { margin-top: 12px; font: 10.5px/1.45 var(--mono); color: var(--ink-2); }
.ui-sp-thought b { font-weight: 700; color: var(--accent); }
.ui-sp-mini { margin-top: 3px; font: 10px/1.45 var(--mono); color: var(--muted); white-space: pre-wrap; }

/* ---------- chapter rail: Act III segment ---------- */
/* deep-time line: sparse star dots instead of dashes */
.ui-rail-line--deep {
  left: calc(var(--x) - 1.5px); width: 3px;
  background: radial-gradient(circle, var(--ui-star, var(--muted)) 0 .75px, transparent 1.1px) 50% 0 / 3px 6px repeat-y;
}
:root[data-act='3'] .ui-rail-line--deep { --ui-star: var(--star, var(--muted)); }   /* muted by day, starlight at night */
/* log ruler: a hairline per power of ten years, longer every thousandfold */
.ui-rail-tick {
  position: absolute; left: calc(var(--x) - 8px); width: 4px; height: 1px; margin-top: -.5px;
  background: var(--muted); opacity: .75; pointer-events: none;
}
.ui-rail-tick.is-major { left: calc(var(--x) - 10px); width: 6px; background: var(--ink-2); opacity: 1; }

/* the Act III divider: a tiny two-armed spiral */
.ui-rail-act3 {
  position: absolute; left: var(--x); transform: translate(-50%, -50%); width: 22px; height: 22px;
  display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.ui-rail-act3 svg { width: 16px; height: 16px; overflow: visible; transition: transform .7s var(--ease); }
.ui-rail-act3 path { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; transition: stroke .3s var(--ease); }
.ui-rail-act3 .ui-rail-act3-bg { fill: var(--bg); stroke: none; }
.ui-rail-act3 .ui-rail-act3-core { fill: var(--ink); transition: fill .3s var(--ease); }
.ui-rail-act3:hover svg { transform: rotate(-120deg) scale(1.15); }
.ui-rail-act3.is-past path, .ui-rail-act3.is-active path { stroke: var(--accent); }
.ui-rail-act3.is-past .ui-rail-act3-core, .ui-rail-act3.is-active .ui-rail-act3-core { fill: var(--accent); }
.ui-rail-act3.is-active { filter: drop-shadow(0 0 4px var(--glow, color-mix(in srgb, var(--accent) 45%, transparent))); }
@media (prefers-reduced-motion: no-preference) {
  .ui-rail-act3.is-active svg { animation: ui-spiral 14s linear infinite; }
}
@keyframes ui-spiral { to { transform: rotate(-360deg); } }
.ui-rail-act3:focus-visible { outline: none; }
.ui-rail-act3:focus-visible::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; box-shadow: 0 0 0 1.5px var(--accent);
}

/* deep chapters: four-point sparkles — faint stars ahead, bright once read */
.ui-rail-dot--deep::before {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 0;
  background: var(--muted); box-shadow: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.ui-rail-dot--deep.is-past::before { background: var(--ink); }
.ui-rail-dot--deep.is-active::before { background: var(--accent); box-shadow: none; transform: scale(1.75); }
.ui-rail-dot--deep.is-active { filter: drop-shadow(0 0 3px var(--glow, color-mix(in srgb, var(--accent) 45%, transparent))); }
.ui-rail-end--deep { background: var(--muted); }

/* while reading Act III the story segment steps back */
.ui-rail-track > .ui-rail-dot, .ui-rail-track > .ui-rail-fork, .ui-rail-track > .ui-rail-stubs,
.ui-rail-track > .ui-rail-today, .ui-rail-track > .ui-rail-line { transition: opacity .6s var(--ease); }
.ui-rail-track.is-deep > .ui-rail-dot:not(.ui-rail-dot--deep),
.ui-rail-track.is-deep > .ui-rail-fork,
.ui-rail-track.is-deep > .ui-rail-stubs,
.ui-rail-track.is-deep > .ui-rail-today,
.ui-rail-track.is-deep > .ui-rail-line:not(.ui-rail-line--deep) { opacity: .5; }
.ui-rail-track.is-deep > .ui-rail-dot:not(.ui-rail-dot--deep):hover { opacity: 1; }

/* ---------- night palette: shadows that read on the dark page ---------- */
/* (.ui-card / .ui-rail-tip night shadows live in css/act3.css) */
:root[data-act='3'] #hud-strip.is-open { box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .85), 0 1px 0 var(--rule); }
:root[data-act='3'] .ui-sheet { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px var(--rule); }
:root[data-act='3'] .ui-panel { background: rgba(0, 0, 0, .5); }