/* Styles for the coaches page (components/coachesPage.js): the roster
   of coach cards and their profile dialog. Values come from
   design/tokens.css — no raw colours here (scripts/checkDesignTokens.js). */

.coach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.coach-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-4) 19px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    /* backwards, not both: the entrance holds its FIRST frame during the
       stagger delay, then hands the element back to the hover transform. */
    animation: coach-card-in 0.26s ease backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}

/* The coach's own calendar colour, as an edge accent: the same hue their
   trainings carry in the calendar, so the roster and the calendar name
   people the same way. Transparent until a colour is set. */
.coach-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--coach-accent, transparent);
}

.coach-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}

.coach-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.coach-card-photo {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-surface-hover);
}

.coach-card-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text-secondary);
}

.coach-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.coach-card-name {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reference detail, deliberately quiet under the name. Explicit weight:
   the card is a <button> and would otherwise inherit 600 from the app's
   button rules, which made the number read as loud as the name. */
.coach-card-phone {
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: 400;
    /* Phone numbers line up column-wise across the roster. */
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.coach-card-flags .p-tag {
    padding: 1px 7px;
    font-size: var(--text-xs);
    font-weight: 500;
}

.coach-card-flags .p-tag-icon {
    font-size: 10px;
}

/* The card is a button; say so. */
.coach-card-go {
    flex: 0 0 auto;
    align-self: center;
    font-size: 13px;
    color: var(--color-border-strong);
    transition: transform 0.14s ease, color 0.14s ease;
}

.coach-card:hover .coach-card-go {
    color: var(--color-text-secondary);
    transform: translateX(2px);
}

@keyframes coach-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .coach-card {
        animation: none;
        transition: none;
    }
}

/* ── Monthly settlement ─────────────────────────────────────────────
   A restrained, utility-first treatment: one control row, one data area,
   neutral surfaces, and details expressed by type rather than decorative
   cards. It follows the compact editorial feel of ElevenLabs' product UI. */
.coach-settlement-card.p-card,
.coach-settlement-history-card.p-card {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.coach-settlement-card .p-card-body,
.coach-settlement-card .p-card-content {
    padding: 0;
}

.coach-settlement {
    display: grid;
    gap: var(--space-3);
    padding: 20px;
}

.coach-settlement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.coach-settlement-heading {
    min-width: 0;
}

.coach-settlement-heading h3 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.coach-settlement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-tertiary);
}

.coach-settlement-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.settlement-month-picker {
    flex: 0 0 164px;
    width: 164px;
}

.settlement-month-picker .p-inputtext {
    box-sizing: border-box;
    width: 100%;
    border-color: var(--color-border);
    color: var(--color-text);
}

.coach-settlement-actions > .p-button {
    flex: 0 0 auto;
}

.coach-settlement-actions .p-button.p-button-outlined {
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

.coach-settlement-actions .p-button.p-button-outlined:not(:disabled):hover {
    border-color: var(--color-text-secondary);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.settlement-recalc-result {
    justify-self: start;
}

.settlement-empty-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-1);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

.settlement-empty-state .pi {
    color: var(--color-text-tertiary);
}

.settlement-empty-state div {
    display: grid;
    gap: 2px;
}

.settlement-empty-state strong {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}

.settlement-empty-state span {
    font-size: var(--text-sm);
}

/* Header/cell treatment comes from the shared .bo-table vocabulary
   (index.html); each table states only its own column-set width. */
.settlement-table .p-datatable-table {
    min-width: 670px;
}

.settlement-coach-name {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.settlement-number {
    display: inline-block;
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-text);
}

.settlement-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.settlement-employment-mix {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.settlement-warning.p-tag {
    margin-left: var(--space-2);
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: 500;
}

.settlement-muted,
.settlement-status-date {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.settlement-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

/* Keep statuses visibly lighter than the decision button. Tags are state
   labels, not miniature calls to action; Undo is tertiary text. */
.settlement-status .p-tag {
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.25;
}

.settlement-status .p-tag .p-tag-icon {
    font-size: 10px;
}

.settlement-status .p-button.p-button-text {
    padding: 4px 6px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.settlement-status .p-button.p-button-text:not(:disabled):hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* Black and deliberate — that finish now comes from .bo-btn-decisive in
   design/vocabulary.css. Only the row-scale sizing is this table's own:
   it sits inside a data row, so it runs a step smaller than a standalone
   button. */
.settlement-settle-button.p-button.bo-btn-decisive {
    min-height: 30px;
    padding: 5px 10px;
    font-size: var(--text-sm);
}

/* ── Settlement history ─────────────────────────────────────────────
   Same quiet surface and data density as the current-month view. The
   history retains its original summary plus optional month-by-month detail;
   only the presentation changes. */
.coach-settlement-history-card .p-card-body,
.coach-settlement-history-card .p-card-content {
    padding: 0;
}

.coach-settlement-history {
    display: grid;
    gap: var(--space-3);
    padding: 20px;
}

.settlement-history-header h3 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.settlement-history-header p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.settlement-history-empty {
    padding: var(--space-3) 0;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

.settlement-history-table .p-datatable-table {
    min-width: 440px;
}

.settlement-history-detail-table .p-datatable-table {
    min-width: 600px;
}

/* The grand total has its own, stronger divider, so do not leave a second
   row rule directly above it. */
.settlement-history-table .p-datatable-tbody > tr:last-child > td {
    border-bottom: 0;
}

.settlement-history-coach {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.settlement-history-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.settlement-history-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0 0;
    border-top: 2px solid var(--color-border-strong);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

.settlement-history-total strong {
    font-size: var(--text-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.settlement-history-details {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.settlement-history-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.settlement-history-details[open] summary {
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .coach-settlement {
        padding: var(--space-4);
    }

    .coach-settlement-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .coach-settlement-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* The profile dialog is a fixed frame: same size for every coach and
   every tab, so switching tabs never resizes the window under the
   cursor. Content scrolls inside; the footer stays put. */
.coach-dialog.p-dialog {
    width: min(1180px, 92vw);
    max-width: 92vw;
    height: 90vh;
    max-height: 90vh;
}

.coach-dialog .p-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

@media (max-width: 1080px) {
    .coach-dialog.p-dialog {
        width: 94vw;
        height: 88vh;
        max-height: 88vh;
    }
}

/* Phone: the dialog is the screen. */
@media (max-width: 768px) {
    .coach-dialog.p-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Portrait beside the bio fields; stacked on a phone, where two columns
   leave the text areas too narrow to write in. */
.coach-profile-cols {
    display: flex;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .coach-profile-cols {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* The dialog's portrait, sized for the bigger frame. */
.coach-photo-preview {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-hover);
}

/* ── Dialog form vocabulary ──────────────────────────────────────────
   Every tab is built from the same three parts, so the eye learns the
   shape once: a section card, its title, and one line of subtext that
   says what the section governs. Controls carry a label above and, when
   a rule needs stating, a hint below. Nothing inside a tab sets its own
   font-size or colour. */
.coach-section {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.coach-section:last-child {
    margin-bottom: 0;
}

/* A lone section needs no box: with nothing to separate it from, the
   border is just chrome (the Profile tab, since Display moved out). */
.coach-dialog .coach-section:only-child {
    padding: 0;
    border: none;
    background: transparent;
}

/* Display is a short set of related settings, not two separate cards.
   A shared flat surface and one hairline make the tab calmer while keeping
   the existing calendar and player-listing controls distinct. */
.coach-display-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coach-display-grid .coach-display-section {
    min-width: 0;
    margin: 0;
    padding: var(--space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.coach-display-grid .coach-display-section + .coach-display-section {
    border-left: 1px solid var(--color-border);
}

.coach-display-listing .coach-row-spaced {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .coach-display-grid {
        grid-template-columns: 1fr;
    }

    .coach-display-grid .coach-display-section + .coach-display-section {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

/* Pricing has two distinct concerns, but they belong to one decision flow.
   Keep them in one quiet surface; the internal rule does the grouping work
   without turning the tab into a stack of cards. */
.coach-pricing-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coach-pricing-panel .coach-pricing-section {
    margin: 0;
    padding: var(--space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.coach-pricing-panel .coach-pricing-section + .coach-pricing-section {
    border-top: 1px solid var(--color-border);
}

.coach-prime-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.coach-prime-time-select {
    width: 130px;
}

.coach-pricing-table-wrap {
    margin-top: var(--space-4);
    overflow-x: auto;
}

.coach-pricing-table {
    width: 100%;
    min-width: 430px;
    border-collapse: collapse;
    font-size: var(--text-md);
}

.coach-pricing-table th {
    padding: 0 var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    white-space: nowrap;
}

.coach-pricing-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.coach-pricing-table th:first-child,
.coach-pricing-table td:first-child {
    width: 100%;
    padding-left: 0;
}

.coach-pricing-table th:last-child,
.coach-pricing-table td:last-child {
    padding-right: 0;
}

.coach-pricing-table td:first-child {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.coach-pricing-input {
    width: 96px;
}

.coach-pricing-input .p-inputnumber-input {
    width: 100%;
}

/* Profile keeps the photo and public-facing bios together, using the same
   single quiet surface as the other dialog tabs. */
.coach-profile-panel {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.coach-profile-panel .coach-profile-section:only-child {
    margin: 0;
    padding: var(--space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.coach-profile-panel .coach-profile-cols {
    gap: 0;
}

.coach-profile-panel .coach-photo-col {
    flex: 0 0 176px;
    padding-right: var(--space-5);
    border-right: 1px solid var(--color-border);
}

.coach-profile-panel .coach-bio-col {
    padding-left: var(--space-5);
}

@media (max-width: 768px) {
    .coach-profile-panel .coach-photo-col {
        flex-basis: auto;
        width: 100%;
        padding: 0 0 var(--space-4);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .coach-profile-panel .coach-bio-col {
        width: 100%;
        padding: var(--space-4) 0 0;
    }
}

/* Schedule and time off are two related tasks. On wide screens they sit
   side by side, separated by one hairline; each weekday stays compact. */
.coach-schedule-panel {
    display: grid;
    grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coach-schedule-panel .coach-schedule-section {
    margin: 0;
    padding: var(--space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.coach-schedule-panel .coach-schedule-section + .coach-schedule-section {
    border-top: 0;
    border-left: 1px solid var(--color-border);
}

.coach-schedule-list {
    display: grid;
    max-width: none;
}

.coach-schedule-row {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.coach-schedule-row:last-child {
    border-bottom: 0;
}

.coach-schedule-row.is-disabled .coach-schedule-day {
    color: var(--color-text-tertiary);
}

.coach-schedule-switch {
    grid-column: 1;
}

.coach-schedule-day {
    grid-column: 2;
    font-weight: 500;
    color: var(--color-text);
}

.coach-schedule-times {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.coach-block-date,
.coach-block-reason {
    min-height: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.coach-schedule-select.p-select {
    width: 104px;
}

.coach-time-separator {
    padding: 0 var(--space-1);
    color: var(--color-text-tertiary);
    text-align: center;
}

.coach-inline-error {
    margin: var(--space-2) 0 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
}

.coach-schedule-row .coach-inline-error {
    grid-column: 2 / -1;
}

.coach-block-list {
    display: grid;
    max-width: 460px;
    margin-top: var(--space-4);
}

.coach-block-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.coach-block-summary {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: baseline;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--color-text);
}

.coach-block-summary span:last-child {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
}

.coach-block-row .p-button {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

.coach-block-title {
    grid-column: 1;
    grid-row: 2;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-block-kind {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.coach-block-composer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    width: min(100%, 460px);
}

.coach-block-form {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2);
}

.coach-block-form .p-button {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
}

.coach-block-time-range {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.coach-block-date {
    width: 100%;
    padding: 0 var(--space-2);
}

.coach-block-reason {
    width: 100%;
    padding: 0 var(--space-2);
    grid-column: 1 / -1;
    grid-row: 2;
}

.coach-block-conflicts {
    margin-top: var(--space-3);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-warning);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.coach-block-conflict-item {
    margin-left: var(--space-2);
}

@media (max-width: 768px) {
    .coach-schedule-panel {
        grid-template-columns: 1fr;
    }

    .coach-schedule-panel .coach-schedule-section {
        padding: var(--space-4);
    }

    .coach-schedule-panel .coach-schedule-section + .coach-schedule-section {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .coach-schedule-row {
        grid-template-columns: auto 1fr;
        row-gap: var(--space-2);
    }

    .coach-schedule-times {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .coach-schedule-row .coach-inline-error {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .coach-block-form {
        grid-template-columns: 1fr;
    }

    .coach-block-time-range,
    .coach-block-reason,
    .coach-block-form .p-button {
        grid-column: 1;
        grid-row: auto;
    }
}

.coach-section-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

/* What the section governs — one line, directly under the title.
   Capped at a readable measure (~70ch) so it never runs the full
   dialog width. */
.coach-section-sub {
    margin: 4px 0 0;
    max-width: 70ch;
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* The controls start after the heading block — a full step down, so
   the heading reads as a unit and the controls as another. */
.coach-section-body {
    margin-top: var(--space-4);
}

.coach-label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* A rule about one control, stated under it. Same measure cap. */
.coach-hint {
    margin: 6px 0 0;
    max-width: 70ch;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-tertiary);
}

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

/* A label sitting in a row rather than above its control. */
.coach-label-inline {
    margin-bottom: 0;
}

.coach-toggle-label {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
}

.coach-row-spaced {
    margin-top: var(--space-5);
}

.coach-bio-col {
    flex: 1;
    min-width: 0;
}

.coach-photo-col {
    flex: 0 0 auto;
    text-align: center;
}

.coach-photo-col .p-fileupload {
    margin-top: var(--space-2);
}

.coach-bio-col .p-textarea {
    width: 100%;
}

.coach-row + .coach-row,
.coach-field + .coach-field {
    margin-top: var(--space-4);
}

/* An empty state is a state, not a sentence of the hint above it:
   a quiet dashed box that clearly belongs to the (empty) list area. */
.coach-empty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    color: var(--color-text-tertiary);
}

.coach-empty .pi {
    font-size: var(--text-base);
}

/* A secondary action living inside a section: separated by a hairline,
   introduced by its own hint. */
.coach-subaction {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.coach-subaction .coach-hint {
    margin: 0 0 var(--space-2);
}

.coach-saved {
    font-size: var(--text-sm);
    color: var(--color-success);
}

/* One Save serves the whole dialog, always in the same corner. */
.coach-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}