/* ============================================================================
   SB Project Management — product-specific styles.
   The shared Liquid Glass design system (tokens, orbs, MudBlazor chrome, brand
   lockups, sb-landing auth cards, sb-status pages, dashboard glass) lives in
   Sb.DesignSystem (_content/Sb.DesignSystem/sb.css), linked BEFORE this sheet
   in App.razor. Only PM feature styles belong here.
   ============================================================================ */

.pm-page-title {
    font-weight: 600;
}

/* -- Task drawer (right-anchored side panel) ------------------------------
   Opened via DialogPosition.CenterRight + Class="pm-task-drawer". Turns the
   modal into a full-height panel that slides in from the right (Teamwork-style
   task drawer), used identically from the List view, the Board, and My Work.
   MudBlazor's centerright container centres the surface and pads the right edge
   by 32px; stretch it full-height and remove the gap so it reads as a drawer. */
.mud-dialog-container.mud-dialog-centerright:has(.pm-task-drawer) {
    padding-right: 0;
    align-items: stretch;
}

.pm-task-drawer.mud-dialog {
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: min(760px, 96vw);
    max-width: 96vw;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 60px rgba(0, 0, 0, 0.16) !important;
}

.pm-task-drawer .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none !important;
}

.pm-task-drawer .mud-dialog-actions {
    flex: 0 0 auto;
    border-top: 0.5px solid var(--mkt-border);
}

/* -- Description editor (markdown) ----------------------------------------
   View = rendered .sb-prose; edit = the drawer's usual blur-save textarea
   (Sizing=Auto). Expanding adds .pm-desc-expanded on the section root and the
   :has() hook widens the whole drawer — the same :has() dependency the drawer
   container above already relies on. No JS. */
.pm-task-drawer.mud-dialog {
    transition: width 0.2s ease;
}

.pm-task-drawer.mud-dialog:has(.pm-desc-expanded) {
    width: min(1100px, 96vw);
}

@media (prefers-reduced-motion: reduce) {
    .pm-task-drawer.mud-dialog {
        transition: none;
    }
}

/* Collapsed edit: autogrow up to a sane cap, then scroll inside the textarea.
   Expanded edit: at least ~60vh of writing room, uncapped. min/max-height win
   over the inline height Mud's auto-sizing sets. */
.pm-desc-input textarea {
    max-height: 40vh;
    overflow-y: auto !important;
}

.pm-desc-expanded .pm-desc-input textarea {
    min-height: 60vh;
    max-height: none;
}

/* Empty state — a quiet dashed ghost row that enters edit mode. */
.pm-desc-empty {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    color: var(--mkt-text-faint);
    background: none;
    border: 1px dashed var(--mkt-border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.pm-desc-empty:hover {
    background: rgba(0, 122, 255, 0.04);
    color: var(--mkt-text-soft);
}

.pm-desc-empty:focus-visible {
    outline: 2px solid var(--mkt-primary);
    outline-offset: 2px;
}

/* Rendered (view/preview) description — wrapped in .sb-subpanel so the prose reads as a
   bounded section between the property grid and Tags rather than free-floating text.
   The subpanel supplies fill/hairline/radius; only the padding is ours. */
.pm-desc-view {
    padding: 12px 16px;
}

/* -- Task-list view rows -------------------------------------------------- */
.pm-task-row {
    border-top: 0.5px solid var(--mkt-border-soft);
    transition: background 0.12s ease;
    border-radius: 8px;
}

.pm-task-row:hover {
    background: rgba(0, 122, 255, 0.05);
}

/* Drag affordance + a droppable strip below the last task so empty lists accept drops. */
.pm-dropzone {
    min-height: 24px;
}

.pm-dropzone .mud-drop-item {
    cursor: grab;
}

.pm-dropzone .mud-drop-item:active {
    cursor: grabbing;
}

/* Aligns the checkbox of a task with no subtask-toggle under those that have one. */
.pm-row-toggle-spacer {
    display: inline-block;
    width: 30px;
}

/* Phones: the single-line task row (toggle · checkbox · assignee · title ·
   date · priority · stage · tags…) is ~2× a phone viewport and the card clips
   it — most of the row was unreachable. Let the metadata wrap under the title
   instead; the title keeps most of line one. */
@media (max-width: 700px) {
    .pm-task-row {
        flex-wrap: wrap;
        row-gap: 2px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .pm-task-row > .mud-typography-body1 { min-width: 50%; }

    /* Nested subtask rails: 40px per level eats a phone — tighten the indent. */
    .pm-subtask-group {
        margin-left: 14px;
        padding-left: 4px;
    }
}

/* Inline subtask list, indented under its parent task. Nests for sub-subtasks (indents again). */
.pm-subtask-group {
    margin-left: 40px;
    border-left: 2px solid var(--mkt-border-soft);
    padding-left: 6px;
    margin-bottom: 4px;
}

/* Task notes (Description) tooltip body — wrap long notes instead of one runaway line. */
.pm-note-tip {
    max-width: 320px;
    white-space: pre-wrap;
    text-align: left;
}

/* Clickable inline-edit activator (stage / assignee / priority menus) on a task row. */
.pm-inline-edit {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* ── My Work (grouped task table) ─────────────────────────────────────────────
   A ClickUp-style "my day" table: glass summary pill in the header, then a solid
   work surface with a shared grid so the column header and every row align.
   Columns: subtask-toggle · complete · title cluster · project/list · due ·
   priority · status. Media queries shrink the template AND hide the matching
   pm-col-* cells together — they must stay in sync. */
.pm-mywork-stats {
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--mkt-shadow-sm);
    white-space: nowrap;
}

.pm-mywork-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--mkt-text-soft);
}

    .pm-mywork-stat b {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--mkt-text);
    }

.pm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Raw palette hues — dots are fills, not text (the contrast-tuned hexes are for text). */
.pm-dot-overdue { background: #FF3B30; }
.pm-dot-today { background: #007AFF; }
.pm-dot-upcoming { background: #FF9500; }

.pm-mywork-grid {
    display: grid;
    grid-template-columns: 34px 38px minmax(0, 1fr) minmax(140px, 220px) 110px 96px 110px;
    align-items: center;
    column-gap: 6px;
}

.pm-mywork-head {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 0.5px solid var(--mkt-border-soft);
}

    .pm-mywork-head > div {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #AEAEB2;
    }

.pm-mywork-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
    cursor: pointer;
    user-select: none;
}

    .pm-mywork-group-head:hover {
        background: rgba(0, 122, 255, 0.04);
    }

.pm-mywork-group-title {
    font-weight: 700;
    font-size: 0.95rem;
}

    .pm-mywork-group-title.pm-overdue {
        color: #D70015;
    }

.pm-mywork-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pm-mywork-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subtask rows: indent + hairline rail on the title cell so nesting reads like the list view's
   indented group, while the grid keeps the Due/Priority/Status columns aligned. --pm-sub-level (set
   per row, 0-based) steps each level's rail further right, the way pm-subtask-group re-indents on
   every level. The rail can only wrap the title cell here — indenting the whole row would drag the
   Due/Priority/Status cells out of their columns, which is the point of this grid. */
.pm-mywork-sub .pm-mywork-title {
    margin-left: calc(4px + var(--pm-sub-level, 0) * 16px);
    padding-left: 12px;
    border-left: 2px solid var(--mkt-border-soft);
}

.pm-mywork-context {
    min-width: 0;
}

.pm-mywork-context-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mkt-text-soft) !important;
}

    .pm-mywork-context-link:hover {
        color: var(--mkt-primary) !important;
    }

.pm-mywork-none {
    color: #C7C7CC;
}

/* /people member rows: a long email is one unbreakable token — let it shrink
   and ellipsize instead of shoving the role chip past the card edge. */
.pm-person-row { min-width: 0; }

.pm-person-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .pm-mywork-grid {
        grid-template-columns: 34px 38px minmax(0, 1fr) 100px 104px;
    }

    .pm-mywork-grid .pm-col-project,
    .pm-mywork-grid .pm-col-priority {
        display: none;
    }
}

@media (max-width: 620px) {
    .pm-mywork-grid {
        grid-template-columns: 34px 38px minmax(0, 1fr) 90px;
    }

    .pm-mywork-grid .pm-col-status {
        display: none;
    }
}

/* ── Dashboard activity feed + project surfaces (revamp) ─────────────────────── */
.pm-activity-row {
    border-radius: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transition: background-color 120ms ease;
}

.pm-activity-row:hover {
    background-color: rgba(0, 122, 255, 0.06);
}

/* Agenda group header — subtle separator between Overdue / Today / Upcoming. */
.pm-agenda-group {
    border-top: 0.5px solid var(--mkt-border-soft, rgba(15,23,42,0.08));
}

    .pm-agenda-group:first-child {
        border-top: none;
    }

    .pm-agenda-group:hover {
        background-color: rgba(0, 122, 255, 0.04);
    }

/* Project cards (Projects list) lift slightly on hover. */
.pm-project-card {
    transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
    cursor: pointer;
    height: 100%;
}

.pm-project-card:hover {
    box-shadow: var(--mkt-shadow-card-hover);
    transform: translateY(-1px);
    border-color: rgba(0, 122, 255, 0.35);
}

/* Overlapping avatar stack (who's on a project). */
.pm-avatar-stack {
    display: inline-flex;
    align-items: center;
}

    .pm-avatar-stack > * {
        margin-left: -8px;
        border: 2px solid #fff;
    }

        .pm-avatar-stack > *:first-child {
            margin-left: 0;
        }

/* Subtle metric tile used on the project detail header / overview. */
.pm-metric {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--mkt-border-soft, rgba(15,23,42,0.08));
    height: 100%;
}

    .pm-metric .pm-metric-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .pm-metric .pm-metric-label {
        font-size: 0.75rem;
        color: var(--mkt-text-soft, #6E6E73);
    }

/* Flat inline KPI stat for the project Overview band — lives INSIDE the overview card, so it
   carries no box/border of its own (avoids card-in-card). */
.pm-kpi {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pm-kpi-label {
    font-size: 0.75rem;
    color: var(--mkt-text-soft, #6E6E73);
}

/* ── Readiness review (pre-work, non-blocking) ─────────────────────────────
   Chip text colors use the design-token status-on-light hexes (success #1E8E3E,
   warning #B25000) — the raw palette hues are for fills, not text. */
.pm-review-chip {
    font-weight: 600;
}

    .pm-review-chip.ready {
        color: #1E8E3E;
    }

    .pm-review-chip.not-ready {
        color: #B25000;
    }

.pm-review-strip {
    border: 0.5px solid var(--mkt-border-soft, rgba(15,23,42,0.08));
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.55);
}

/* The per-reviewer comment sits beside a colored decision chip that already carries the
   ready/not-ready meaning, so the note itself stays neutral and quiet. */
.pm-review-reason {
    color: var(--mkt-text-soft, #6E6E73);
    font-style: italic;
}

/* The multi-reviewer list inside the task drawer: one quiet row per reviewer. */
.pm-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pm-review-row {
    padding: 0.15rem 0;
}

    .pm-review-row + .pm-review-row {
        border-top: 0.5px solid var(--mkt-border-soft, rgba(15,23,42,0.06));
        padding-top: 0.35rem;
    }

/* ── Board column track ──────────────────────────────────────────────────────
   Columns never squeeze below a readable width: flex-basis is the floor (shrink
   is off) and the track overflows into horizontal scroll instead. Grow shares
   leftover space on wide screens; max-width keeps columns from going silly-wide
   when a board has only a few stages on an ultrawide display. */
.pm-board {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.pm-board-col {
    flex: 1 0 280px;
    min-width: 280px;
    max-width: 400px;
}

/* Board columns are drop zones; keep a target even when a column is empty. */
.pm-board-dropzone {
    min-height: 160px;
}

/* Count badge inside the "Lists" filter chips — a muted inset pill so the number reads as a
   count, not part of the list name (otherwise "List 1  3" is ambiguous). */
.pm-list-chip-count {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 6px;
    min-width: 18px;
    height: 18px;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    background: rgba(118, 118, 128, 0.16);
    color: var(--mkt-text-soft);
}

/* Dashboard KPI strip — one responsive row that fills its width (5-up on desktop, wrapping on
   narrow). auto-fit collapses empty tracks, so a 4-tile (non-manager) row fills the width too. */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

/* Recent-activity sidecar — the same right-slide drawer as the task drawer (pm-task-drawer),
   narrower for a simple feed. */
.mud-dialog-container.mud-dialog-centerright:has(.pm-activity-drawer) {
    padding-right: 0;
    align-items: stretch;
}

.pm-activity-drawer.mud-dialog {
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: min(440px, 96vw);
    max-width: 96vw;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
}

.pm-activity-drawer .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none !important;
}

/* ── Reports (/reports) ──────────────────────────────────────────────────────
   Project-health + workload tables: swap Mud's 1px table lines for the app's
   hairline rules, with the My Work grid's quiet uppercase column labels. The
   doubled class out-specifies MudBlazor's `.mud-simple-table table * tr>td`. */
.pm-report-table.mud-simple-table table th,
.pm-report-table.mud-simple-table table td {
    border-bottom: 0.5px solid var(--mkt-border-soft, rgba(15,23,42,0.08));
}

.pm-report-table.mud-simple-table table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #AEAEB2;
    white-space: nowrap;
}

/* Sortable column headers are real <button>s (keyboard/AT reachable) restyled
   to read as plain column labels; the page appends the active ↑/↓ glyph. */
.pm-sort-btn {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.pm-sort-btn:hover {
    color: var(--mkt-text);
}

.pm-sort-btn:focus-visible {
    outline: 2px solid var(--mkt-primary);
    outline-offset: 2px;
}

/* Task templates — two-line picker menu rows: name over its example. The example is a single
   line, ellipsised, and capped so a long example can't stretch the menu to an unusable width. */
.pm-template-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pm-template-example {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Cross-project timeline (ProjectTimelineChart) ────────────────────────────
   Read-only gantt-style consolidated view. The whole component is ONE card; inside it a single
   horizontal-scroll CSS grid with two columns: a frozen (position:sticky) left name column and a
   canvas column whose fixed pixel width = span × px-per-day. Each project is a display:contents row
   wrapper so one :hover washes both panes together with no JS. Layering (low→high): track gridline
   background · today marker · bar · frozen row-head · sticky axis · corner. */
.pm-timeline {
    border-radius: var(--sb-radius-card, 12px);
    overflow: hidden;
}

.pm-timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
}

.pm-timeline-scroll {
    position: relative;
    overflow: auto;
    /* Tall timelines scroll inside the card so the axis (sticky-top) + names (sticky-left) stay put;
       short ones sit below this cap and never scroll. */
    max-height: min(68vh, 620px);
}

.pm-timeline-grid {
    display: grid;
    width: max-content;
    --pm-tl-left: 240px;
}

/* display:contents lets each logical row's two cells drop straight into the grid columns while a
   single :hover / child-combinator still washes both. */
.pm-timeline-headrow,
.pm-timeline-row {
    display: contents;
}

/* ── Date-axis header (sticky-top) ─────────────────────────────────────────── */
.pm-timeline-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    height: 40px;
    background: var(--mkt-surface, #fff);
    border-right: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
    border-bottom: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
}

.pm-timeline-axis {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 40px;
    background: var(--mkt-surface, #fff);
    border-bottom: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
    overflow: hidden;
}

.pm-timeline-axis-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--mkt-text-faint, #8E8E93);
    pointer-events: none;
}

.pm-timeline-axis-label--year {
    font-weight: 700;
    color: var(--mkt-text-soft, #6E6E73);
}

/* Two-row calendar header — anchored Month zoom (daily axis) ONLY, applied via the --daily modifier that
   the markup adds when _monthRowLabels is populated. The corner + axis grow taller to fit a month-name band
   stacked over the day-number band; BuildMonthlyAxis's single-row axis keeps the 40px height above and is
   untouched. Each band is its own positioning context, so the shared .pm-timeline-axis-label
   (top:50%/translateY) centres vertically within its own band, and both bands reuse the same left:Xpx +
   padding-left anchor — so a month name and its "1" line up on their left edge. */
.pm-timeline-corner--daily,
.pm-timeline-axis--daily {
    height: 56px;
}

.pm-timeline-axis--daily {
    display: flex;
    flex-direction: column;
}

.pm-timeline-axis-band {
    position: relative;
    flex: 1 1 50%;
    overflow: hidden;
}

/* Subtle hairline between the month band and the day band, so the header reads as a proper calendar rule. */
.pm-timeline-axis-band--day {
    border-top: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
}

/* ── Frozen left name column ───────────────────────────────────────────────── */
.pm-timeline-rowhead {
    position: sticky;
    left: 0;
    z-index: 3;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font: inherit;
    text-align: left;
    background: var(--mkt-surface, #fff);
    border: 0;
    border-right: 1px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
    border-bottom: 0.5px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
    cursor: pointer;
    transition: background-color var(--sb-transition, 0.15s ease);
}

/* Negative offset (vs the bar's +2px): the row-head is a wide flex row butted against the sticky
   column's edges, so an outward offset would clip; inset keeps the focus ring fully visible. */
.pm-timeline-rowhead:focus-visible {
    outline: 2px solid var(--mkt-primary, #007AFF);
    outline-offset: -2px;
}

.pm-timeline-rowhead-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pm-timeline-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-timeline-client {
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bar track (scrolls under the frozen column) ───────────────────────────── */
.pm-timeline-track {
    position: relative;
    min-height: 44px;
    border-bottom: 0.5px solid var(--mkt-border-soft, rgba(60, 60, 67, 0.06));
    background-image: var(--pm-tl-grid);
    background-repeat: no-repeat;
    transition: background-color var(--sb-transition, 0.15s ease);
}

/* One hover washes both panes. Row-head stays opaque so scrolled bars can't bleed through it. */
.pm-timeline-row:hover > .pm-timeline-rowhead {
    background-color: var(--mkt-primary-soft, #EEF4FF);
}

.pm-timeline-row:hover > .pm-timeline-track {
    background-color: rgba(0, 122, 255, 0.045);
}

.pm-timeline-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--mkt-primary, #007AFF);
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
}

.pm-timeline-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    min-width: 6px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: var(--pm-tl-fill, var(--mud-palette-primary));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: filter var(--sb-transition, 0.15s ease), box-shadow var(--sb-transition, 0.15s ease);
}

.pm-timeline-bar:hover {
    filter: brightness(0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.pm-timeline-bar:focus-visible {
    outline: 2px solid var(--mkt-primary, #007AFF);
    outline-offset: 2px;
}

.pm-timeline-bar--muted {
    opacity: 0.55;
}

.pm-timeline-bar-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Pan controls (anchored mode only) ─────────────────────────────────────────
   Small, calm action buttons that sit in the toolbar beside the zoom sb-seg and slide the fixed calendar
   window through time. margin-left:auto floats the group to the toolbar's right edge; they reuse the same
   subtle grey hover wash and primary focus ring as the rest of the timeline chrome — no new tokens. */
.pm-timeline-pan {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.pm-timeline-pan-btn {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mkt-text-soft, #6E6E73);
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sb-transition, 0.15s ease), color var(--sb-transition, 0.15s ease);
}

.pm-timeline-pan-btn:hover {
    background: rgba(118, 118, 128, 0.12);
    color: var(--mkt-text, #1D1D1F);
}

.pm-timeline-pan-btn:focus-visible {
    outline: 2px solid var(--mkt-primary, #007AFF);
    outline-offset: 2px;
}

/* Lightweight "nothing overlaps this pan/zoom window" state (anchored mode only) — a quiet centered line
   in place of the grid, distinct from the full SbEmptyState (which means zero dated rows exist at all). */
.pm-timeline-void {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 24px 16px;
    text-align: center;
    color: var(--mkt-text-soft, #6E6E73);
}

@media (prefers-reduced-motion: reduce) {
    .pm-timeline-rowhead,
    .pm-timeline-track,
    .pm-timeline-bar,
    .pm-timeline-pan-btn {
        transition: none;
    }
}