/* ── Urban Makers — timeline module styles ──────────────────────────────────
   Shared by projects.html (editable) and portal.html (read-only).
   Markup is produced by /timeline.js (window.UMTimeline). All classes tl-*.
   Kind colours are set per element via the tl-k-<kind> class → --tlc token.
   Palette is colourblind-validated against the paper background; every kind
   also carries a distinct node shape so colour is never the only encoding. */

/* Fallback for unknown kinds (must precede the tl-k-* rules so those win). */
.tl-row, .tl-plan-row { --tlc:var(--cat-tool); --tlc-tint:rgba(138,133,116,.13); }

.tl-k-process   { --tlc:var(--cat-cli); --tlc-tint:rgba(46,111,184,.11); }
.tl-k-milestone { --tlc:var(--cat-exe); --tlc-tint:rgba(47,125,79,.11); }
.tl-k-buffer    { --tlc:var(--cat-tool); --tlc-tint:rgba(138,133,116,.13); }
.tl-k-meeting   { --tlc:var(--cat-fin); --tlc-tint:rgba(180,83,9,.10); }
.tl-k-decision  { --tlc:var(--cat-rep); --tlc-tint:rgba(160,53,105,.10); }
/* Public holidays are the one RED thing on the programme — office-wide, fixed,
   nobody's task. The round node is unique to them too, so the red is never the
   only signal. */
.tl-k-holiday   { --tlc:var(--um-danger); --tlc-tint:rgba(179,67,43,.10); }

/* ── Agenda (mobile-first date-rail view) ── */
.tl-startbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:10px 12px;background:var(--um-paper);border:1px solid var(--um-line);border-radius:10px}
.tl-startbar .tl-startbar-d0{color:var(--ink-soft);font-weight:600}
/* Each field's Clear is the canon .btn-sm (shared-ui.css), beside its 28 date field. */
.tl-startbar-hint{font-size:11px;color:var(--ink-soft);flex:1 1 140px;min-width:0}
.tl-sb-field{display:flex;align-items:center;gap:8px}
/* On a phone each date takes a row: its label above, the field across, Clear beside it, so a date never wraps or
   runs past the bar (owner's screenshot, 2026-10-01: "08/17/202", Clear over the edge). */
@media (max-width:600px){
  .tl-startbar{flex-direction:column;align-items:stretch}
  .tl-sb-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  .tl-sb-field>.um-label{grid-column:1/-1}
  .tl-sb-field>input{width:100%;min-width:0}
  .tl-startbar-hint{flex:none}
}
/* Summary line under the start bar: total weeks to the projected handover. */
.tl-summary{margin:-6px 0 14px;padding:0 2px;font-size:12.5px;color:var(--ink-soft)}
.tl-summary .tl-sum-n{font-weight:700;color:var(--um-ink)}
.tl-summary .tl-sum-dim{color:var(--ink-soft)}
/* Against the target: the canon .um-pill (ok / bad), drawn by projects.html (a 11/700 badge of its own until 2026-10-01). */
.tl-agenda{max-width:1240px}
.tl-month{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);padding:18px 0 6px 2px;
}
/* Faint "which week of the project are we in" marker (Week 1 = the start week). */
.tl-week{display:flex;align-items:center;gap:9px;padding:3px 0 3px 58px;margin:2px 0}
.tl-week span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.tl-week::after{content:"";flex:1;height:1px;background:var(--um-line)}
.tl-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;position:relative}
.tl-rail{position:relative;text-align:center;padding-top:14px}
.tl-rail::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:0;
  border-left:2px dotted var(--um-line);transform:translateX(-1px);
}
.tl-row:last-child .tl-rail::before{bottom:auto;height:22px}
.tl-date{position:relative;background:var(--tl-surface,#fff);display:inline-block;padding:1px 2px 2px;min-width:36px}
.tl-date .tl-d{font-size:16px;font-weight:650;line-height:1.1;color:var(--um-ink)}
.tl-date .tl-w{font-size:9.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.tl-node{
  display:block;position:relative;width:12px;height:12px;margin:4px auto 0;
  background:var(--tlc);border-radius:50%;
}
.tl-k-milestone .tl-node{border-radius:2px;transform:rotate(45deg)}
.tl-k-meeting  .tl-node{border-radius:3px}
.tl-k-decision .tl-node{background:var(--tl-surface,#fff);border:3px solid var(--tlc);width:8px;height:8px}
.tl-k-decision.tl-done .tl-node{background:var(--tlc)}
.tl-k-buffer   .tl-node{
  background:repeating-linear-gradient(45deg,var(--tlc) 0 2px,transparent 2px 4.5px);
  border:1.5px solid var(--tlc);
}

.tl-card{
  background:#fff;border:1px solid var(--um-line);border-left:3px solid var(--tlc);
  border-radius:10px;margin:6px 0;padding:11px 13px;cursor:pointer;
  box-shadow:0 1px 2px rgba(30,28,20,.05);
}
.tl-card:focus-visible{outline:2px solid var(--um-sage-dark,var(--um-ink));outline-offset:1px}
/* Done fades hard, and comes back under the pointer or a finger (owner, 2026-09-13). */
.tl-done .tl-card,.tl-card.tl-done{opacity:.42;transition:opacity .12s}
.tl-done .tl-card:hover,.tl-card.tl-done:hover,.tl-done .tl-card:active,.tl-card.tl-done:active,.tl-done .tl-card:focus-within,.tl-card.tl-done:focus-within{opacity:1}
/* ── Swim lanes: concurrent (overlapping) works laid out side by side ── */
.tl-lanes{display:grid;grid-template-columns:repeat(var(--lanes,2),minmax(0,1fr));gap:0 10px;align-content:start;min-width:0}
.tl-lanes-hd{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:2px 0 0 2px}
.tl-lane{display:flex;flex-direction:column;min-width:0}
.tl-node-x{background:conic-gradient(from 45deg,var(--cat-cli) 0 25%,var(--cat-exe) 0 50%,var(--cat-fin) 0 75%,var(--cat-rep) 0);border-radius:50%}
/* ── Hover-to-insert strip between items ── */
.tl-insert{position:relative;height:11px;margin:-4px 0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tl-insert-line{position:absolute;left:56px;right:0;top:50%;height:2px;background:var(--um-sage-dark,var(--um-ink));opacity:0;border-radius:2px;transition:opacity .12s}
/* Its button is the canon .btn-sm, shown over the line on hover or keyboard focus; hidden, it lets taps through to
   the strip and the cards beside it. */
.tl-insert-btn{position:relative;z-index:1;opacity:0;pointer-events:none;transition:opacity .12s}
.tl-insert:hover .tl-insert-line,.tl-insert:focus-within .tl-insert-line{opacity:.5}
.tl-insert:hover .tl-insert-btn,.tl-insert:focus-within .tl-insert-btn{opacity:1;pointer-events:auto}
@media(max-width:1040px){.tl-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tl-lanes{grid-template-columns:1fr;gap:0}}
.tl-title{font-size:14px;font-weight:640;display:flex;gap:8px;align-items:baseline;justify-content:space-between;color:var(--um-ink)}
.tl-title .tl-chev{flex:none;font-size:10px;color:var(--ink-soft);transition:transform .15s}
.tl-card[aria-expanded="true"] .tl-chev{transform:rotate(180deg)}
.tl-when{font-size:12px;color:var(--ink-soft);margin-top:3px}
.tl-off{color:var(--ink-soft);font-weight:600}
.tl-dur{color:var(--ink-soft);font-weight:600}
.tl-daynum{display:inline-block;font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--um-paper-mid);border:1px solid var(--um-line);border-radius:999px;padding:1px 7px;letter-spacing:.02em;vertical-align:1px}
.tl-chips{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:8px;align-items:center;justify-content:space-between}
.tl-chipset{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}   /* centred: the chips keep their own height beside the 28-px "+ Assign scope" link */
/* The labels are the canon (.um-tag, .um-tag.kind, .um-pill; DESIGN-GUIDE §3.4) since 2026-09-24. */
/* An unscoped item's "+ Assign scope" is the canon text action (.btn-link, shared-ui.css,
   drawn by timeline.js): it opens the scope menu where it stands. */
/* ── Public holiday markers (read-only, office-wide) ── */
.tl-card-hol{
  cursor:default;background:rgba(179,67,43,.045);border-color:rgba(179,67,43,.28);
  border-left-width:3px;box-shadow:none;padding:9px 13px;
}
.tl-card-hol .tl-title{font-size:13.5px;color:var(--um-danger)}
.tl-row-hol .tl-node{width:9px;height:9px;background:var(--tl-surface,#fff);border:3px solid var(--tlc)}
/* Post-handover items sit beyond the finish line — dashed accent + soft tint so
   they read as "on the programme, but not counted towards handover". */
.tl-card.tl-post{border-left-style:dashed;background:var(--cat-rep-tint)}
.tl-detail{display:none;border-top:1px dashed var(--um-line);margin-top:9px;padding-top:9px}
.tl-card[aria-expanded="true"] .tl-detail{display:block}
.tl-detail dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.5px}
.tl-detail dt{color:var(--ink-soft);font-weight:600}
.tl-detail dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
/* A card's actions are the canon .btn-sm (shared-ui.css); this is only the row they sit in. */
.tl-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* ── Card actions as icons ──
   On a host with an editor, the card opens on tap and these sit on its face.
   Always visible on touch (there is no hover to reveal them); on a mouse they
   fade up so a long programme reads as titles and dates first. */
.tl-card-live{cursor:pointer}
/* Each is the canon .icon-btn (shared-ui.css) with a stroke icon; this is only the row they sit in. */
.tl-icons{flex:none;display:flex;gap:2px;margin-left:auto}
@media(hover:hover){
  .tl-icons{opacity:.45;transition:opacity .12s}
  .tl-card:hover .tl-icons,.tl-card:focus-within .tl-icons{opacity:1}
}
.tl-today{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;align-items:center;margin:2px 0}
.tl-today .tl-pin{text-align:center}
.tl-today .tl-pin i{display:block;width:8px;height:8px;border-radius:50%;background:var(--um-danger);margin:0 auto}
.tl-today .tl-bar{display:flex;align-items:center;gap:8px;color:var(--um-danger);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tl-today .tl-bar::after{content:"";flex:1;border-top:2px solid var(--um-danger);opacity:.45}
.tl-empty{padding:36px 16px;text-align:center;color:var(--ink-soft);background:#fff;border:1px solid var(--um-line);border-radius:10px;font-size:13.5px}

/* ── Banners (shared by both hosts) ── */
.tl-nudge{ /* decision-kind colours — keep aligned with .tl-k-decision above */
  margin-bottom:12px;padding:11px 14px;background:rgba(160,53,105,.08);
  border-left:3px solid var(--cat-rep);border-radius:6px;
  font-size:13px;font-weight:600;color:var(--cat-rep);line-height:1.5;
}
.tl-warn{
  margin-bottom:12px;padding:11px 14px;background:var(--act-tint);
  border-left:3px solid var(--um-warn);border-radius:6px;
  font-size:13px;color:var(--cat-fin);line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
/* The banner's buttons are the canon .btn-sm (shared-ui.css, on the markup projects.html writes). */
/* Coverage note: quote trades not yet on the programme — informative, not a fault. */
.tl-warn.tl-cover{ border-left-color:var(--cat-fin);background:var(--um-paper-mid);color:var(--cat-fin); }

/* ── Legend ── */
.tl-legend{display:flex;flex-wrap:wrap;gap:12px 18px;padding:10px 2px 2px;font-size:12px;color:var(--ink-soft)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.tl-legend .tl-node{margin:0;width:10px;height:10px}
.tl-legend .tl-k-milestone .tl-node{margin:0 2px}   /* turned 45°, the diamond is 14 px across: kept inside its label */
.tl-k-decision .tl-node.tl-lg-node{width:7px;height:7px;border-width:2.5px}

/* ── Plan view (desktop bars by scope) ── */
.tl-plan{overflow:auto;max-height:min(80vh,860px);background:#fff;border:1px solid var(--um-line);border-radius:10px;-webkit-overflow-scrolling:touch}
.tl-plan-in{position:relative;min-width:100%}
/* Pinned while the chart scrolls under it; z above the sticky-left labels so
   the corner cell owns the crossing. */
.tl-plan-head{display:flex;flex-direction:column;border-bottom:1px solid var(--um-line);position:sticky;top:0;z-index:6;background:var(--um-paper)}
.tl-plan-head .tl-plan-gutter{z-index:7}
.tl-plan-hrow{display:flex}
.tl-plan-mo{
  flex:none;box-sizing:border-box;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 0 6px 8px;border-left:1px solid var(--um-line);overflow:hidden;white-space:nowrap;
  background:var(--um-paper);
}
.tl-plan-wk{
  flex:none;box-sizing:border-box;font-size:9px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-soft);padding:2px 0 3px 6px;border-left:1px solid var(--um-line);border-top:1px solid var(--um-line);
  overflow:hidden;white-space:nowrap;background:var(--um-paper);
}
.tl-plan-gutter{border-left:none;position:sticky;left:0;background:var(--um-paper)}
.tl-plan-wk.tl-plan-gutter{background:var(--um-paper);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.tl-plan-fill{flex:1;border-left:1px solid var(--um-line)}
.tl-plan-body{position:relative}
.tl-plan-shade{position:absolute;top:0;bottom:0;background:rgba(30,28,20,.035);pointer-events:none}
.tl-plan-holiday{position:absolute;top:0;bottom:0;background:rgba(179,67,43,.12);border-left:1px dashed rgba(179,67,43,.35)}
/* Festival periods: soft context band through the whole chart, never a stop. */
.tl-plan-festband{position:absolute;top:0;bottom:0;background:rgba(180,83,9,.055);pointer-events:none}
.tl-plan-todayline{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--um-danger);opacity:.55;pointer-events:none;z-index:1}
.tl-plan-scope{
  position:sticky;left:0;z-index:2;display:inline-block;box-sizing:border-box;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  background:#fff;padding:10px 10px 2px 8px;border-right:1px solid var(--um-line);
}
.tl-plan-row{position:relative;height:30px}
.tl-wk-rng{font-weight:600;opacity:.75;letter-spacing:0}
/* Pinned context rows at the very bottom of the gantt. */
.tl-plan-hol-row{height:52px}
.tl-plan-hol-row .tl-plan-label{color:var(--um-danger);font-weight:700;height:52px}
.tl-plan-holmark{position:absolute;top:7px;width:10px;height:10px;border-radius:50%;background:var(--um-danger)}
.tl-plan-holname{position:absolute;transform:translateX(-50%);font-size:9px;font-weight:600;color:var(--um-danger);
  white-space:nowrap;background:var(--tl-surface,#fff);padding:0 4px;border-radius:4px;max-width:150px;
  overflow:hidden;text-overflow:ellipsis}
.tl-plan-fest-row .tl-plan-label{color:var(--cat-fin);font-weight:700}
.tl-plan-festbar{position:absolute;top:6px;height:16px;border-radius:8px;background:rgba(180,83,9,.14);
  border:1px dashed var(--cat-fin);color:var(--cat-fin);font:600 10px/15px 'Segoe UI',system-ui,sans-serif;
  padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
/* ── Gantt dependency lines (gantt only — tried on agenda cards, too noisy) ── */
.tl-plan-body .tl-links{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1}
.tl-link{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:2 4;stroke-linecap:round;
  opacity:.35;transition:opacity .14s,stroke-width .14s}
.tl-links-dim .tl-link{opacity:.12}
.tl-link.tl-link-hot{opacity:.95;stroke-width:2;stroke:var(--um-sage-dark,var(--um-ink))}
/* ── Resize by pulling a bar's ends ── */
.tl-plan-bar.tl-editable.tl-resize-hint{cursor:ew-resize}
/* ── Right-click dependency menu + crosshair link mode ──
   The menu is the canon .um-menu (shared-ui.css: head, items, the .two items' sub-line);
   .tl-ctx only places it: pinned where the right-click landed, wide enough for its sub-lines. */
.tl-ctx{position:fixed;z-index:9600;min-width:240px}
.tl-ctx-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.tl-plan-body.tl-linking,.tl-plan-body.tl-linking .tl-plan-bar,.tl-plan-body.tl-linking .tl-plan-mark{cursor:crosshair}
.tl-plan-label{
  position:sticky;left:0;z-index:2;display:inline-block;box-sizing:border-box;
  font-size:11.5px;color:var(--ink-soft);background:#fff;
  padding:6px 8px;border-right:1px solid var(--um-line);height:30px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;
}
.tl-plan-bar{
  position:absolute;top:6px;height:16px;border-radius:4px;background:var(--tlc);
  cursor:pointer;min-width:6px;
}
.tl-plan-bar.tl-editable:focus-visible{outline:2px solid var(--um-sage-dark,var(--um-ink));outline-offset:1px}
.tl-plan-bar .tl-plan-prog{position:absolute;inset:0;width:var(--prog,0%);background:rgba(0,0,0,.22);border-radius:4px 0 0 4px}
/* Rest days punch visible gaps into a bar (same hatch language as the range
   calendar's deselected days): work pauses, the item keeps its span. */
.tl-plan-bar .tl-plan-gap{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(135deg,#fff 0 3px,var(--um-paper-mid) 3px 6px);
}
.tl-k-buffer .tl-plan-bar{
  background:repeating-linear-gradient(45deg,var(--tlc) 0 3px,transparent 3px 7px);
  border:1px solid var(--tlc);
}
.tl-plan-mark{
  position:absolute;top:8px;width:12px;height:12px;background:var(--tlc);cursor:pointer;border-radius:50%;
}
.tl-k-milestone .tl-plan-mark{transform:rotate(45deg);border-radius:0}   /* a chart mark you drag: on the radius scale (0 / 4 / 50%) */
.tl-k-meeting  .tl-plan-mark{border-radius:var(--um-radius-sm,4px)}
.tl-k-decision .tl-plan-mark{background:#fff;border:3px solid var(--tlc);width:8px;height:8px}
.tl-done .tl-plan-bar,.tl-done .tl-plan-mark{opacity:.4;transition:opacity .12s}
.tl-done .tl-plan-bar:hover,.tl-done .tl-plan-mark:hover,.tl-done .tl-plan-bar:active,.tl-done .tl-plan-mark:active{opacity:1}
/* ── Drag a bar to reschedule ── */
.tl-plan-bar.tl-editable,.tl-plan-mark.tl-editable{cursor:grab;touch-action:pan-y}
.tl-plan-dragging{cursor:grabbing}
.tl-plan-bar.tl-dragging,.tl-plan-mark.tl-dragging{
  cursor:grabbing;z-index:3;opacity:.92;box-shadow:0 2px 8px rgba(30,28,20,.28);
}
/* The live date sits above the bar being dragged, so the drop lands where the
   label says — no counting columns in the header. */
.tl-plan-drag-lbl{
  position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:700;white-space:nowrap;color:#fff;background:var(--um-ink);
  padding:2px 8px;border-radius:999px;pointer-events:none;
}
/* Post-handover items: outlined rather than solid, so they read as beyond the
   counted programme in the Gantt view too. */
.tl-plan-row.tl-post .tl-plan-bar{background:rgba(90,82,150,.16);border:1px dashed var(--cat-rep)}
.tl-plan-row.tl-post .tl-plan-mark{background:var(--cat-rep-tint);border:2px dashed var(--cat-rep)}

@media (max-width:768px){
  .tl-row{grid-template-columns:48px minmax(0,1fr);gap:0 10px}
  .tl-today{grid-template-columns:48px minmax(0,1fr);gap:0 10px}
}
/* On a phone the gantt's own pane takes 60% of the screen, not 80%: a swipe above or below it still moves the page. */
@media (max-width:600px){.tl-plan{max-height:60vh}}

/* ── Attachments on a card (📎 strip): thumbs for photos, tiles for video/PDF.
      Client surfaces pass signed URLs; staff cards carry only the 📎 count. ── */
.tl-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tl-file-thumb{display:block;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--um-line);flex:0 0 auto}
.tl-file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tl-file-tile{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:5px 9px;border:1px solid var(--um-line);border-radius:7px;text-decoration:none;color:inherit;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-file-tile:hover,.tl-file-thumb:hover{border-color:var(--um-sage-dark)}

/* ── Agenda | Gantt toggle ──
   The master's .seg (shared-ui.css) on every timeline since 2026-09-24: the project page,
   the client portal and the timeline link. The .view-toggle / .view-btn rules are gone. */