/* caliber_nav.css - Caliber Studio navigation: baseline time travel and its minimap, role perspectives, keyboard
   help, and the alerts popover on the Studio bar (js/views/caliber_nav.js). [cal-cap-5]
   Tokens only; canonical breakpoints (672 / 1056 / 1312). */

.cnav-h { margin: 0 0 var(--cds-spacing-03); font-size: var(--f-md); font-weight: var(--fw-semibold); }
.cnav-k { display: block; font-size: var(--f-sm); color: var(--mut); font-weight: var(--fw-semibold); }

/* ---- the Studio bar dock: perspective chip and alerts */
.cnav-dock { display: flex; align-items: center; gap: var(--cds-spacing-03); margin-left: auto; }
.cnav-chip { display: inline-flex; align-items: center; padding: var(--cds-spacing-01) var(--cds-spacing-03); border: 1px solid var(--border-strong); border-radius: var(--hx-radius-round); font-size: var(--f-sm); color: var(--tx); text-decoration: none; white-space: nowrap; }
.cnav-chip:hover { background: var(--cds-layer-hover-01, var(--cds-background-hover)); }
.cnav-chip:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-offset); }
.cnav-alerts { position: relative; }
.cnav-alerts__btn { gap: var(--cds-spacing-02); }
.cnav-alerts__n { min-width: var(--cds-spacing-05); padding: 0 var(--cds-spacing-02); border-radius: var(--hx-radius-round); background: var(--cds-interactive); color: var(--cds-text-on-color); font-size: var(--f-sm); font-variant-numeric: tabular-nums; text-align: center; }
.cnav-alerts__pop { position: absolute; right: 0; top: calc(100% + var(--cds-spacing-02)); z-index: var(--hx-z-30); width: min(380px, calc(100vw - var(--cds-spacing-07))); max-height: min(70vh, 520px); overflow: auto; background: var(--cds-layer-01, var(--panel)); border: 1px solid var(--border-strong); box-shadow: var(--hx-shadow-sm); padding: var(--cds-spacing-04); }
.cnav-pop__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cds-spacing-03); margin: 0 0 var(--cds-spacing-03); }
.cnav-pop__title { margin: 0; font-size: var(--f-ms); font-weight: var(--fw-semibold); }
.cnav-pop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-02); }
.cnav-pop__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--cds-spacing-03); align-items: center; padding: var(--cds-spacing-03); border-left: 3px solid transparent; font-size: var(--f-sm); }
.cnav-pop__item.is-unread { border-left-color: var(--cds-interactive); background: var(--cds-layer-02, var(--panel2)); }
.cnav-pop__text { min-width: 0; overflow-wrap: anywhere; }
.cnav-pop__empty { margin: 0; font-size: var(--f-sm); }
.cnav-pop__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cds-spacing-03); margin-top: var(--cds-spacing-04); }

/* ---- baseline time travel */
.cnav-tt { display: grid; gap: var(--cds-spacing-05); }
.cnav-tt__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: var(--cds-spacing-05); align-items: start; }
.cnav-tt__module .hx-field { margin: 0; }
.cnav-scrub { min-width: 0; }
.cnav-scrub__range { width: 100%; accent-color: var(--cds-interactive); margin: var(--cds-spacing-03) 0; }
.cnav-scrub__range:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-offset); }
.cnav-scrub__ticks { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: var(--cds-spacing-02); }
.cnav-scrub__ticks li { min-width: 0; flex: 1 1 0; display: flex; justify-content: center; }
.cnav-scrub__ticks li:first-child { justify-content: flex-start; }
.cnav-scrub__ticks li:last-child { justify-content: flex-end; }
.cnav-scrub__tick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--cds-spacing-01) var(--cds-spacing-02); border: 1px solid transparent; background: none; color: var(--mut); font: inherit; font-size: var(--f-sm); cursor: pointer; }
.cnav-scrub__tick:hover { color: var(--tx); border-color: var(--border); }
.cnav-scrub__tick.is-on { color: var(--tx); font-weight: var(--fw-semibold); border-color: var(--cds-interactive); }
.cnav-scrub__tick:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.cnav-scrub__now { margin: var(--cds-spacing-03) 0 0; font-size: var(--f-sm); }
.cnav-tt__tiles { margin: 0; }
.cnav-tt__work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: var(--cds-spacing-05); align-items: start; }
.cnav-doc { min-width: 0; }
.cnav-doc__frame { display: grid; grid-template-columns: minmax(0, 1fr) var(--cds-spacing-09); gap: var(--cds-spacing-03); border: 1px solid var(--border); background: var(--cds-layer-01, var(--panel)); }
.cnav-doc__body { max-height: 60vh; overflow: auto; padding: var(--cds-spacing-04) var(--cds-spacing-05); scroll-behavior: auto; }
.cnav-doc__body:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.cnav-doc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-03); }
.cnav-doc__head { font-weight: var(--fw-semibold); font-size: var(--f-md); margin-top: var(--cds-spacing-03); }
.cnav-doc__head--2, .cnav-doc__head--3, .cnav-doc__head--4, .cnav-doc__head--5, .cnav-doc__head--6 { font-size: var(--f-ms); }
.cnav-doc__req { padding: var(--cds-spacing-02) var(--cds-spacing-03); padding-left: calc(var(--cds-spacing-03) + var(--lvl, 0) * var(--cds-spacing-05)); border-left: 3px solid transparent; transition: background-color 0.4s; }
.cnav-doc__req.is-added { border-left-color: var(--hx-green-50); }
.cnav-doc__req.is-changed { border-left-color: var(--hx-yellow-30); }
.cnav-doc__req.is-flash, .cnav-doc__head.is-flash { background: var(--cds-layer-selected-01, var(--cds-background-selected)); }
.cnav-doc__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-02) var(--cds-spacing-03); }
.cnav-doc__text { margin: var(--cds-spacing-02) 0 0; color: var(--mut); font-size: var(--f-sm); line-height: var(--lh-relaxed); overflow-wrap: anywhere; }

.cnav-mini { border-left: 1px solid var(--border); padding: var(--cds-spacing-03) var(--cds-spacing-02); max-height: 60vh; }
.cnav-mini:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.cnav-mini__track { position: relative; display: flex; flex-direction: column; gap: var(--cds-spacing-01); height: 100%; min-height: var(--cds-spacing-10); cursor: pointer; }
.cnav-mini__mark { display: block; flex: var(--w, 2) 1 0; min-height: var(--cds-spacing-01); max-height: var(--cds-spacing-06); width: 100%; padding: 0; border: 0; background: var(--border-strong); cursor: pointer; }
.cnav-mini__mark--head { background: var(--tx); width: 100%; }
.cnav-mini__mark--req { width: 80%; margin-left: 20%; }
.cnav-mini__mark.is-added { background: var(--hx-green-50); }
.cnav-mini__mark.is-changed { background: var(--hx-yellow-30); }
.cnav-mini__view { position: absolute; left: calc(-1 * var(--cds-spacing-01)); right: calc(-1 * var(--cds-spacing-01)); border: 2px solid var(--cds-interactive); pointer-events: none; min-height: var(--cds-spacing-04); }
.cnav-step { min-width: 0; }
.cnav-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-03); font-size: var(--f-sm); }

/* ---- perspectives */
.cnav-persp { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-05); }
.cnav-persp__card { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); border: 1px solid var(--border); border-top: 3px solid transparent; background: var(--cds-layer-01, var(--panel)); min-width: 0; }
.cnav-persp__card.is-on { border-top-color: var(--cds-interactive); }
.cnav-persp__card p { margin: 0; }
.cnav-persp__secs { font-size: var(--f-sm); }
.cnav-persp__acts { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); margin-top: auto; padding-top: var(--cds-spacing-03); }
.cnav-preview { margin-top: var(--cds-spacing-04); }
.cnav-preview p { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02); margin: var(--cds-spacing-02) 0 0; }

/* ---- keyboard help */
.cnav-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--cds-spacing-06); }
.cnav-keys__group { min-width: 0; }
.cnav-keys__list { margin: 0; display: grid; gap: var(--cds-spacing-02); }
.cnav-keys__list > div { display: grid; grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); gap: var(--cds-spacing-04); padding: var(--cds-spacing-02) 0; border-bottom: 1px solid var(--border); }
.cnav-keys__list dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-01); }
.cnav-keys__list dd { margin: 0; font-size: var(--f-sm); }

@media (max-width: 1311px) {
  .cnav-tt__work { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1055px) {
  .cnav-tt__controls { grid-template-columns: minmax(0, 1fr); }
  .cnav-dock { margin-left: 0; }
}
@media (max-width: 671px) {
  .cnav-keys { grid-template-columns: minmax(0, 1fr); }
  .cnav-keys__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--cds-spacing-02); }
  .cnav-scrub__ticks li:not(:first-child):not(:last-child) { display: none; }
  .cnav-alerts span:not(.cnav-alerts__n) { display: none; }
  .cnav-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cnav-doc__req { transition: none; } }