/**
 * Roadmap LED — component styles.
 * Reuses the design tokens defined in css/site.css (:root variables, header,
 * fonts, .czm-* generic modal, .ps-disclaimer/.ps-detail-row/.ps-step-sub).
 * Component look (chips, cards, timeline) intentionally matches the rest of
 * the LED Tools site.
 */

/* ── FILTERS ──────────────────────────────────────────────────────── */
.rl-filters{display:flex;flex-direction:column;gap:10px}
.rl-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rl-filter-label{font-family:var(--mono);font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;flex-shrink:0}
.rl-filter-hint{font-size:.7rem;color:var(--muted);font-style:italic}
.rl-chip-group{display:flex;flex-wrap:wrap;gap:8px}
.rl-chip{
  background:var(--surface);border:1px solid var(--border);color:var(--txt);
  padding:6px 14px;border-radius:99px;cursor:pointer;font-family:var(--sans);
  font-size:.78rem;font-weight:600;transition:all .18s;
}
.rl-chip:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.rl-chip.active{background:var(--accent);border-color:var(--accent);color:var(--white)}

/* ── LEGEND ───────────────────────────────────────────────────────── */
.rl-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.76rem;color:var(--muted)}
.rl-legend-item{display:flex;align-items:center;gap:7px}
.rl-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.rl-dot.released{background:var(--green)}
.rl-dot.planned{background:var(--accent2)}
.rl-dot.future{background:var(--accent)}

/* ── TIMELINE ─────────────────────────────────────────────────────── */
/* Vertical scroll is capped so the ruler (sticky, below) stays reachable
   and visible at all times instead of scrolling away with tall lane lists. */
.rl-timeline-scroll{overflow-x:auto;overflow-y:auto;max-height:min(72vh,720px);border:1px solid var(--border);border-radius:12px;background:var(--card)}
.rl-timeline-inner{position:relative;padding:0 0 18px}

.rl-ruler{position:sticky;top:0;z-index:6;background:var(--card);height:30px;border-bottom:1px solid var(--border);margin-bottom:6px;padding-top:10px}
.rl-ruler-label{position:absolute;top:16px;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--txt);white-space:nowrap}
.rl-ruler-label.sub{font-size:.56rem;font-weight:500;color:var(--muted);top:18px}

/* Full-height column gridlines, separate from the sticky ruler above so they
   scroll normally with the lanes instead of staying pinned at the top. */
.rl-grid-tick{position:absolute;top:0;bottom:0;border-left:1px dashed color-mix(in srgb,var(--border) 90%,transparent);width:0;pointer-events:none}
.rl-grid-tick.sub{border-left-style:dotted;opacity:.6}

/* Vertical line marking the current date, aligned on the same quarter grid
   as the cards; the page auto-scrolls to center this on load. */
.rl-today-marker{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--red);z-index:5;pointer-events:none}
.rl-today-label{
  position:absolute;top:-2px;left:6px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--white);
  background:var(--red);padding:2px 7px;border-radius:99px;
}

.rl-lane{border-top:1px solid var(--border);padding:14px 0 4px}
.rl-lane:first-of-type{border-top:none}
.rl-lane-title{
  font-size:.92rem;font-weight:700;color:var(--txt);padding:0 16px 8px;
  position:sticky;left:0;display:inline-block;background:var(--card);
}
.rl-lane-supplier{font-size:.74rem;font-weight:500;color:var(--muted)}

.rl-track-row{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.rl-track-label{font-family:var(--mono);font-size:.6rem;color:var(--teal);text-transform:uppercase;letter-spacing:.08em;padding:0 16px}
.rl-track{position:relative}

.rl-connector{
  position:absolute;top:70px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:1.1rem;pointer-events:none;
}

.rl-card{
  position:absolute;top:0;width:190px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--muted);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  cursor:pointer;transition:all .15s;box-shadow:0 2px 6px color-mix(in srgb,var(--night-blue) 20%,transparent);
}
.rl-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.rl-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-card.released{border-left-color:var(--green)}
.rl-card.planned{border-left-color:var(--accent2)}
.rl-card.future{border-left-color:var(--accent)}
.rl-card.unknown{border-left-color:var(--muted)}

.rl-card-status{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.rl-card-ref{font-weight:700;font-size:.88rem;color:var(--txt)}
.rl-card-lbl{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.rl-card-row{display:flex;align-items:baseline;gap:5px;font-size:.7rem}
.rl-card-val{color:var(--txt);font-weight:600}
.rl-card-val.gen{color:var(--muted);font-weight:500}
.rl-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.64rem}
.rl-card-meta span{display:flex;align-items:baseline;gap:5px}
.rl-card-val.cri{color:var(--accent);font-weight:700}
.rl-card-val.cct{color:var(--teal);font-weight:700}
.rl-card-row.perf{font-family:var(--mono);font-size:.78rem}
.rl-card-val.perf{color:var(--green);font-weight:700}
.rl-card-evo{font-size:.66rem;color:var(--muted);line-height:1.4;display:flex;gap:5px}
.rl-card-evo .rl-card-lbl{flex-shrink:0}
.rl-card-row.period{margin-top:auto}
.rl-card-val.period{color:var(--teal);font-weight:700;font-family:var(--mono);font-size:.66rem}

/* ── DETAIL MODAL (reuses the shared .czm-* generic dialog look) ─────── */
#rl-detail-modal{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--table-head) 92%,transparent);z-index:10000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#rl-detail-modal.czm-open{display:flex}
[data-theme="light"] #rl-detail-modal{background:color-mix(in srgb,var(--night-blue) 65%,transparent)}
.rl-detail-grid{display:flex;flex-direction:column;gap:2px}
.rl-detail-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:.8rem;padding:7px 2px;border-bottom:1px dashed color-mix(in srgb,var(--border) 80%,transparent)}
.rl-detail-row:last-child{border-bottom:none}
.rl-detail-lbl{color:var(--muted);font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.rl-detail-val{color:var(--accent);font-weight:700;text-align:right}
.rl-modal-notice{background:color-mix(in srgb,var(--accent2) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent);border-radius:8px;padding:10px 12px;font-size:.78rem;color:var(--txt);margin-bottom:12px}

/* ── FOOTER DISCLAIMER ────────────────────────────────────────────── */
.rl-disclaimer{font-size:.7rem;color:var(--muted);font-family:var(--mono);text-align:center;padding:4px 10px}

@media (max-width:720px){
  .rl-filter-row{align-items:flex-start}
}