/* ===== BYO Provisioner =====
   Small on purpose (inspector-ui-patterns §14). The list and detail are standard classes; the setup
   stepper borrows the organization stepper's `org-*` family from organizations.css (org-steps,
   org-field, org-copy-row, org-code, org-howto, org-form-error, org-field-row), which is token-based
   and was verified in a browser after the §23.5 incident, rather than defining a second stepper.
   Only what is genuinely this section's lives here. */

/* One line under the title saying what the section is for. */
.byo-lead {
    margin: 0;
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Status dots (§12) ─────────────────────────────────── */

.byo-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: var(--spacing-xs);
    border-radius: 50%;
    vertical-align: middle;
}

.byo-status-dot--ready   { background: var(--accent-confirm); }
.byo-status-dot--waiting { background: var(--accent-caution); }
.byo-status-dot--problem { background: var(--accent-danger); }
.byo-status-dot--busy    { background: var(--color-running); }
.byo-status-dot--gone    { background: var(--text-muted); }

/* An account email in a table cell: long, and read rather than scanned. */
.byo-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    overflow-wrap: anywhere;
}

.byo-muted {
    color: var(--text-muted);
}

/* ── The setup stepper ─────────────────────────────────── */

/* Terraform the customer copies: read-only, monospace, scrolls sideways rather than wrapping, so the
   HCL keeps the alignment `terraform fmt` gave it. */
.byo-snippet {
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    background: var(--bg-muted);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

/* A field label with its Copy button at the right, ABOVE the block rather than beside it: beside it,
   the button took width the snippet needed and the account address ran off the edge. */
.byo-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

/* The paste box (§13's editable JSON pattern). Inputs are styled by element selector in main.css;
   this adds only what a code paste needs. */
.byo-output-editor {
    width: 100%;
    min-height: 260px;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    line-height: 1.5;
    tab-size: 2;
    resize: vertical;
}

/* Why a paste was refused, one entry per output, inside the stepper's org-form-error box. */
.byo-output-errors {
    margin: var(--spacing-xs) 0 0;
    padding-left: var(--spacing-lg);
    line-height: 1.5;
}

.byo-output-errors li + li {
    margin-top: var(--spacing-xs);
}

/* Fields in the stepper are separated; org-field itself sets no gap between siblings. */
.byo-step-body > .org-field + .org-field,
.byo-step-body > .org-field + .org-howto,
.byo-step-body > .org-howto + .org-field {
    margin-top: var(--spacing-md);
}

/* ── The access check (step 5 and the detail view) ─────── */

/* The verdict in one line above the table. */
.byo-access-summary {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.byo-access-summary .byo-muted {
    font-weight: 400;
}

/* Something about the check as a whole, usually "grants are still spreading": a caution, not a failure. */
.byo-access-note {
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--accent-caution);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
    color: var(--text-primary);
}

/* Twenty rows inside a modal: tighter than a list page's table. */
.byo-access-table {
    font-size: var(--font-size-body-xs);
}

/* Permission and role names wrap only at the <wbr> after each `.` and `/` (segmentedName), never
   mid-word as `overflow-wrap: anywhere` on .org-code and .byo-mono would. */
.byo-access-table .org-code,
.byo-access-table .byo-mono {
    overflow-wrap: normal;
}

/* What fixes a missing permission, on its own line under that permission's row. */
.byo-access-fix td {
    padding-top: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.byo-nowrap {
    white-space: nowrap;
}

/* ── Detail ────────────────────────────────────────────── */

.byo-detail-card + .byo-detail-card {
    margin-top: var(--spacing-md);
}

.byo-detail-card h3 {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Machines (lane 3) ─────────────────────────────────── */

/* Projects / Machines: two links under the title, each its own route. Underlined when current, as a
   link rather than a tab, because that is what it is. */
.byo-switch {
    display: flex;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-body-sm);
}

.byo-switch__link {
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    text-decoration: none;
}

.byo-switch__link:hover {
    color: var(--text-primary);
}

.byo-switch__link--active {
    border-bottom-color: var(--accent-main);
    color: var(--text-primary);
    font-weight: 600;
}

/* "Orphan" beside a machine's name: something nobody created through us, still running. A caution,
   not a failure, so it takes the caution accent as an outline rather than a fill. */
.byo-badge {
    display: inline-block;
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-body-xs);
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.byo-badge--orphan {
    border-color: var(--accent-caution);
    color: var(--text-primary);
    cursor: help;
}

/* One line per project the list cannot vouch for (plan §5.5): a project that cannot be read must never
   look like a project with no machines. */
.byo-banner {
    margin: 0 0 var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-default);
    border-left-width: 4px;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
    color: var(--text-primary);
}

.byo-banner--problem { border-left-color: var(--accent-danger); }
.byo-banner--waiting { border-left-color: var(--accent-caution); }

/* The project detail's Machines card: its title with Sweep now at the right. */
.byo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.byo-card-summary,
.byo-reason {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
    color: var(--text-primary);
}

.byo-card-table,
.byo-labels-table {
    font-size: var(--font-size-body-xs);
}

.byo-card-row {
    cursor: pointer;
}

/* Key beside value, as the field rows above it read, rather than spread across the card. */
.byo-labels-table td:first-child {
    width: 30%;
}

.byo-footnote {
    margin: var(--spacing-md) 0 0;
    font-size: var(--font-size-body-xs);
}

/* ── Machine lifecycle (lane 4) ────────────────────────── */

/* The machine forms (create, adopt, extend): fields one under another, spaced as the setup stepper's.
   The Advanced fold holds a form of its own, so its fields are spaced the same way. */
.byo-form > * + * {
    margin-top: var(--spacing-md);
}

/* The one hint that speaks for the three version fields above it, so it sits close under them. */
.byo-form > .org-create__grid + .org-field__hint {
    display: block;
    margin-top: var(--spacing-xs);
}

/* "Past lease": nothing enforces a lease yet (Q56), so a person must see it. A caution outline, as the
   Orphan badge, but in the danger accent: the machine is running past what was agreed. */
.byo-badge--past {
    border-color: var(--accent-danger);
    color: var(--text-primary);
    cursor: help;
}

/* The job in flight, where Google's status would be. Patched in place each tick. */
.byo-job {
    color: var(--text-primary);
}

/* How the last job failed, beside Google's status; its advice is on hover. */
.byo-job-failed {
    color: var(--accent-danger);
    cursor: help;
}

.byo-lease {
    white-space: nowrap;
}

/* Retry in a list row: beside the status it explains, smaller than the row's text would make it. */
.byo-row-action {
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

/* What a job chose not to do, or found already done (lifecycle plan §5.5). */
.byo-notes {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Sweep now and New machine at the right of the project's Machines card. */
.byo-card-actions {
    display: flex;
    gap: var(--spacing-sm);
}