/* RequestTaskTemplates.css - Module-specific styles for template builder */
/* Atomic components handle their own styling. This covers layout and builder-specific patterns. */

/* View tabs render via the shared SegmentedControl molecule. The wrapper
   stops the cross-axis stretch from VerticalStackTemplate (flex column)
   so the pill sits at its natural inline-flex width. Mirrors the
   .policies-rules-sub-tabs pattern. */
.templates-view-tabs {
    display: flex;
}

/* ============================================================
   ROW ACTIONS
   ============================================================ */

.templates-row-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* ============================================================
   TEAM ASSIGNMENT (Task Authoring -> Team column + bulk apply)
   ============================================================ */

.templates-team-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Team column header: keeps the column label and the bulk-assign Combobox
   on a single row inside the <th>. Label hugs the left; Combobox takes the
   remaining width. Same width budget as the Team data column (320px). */
.templates-team-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.templates-team-header > span:first-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.templates-team-header .combobox {
    flex: 1 1 auto;
    min-width: 0;
}

.templates-team-header-count {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.templates-dirty-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-warning-light);
    border: var(--border-width-1) solid var(--color-warning);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-3);
}

.templates-dirty-bar-label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================
   TASK BUILDER (WYSIWYG shell, Phase 1)
   ============================================================ */

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

/* Phase 5: removed .task-settings-strip / .task-settings-summary /
   .task-settings-body / .task-settings-row -- task-level fields moved
   into the inspector's Task mode, so the modal-top collapsible strip is
   gone. */

.task-builder-columns {
    display: grid;
    /* Middle column holds the 375px phone-frame preview + a comfortable
       margin; the right column gets all remaining width so the widget
       properties form has room to breathe. */
    grid-template-columns: 200px 480px 1fr;
    gap: var(--space-3);
    /* Stable height so the modal doesn't resize when the composer's selected
       step changes. Columns scroll internally if their content overflows. */
    height: clamp(480px, 65vh, 720px);
}

.task-builder-palette,
.task-builder-composer,
.task-builder-inspector {
    overflow-y: auto;
    min-height: 0; /* required for grid items to shrink below content size */
}

/* ----- Palette ----- */

.task-builder-palette {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.palette-header {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.palette-group-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.palette-group-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.palette-item:hover:not([data-disabled]) {
    background: var(--bg-layer-2);
    border-color: var(--color-primary);
}

.palette-item[data-disabled] {
    /* Phase 7 P3: stronger "disabled because no step selected" treatment.
       Greyed text + reduced opacity + not-allowed cursor makes the state
       obvious before the operator hovers for the title tooltip. */
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--text-muted);
    background: var(--bg-layer-3);
}

.palette-item[data-disabled] .palette-item-icon {
    color: var(--text-muted);
}

/* Phase 7 P3: empty-state hint that only paints when no step is selected.
   Sits between the palette header and the groups so the dimmed tiles below
   read as "consequences of no step yet" rather than "broken". */
.palette-empty-hint {
    padding: var(--space-2);
    background: var(--bg-layer-4);
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

.palette-item-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

/* ----- Composer (Phase 4: phone-frame preview) ----- */
/*
 * The middle column is a phone-frame mirror of the staff-app task screen.
 * Three vertical sections: task summary card, step counter row (operator
 * control, outside the frame), and the phone frame itself (~375px wide).
 * The widget overlay system continues to operate inside the frame.
 */

.task-builder-composer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-layer-2);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    overflow-y: auto;
}

/* Task summary card: title + description echo of the task-settings strip.
   Sized to align with the phone frame below. Card is clickable as a
   deselect target -- clicking it drops widget selection. */
.task-preview-summary {
    width: 100%;
    max-width: 375px;
    padding: var(--space-3);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

.task-preview-summary-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.task-preview-summary-desc {
    margin: var(--space-1) 0 0 0;
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.4;
}

/* Step counter row: arrows, label, inline CRUD, add button. Sits ABOVE the
   phone frame because it's an operator-only control. Pinned to the frame
   width for visual alignment. */
.task-preview-step-counter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 375px;
    padding: var(--space-1) var(--space-2);
}

.step-counter-arrow,
.step-counter-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    background: transparent;
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
}

.step-counter-arrow:hover:not([disabled]),
.step-counter-action:hover:not([disabled]) {
    background: var(--bg-layer-3);
    border-color: var(--color-primary);
}

.step-counter-arrow[disabled],
.step-counter-action[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.step-counter-danger:hover:not([disabled]) {
    border-color: var(--color-error);
    color: var(--color-error);
}

.step-counter-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 var(--space-1);
}

.step-counter-spacer {
    flex: 1;
}

.step-counter-add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
}

.step-counter-add:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

/* Phone frame: iPhone-class viewport. Subtle border + shadow to suggest a
   device chrome without skeuomorphism. Click on the frame background
   (anywhere not occupied by a widget overlay) deselects. */
.task-preview-frame {
    width: 100%;
    max-width: 375px;
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* The frame is a flex child of the composer column and shrinks to the
       leftover height. overflow-x stays hidden so the rounded corners keep
       clipping widget overlays; overflow-y scrolls so steps with many widgets
       stay reachable instead of being silently clipped below the fold. */
    overflow-x: hidden;
    overflow-y: auto;
    cursor: pointer;
}

.task-preview-frame-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    cursor: default;
}

/* Mirrors the staff-app step header inside the frame. Title bold, then an
   instruction paragraph below. Placeholders are italicised + muted so the
   operator knows the field is empty. */
.task-preview-step-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.task-preview-step-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.task-preview-step-title-placeholder {
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
}

.task-preview-step-instruction {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: 1.4;
}

.task-preview-step-instruction-placeholder {
    font-style: italic;
    color: var(--text-muted);
}

/* Staff-style Next button at the bottom of the frame. Disabled in builder
   mode -- it's just preview. */
.task-preview-next-row {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.task-preview-next-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.7;
}

.composer-widgets {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 80px;
}

.composer-widgets-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-md);
}

/* Each rendered widget is wrapped via .composer-widget-host (added by
   stepBuilder._decorateWidgetOverlays). Provides positioning context for the
   absolute overlay layered on top. */
.composer-widget-host {
    position: relative;
}

.composer-widget-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    z-index: 1;
}

.composer-widget-overlay:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.composer-widget-overlay.selected {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.composer-widget-remove {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.composer-widget-overlay:hover .composer-widget-remove,
.composer-widget-overlay.selected .composer-widget-remove {
    opacity: 1;
}

/* The TaskStepRenderer paints its own .step-actions (Previous/Next) and
   .step-header inside the composer-widgets host -- they're meaningless in
   builder preview, so collapse them. */
.composer-widgets .step-actions,
.composer-widgets .step-header {
    display: none !important;
}

.composer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    color: var(--text-muted);
    text-align: center;
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-md);
}

.composer-empty-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-body);
}

/* ----- Inspector ----- */

.task-builder-inspector {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.inspector-header {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Phase 5: persistent breadcrumb at the top of the inspector.
   Task > Step N > Widget. Parent segments are buttons (clickable);
   the current segment is a span (non-clickable, bold). Inline-flex so
   the chevron separator sits inline without an extra layout layer. */
.inspector-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inspector-breadcrumb-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.inspector-breadcrumb-link:hover {
    color: var(--color-primary);
}

.inspector-breadcrumb-current {
    color: var(--text-primary);
    font-weight: 700;
}

.inspector-breadcrumb-sep {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1;
}

.inspector-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--text-muted);
    text-align: center;
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-md);
}

.inspector-placeholder-icon {
    color: var(--text-muted);
}

.inspector-placeholder-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-body);
}

.inspector-placeholder-body {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inspector-selected {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-layer-4);
    border-radius: var(--border-radius-md);
}

.inspector-selected-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.inspector-type {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.inspector-name {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: monospace;
}

/* Phase 3 inspector form -- compact stack of label/input rows + an options
   editor. Each row is a column with a label-then-input layout (label sits
   above the input). Help text is small + muted below the input. */

.inspector-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

/* Phase 7 follow-up: pair compact fields on one row (duration + status,
   visibility + team) so the Task-mode form is denser. min-width: 0 lets
   each cell collapse below its content's natural width when the inspector
   column narrows. */
.inspector-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.inspector-form-row > * {
    min-width: 0;
}

.inspector-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
}

.inspector-row-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inspector-row-input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-layer-2);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-family: inherit;
}

.inspector-row-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-layer-1);
}

.inspector-row-help {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

.inspector-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.inspector-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-1) dashed var(--border-subtle);
}

.inspector-options-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inspector-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inspector-option-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-1);
    align-items: center;
}

.inspector-option-row:has(.inspector-option-color) {
    grid-template-columns: 1fr 1fr auto auto;
}

.inspector-option-input,
.inspector-option-color {
    padding: var(--space-1);
    background: var(--bg-layer-2);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}

.inspector-option-input:focus,
.inspector-option-color:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-layer-1);
}

.inspector-option-remove {
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-error);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: 50%;
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.inspector-option-remove:hover {
    background: var(--color-error-light);
    border-color: var(--color-error);
}

.inspector-add-option {
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
}

.inspector-add-option:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

/* ----- Inspector step-settings mode (Phase 4) ----- */
/*
 * When no widget is selected, the inspector shows the current step's
 * metadata (title, instructions, guidance, photo flag, media, checklist).
 * Each cluster sits in its own vertical group with a muted label header.
 */

.inspector-step-settings .inspector-form > * {
    /* Compact gap between step-settings groups -- denser than widget-config
       because there are more rows. */
    margin: 0;
}

.inspector-step-photo,
.inspector-step-media,
.inspector-step-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-width-1) dashed var(--border-subtle);
}

/* Checklist rows inside the inspector's step-settings Checklist section. */
.step-checklist-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.step-checklist-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.step-checklist-row .input-wrapper {
    flex: 1;
}

/* Phase 5: per-row reorder chevrons. Match the step-counter-arrow visual
   shape so the operator's eye reads "this is the same kind of control".
   Disabled state matches the step-counter-arrow disabled treatment. */
.step-checklist-reorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    background: transparent;
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.step-checklist-reorder:hover:not([disabled]) {
    background: var(--bg-layer-3);
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.step-checklist-reorder[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   ICON BUTTONS (compact actions in cards)
   ============================================================ */

/* Icon-only actions use Icon.build({ clickable: true }) from Icon atom — no size override. */

/* Extra small buttons */
.btn-xs {
    padding: var(--space-0_5) var(--space-2);
    font-size: var(--text-xs);
}

/* ============================================================
   REQUEST BUILDER (inside modal)
   ============================================================ */

.request-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.request-builder-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

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

/* Tasks Section */
.request-builder-tasks {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.request-builder-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.request-builder-tasks-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.request-builder-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.request-builder-picker-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.request-builder-picker-row .form-select {
    flex: 1;
}

.request-builder-picker-empty,
.request-builder-tasks-empty {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    background: var(--bg-layer-2);
    border-radius: var(--border-radius-md);
}

/* Task List (selected tasks in request) */
.request-builder-task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.request-task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
}

.request-task-card-missing {
    border-color: var(--color-error);
    background: var(--color-error-light);
}

.request-task-card-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.request-task-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: 50%;
    background: var(--bg-layer-2);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.request-task-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.request-task-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-task-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.request-task-card-right {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ============================================================
   STEP MEDIA ITEMS (inside the Composer's collapsible Media extra)
   ============================================================ */

.step-media-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.step-media-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1_5) var(--space-2);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.step-media-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.step-media-name {
    font-size: var(--text-xs);
    color: var(--text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact upload zone inside the inspector's step-settings Media field. */
.inspector-step-media .file-upload-zone {
    padding: var(--space-2);
    min-height: auto;
}

.inspector-step-media .file-upload-zone .upload-icon {
    display: none;
}

.inspector-step-media .file-upload-zone .upload-title {
    font-size: var(--text-xs);
    margin: 0;
}

.inspector-step-media .file-upload-zone .upload-subtitle,
.inspector-step-media .file-upload-zone .upload-hint {
    font-size: var(--text-xs);
    margin: 0;
}

/* Phase 7 follow-up: compact textareas in the inspector. The Textarea atom
   carries a min-height for full-form contexts; in the inspector's
   constrained right column we want 2 visual lines, not 3. The rows="2"
   attribute already requests 2 lines; this override removes the min-height
   floor that was inflating to ~3 lines. */
.task-builder-inspector textarea {
    min-height: 0;
}

/* ============================================================
   PHASE 2: DRAG-AND-DROP VISUALS
   ============================================================ */

/* Palette tile + widget overlay + step pill: when grabbed (via mouse or
   keyboard) we mark with aria-grabbed=true and the dnd-grabbed class so
   the badge becomes visible and the source dims slightly. */

.dnd-grabbed-badge {
    display: none;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    padding: 0 var(--space-1);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

[aria-grabbed="true"] .dnd-grabbed-badge,
.dnd-grabbed .dnd-grabbed-badge {
    display: inline-block;
}

[aria-grabbed="true"],
.dnd-grabbed {
    opacity: 0.7;
    outline: 2px dashed var(--color-primary);
    outline-offset: 2px;
}

/* Composer widgets container -- ring outline while a palette drag is in flight
   and dragover is firing. Removed on dragleave + drop. */
.composer-widgets.dnd-drop-target {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Insert-position indicator on widget overlays + step pills. 1px top edge
   in primary -- shows where the moved item will land. */
.composer-widget-overlay.dnd-insert-target {
    box-shadow: inset 0 2px 0 0 var(--color-primary);
}

/* Phase 5: dropped .composer-step-pill.dnd-insert-target -- the step-pill
   nav strip was retired in Phase 4, no element matches the selector. */

/* Keyboard-grabbed elements need an unmistakable focus ring. Browsers vary
   on :focus-visible; force outline on the keyboard-grabbed marker. */
.composer-widget-overlay:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   DATA-HIDDEN TOGGLE (QA bindings + misc legacy hooks)
   ============================================================ */

[data-hidden] {
    display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
    .task-builder-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .request-builder-row {
        grid-template-columns: 1fr;
    }
}