/* ============================================================
   BUREAU OF LOST TIMELINES — WORKING CHAINS
   css/caseflow.css

   The visual fact this sheet has to carry: a division is a stop on a
   route, not a shelf. So a chain is drawn as one — a single red rail
   running down the sheet, each hop hung off it in the margin gutter,
   a branch kinking off the rail as a dashed row instead of leaving it.

   The rail is the only colour with authority here. A hop you hold
   clearance for is stamped red; a hop above you is grey and dimmed; a
   hop the sheet cannot judge because nobody is signed in is dashed —
   three states, and they are the same three states js/auth.js really
   answers with.

   LOAD ORDER: css/tokens.css, css/style.css, the surface sheet
   (css/org.css or css/refs.css), then this one.
   ============================================================ */

/* ---------- THE ROUTE RAIL ---------- */
.cf-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-left: 2px;
}

.cf-flow::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--line-red), var(--alert-deep));
}

/* ---------- ONE HOP ---------- */
.cf-hop {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--s-3);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--ink-1) var(--fibre);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2);
}

.cf-hop + .cf-hop { margin-top: 0; }

.cf-seq {
  align-self: start;
  justify-self: center;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.cf-hop-body { min-width: 0; }

.cf-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-3);
  margin-bottom: var(--s-1);
}

.cf-office {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-bright);
}

.cf-desk {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted-strong);
}

.cf-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--muted);
  margin: -2px 0 var(--s-1);
}

.cf-does {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--paper);
  margin: 0 0 var(--s-2);
  max-width: 68ch;
}

/* ---------- WHAT THE STEP CARRIES ---------- */
.cf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: stretch;
}

.cf-tag,
.cf-page {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-1);
  background: var(--ink-2);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--paper-dim);
  text-decoration: none;
  max-width: 100%;
}

.cf-tag-k {
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--muted);
  flex: none;
}

.cf-tag-v { color: var(--paper-dim); }

.cf-tag--gate { border-color: var(--line-strong); }
.cf-tag--hands .cf-tag-v { color: var(--paper-bright); }

.cf-page {
  margin-top: var(--s-1);
  border-style: dashed;
  color: var(--paper);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cf-page:hover,
.cf-page:focus-visible {
  color: var(--alert-bright);
  border-color: var(--line-red);
}

/* ---------- OFFICE CHIPS: the interlock you can click ---------- */
.cf-calls,
.cf-watch,
.cf-linkline,
.cf-group { min-width: 0; }

.cf-calls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.cf-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  line-height: 1.4;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--alert-deep);
  border-radius: var(--r-1);
  padding: 4px 8px 4px 7px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.cf-chip:hover,
.cf-chip:focus-visible {
  background: var(--alert-wash);
  border-left-color: var(--alert);
  color: var(--paper-bright);
}

.cf-chip:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

.cf-chip .cf-my {
  font-size: var(--fs-micro);
  margin: 0;
  color: var(--muted);
}

/* ---------- THE THREE STATES ---------- */
.cf-hop--may {
  border-left-color: var(--alert);
  background: linear-gradient(var(--alert-wash), var(--alert-wash)), var(--ink-1) var(--fibre);
}
.cf-hop--may .cf-seq {
  background: var(--alert);
  border-color: var(--alert-deep);
  color: var(--paper-bright);
}
.cf-hop--may .cf-tag--gate .cf-tag-v { color: var(--alert-bright); }

.cf-hop--hold {
  border-left-color: var(--line-strong);
  background: var(--ink-1);
}
.cf-hop--hold .cf-does { color: var(--paper-dim); }
.cf-hop--hold .cf-tag--gate { border-style: solid; }
.cf-hop--hold .cf-tag--gate .cf-tag-v { color: var(--muted-strong); }

/* nobody signed in: the sheet will not pretend to know */
.cf-hop--gate { border-left-style: dashed; }
.cf-hop--gate .cf-tag--gate .cf-tag-v { color: var(--muted); }

/* a branch leaves the rail and comes back to it */
.cf-hop--alt {
  margin-left: var(--s-4);
  border-left: 2px dashed var(--line-red);
  background: var(--ink-2);
}
.cf-hop--alt .cf-seq {
  background: transparent;
  border-style: dashed;
  color: var(--alert);
}
.cf-hop--alt .cf-does { font-size: var(--fs-label); }

/* ---------- THE CHAIN HEAD AND FOOT ---------- */
.cf-chain {
  margin-top: var(--s-5);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.cf-chain:last-of-type { border-bottom: none; }

.cf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-4);
  align-items: start;
  margin-bottom: var(--s-3);
}

.cf-code {
  grid-column: 1 / -1;
  display: inline-block;
  width: max-content;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--alert-bright);
  background: var(--alert-wash);
  border: 1px solid var(--line-red);
  border-radius: var(--r-1);
  padding: 2px 8px;
  margin-bottom: var(--s-1);
}

.cf-name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-flat);
  color: var(--paper-bright);
  margin: 0;
}

.cf-tally {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.cf-subject {
  grid-column: 1;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--muted-strong);
  margin: var(--s-1) 0 0;
}

.cf-watch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: var(--spine) solid var(--gold);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--folklore-wash);
  font-size: var(--fs-micro);
}

/* ---------- THE INTRO AND THE LIVE STRIP ---------- */
.cf-intro {
  max-width: var(--maxw-narrow);
  margin-bottom: var(--s-4);
}

.cf-note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted-strong);
  margin: 0 0 var(--s-3);
}

.cf-note .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--paper-dim);
}

.cf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
}

.cf-legend-item {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding: 3px 8px 3px 7px;
  border: 1px solid var(--line);
  border-left-width: var(--spine);
  border-radius: var(--r-1);
  color: var(--muted-strong);
  background: var(--ink-1);
}

/* the legend chips wear the same states they describe */
.cf-legend-item.cf-hop--may {
  border-left-color: var(--alert);
  background: var(--alert-wash);
  color: var(--paper-bright);
}
.cf-legend-item.cf-hop--hold { border-left-color: var(--line-strong); }
.cf-legend-item.cf-hop--gate { border-left-style: dashed; }

.cf-total {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--muted);
}

.cf-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--alert-deep);
  border-radius: var(--r-2);
  background: var(--ink-2);
}

.cf-live-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert);
  flex: none;
}

.cf-live-item {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted-strong);
}

.cf-live-item b {
  color: var(--paper-bright);
  font-weight: 500;
  margin-right: 4px;
}

.cf-live--quiet,
.cf-live--off {
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  color: var(--muted);
  border-left: var(--spine) solid var(--line-strong);
  padding-left: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
}

.cf-live--quiet a,
.cf-live--off a { color: var(--paper-dim); }

/* ---------- INSIDE A DIVISION RECORD (the archive modal) ---------- */
.cf-lead {
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 var(--s-3);
}

.cf-lead a.cf-here {
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
}

.cf-body { margin-bottom: var(--s-1); }

.cf-group + .cf-group { margin-top: var(--s-4); }

.cf-kind {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: var(--s-2);
}

.cf-kind::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-hair);
}

.cf-step-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-left: 2px solid var(--alert-deep);
  background: var(--ink-1);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--fs-label);
}

.cf-step-line + .cf-step-line,
.cf-linkline + .cf-linkline { margin-top: var(--s-1); }

.cf-step-line .cf-desk,
.cf-linkline .cf-desk { color: var(--muted-strong); }

.cf-seq-inline {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--alert);
  flex: none;
}

.cf-does-inline {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--paper);
  line-height: var(--lh-snug);
}

.cf-linkline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}

.cf-linkline .cf-tag-k { flex: none; min-width: 96px; }

.cf-step-line .cf-page { margin-top: 0; }

/* ---------- THE ROSTER ROW: a division's line in the route ---------- */
.acc-chain {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--alert-deep);
  border-radius: var(--r-2);
  background: var(--ink-2);
}

.acc-chain-k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert);
  margin-bottom: var(--s-1);
}

.acc-chain-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
}

.acc-chain-step {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--paper-dim);
  text-decoration: none;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-1);
  padding: 3px 7px;
  background: var(--ink-1);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.acc-chain-step b { color: var(--paper-bright); font-weight: 500; }

.acc-chain-step:hover,
.acc-chain-step:focus-visible {
  color: var(--alert-bright);
  border-color: var(--line-red);
}

.acc-chain-step:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

.acc-chain-steps--none {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted);
}

.acc-chain-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.acc-chain-x {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
  min-width: 108px;
}

/* the chips inside a roster row are smaller than the register's own */
.acc-chain .cf-chip { font-size: var(--fs-micro); padding: 3px 7px; }

/* ---------- NARROW ---------- */
@media (max-width: 640px) {
  /* the rail has to follow the narrower margin, not stay where the wide sheet put it */
  .cf-flow::before { left: 25px; }
  .cf-hop {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--s-2);
    padding: var(--s-3) var(--s-2) var(--s-3) var(--s-1);
  }
  .cf-seq { width: 24px; height: 24px; }
  .cf-hop--alt { margin-left: var(--s-1); }
  .cf-head { grid-template-columns: minmax(0, 1fr); }
  .cf-tally { grid-column: 1; grid-row: auto; text-align: left; margin-top: var(--s-1); }
  .cf-subject { grid-column: 1; }
  .cf-linkline .cf-tag-k,
  .acc-chain-x { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-page,
  .cf-chip,
  .acc-chain-step { transition: none; }
}