/* =============================================================================
 * Kiviland — rail module styles. Owned by kl-rail.js. Base classes live in
 * kiviland.css; this file adds what the module needs and overrides nothing
 * outside its own selectors.
 *
 * Division of labour: the positioned element (.kl-pill) is JS-owned for
 * transform, opacity and z-index; everything that moves for feel (the arrival,
 * the held lean) lives on the inner wrapper, so the two never fight.
 * ========================================================================== */

/* ---------------------------------------------------------------- the shell */
/* the corners nearest the pane pinch to 4px: the pill is attached, not floating */
.kl-pill {
  display: block;
  border-radius: var(--r-xs) var(--r-sm) var(--r-sm) var(--r-xs);
  backface-visibility: hidden;
}
.kl-pill[data-hinge='top'] { transform-origin: 50% 0; }
.kl-pill[data-hinge='bottom'] { transform-origin: 50% 100%; }
/* a hinged pill is a step, not a card: the lip reads as pressable */
.kl-pill[data-hinge='top']:not(.is-expanded),
.kl-pill[data-hinge='bottom']:not(.is-expanded) { cursor: pointer; }
.kl-pill.is-hidden { visibility: hidden; }
.kl-pill.is-leaving,
.kl-pill.is-flying { pointer-events: none; }
/* while GSAP owns width/height/opacity the CSS transitions step aside; no scrollbar mid-flight */
.kl-pill.is-flipping,
.kl-pill.is-flying { transition: none; }
.kl-pill.is-flipping { overflow: hidden; }

/* the inner wrapper: the lean and the arrival */
.kl-pill__in {
  display: block;
  transition: transform 300ms var(--kl-ease-soft), opacity 120ms var(--ease);
}
/* held: the result is ready; the pill leans 6px toward the pane, where it will go */
.kl-pill[data-state='held'] .kl-pill__in,
.kl-pill[data-state='done'] .kl-pill__in { transform: translateX(-6px); }
/* arrival: the leader draws across the gap first, then the words condense in from it */
.kl-pill__in.is-arriving { opacity: 0; }
.kl-pill__in.is-condensing { animation: kl-pill-condense 200ms var(--ease) both; transform-origin: 0 50%; }
@keyframes kl-pill-condense {
  from { opacity: 0; transform: translateX(-8px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- the face */
/* the face is the one control on a collapsed pill; it inherits the shell's type */
.kl-pill__face {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kl-pill__face:focus-visible { outline: none; }
.kl-pill:has(.kl-pill__face:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kl-pill.is-expanded .kl-pill__face { cursor: default; }

/* the header: alias · elapsed collapsed, alias · state · elapsed open */
.kl-pill__state {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink2);
  letter-spacing: 0.04em;
}
.kl-pill__state::before { content: '· '; color: var(--ink3); }
.kl-pill.is-expanded .kl-pill__state { display: inline; }
.kl-pill.is-expanded .kl-pill__goal {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  white-space: normal;
  line-height: 1.4;
}

/* the status: a dot and honest words on one line */
.kl-pill__status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-pill[data-state='failed'] .kl-pill__status-text { color: var(--ink1); }
.kl-pill[data-state='cancelled'] .kl-pill__goal,
.kl-pill[data-state='stale'] .kl-pill__goal { color: var(--ink2); }
.kl-pill[data-state='cancelled'] .kl-pill__bar,
.kl-pill[data-state='stale'] .kl-pill__bar,
.kl-pill[data-state='failed'] .kl-pill__bar { background: var(--ink3); }

/* ---------------------------------------------------------------- expanded */
.kl-pill__log:empty { display: none; }
.kl-pill__log li span { min-width: 0; }
.kl-pill__log time { flex: 0 0 auto; }
.kl-pill__actions { align-items: baseline; flex-wrap: wrap; row-gap: 6px; }
.kl-pill__cancel { display: inline-flex; align-items: baseline; gap: 6px; }
.kl-pill__confirm { color: var(--ink2); }
.kl-pill__sep { color: var(--ink3); }
.kl-pill__actions .is-danger { color: var(--kl-state-error); }
.kl-pill__actions button:focus-visible { outline-offset: 2px; }
.kl-pill__pct:empty { display: none; }

/* ------------------------------------------------------------------ badges */
/* one per deck at the face's top-right (−6, −6); the count is exact, empty hides */
.kl-badge {
  top: 0;
  right: -6px;
  left: auto;
  margin: 0;
  cursor: pointer;
  will-change: transform;
  -webkit-appearance: none;
  appearance: none;
}
.kl-badge:hover { background: var(--surface1); border-color: var(--hairline-strong); }
.kl-badge:focus-visible { outline-offset: 2px; }

/* ----------------------------------------------------------------- leaders */
/* the reveal is a solid stroke inside a mask; its dash offset is what draws the dotted line */
.kl-leaders .kl-leader__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: none;
  stroke-linecap: butt;
  transition: none;
}

/* ------------------------------------------------------------------ frozen */
/* the session closed: the ledger stays legible, nothing in it is pressable */
.kl-rail.is-frozen .kl-pill,
.kl-rail.is-frozen .kl-badge { pointer-events: none; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kl-pill__in { transition: none; }
  .kl-pill__in.is-arriving { opacity: 1; }
  .kl-pill__in.is-condensing { animation: none; }
  .kl-pill.is-expanded .kl-pill__face { transition: none; }
}

/* the expanded pill's close reads apart from the black text: a quiet blue (the founder, 2026-09-07) */
.kl-pill__actions .is-close { color: #2f6fb0; }
.kl-pill__actions .is-close:hover { color: #245a92; }