/**
 * Organizations section — the MAG_SUP cross-tenant Organization surface.
 *
 * Deliberately small (§14): the list, the detail card and both tables are standard
 * `.execution-list` / `.card` / `.table` structures. What is here is the create form's grid,
 * the detail view's label/value rows, and the states the shared classes have no opinion about.
 *
 * Every colour, size and spacing below is a token from main.css `:root`. A token that does not
 * exist fails silently and renders as unstyled-but-plausible, which is how a breadcrumb once
 * shipped looking like body text — so these were checked against the real names, not remembered.
 */

/* ── List ───────────────────────────────────────────────── */

.org-filters {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* `.table tbody tr` sets cursor:pointer app-wide because rows are normally the click target.
   The add row is a form, not a link — without this it advertises a click that does nothing. */
.org-add-row,
.org-add-row:hover {
    cursor: default;
    background-color: transparent;
}

.org-add-row input {
    width: 100%;
    max-width: 320px;
}

.org-cell-name {
    font-weight: 600;
}

.org-cell-ref,
.org-cell-owner {
    font-size: var(--font-size-body-xs);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.org-ref-sep {
    color: var(--text-muted);
    padding: 0 2px;
}

/* The honest empty value. Distinct from a blank cell, which reads as a rendering fault. */
.org-none {
    color: var(--text-muted);
}

/* ── Create form ────────────────────────────────────────── */

.org-create__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}

.org-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.org-field__label {
    font-size: var(--font-size-body-sm);
    color: var(--text-secondary);
    font-weight: 600;
}

.org-field__optional {
    font-weight: 400;
    color: var(--text-muted);
}

/* Hints are visible text, not placeholders: a placeholder truncates at the input width and
   disappears the moment anything is typed, so anything needed to operate the control lives here. */
.org-field__hint {
    font-size: var(--font-size-body-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.org-create__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ── Errors ─────────────────────────────────────────────── */

.org-form-error {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--accent-danger);
    border-radius: var(--border-radius-md);
    color: var(--accent-danger);
    font-size: var(--font-size-body-sm);
}

.org-error {
    color: var(--accent-danger);
}

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

.org-detail__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.org-detail__col {
    min-width: 0;
}

.org-subhead {
    font-size: var(--font-size-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.org-subhead--spaced {
    margin-top: var(--spacing-lg);
}

.org-count {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0;
}

.org-field-row {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-body-sm);
}

.org-field-row__label {
    flex: 0 0 170px;
    color: var(--text-secondary);
}

.org-field-row__value {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.org-inline-action {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.org-inline-action__row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.org-inline-action__row input {
    flex: 1;
    min-width: 0;
}

/* Kept on one line: wrapped action buttons make every row a different height, and a table whose
   row rhythm is ragged reads as broken before it reads as full. */
.org-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    white-space: nowrap;
}

.org-admin-tenant {
    color: var(--accent-main);
    font-weight: 600;
}

/* Why a Remove button is absent on the administrative row. Stated under the table as visible text,
   because an explanation that only appears on hover is one nobody reads. */
.org-table-note {
    margin: var(--spacing-sm) 0 0 0;
    font-size: var(--font-size-body-xs);
    color: var(--text-muted);
}

/* ── Organization settings, tier 2 ───────────────────────── */

/* The subhead and its one affordance on a line, so Edit sits with what it edits rather than under
   a list of four rows where it reads as applying to the last one. */
.org-settings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.org-settings__head .org-subhead {
    margin: 0;
}

/* Why a read-only row is read-only. A field with no affordance and no explanation reads as a bug,
   so each inert row says where its change lives instead of just sitting there. */
.org-field-row__note {
    margin-left: auto;
    padding-left: var(--spacing-md);
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
    text-align: right;
}

.org-field-row--editing {
    align-items: center;
}

.org-field-row--editing input {
    flex: 1;
    min-width: 0;
}

/* ⚠ Two classes the organization surfaces have used since Lane E WITHOUT either being defined.
   main.css resets every margin to 0, so `.org-step__lead` rendered as unspaced body text in all
   seven places it is used -- the spin-up stepper, the teardown dialog, Workspaces and Billing --
   and `.org-inline-action--spaced` did nothing at all. Caught by Lane G's first screenshots of
   those screens; defined here rather than stripped from the markup, because the intent is legible
   and seven call sites agree on it. */

.org-step__lead {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: 1.5;
}

/* A lead that FOLLOWS content needs the gap above it instead, which is the Billing tab's case. */
.org-step__lead--after {
    margin: var(--spacing-lg) 0 0 0;
}

.org-inline-action--spaced {
    margin-top: var(--spacing-lg);
    align-items: flex-start;
}

/* The 404-is-ordinary message: a tenant that administers no organization, reached by deep link. */
.org-empty {
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
}

/* ── The spin-up stepper (G52) ────────────────────────────────
   ⚠ Every rule below was MISSING, not wrong. `org-tenant-spinup.js` shipped in Lane E using ten
   classes no stylesheet defined, on top of a `modal-backdrop` host class that does not exist either
   — so the stepper was not a modal at all and its interior had no styling. Found 2026-09-28 by the
   first screenshot ever taken of it; nothing in either test suite renders a page.
   The modal chrome was reconciled to the app's existing `modal-header`/`-body`/`-footer` family
   rather than defined a second time under a BEM spelling nothing else uses. */

/* The four-step bar. A row, not a list: the numbers carry the sequence, so the markers would be a
   second ordinal saying the same thing. */
.org-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    list-style: none;
    margin: 0 0 var(--spacing-lg) 0;
    padding: 0;
}

.org-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
    white-space: nowrap;
}

/* The number sits in a ring rather than beside the label, because "1Project name" with no separator
   is exactly how this read before these rules existed. */
.org-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-size: var(--font-size-ui-sm);
    font-weight: 600;
    line-height: 1;
}

.org-step--current {
    color: var(--text-primary);
    font-weight: 600;
}

.org-step--current .org-step__n {
    border-color: var(--accent-main);
    background: var(--accent-main);
    color: var(--shade-black);
}

.org-step--done {
    color: var(--text-secondary);
}

.org-step--done .org-step__n {
    border-color: var(--accent-confirm);
    color: var(--accent-confirm);
}

/* The workspace address: an input and the fixed company half reading as one field, because they are
   one URL. The suffix is text rather than a disabled input — a disabled input reads as something the
   admin could change, and this is not theirs to change. */
.org-address-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.org-address-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.org-address-row__suffix {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-sm);
}

/* A value meant to be read character by character, or copied: tenant names, service-account emails. */
.org-code {
    display: inline-block;
    max-width: 100%;
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    background: var(--bg-muted);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    overflow-wrap: anywhere;
}

.org-copy-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-copy-row .org-code {
    flex: 1 1 auto;
    min-width: 0;
}

/* The grant instructions, collapsed by default: needed by the admin doing it for the first time and
   in the way for everyone else. */
.org-howto {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    background: var(--bg-surface);
    font-size: var(--font-size-body-sm);
}

.org-howto > summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
}

.org-howto[open] > summary {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}