/* ─────────────────────────────────────────────────────────────────────────
   Now — the director's live snapshot (Components/Now/NowPage.razor).
   Port of the design handoff (design_handoff_now_view). Buttons, tags and the
   segmented control are the shared .lf-* primitives; this sheet only owns the
   board: attention list, coming-up list, rows and the rolling timeline.

   Severity → tokens follows Care Review (CareReviewShared.Sev): gap = --gap-fg,
   risk = --c-conf-*, hygiene = --warn / --c-warn-*. No new colours.
   ───────────────────────────────────────────────────────────────────────── */

.now-view {
    /* Tokens the handoff uses that leaf-ds.css doesn't define on :root. The gap
       pair matches care-review.css's (scoped there to .care-review). */
    --gap-fg: #d6443c;
    --gap-bg-1: rgba(214, 68, 60, 0.08);
    --gap-bg-2: rgba(214, 68, 60, 0.14);
    --now-r-bar: 5px;
    --now-r-card: 12px;
    --now-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    font-variant-numeric: tabular-nums;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.now-view .now-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.now-view .now-lob { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.now-view .now-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-3); }
.now-view .now-meta b { font-weight: 600; color: var(--ink-2); }
.now-view .now-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--c-live-fg); }
.now-view .now-live.is-stale { color: var(--c-warn-fg); }
.now-view .now-live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: now-pulse 1.4s ease-in-out infinite; }
.now-view .now-live.is-stale .dot { animation: none; }
@keyframes now-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .now-view .now-live .dot, .now-view .now-ld, .now-view .now-lvd { animation: none; } }

.now-view .now-facts { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 20px; }
.now-view .now-facts b { font-weight: 600; color: var(--ink-2); font-family: var(--font-mono); }
.now-view .now-facts .sep { color: var(--ink-4); }

/* ── Section heads ─────────────────────────────────────────────────────── */
.now-view .now-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; min-height: 26px; }
.now-view .now-sh h3 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; display: flex; align-items: center; gap: 7px; }
.now-view .now-sh .note { font-size: 11.5px; color: var(--ink-3); }
.now-view .now-cnt { font: 600 10.5px/1 var(--font-mono); padding: 3px 6px; border-radius: var(--r-pill); background: var(--ink-1); color: var(--surface); }

.now-view .now-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-bottom: 26px; align-items: start; }
@media (max-width: 900px) { .now-view .now-top { grid-template-columns: minmax(0, 1fr); } }

.now-view .now-card { border: 1px solid var(--line); border-radius: var(--now-r-card); background: var(--surface); overflow: hidden; box-shadow: var(--now-shadow); }

/* ── Needs you now ──────────────────────────────────────────────────────── */
.now-view .now-ai { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 11px 14px 11px 17px; border-top: 1px solid var(--line-2); position: relative; }
.now-view .now-ai:first-child { border-top: 0; }
.now-view .now-ai::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sevc); }
.now-view .sv-gap { --sevc: var(--gap-fg); --sevt: var(--c-conf-fg); }
.now-view .sv-risk { --sevc: var(--c-conf-bd); --sevt: var(--c-conf-fg); }
.now-view .sv-hygiene { --sevc: var(--warn); --sevt: var(--c-warn-fg); }
.now-view .now-ai .ey { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sevt); }
.now-view .now-ai .tt { font-size: 13px; font-weight: 600; margin-top: 2px; text-wrap: pretty; }
.now-view .now-ai .mt { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.now-view .now-ai .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.now-view .now-act.lf-btn { height: 27px; padding: 0 10px; font-size: 11.5px; gap: 5px; text-decoration: none; }
.now-view .now-act.is-soft { background: var(--accent-soft); border-color: var(--c-sched-bd); color: var(--accent-ink); }
.now-view .now-act.is-soft:hover { border-color: var(--accent); }
@media (max-width: 640px) { .now-view .now-ai { grid-template-columns: minmax(0, 1fr); } .now-view .now-ai .acts { justify-content: flex-start; } }

.now-view .now-calm { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--now-r-card); background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), var(--now-shadow); }
.now-view .now-calm .ci { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.now-view .now-calm .ct { font-size: 14px; font-weight: 700; }
.now-view .now-calm .cs { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.now-view .now-nudges { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.now-view .now-nudges .ey { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.now-view .now-nudges .nd { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.now-view .now-nudges .nd a { margin-left: 6px; font-weight: 600; white-space: nowrap; }

/* ── Coming up ─────────────────────────────────────────────────────────── */
.now-view .now-ui { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line-2); }
.now-view .now-ui:first-child { border-top: 0; }
.now-view .now-ui.empty { display: block; color: var(--ink-3); font-size: 12px; }
.now-view .now-ut b { display: block; font: 600 12px/1.3 var(--font-mono); }
.now-view .now-ut span { font-size: 10.5px; color: var(--ink-3); }
.now-view .now-ux { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.now-view .now-up-p { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.now-view .now-uw { margin-top: 3px; font-size: 11.5px; font-weight: 600; }
.now-view .now-ui.sv-gap .now-ux { color: var(--c-conf-fg); }
.now-view .now-ui.sv-risk .now-uw { color: var(--c-conf-fg); }
.now-view .now-ui.sv-hygiene .now-uw { color: var(--c-warn-fg); }

/* ── Board ─────────────────────────────────────────────────────────────── */
.now-view .now-brow { display: grid; grid-template-columns: minmax(170px, 232px) minmax(0, 1fr); border-top: 1px solid var(--line-2); }
.now-view .now-brow.axis { border-top: 0; cursor: default; background: var(--surface-2); }
.now-view .rl { padding: 9px 14px 10px; border-right: 1px solid var(--line-2); min-width: 0; }
.now-view .axis .rl { padding: 8px 14px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.now-view .rn { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.now-view .rn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-view .rn .lf-tag { margin-left: auto; }
.now-view .rs { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.now-view .res { display: flex; align-items: center; gap: 3px; margin-top: 5px; font-size: 11px; color: var(--ink-3); }
.now-view .res span { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-view .rd { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.now-view .rd.away { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.now-view .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); font: 600 9.5px/1 var(--font-mono); color: var(--ink-2); }
.now-view .av.un { border-style: dashed; border-color: var(--gap-fg); color: var(--c-conf-fg); }
.now-view .rline { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-view .rline.l-dim { color: var(--ink-3); }
.now-view .rline.l-hygiene { color: var(--c-warn-fg); font-weight: 600; }
.now-view .rline.l-risk, .now-view .rline.l-gap { color: var(--c-conf-fg); font-weight: 600; }
.now-view .now-lvd { width: 6px; height: 6px; border-radius: 50%; background: var(--c-live-fg); flex-shrink: 0; animation: now-pulse 1.4s ease-in-out infinite; }

/* Timeline */
.now-view .tl { position: relative; margin: 0 14px; padding: 5px 0; }
.now-view .tl.ax { height: 30px; padding: 0; }
.now-view .tk { position: absolute; top: 10px; transform: translateX(-50%); font: 600 9.5px/1 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.now-view .nowtag { position: absolute; top: 7px; transform: translateX(-50%); font: 600 9.5px/1 var(--font-mono); color: #fff; background: var(--accent); padding: 3px 5px; border-radius: 3px; z-index: 4; white-space: nowrap; }
.now-view .past { position: absolute; top: 0; bottom: 0; background: var(--surface-2); }
.now-view .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.now-view .nowl { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--accent); z-index: 3; opacity: .75; }
.now-view .lane { position: relative; height: 24px; }
.now-view .b { position: absolute; top: 3px; height: 18px; border-radius: var(--now-r-bar); }
.now-view .trk { background: var(--surface); border: 1px solid var(--line); }
.now-view .fill { background: color-mix(in oklab, var(--rv-deliv) 17%, var(--surface)); border: 1px solid color-mix(in oklab, var(--rv-deliv) 30%, var(--surface)); }
.now-view .fill.flag { border-color: var(--c-conf-fg); box-shadow: inset 0 0 0 1px var(--c-conf-bd); }
.now-view .late { background: var(--c-warn-bg); border: 1px solid var(--c-warn-bd); }
.now-view .hatch, .now-view .late.gapl { background: repeating-linear-gradient(135deg, var(--gap-bg-2) 0 4px, var(--gap-bg-1) 4px 8px); border: 1px dashed var(--gap-fg); }
.now-view .late.gapl { border-style: solid; }
.now-view .over { background: var(--c-conf-bg); border: 1px solid var(--c-conf-bd); }
.now-view .lab { display: flex; align-items: center; padding: 0 7px; font-size: 11px; font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; z-index: 2; }
.now-view .lab span { overflow: hidden; text-overflow: ellipsis; }
/* A bar's label layer is its link to the visit. */
.now-view a.lab { text-decoration: none; cursor: pointer; }
.now-view a.lab:hover span { text-decoration: underline; }
.now-view a.lab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Visit · caregiver · client · house under an item: always shown, never on hover. */
.now-view .now-lk { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 5px; font-size: 11.5px; }
.now-view .now-lk a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.now-view .lab.st-upcoming { color: var(--ink-2); font-weight: 500; }
.now-view .lab.st-done { color: var(--ink-3); font-weight: 500; }
.now-view .lab.st-late { color: var(--c-warn-fg); }
.now-view .lab.sv-gap, .now-view .lab.st-stillclockedin, .now-view .lab.sv-risk { color: var(--c-conf-fg); }
.now-view .now-ld { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-live-fg); box-shadow: 0 0 0 2px var(--surface); z-index: 4; animation: now-pulse 1.4s ease-in-out infinite; }
.now-view .cvw { position: relative; height: 4px; margin: 1px 0 3px; }
.now-view .cv { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.now-view .cv-covered { background: var(--line); }
.now-view .cv-wasuncovered { background: var(--gap-fg); }
.now-view .cv-willbeuncovered { background: repeating-linear-gradient(90deg, var(--gap-fg) 0 3px, transparent 3px 6px); }

.now-view .now-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.now-view .now-legend span { display: inline-flex; align-items: center; gap: 6px; }
.now-view .sw { position: static; display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.now-view .sw.nw { width: 2px; height: 12px; background: var(--accent); border-radius: 0; }

@media (max-width: 640px) {
    .now-view .now-brow { grid-template-columns: minmax(0, 1fr); }
    .now-view .rl { border-right: 0; }
    .now-view .now-brow.axis .rl { display: none; }
}