/* ============================================================
   Declined calendar events — visible but clearly marked
   ============================================================ */
/* ============================================================
   Carried-forward overdue tasks — drawn on today's timeline at their
   original time of day, never silently styled as today's plan.
   ============================================================ */
.event-card.is-overdue { box-shadow: inset 3px 0 0 var(--color-red); }
.event-card.is-overdue .event-title { color: var(--color-red-text); }

.timeline-overdue-move {
    /* The repair button sits inside the card, but `.task-resize-handle` is
       absolutely positioned across the card's full width at z-index 10 — on a
       short card that band covers this button entirely. Verified live on
       staging: elementFromPoint at the button's centre returned
       `task-resize-handle`, so the click fell through to the card and opened
       the task modal instead. The button looked perfect and did nothing.
       A stacking context above the handle is what makes it clickable. */
    position: relative;
    z-index: 11;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--color-red-fill);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.timeline-overdue-move:disabled { opacity: 0.5; cursor: default; }

.week-timeline-task.is-overdue,
.week-event-item.is-overdue { box-shadow: inset 3px 0 0 var(--color-red); }

.calendar-event.declined,
.week-timeline-event.declined { opacity: 0.6; }

.calendar-event.declined .event-title,
.week-timeline-event.declined .week-timeline-title-text { text-decoration: line-through; }


/* ============================================================
   Week card compact layout — title + time on ONE row
   (prevents start-time clip on short events)
   ============================================================ */
.week-timeline-event.compact {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: var(--space-1) var(--space-2);
}

.week-timeline-event.compact .week-timeline-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.week-timeline-event.compact .week-timeline-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.week-timeline-event.compact .week-timeline-time-label {
    flex: 0 0 auto;
    margin-top: 0;
}

/* Tentative duration estimate chip (faint ~Nm, confirmable). */
.meta-duration-suggest {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    font-style: italic;
    color: #868E96;
}
.meta-duration-suggest-label { opacity: 0.85; }
.duration-suggest-accept,
.duration-suggest-dismiss {
    min-width: 18px; min-height: 18px;
    border: none; background: transparent; cursor: pointer;
    font-size: var(--font-size-xs); line-height: 1; padding: 2px 4px; border-radius: var(--radius-sm);
    color: #868E96;
}
.duration-suggest-accept { color: #4A90D9; }
.duration-suggest-accept:hover { background: rgba(74,144,217,0.12); }
.duration-suggest-dismiss:hover { background: rgba(0,0,0,0.05); }

/* SEC-10 recording share popover — self-contained (no base .modal rule) */
.recording-share-popover {
    z-index: var(--z-layer-modal);
    min-width: 240px;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 46, 0.10);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(26, 26, 46, 0.18);
    padding: 6px;
    font-family: 'Avenir Next', -apple-system, sans-serif;
}
.recording-share-popover .recording-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-14);
    color: #1A1A2E;
    text-align: left;
    transition: background var(--duration-fast) var(--ease-in-out);
}
.recording-share-popover .recording-share-row:hover { background: rgba(74, 144, 217, 0.08); }
.recording-share-popover .recording-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The two labels are 12px/600 — small text, so 4.5:1 on white. The brand
   accent (#4A90D9) is 3.34 there and the brand success (#10B981) 2.54, and a
   label is read with the pointer on its row, i.e. over the 0.08 hover tint
   (rgb(241,246,252)), where the brand secondary (#357ABD) and the light
   --text-completed (#3276B8) both fall short too (4.14 / 4.37). So each is one
   step deeper on its own ramp: #2F6FAD keeps --text-completed's hue and
   saturation at lightness 43% (5.25 rest / 4.83 hover); #047857 is emerald-700,
   the brand success being emerald-500 (5.48 / 5.05). The dark pair below was
   measured the same way and needed the same correction: the brand accent is
   4.58 at rest on the navy but only 3.52 over its 0.18 hover tint
   (rgb(42,55,87)), and the label is text — `Share` / `✓ Shared` — so 4.5:1
   applies. #6FADDE is 6.34 rest / 4.89 hover. The success green survives
   unchanged at 6.03 / 4.64. Pinned by
   tests/unit/dark-theme-half-parity and tests/e2e/recording-share-popover-contrast. */
.recording-share-popover .recording-share-check { flex-shrink: 0; font-size: var(--font-size-12); font-weight: 600; color: #2F6FAD; }
.recording-share-popover .recording-share-row[aria-pressed="true"] .recording-share-check { color: var(--color-green-text); }
.recording-share-popover .recording-share-empty { padding: 14px 12px; font-size: var(--font-size-sm); color: #6b6b7b; }
/* Dark mode is a PAIR here: `Settings.applyTheme` sets `data-theme` for an
   explicit choice and REMOVES it for 'system' (the default). With only the
   media half, and unguarded, this popover tracked the OS and ignored the app —
   app=dark/OS=light gave a white popover in a dark app, app=light/OS=dark a
   navy one in a light app. Rows measured 17.06 and 14.05 either way, so this
   is a palette mismatch, not a legibility bug.

   This component uses the bare `[data-theme="dark"]` form throughout (the app
   convention), NOT the `:root[data-theme="dark"]` the sync-recovery rule below
   uses — one form per component, so the ordering stays obvious. The guarded
   media half is (0,3,0) against the explicit half's (0,2,0) and therefore wins
   whenever both match, which is exactly why the two declare the same thing.
   Kept adjacent so no later `background` at equal specificity can slip between
   them. The hexes are the popover's own (#23233a, not the app's #2A2A2A /
   #242424) — propagating the existing palette, not redesigning it.

   The last three tails restate the labels' brand inks (4.58 / 6.03 on #23233a)
   because the base rules above now carry the light variant's deeper ones,
   which would be 2.91 / 2.79 here; the pressed tail is needed in its own
   right, since the base pressed rule at (0,4,0) outranks a bare dark override
   at (0,3,0). The empty state was #6b6b7b here too — 2.92 on the navy —
   and takes #9A9AAE (5.54): the same construction as the light grey, tinted
   toward the popover's own navy, at the lightness that gives it the standing
   the light variant has (5.23). The dark --text-tertiary (#8A8A8A) is 4.43. */
[data-theme="dark"] .recording-share-popover { background: #23233a; border-color: rgba(245, 245, 247, 0.12); }
[data-theme="dark"] .recording-share-popover .recording-share-row { color: #F5F5F7; }
[data-theme="dark"] .recording-share-popover .recording-share-row:hover { background: rgba(74, 144, 217, 0.18); }
[data-theme="dark"] .recording-share-popover .recording-share-check { color: #6FADDE; }
[data-theme="dark"] .recording-share-popover .recording-share-row[aria-pressed="true"] .recording-share-check { color: var(--color-green-text); }
[data-theme="dark"] .recording-share-popover .recording-share-empty { color: #9A9AAE; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .recording-share-popover { background: #23233a; border-color: rgba(245, 245, 247, 0.12); }
    :root:not([data-theme="light"]) .recording-share-popover .recording-share-row { color: #F5F5F7; }
    :root:not([data-theme="light"]) .recording-share-popover .recording-share-row:hover { background: rgba(74, 144, 217, 0.18); }
    :root:not([data-theme="light"]) .recording-share-popover .recording-share-check { color: #6FADDE; }
    :root:not([data-theme="light"]) .recording-share-popover .recording-share-row[aria-pressed="true"] .recording-share-check { color: var(--color-green-text); }
    :root:not([data-theme="light"]) .recording-share-popover .recording-share-empty { color: #9A9AAE; }
}