/* =========================================================
   RiverSync DS v2 — TIMELINE layer (.rs-tl)
   Points-of-events-in-time. Vertical & horizontal, content
   branching to either side of the rail (or alternating),
   per-event semantic tones, icon markers, reference chips
   (alerts, work orders…) and dashed "pending" future events.
   ========================================================= */

/* ---------------------------------------------------------
   1 · Root + tone mapping (per-event: any element inside the
   timeline carrying [data-tone] remaps the tone vars)
   --------------------------------------------------------- */
.rs-tl{
  --tl:        var(--accent);
  --tl-soft:   var(--accent-soft);
  --tl-border: var(--accent-border);
  --tl-marker: 26px;
  --tl-timecol: 76px;
  display:flex; font-size:13px; color:var(--fg); font-family:var(--rs-font-sans);
}
.rs-tl-item[data-tone="success"], .rs-tl__ref[data-tone="success"]{--tl:var(--success); --tl-soft:var(--success-soft); --tl-border:var(--success-border);}
.rs-tl-item[data-tone="warning"], .rs-tl__ref[data-tone="warning"]{--tl:var(--warning); --tl-soft:var(--warning-soft); --tl-border:var(--warning-border);}
.rs-tl-item[data-tone="danger"], .rs-tl__ref[data-tone="danger"]{--tl:var(--danger); --tl-soft:var(--danger-soft); --tl-border:var(--danger-border);}
.rs-tl-item[data-tone="info"], .rs-tl__ref[data-tone="info"]{--tl:var(--info); --tl-soft:var(--info-soft); --tl-border:var(--info-border);}
.rs-tl-item[data-tone="neutral"], .rs-tl__ref[data-tone="neutral"]{--tl:var(--neutral); --tl-soft:var(--neutral-soft); --tl-border:var(--neutral-border);}

.rs-tl--sm{font-size:12px;}
.rs-tl[data-size="sm"]{--tl-marker:20px;}

/* ---------------------------------------------------------
   2 · Marker — plain tonal dot, or icon disc when the event
   carries an icon; pending events render hollow + dashed
   --------------------------------------------------------- */
.rs-tl__rail{display:flex; flex:none;}
.rs-tl__marker{position:relative; display:inline-flex; flex:none; z-index:1;}
.rs-tl__dot{width:var(--tl-marker); height:var(--tl-marker); box-sizing:border-box; flex:none;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--tl);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);}
.rs-tl__dot:not(.has-icon)::before{content:""; width:10px; height:10px; border-radius:50%;
  background:var(--tl); box-shadow:0 0 0 3px var(--tl-soft);}
.rs-tl__dot:not(.has-icon){background:var(--bg);}
.rs-tl--sm .rs-tl__dot:not(.has-icon)::before{width:8px; height:8px; box-shadow:0 0 0 2.5px var(--tl-soft);}
.rs-tl__dot.has-icon{background:var(--tl-soft); border:1px solid var(--tl-border);}
.rs-tl__dot.has-icon .rs-ic{width:13px; height:13px;}
.rs-tl--sm .rs-tl__dot.has-icon .rs-ic{width:11px; height:11px;}

.rs-tl__dot.is-pending{color:var(--fg3);}
.rs-tl__dot.is-pending:not(.has-icon)::before{background:var(--surface); box-shadow:none;
  box-sizing:border-box; border:1.5px dashed var(--border-strong);}
.rs-tl__dot.is-pending.has-icon{background:var(--surface); border-style:dashed; border-color:var(--border-strong);}

/* hover micro-interaction: marker lifts, tone ring expands (popover rides along) */
.rs-tl__marker:hover .rs-tl__dot{transform:scale(1.08);}
.rs-tl__marker:hover .rs-tl__dot.has-icon:not(.is-pending){box-shadow:0 0 0 4px var(--tl-soft);}

/* ---------------------------------------------------------
   3 · Connectors (dashed when leading into a pending event)
   --------------------------------------------------------- */
.rs-tl__connector{flex:1 1 auto; border-radius:1px; background:var(--border-strong);}
.rs-tl--v .rs-tl__connector{width:2px; min-height:16px; margin:-1px 0;}
.rs-tl--v .rs-tl__connector.is-pending{background:repeating-linear-gradient(to bottom, var(--border-strong) 0 5px, transparent 5px 9px);}
.rs-tl--h .rs-tl__connector{height:2px; min-width:14px; margin:0 -1px;}
.rs-tl--h .rs-tl__connector.is-pending{background:repeating-linear-gradient(to right, var(--border-strong) 0 5px, transparent 5px 9px);}

/* ---------------------------------------------------------
   4 · Vertical layout — content branches right (default),
   left, or alternates; optional opposite-side time column
   --------------------------------------------------------- */
.rs-tl--v{flex-direction:column;}
.rs-tl--v .rs-tl-item{display:grid; column-gap:14px;}
.rs-tl--v .rs-tl-item > *{grid-row:1;}
.rs-tl--v .rs-tl__rail{flex-direction:column; align-items:center; width:var(--tl-marker);}
.rs-tl--v .rs-tl__content{padding:calc(var(--tl-marker)/2 - 10px) 0 24px;}
.rs-tl--v .rs-tl-item:last-child .rs-tl__content{padding-bottom:0;}

.rs-tl--v.rs-tl--right .rs-tl-item{grid-template-columns:auto minmax(0,1fr);}
.rs-tl--v.rs-tl--right .rs-tl__rail{grid-column:1;}
.rs-tl--v.rs-tl--right .rs-tl__content{grid-column:2;}
.rs-tl--v.rs-tl--right.rs-tl--timeop .rs-tl-item{grid-template-columns:var(--tl-timecol) auto minmax(0,1fr);}
.rs-tl--v.rs-tl--right.rs-tl--timeop .rs-tl__rail{grid-column:2;}
.rs-tl--v.rs-tl--right.rs-tl--timeop .rs-tl__content{grid-column:3;}
.rs-tl--v.rs-tl--right .rs-tl__timecell{grid-column:1; text-align:right;}

.rs-tl--v.rs-tl--left .rs-tl-item{grid-template-columns:minmax(0,1fr) auto;}
.rs-tl--v.rs-tl--left .rs-tl__rail{grid-column:2;}
.rs-tl--v.rs-tl--left .rs-tl__content{grid-column:1;}
.rs-tl--v.rs-tl--left.rs-tl--timeop .rs-tl-item{grid-template-columns:minmax(0,1fr) auto var(--tl-timecol);}
.rs-tl--v.rs-tl--left .rs-tl__timecell{grid-column:3; text-align:left;}

.rs-tl--v.rs-tl--alt .rs-tl-item{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
.rs-tl--v.rs-tl--alt .rs-tl__rail{grid-column:2;}
.rs-tl--v.rs-tl--alt .rs-tl__content{grid-column:3;}
.rs-tl--v.rs-tl--alt .rs-tl-item.is-start .rs-tl__content{grid-column:1;}
.rs-tl--v.rs-tl--alt .rs-tl__timecell{grid-column:1; text-align:right;}
.rs-tl--v.rs-tl--alt .rs-tl-item.is-start .rs-tl__timecell{grid-column:3; text-align:left;}

/* start-side content mirrors: text + chips align toward the rail */
.rs-tl--v .rs-tl-item.is-start .rs-tl__content{align-items:flex-end; text-align:right;}
.rs-tl--v .rs-tl-item.is-start .rs-tl__refs{justify-content:flex-end;}

/* ---------------------------------------------------------
   5 · Horizontal layout — content below (default), above,
   or alternating; rails align on one continuous line
   --------------------------------------------------------- */
.rs-tl--h{flex-direction:row; align-items:stretch;}
.rs-tl--h .rs-tl-item{flex:1 1 0; min-width:0; display:grid;}
.rs-tl--h .rs-tl-item > *{grid-column:1;}
.rs-tl--h .rs-tl__rail{flex-direction:row; align-items:center; height:var(--tl-marker);}
.rs-tl--h .rs-tl-item:last-child .rs-tl__rail{align-self:start;}
.rs-tl--h .rs-tl__content{align-self:start; padding:10px 18px 0 0;}

.rs-tl--h.rs-tl--bottom .rs-tl-item{grid-template-rows:auto 1fr;}
.rs-tl--h.rs-tl--bottom .rs-tl__rail{grid-row:1;}
.rs-tl--h.rs-tl--bottom .rs-tl__content{grid-row:2;}

.rs-tl--h.rs-tl--top .rs-tl-item{grid-template-rows:1fr auto;}
.rs-tl--h.rs-tl--top .rs-tl__rail{grid-row:2;}
.rs-tl--h.rs-tl--top .rs-tl__content{grid-row:1;}

.rs-tl--h.rs-tl--alt .rs-tl-item{grid-template-rows:1fr auto 1fr;}
.rs-tl--h.rs-tl--alt .rs-tl__rail{grid-row:2;}
.rs-tl--h.rs-tl--alt .rs-tl__content{grid-row:3;}
.rs-tl--h.rs-tl--alt .rs-tl-item.is-start .rs-tl__content{grid-row:1;}

/* start-side (above-the-line) content hugs the rail from above */
.rs-tl--h .rs-tl-item.is-start .rs-tl__content{align-self:end; padding:0 18px 10px 0;}

/* ---------------------------------------------------------
   6 · Event content
   --------------------------------------------------------- */
.rs-tl__content{display:flex; flex-direction:column; align-items:flex-start; min-width:0;}
.rs-tl__time, .rs-tl__timecell{font-family:var(--rs-font-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fg3); white-space:nowrap;}
.rs-tl__time{margin-bottom:3px;}
.rs-tl__timecell{padding-top:calc(var(--tl-marker)/2 - 8px);}
.rs-tl__title{font-size:13px; font-weight:600; color:var(--fg); line-height:1.4;}
.rs-tl--sm .rs-tl__title{font-size:12.5px;}
.rs-tl__desc{font-size:12px; color:var(--fg2); line-height:1.5; margin-top:2px; text-wrap:pretty;}
.rs-tl--sm .rs-tl__desc{font-size:11.5px;}
.rs-tl-item.is-pending .rs-tl__title{color:var(--fg2); font-weight:500;}
.rs-tl__body{margin-top:8px; max-width:100%;}

/* ---------------------------------------------------------
   7 · Reference chips — link an event to an alert, work
   order, device… Chip can carry its own [data-tone].
   --------------------------------------------------------- */
.rs-tl__refs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.rs-tl__ref{display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px 2.5px 7px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border);
  font-family:var(--rs-font-mono); font-size:10.5px; line-height:1.5; color:var(--fg2);
  white-space:nowrap; text-decoration:none;
  transition:border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);}
.rs-tl__ref .rs-ic{width:11px; height:11px; color:var(--tl); flex:none;}
button.rs-tl__ref{font-family:var(--rs-font-mono); cursor:pointer;}
a.rs-tl__ref{cursor:pointer;}
a.rs-tl__ref:hover, button.rs-tl__ref:hover,
a.rs-tl__ref:focus-visible, button.rs-tl__ref:focus-visible{
  border-color:var(--tl-border); background:var(--tl-soft); color:var(--fg);}
a.rs-tl__ref:focus-visible, button.rs-tl__ref:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring);}

/* ---------------------------------------------------------
   8 · Card variant — event content on a surface card
   --------------------------------------------------------- */
.rs-tl--card .rs-tl__content{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.rs-tl--v.rs-tl--card .rs-tl__content{padding:11px 14px; margin-bottom:16px;}
.rs-tl--v.rs-tl--card .rs-tl-item:last-child .rs-tl__content{margin-bottom:0;}
.rs-tl--h.rs-tl--card .rs-tl__content{padding:11px 13px; margin:10px 16px 0 0;}
.rs-tl--h.rs-tl--card .rs-tl-item.is-start .rs-tl__content{margin:0 16px 10px 0; padding:11px 13px;}

/* ---------------------------------------------------------
   9 · Hover popover — event context card anchored to the
   marker, opening toward the content side
   --------------------------------------------------------- */
.rs-tl__pop{position:absolute; z-index:70; min-width:188px; max-width:236px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); pointer-events:none; opacity:0; text-align:left; cursor:default;
  transition:opacity .16s var(--ease), transform .16s var(--ease);}
.rs-tl__pop::before{content:""; position:absolute; width:8px; height:8px;
  background:var(--surface); transform:rotate(45deg);}
.rs-tl__marker:hover .rs-tl__pop{opacity:1;}

/* vertical: beside the marker (content side) */
.rs-tl--v .rs-tl__pop{left:calc(100% + 12px); top:50%; transform-origin:left center;
  transform:translate(5px, -50%) scale(.96);}
.rs-tl--v .rs-tl__pop::before{left:-4.5px; top:50%; margin-top:-4px;
  border-left:1px solid var(--border); border-bottom:1px solid var(--border);}
.rs-tl--v .rs-tl-item.is-start .rs-tl__pop{left:auto; right:calc(100% + 12px);
  transform-origin:right center; transform:translate(-5px, -50%) scale(.96);}
.rs-tl--v .rs-tl-item.is-start .rs-tl__pop::before{left:auto; right:-4.5px;
  border-left:none; border-bottom:none; border-right:1px solid var(--border); border-top:1px solid var(--border);}
.rs-tl--v .rs-tl__marker:hover .rs-tl__pop{transform:translate(0, -50%) scale(1);}

/* horizontal: above/below the marker (content side) */
.rs-tl--h .rs-tl__pop{top:calc(100% + 11px); left:50%; transform-origin:top center;
  transform:translate(-50%, 5px) scale(.96);}
.rs-tl--h .rs-tl__pop::before{top:-4.5px; left:50%; margin-left:-4px;
  border-left:1px solid var(--border); border-top:1px solid var(--border);}
.rs-tl--h .rs-tl-item.is-start .rs-tl__pop{top:auto; bottom:calc(100% + 11px);
  transform-origin:bottom center; transform:translate(-50%, -5px) scale(.96);}
.rs-tl--h .rs-tl-item.is-start .rs-tl__pop::before{top:auto; bottom:-4.5px;
  border-left:none; border-top:none; border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
.rs-tl--h .rs-tl__marker:hover .rs-tl__pop{transform:translate(-50%, 0) scale(1);}

.rs-tl__pop-status{display:flex; align-items:center; gap:6px; margin-bottom:4px;
  font-family:var(--rs-font-mono); font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tl);}
.rs-tl__pop-status::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--tl); flex:none;}
.rs-tl-item.is-pending .rs-tl__pop-status{color:var(--fg3);}
.rs-tl-item.is-pending .rs-tl__pop-status::before{background:var(--fg3);}
.rs-tl__pop-title{display:block; font-size:12.5px; font-weight:600; color:var(--fg); line-height:1.35;}
.rs-tl__pop-desc{display:block; font-size:11.5px; color:var(--fg2); line-height:1.5; margin-top:3px; text-wrap:pretty;}
.rs-tl__pop-meta{display:block; margin-top:7px; padding-top:7px; border-top:1px solid var(--border);
  font-size:11px; color:var(--fg3);}

@media (prefers-reduced-motion: reduce){
  .rs-tl__ref, .rs-tl__dot, .rs-tl__pop{transition:none;}
  .rs-tl__marker:hover .rs-tl__dot{transform:none;}
}