/* ============================================================
   editorial-timeline.css
   Editorial pass on the Timeline tab (Updates → History).
   - Drops white card backgrounds + colored left borders.
   - Hairline rows on the linen surface.
   - Type tag stays as small caps; ALL hue-coding moves to quiet
     status tones (no red, ever).
   - Fraunces titles + DM Sans 300 body + Fraunces small-caps date.
   ============================================================ */

/* Scope to the Timeline tab pane only */
#tab-timeline {
  background: var(--linen, #F7F5F0);
}

/* ----- Month label — Fraunces small caps, no hairline ----- */
/* Indented past the rail (rail sits at x=16) so the line never crosses
   through "APRIL 2026" text. Matches .tl-item's 32px content gutter so
   the month label and card titles share the same left edge.            */
#tab-timeline .tl-month {
  font-family: var(--serif);
  font-size: var(--type-meta);
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 60;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-5, #6E6962);
  /* Tightened from 28px 0 14px so the first item rides closer to the month
     label without losing the section break. */
  margin: 20px 0 8px;
  padding-left: 32px !important;            /* clear the rail at x=16 + gutter */
  display: block;                           /* was flex+::after — drop the trailing hairline */
  border-top: 0 !important;
  /* Belt-and-suspenders: also sit above the rail in z-order, with a
     linen background that masks any 1px line peeking through the
     left padding behind the text baseline.                            */
  position: relative;
  z-index: 2;
  background: var(--linen, #F7F5F0);
}
#tab-timeline .tl-month::after,
#tab-timeline .tl-month::before {
  content: none !important;
  display: none !important;
}

/* Drop any structural border above timeline content (between tabs and first month) */
#tab-timeline,
#tab-timeline .timeline-section,
#tab-timeline .timeline-section > * {
  border-top: 0 !important;
}

/* ----- Section + group: remove all card chrome ----- */
#tab-timeline .timeline-section {
  margin-top: 0;
}
#tab-timeline .tl-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Padding lives on .tl-item now (it owns the absolute-positioned dot).
     Keep the card itself flush so its content starts at the item's
     padding-top and stays visually aligned with the dot. */
  padding: 0 !important;
  border-bottom: 1px solid var(--ink-1, #E6E1D6) !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease-out;
}
#tab-timeline .tl-card:last-child {
  border-bottom: 0 !important;
}
#tab-timeline .tl-card[onclick]:hover {
  background: transparent !important;
  border-color: var(--ink-1, #E6E1D6) !important;
  box-shadow: none !important;
  opacity: 0.78;
}

/* ----- Timeline rail — continuous vertical line + place markers -----
   Strategy: hide the per-item rail divs the JS still emits, and draw the
   rail ourselves with a single ::before on each month section. Each item
   gets a ::before dot positioned absolutely on top of that line. This
   guarantees a single unbroken rail per month with reliable dot placement,
   regardless of card height or flex stretching quirks (iOS Safari).

   Geometry:
     RAIL_X     = 16px from the left of .timeline-section
     ITEM_PAD_L = 32px (room for the rail + dot + breathing room)
     DOT_SIZE   = 9px
     DOT_TOP    = 24px (vertically aligns with the type-tag row)
*/

/* Hide the per-item rail divs so they don't fight the new rail */
#tab-timeline .tl-line-col,
#tab-timeline .tl-connector,
#tab-timeline .tl-dot {
  display: none !important;
}

/* Each month section becomes the rail container */
#tab-timeline .timeline-section {
  position: relative;
}
#tab-timeline .timeline-section::before {
  content: "";
  position: absolute;
  left: 16px;
  /* Start just below the tightened month label. tl-month now has
     margin: 20px 0 8px and font-size = --type-meta (~12px) → bottom of
     label sits at roughly y=40 from the section top. Rail begins at 36 so
     it meets the first dot (which now sits at top: 14 inside the item). */
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--ink-2, #D8D3CA);
  pointer-events: none;
}

/* Items sit to the right of the rail, with a dot drawn on it.
   editorial-updates.css declares `#view-home[data-editorial="updates"] .tl-item
   { display: grid; grid-template-columns: 24px 1fr }` for the Summary tab,
   and #tab-timeline lives inside #view-home, so that rule cascades in and
   collapses the card content to a 1fr column too narrow for the body text.
   Override grid — the timeline rail is drawn by ::before, no grid needed. */
#tab-timeline .tl-item {
  display: block !important;     /* not flex/grid — we use absolute positioning */
  grid-template-columns: none !important;
  margin: 0;
  /* Tighter vertical rhythm: padding-top trimmed from 18 → 12, padding-bottom
     from 18 → 14 so consecutive entries breathe without feeling airy. The
     32px left gutter is preserved for the rail + dot. editorial-updates.css
     specificity battle still requires !important. */
  padding: 12px 0 14px 32px !important;
  /* Suppress the row-divider editorial-updates.css adds on the Summary tab;
     on Timeline the rail handles the visual separation. */
  border-bottom: 0 !important;
  position: relative;
}
#tab-timeline .tl-item::before {
  content: "";
  position: absolute;
  /* Rail center sits at x=16.5 (left:16, width:1). Dot is 10px wide, so
     left:11.5 puts dot-center at 16.5 — pixel-aligned to the rail. */
  left: 11.5px;
  /* Vertically align the dot with the type-tag row visual center.
     With padding-top:12px and type-tag row icons ~11px tall using
     align-items:center, the row's visual center sits at ~y=17.5
     (12 + 11/2). Dot is 10px, so top:13 puts dot-center at 18 — within
     half a pixel of the type-tag center. This is what gets the dot
     touching the eyebrow line in the screenshot. */
  top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linen, #F7F5F0);
  border: 1.5px solid var(--ink-4, #8C857B);
  box-sizing: border-box;
  z-index: 2;                    /* sit above the rail so dot looks crisp */
}

/* The card was previously a flex child (`flex: 1` from wellet.css) and
   collapsed to content-width when we changed .tl-item to display:block.
   Force it back to a normal block that fills the row. */
#tab-timeline .tl-card {
  display: block !important;
  flex: none !important;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
}

/* Retire all colored left borders */
#tab-timeline .tl-card.amber-border,
#tab-timeline .tl-card.blue-border,
#tab-timeline .tl-card.moss-border,
#tab-timeline .tl-card.red-border {
  border-left: 0 !important;
}

/* ----- Type tag row — small caps, quiet hue per category ----- */
#tab-timeline .tl-card-type-row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Tightened from 8 → 4 — pulls the title up tight under the eyebrow,
     which is the editorial cadence we want and also makes the dot read
     as anchored to the eyebrow line. */
  margin-bottom: 4px;
}
#tab-timeline .tl-card-type-row i,
#tab-timeline .tl-card-type-row svg {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0;
}
#tab-timeline .tl-card-type {
  font-family: var(--serif);
  font-size: var(--type-micro);
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 60;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Type-tag colors — all derived from quiet status tones, NEVER red */
#tab-timeline .tl-card-type.appt {
  color: var(--moss-quieter, #8AA89A) !important;
}
#tab-timeline .tl-card-type-row:has(.tl-card-type.appt) i,
#tab-timeline .tl-card-type-row:has(.tl-card-type.appt) svg {
  color: var(--moss-quieter, #8AA89A) !important;
}
#tab-timeline .tl-card-type.med {
  color: var(--signal-stale, #B5A582) !important;
}
#tab-timeline .tl-card-type-row:has(.tl-card-type.med) i,
#tab-timeline .tl-card-type-row:has(.tl-card-type.med) svg {
  color: var(--signal-stale, #B5A582) !important;
}
#tab-timeline .tl-card-type.lab {
  color: var(--ink-6, #57534C) !important;
}
#tab-timeline .tl-card-type-row:has(.tl-card-type.lab) i,
#tab-timeline .tl-card-type-row:has(.tl-card-type.lab) svg {
  color: var(--ink-6, #57534C) !important;
}
#tab-timeline .tl-card-type.note {
  color: var(--ink-5, #6E6962) !important;
}
#tab-timeline .tl-card-type-row:has(.tl-card-type.note) i,
#tab-timeline .tl-card-type-row:has(.tl-card-type.note) svg {
  color: var(--ink-5, #6E6962) !important;
}
#tab-timeline .tl-card-type.alert {
  color: var(--signal-warm, #B8835A) !important;   /* was red — now warm bronze */
}
#tab-timeline .tl-card-type-row:has(.tl-card-type.alert) i,
#tab-timeline .tl-card-type-row:has(.tl-card-type.alert) svg {
  color: var(--signal-warm, #B8835A) !important;
}

/* ----- Title — Fraunces, the editorial voice ----- */
#tab-timeline .tl-card-title {
  font-family: var(--serif);
  font-size: var(--type-h2);
  font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 60;
  font-style: normal;
  /* Tightened from 1.32 → 1.25 so long titles wrap more compactly. */
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-9, #1F1B16);
  margin: 0 0 4px 0;
}

/* ----- Body — DM Sans 300, the calm read ----- */
#tab-timeline .tl-card-body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-7, #443F38);
  margin: 0;
}

/* ----- Date — Fraunces small caps, the byline register ----- */
#tab-timeline .tl-card-date {
  font-family: var(--serif);
  font-size: var(--type-micro);
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 60;
  font-style: normal;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-5, #6E6962);
  /* Tightened from 10 → 6 — the date pill should feel like a byline
     tucked under the entry, not a separate stanza. */
  margin-top: 6px;
}

/* ----- EHR provenance pill (e.g. "From Duke Health (Epic)") ----- */
#tab-timeline .tl-card .ehr-pill,
#tab-timeline .tl-card-type-row .ehr-pill {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--type-micro);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-5, #6E6962);
  background: transparent;
  border: 1px solid var(--ink-2, #D8D3CA);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ----- Floating Add-event FAB ----- */
#tab-timeline .tl-add-fab {
  position: fixed;
  right: 20px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 12px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--moss, #608F7C);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#tab-timeline .tl-add-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
#tab-timeline .tl-add-fab:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
#tab-timeline .tl-add-fab svg,
#tab-timeline .tl-add-fab i {
  color: #fff;
  stroke: #fff;
}

/* Tablet+ — slightly larger title and breathing room. Padding lives on
   .tl-item now (the dot anchor), so widen there instead of on the card. */
@media (min-width: 768px) {
  #tab-timeline .tl-item {
    padding: 16px 0 18px 32px !important;
  }
  #tab-timeline .tl-item::before {
    /* Tablet padding-top is 16 → recenter dot at y = 16 + 11/2 = 21.5,
       dot top = 21.5 - 5 = 16.5 → use 16 for whole-pixel alignment. */
    top: 16px;
  }
  #tab-timeline .tl-card-title {
    font-size: var(--type-h2);
    font-variation-settings: "opsz" 28, "SOFT" 60;
  }
  #tab-timeline .tl-card-body {
    font-size: var(--type-body);
  }
  #tab-timeline .tl-month {
    font-size: var(--type-meta);
    margin: 28px 0 12px;
  }
  #tab-timeline .timeline-section::before {
    top: 44px;
  }
}

/* ── LIVING TIMELINE v1 · FILTER CHIPS ────────────────────────────────────
   Horizontal scroll row of source filters: All · EHR · You · Voice · Documents
   · Care circle · CareSignals · Meds. Sits between the EHR status bar and
   the timeline list. Selection persists per-person in localStorage.

   Mirrors the existing care-team chip styling so it feels native to Wellet:
   muted by default, moss-tinted on active. Touch targets meet 36px min.   */
#tab-timeline .tl-filter-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 4px 0 14px;
  margin: 0 0 4px;
  /* Hide scrollbar across browsers while still allowing horizontal scroll */
  scrollbar-width: none;
}
#tab-timeline .tl-filter-chips::-webkit-scrollbar {
  display: none;
}
#tab-timeline .tl-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease-out,
              border-color 0.15s ease-out,
              color 0.15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
#tab-timeline .tl-filter-chip:hover {
  border-color: var(--moss);
  color: var(--moss);
}
#tab-timeline .tl-filter-chip.is-active {
  background: var(--moss);
  border-color: var(--moss);
  color: white;
}
#tab-timeline .tl-filter-chip.is-active:hover {
  /* Keep the active state stable on hover — no flicker. */
  background: var(--moss);
  color: white;
}

/* Tablet+ — slightly bigger chips, more breathing room. */
@media (min-width: 768px) {
  #tab-timeline .tl-filter-chips {
    gap: 10px;
    padding: 8px 0 20px;
  }
  #tab-timeline .tl-filter-chip {
    min-height: 40px;
    padding: 8px 18px;
    font-size: var(--type-body);
  }
}