/* Requests.css - Inbox workspace module-specific styles */
/* Atoms/molecules/organisms handle their own styling. */
/* Only custom layout and module-specific overrides here. */

/* ==================================================================
   INBOX HOST (BL_044 Phase 3) -- sub-tab structure
   ==================================================================
   Tasks + Requests sub-tabs sit under a SegmentedControl at the top
   of the Inbox host. Tasks panel uses list-left / teams-right; the
   Requests sub-tab content is the legacy three-panel layout below.
*/

.inbox-host {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
}

.inbox-subtab-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* No left padding -- segmented control sits flush against the parent's
       left edge. Right padding kept so action buttons don't kiss the edge. */
    padding: 0 var(--space-3) 0 0;
}

.inbox-subtab-nav.segmented-control {
    max-width: 240px;
}

.inbox-subtab-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inbox-subtab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* -- Tasks workbench: list left, optional teams pane right (inbox mode only) -- */

.inbox-tasks-workbench {
    display: grid;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
}

.inbox-tasks-workbench.with-pane {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}

.inbox-tasks-workbench.no-pane {
    grid-template-columns: minmax(0, 1fr);
}

/* Left column wraps the controls row + the scrolling list so the controls
   sit above the list ONLY -- the Teams pane (sibling grid cell) is alongside,
   never under the controls. Column is a flex stack: controls auto-height,
   list claims the rest and scrolls. */
.inbox-tasks-list-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    min-width: 0;
    /* White panel surface so the controls row (date stepper + filters + refresh)
       and the list sit on one card, not bare on the grey workspace background.
       Matches .dashboard-section tokens verbatim. */
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    padding: var(--space-3);
    box-sizing: border-box;
}

/* Controls row above the list: the filter bar. Wraps gracefully on narrow
   widths. Gap-only spacing, no external margins. */
.inbox-tasks-list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.inbox-tasks-list-controls .controls-bar {
    flex: 1;
    min-width: 0;
}

.inbox-tasks-list {
    min-height: 0;
    overflow: auto;
    flex: 1;
}

.inbox-tasks-right-pane {
    min-height: 0;
    overflow: auto;
}

/* Empty-only scaffolding: inbox sub-tab only. Draws a Panel-style border
   around each pane when its content is empty so the user can see where the
   list / team columns would render. Matches Panel.css tokens verbatim. */
.inbox-tasks-list.is-empty,
.inbox-tasks-right-pane.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The Teams pane is NOT inside the list card, so it draws its own panel border
   when empty. The list's surface now comes from .inbox-tasks-list-column, so the
   list's empty state must NOT draw a second border (no card-in-card). */
.inbox-tasks-right-pane.is-empty {
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-3);
}

@media (max-width: 1024px) {
    .inbox-tasks-workbench.with-pane {
        grid-template-columns: minmax(0, 1fr);
    }
    .inbox-tasks-right-pane {
        display: none;
    }
}

/* -- Tasks row header: now uses ExpandableRowHeader molecule -- */

/* -- Tasks detail (expanded row content) -- */

.inbox-tasks-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inbox-tasks-detail-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

@media (max-width: 640px) {
    .inbox-tasks-detail-rows {
        grid-template-columns: 1fr;
    }
}

.inbox-tasks-detail-description {
    background-color: var(--bg-layer-2);
    padding: var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.inbox-tasks-detail-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-style: italic;
}

/* ==================================================================
   REPAIR CREATION MODAL (hoisted from modules/Repairs/Repairs.css)
   ================================================================== */

.repairs-creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Generic Task creation modal (BL_047) -- single-column form. */
.task-creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Create Workflow modal -- two-column (form + helper summary), mirroring Create
   Task / Create Repair. */
.workflow-creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Hold a stable modal height as the operator moves through location -> guest ->
   workflow so it does not jump as sections fill in (matches the create-modal
   px sizing convention -- maxWidth is likewise a fixed px value). */
#workflow-creation-modal .modal-body-columns {
    min-height: 360px;
}

.task-creation-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.task-creation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.task-creation-row--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.repairs-creation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.repairs-creation-row--three {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Reserve vertical space for the location field so the modal does not
   reflow when switching between Room / Location / Other tabs. Height
   equals one FormField row (label + input + gap). */
.repairs-location-slot {
    min-height: var(--space-15);
}

.repairs-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1_5);
}

.repairs-location-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.repairs-helper-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.repairs-helper-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.repairs-helper-detail {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin: 0;
}

/* -- Description field with inline photo trigger -- */

.repairs-notes-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.repairs-photo-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
}

.repairs-photo-trigger {
    color: var(--text-muted);
}

.repairs-photo-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0_5) var(--space-2);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-full);
    font-size: var(--text-xs);
    color: var(--text-body);
    line-height: 1;
}

.repairs-photo-chip-icon {
    color: var(--text-muted);
}

.repairs-photo-chip-num {
    font-weight: var(--font-weight-semibold);
}

.repairs-photo-chip-remove {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: var(--space-0_5);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    color: var(--text-muted);
}

.repairs-photo-chip-remove:hover {
    color: var(--color-error);
}

.repairs-photo-input-hidden {
    display: none;
}

textarea.repairs-notes-textarea {
    min-height: var(--space-12);
    resize: vertical;
}

/* ==================================================================
   REPAIR DETAIL PANE (ported from main's RepairsQueue.css)
   ==================================================================
   The supervisor repair detail surface lives inside the expanded row
   of the inbox list. All class names are renamed from the legacy
   `.rq-*` namespace to `.inbox-tasks-*` so the rules don't collide
   with anything else in the codebase.
*/

.inbox-tasks-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.inbox-tasks-detail-col {
    display: flex;
    flex-direction: column;
}

/* Explicit-pair grid for the repair detail identity + status blocks.
   Each cell is a single DetailRow; .cell-full spans both columns so
   long values (Reported By name, Location, Closure Reason) get the
   full width while short fields pair up on a single row. */
.inbox-tasks-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.inbox-tasks-detail-cell {
    min-width: 0;
}

.inbox-tasks-detail-cell-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .inbox-tasks-detail-grid { grid-template-columns: 1fr; }
}

/* Progress row -- sits immediately below the photo thumbnails, full-width. */
.inbox-tasks-detail-progress {
    padding-top: var(--space-2);
}

/* Narrow sidebar context: tighten label column so values get more room. */
.inbox-tasks-detail .detail-row-label {
    min-width: 80px;
}

.inbox-tasks-detail-category-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.inbox-tasks-detail-section {
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.inbox-tasks-detail-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* -- Guest order lines (TLP-945) ---------------------------------
   The kitchen reads this block off a terminal at a pass, so the dish is the
   largest text anywhere in the detail pane and everything else here is
   deliberately quieter. Present only on a guest order; every other task type
   renders the detail exactly as it did before. */

.inbox-tasks-order {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-order-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.inbox-tasks-order-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.inbox-tasks-order-line:last-child {
    border-bottom: none;
}

.inbox-tasks-order-qty {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.inbox-tasks-order-name {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.inbox-tasks-order-price {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inbox-tasks-order-included {
    font-style: italic;
}

.inbox-tasks-order-collect {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
}

.inbox-tasks-order-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-default);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

/* -- Notes / description ----------------------------------------- */

.inbox-tasks-detail-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-detail-notes p {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin: 0;
}

.inbox-tasks-notes-empty {
    color: var(--text-muted);
    font-style: italic;
}

.inbox-tasks-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.inbox-tasks-notes-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-150) var(--easing-out),
                color var(--duration-150) var(--easing-out);
}

.inbox-tasks-notes-edit-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.inbox-tasks-notes-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
    resize: vertical;
    min-height: 80px;
}

.inbox-tasks-notes-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.inbox-tasks-notes-edit-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* -- Comments ---------------------------------------------------- */

.inbox-tasks-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comments-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.inbox-tasks-comment-entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

/* Body leads -- primary text + line height for readability. */
.inbox-tasks-comment-text {
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lean icon-led meta below the body. Mirrors DetailRow / history conventions. */
.inbox-tasks-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inbox-tasks-comment-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.inbox-tasks-comment-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comment-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
    resize: vertical;
    min-height: 48px;
}

.inbox-tasks-comment-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.inbox-tasks-comment-input > button {
    align-self: flex-end;
}

.inbox-tasks-detail-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* -- Change history --------------------------------------------- */

.inbox-tasks-history {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-history-entry {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-body);
}

.inbox-tasks-history-time {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 130px;
}

.inbox-tasks-history-action {
    font-weight: var(--font-weight-semibold);
}

.inbox-tasks-history-by {
    color: var(--text-muted);
}

/* The why of a hold or a cancel, on its entry (task-trail.js, TLP-1089). Italic
   and muted so it reads as the note it is, after the who. */
.inbox-tasks-history-reason {
    color: var(--text-muted);
    font-style: italic;
}

/* -- Photos (inline grouped thumbs + lightbox modal) ------------ */

.inbox-tasks-photos-section {
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-photo-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-photo-type-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inbox-tasks-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.inbox-tasks-photo-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    cursor: pointer;
}

.inbox-tasks-photo-thumb:hover {
    border-color: var(--color-primary);
}

.inbox-tasks-photo-full img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
}

/* ============================================================
   TASK EXECUTION MODAL (right-pane team-panel row click)
   ============================================================ */

.task-exec-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 320px;
}

.task-exec-pool {
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.task-exec-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
}

.task-exec-banner-locked {
    background: var(--color-warning-light);
    border: var(--border-width-1) solid var(--color-warning);
    color: var(--text-primary);
}

.task-exec-banner-busy {
    background: var(--bg-muted);
    border: var(--border-width-1) solid var(--border-subtle);
    color: var(--text-muted);
    font-style: italic;
}

/* Step renderer is intrinsically mobile-styled. Centre it inside the wider
   modal and cap its width so it reads like the phone view. */
.task-exec-mount {
    display: flex;
    justify-content: center;
}

.task-exec-mount > * {
    max-width: 420px;
    width: 100%;
}

/* Fire-time request answers -- shown above the step walk. */
.task-exec-request-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

/* Required-but-unanswered fire-time field cue (Create Task modal). */
.task-creation-request-fields .input-group.invalid .input-label,
.task-creation-request-fields .input-group.invalid .switch-label,
.task-creation-request-fields .input-group.invalid .checkbox-label-text {
    color: var(--color-error-hover);
}

.task-creation-request-fields .input-group.invalid .input-field {
    border-color: var(--color-error);
}

/* ===================================
   SCHEDULED CALENDAR -- OCCURRENCE OVERLAY
   ===================================
   Recurring-schedule occurrences plotted over the reused DayCalendar grid.
   The layer is absolutely positioned over the grid; each block's geometry
   arrives via --occ-* custom properties (the same blessed token pattern as
   CalendarView, never raw inline top/height). All values from tokens.
*/

/* -- Scheduled: calendar left, series list right (TLP-897) -- */

/* Claim the sub-tab's height and bound the two panes, so this sub-tab behaves like
   Inbox and Requested beside it. Without `flex: 1; min-height: 0` the grid was
   content-sized (`flex: 0 1 auto`) and measured 744px inside a 662px box -- it
   overflowed, and the overflow escaped to the tab, so switching to Scheduled started
   the whole page scrolling while its siblings did not. `align-items: start` was also
   keeping the panes content-sized; grid's default stretch is what lets each panel's
   body scroll instead. The row is `minmax(0, 1fr)` so it can shrink below its content
   rather than pushing the grid open again. */
.schedule-two-pane {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

@media (max-width: 1024px) {
    /* Stacked, the two panels cannot both fill. Fall back to content-sized and let the
       page scroll past them -- which is exactly what the platform does with any surface
       carrying more than one panel. */
    .schedule-two-pane {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        flex: 0 1 auto;
        min-height: auto;
    }
}

.schedule-list-empty {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    padding: var(--space-3);
}

.schedule-day-hint {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    padding-bottom: var(--space-2);
}

/* Fixed layout so the flexible Schedule column ellipsizes instead of growing
   to its longest title and pushing the other columns out of the pane. */
.schedule-series-table table {
    table-layout: fixed;
    width: 100%;
}

.schedule-series-table .schedule-cell-title {
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-series-table .schedule-cell-sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-calendar-scroll {
    /* Bound the hour grid to the panel viewport so it scrolls internally
       instead of stretching the panel (same height basis as the Calendar module). */
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

/* The grid is the positioning context for the absolute occurrence layer. */
.schedule-calendar-grid {
    position: relative;
}

/* Let the reused DayCalendar size to its content so % geometry maps to the full day. */
.schedule-calendar-grid .day-calendar {
    height: auto;
    overflow: visible;
}

.schedule-occurrence-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    /* offset past the hour-label gutter (label width + its right border) */
    left: calc(var(--space-15) + var(--border-width-1));
    right: 0;
    pointer-events: none;
}

.schedule-occurrence-block {
    position: absolute;
    top: var(--occ-top);
    height: var(--occ-height);
    left: var(--occ-left);
    width: calc(var(--occ-width) - var(--space-1));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    overflow: hidden;
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-light);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    border-left: var(--border-width-2) solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-xs);
    pointer-events: auto;
    cursor: pointer;
    transition: box-shadow var(--duration-200) var(--easing-out), transform var(--duration-200) var(--easing-out);
}

/* Paused schedules still plot (so they can be found + resumed), but greyed. */
.schedule-occurrence-block--paused {
    opacity: 0.55;
    background: var(--bg-layer-2);
    border-left-color: var(--border-strong);
    color: var(--text-secondary);
}

.schedule-occurrence-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    z-index: 2;
}

.schedule-occurrence-block:focus-visible {
    outline: var(--border-width-2) solid var(--color-primary);
    outline-offset: var(--space-0_5);
}

.schedule-occurrence-time { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.schedule-occurrence-title { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .schedule-occurrence-block { transition: none; }
    .schedule-occurrence-block:hover { transform: none; }
}

/* -- Workflow run panel (TLP-878) -------------------------------------------
   Sits inside the expanded task detail, in place of the old one-line chain
   marker. Gap-only spacing: no component here carries external margin. */

.inbox-tasks-run {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-run-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.inbox-tasks-run-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inbox-tasks-run-name {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* The run reference, mono so an operator can read it out to a colleague --
   half the point of the panel. */
.inbox-tasks-run-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    word-break: break-all;
}

/* Why a run stopped, inside the error Callout (TLP-882). The Callout owns its
   padding; this owns only the rhythm between the reason, the time and the
   retry -- gap on the parent, no margins on the children. */
.inbox-tasks-run-stall {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.inbox-tasks-run-stall-reason {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.inbox-tasks-run-stall-at {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* The chain is a read-only SegmentedControl: let it size to its content
   rather than stretch, and make clear it is a picture, not a control. */
.inbox-tasks-run-chain {
    align-self: flex-start;
    cursor: default;
}

.inbox-tasks-run-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* A step row is an ExpandablePanel + ExpandableRowHeader now (TLP-901), so the
   hand-rolled grid and its -index / -dept / -who spans are gone: the molecule
   lays the slots out. What is left here is the compact skin -- the organism's
   own chrome (12px radius, space-3 padding, a header rule) is too heavy for a
   row that lives INSIDE a panel. Scoped under the step list so no other
   ExpandablePanel on the platform is touched. */
.inbox-tasks-run-step {
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
}

.inbox-tasks-run-steps .expandable-panel .expandable-header {
    padding: var(--space-1) var(--space-2);
    border-bottom: none;
}

/* A plan step with no sibling row: same skin, no chevron, nothing to open. */
.inbox-tasks-run-step-static {
    padding: var(--space-1) var(--space-2);
}

/* You-are-here: the step this task IS. */
.inbox-tasks-run-step-current {
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
}

.inbox-tasks-run-step-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-3);
}

.inbox-tasks-run-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-run-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.inbox-tasks-run-check.is-done .inbox-tasks-run-check-label {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* When the panel was read (TLP-902) -- quiet, next to the run reference. */
.inbox-tasks-run-readat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}