/* Authentication-provider administration (M-608f, epic M-608) — presentation for the provider list and the
   sign-in routing editor. Everything structural is already shared: the static table box (table.css), the
   badges (table.css), the buttons (buttons.css), the bulk-save form and the driver-config groups (forms.css).
   What is left here is what these two pages say that no other page says.

   No inline styles, no markup in JS (§4); every colour and space is a design token (§12). */

/* A per-row aside — "always available", "this version has no driver for it". It stays INLINE with the value
   it qualifies (§15: a grid row is one line), quieter and smaller than that value, and the markup gives it
   `.platform-cell-separator` so the shared middot sets it off. It reads as an aside because of its weight, not
   because it has a line to itself. */
.platform-auth-providers__note {
    font-size: var(--platform-font-size-xs, 0.75rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* The raw stored driver of an unsupported row ([[D-147]]). Monospace because it is a machine value being
   quoted verbatim, not a label — the point is that an administrator can match it against the database. */
.platform-auth-providers__raw-driver {
    font-family: var(--platform-font-mono, ui-monospace, "SFMono-Regular", "Menlo", monospace);
    font-size: var(--platform-font-size-xs, 0.75rem);
}

/* "In use by" is two facts (people, rules) on ONE line (§15), and still TWO strings: the second carries
   `.platform-cell-separator`, so the middot between them comes from CSS and neither fact has to be interpolated
   into the other. Running them into one sentence would cost a translator both independent plural forms and
   would wrap differently in every language — which is why the pair is separated, not merged. */
.platform-auth-providers__usage {
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* The row's action cluster. Each action is its own <form> (a mutation is never a GET link), which makes them
   block-level by default — so the row is laid out here rather than by the markup. It NEVER wraps (§15): the
   cell is `.platform-table__col--compact` (`width: 1%`), and a wrapping flex box answers that with "then I
   need one icon's width", which stacked every action vertically even on a wide desktop. `nowrap` is the flex
   default, but it is spelled out because it is the point of this rule and the thing not to undo. On a phone
   the icons stay side by side and `.platform-table-wrap` scrolls instead. */
.platform-auth-providers__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--platform-space-xs, 0.25rem);
    align-items: center;
}

/* ── The driver manual (M-625) ───────────────────────────────────────────────── */

/* The right-hand column of the provider form: the manual of the driver in play, then the platform sign-in's
   own. A stack with the page's own rhythm — the hidden panels are `display: none` (forms.css's
   `.platform-driver-group.is-hidden`), so a switched-away driver leaves no gap behind it. */
.platform-driver-manuals {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-md, 1rem);
}

/* Prose, not chrome: the manual is read, so it gets a reading line-height and a slightly quieter size than a
   field label — it must not compete with the form it explains. The paragraphs carry no margin of their own;
   the flow gap below is the one rhythm for every part of the panel. */
.platform-driver-manual .platform-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-sm, 0.5rem);
    font-size: var(--platform-font-size-sm, 0.7875rem);
    line-height: 1.55;
}

.platform-driver-manual p,
.platform-driver-manual dl,
.platform-driver-manual ul {
    margin: 0;
}

/* The one sentence that separates the sign-in methods — who has already checked the person by the time the
   request reaches us. It leads the panel, so it carries the panel's weight. */
.platform-driver-manual__lead {
    font-weight: 600;
}

.platform-driver-manual__text {
    color: var(--platform-color-text-muted, #57606a);
}

/* The two section headings inside the panel. Sized as a label rather than as a page heading: they organise a
   card's content, they do not announce a new region of the page. */
.platform-driver-manual__heading {
    margin: var(--platform-space-xs, 0.25rem) 0 0;
    font-size: var(--platform-font-size-sm, 0.7875rem);
    font-weight: 600;
}

/* Label → what it decides, one pair per declared config field, in the schema's own order so the panel reads
   down in step with the fields on the left. A definition list rather than a two-column grid: the labels are
   short and the notes are sentences, and a grid would either crush the note or strand the label. */
.platform-driver-manual__settings {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs, 0.25rem);
}

.platform-driver-manual__setting {
    font-weight: 600;
}

.platform-driver-manual__note {
    margin: 0 0 var(--platform-space-xs, 0.25rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* The consequences an administrator would otherwise meet the hard way. A list, because each one is a separate
   rule to remember — and indented rather than flush so it reads as the enumeration it is. */
.platform-driver-manual__caveats {
    padding-inline-start: var(--platform-space-md, 1rem);
}

.platform-driver-manual__caveats li + li {
    margin-block-start: var(--platform-space-xs, 0.25rem);
}

/* ── The routing editor ───────────────────────────────────────────────────────────────────────────── */

/* The explainer above each block (which kind wins, what a pattern may look like). Muted, full width, and
   directly under its heading so it reads as part of it. */
.platform-auth-routing__hint,
.platform-auth-routing__empty {
    margin-block: 0 var(--platform-space-sm, 0.5rem);
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, #57606a);
}

/* The identifier BESIDE a person's name, and the glob of a pattern rule — both are the machine-matched string,
   so both are quieter than the human label next to them and the pattern is monospaced. The identifier is
   inline after the name, set off by the shared middot (§15), not a line of its own under it. */
.platform-auth-routing__key {
    font-size: var(--platform-font-size-xs, 0.75rem);
    color: var(--platform-color-text-muted, #57606a);
}

.platform-auth-routing__pattern {
    font-family: var(--platform-font-mono, ui-monospace, "SFMono-Regular", "Menlo", monospace);
}

/* The add-a-rule form under each block: fields side by side on a desktop, one per line on a phone (the
   default flex-basis wraps before the fields get too narrow to type in). It is NOT a `.platform-form__row` —
   these are three unrelated controls plus a submit, not one field group. */
.platform-auth-routing__add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem);
    align-items: flex-end;
    margin-block-end: var(--platform-space-lg, 1.5rem);
}

.platform-auth-routing__add > .platform-form__field {
    flex: 1 1 14rem;
}

/* The per-rule delete forms are targeted by their row's button through the `form` attribute; they exist only
   to carry the method + CSRF token and must take up no room where they sit. */
.platform-auth-routing__delete-form {
    display: none;
}

/* ── Phone (≤30rem / ~480px) ──────────────────────────────────────────────────────────────────────
   Each control in the add form takes the full width, so the person/pattern box is a comfortable tap and
   type target rather than a third of a narrow screen. The row stays in ROW direction and the basis goes to
   100% — flipping to `column` would reinterpret the 14rem basis above as a HEIGHT (the flex-axis trap
   forms.css documents). */
@media (max-width: 30rem) {
    .platform-auth-routing__add > .platform-form__field,
    .platform-auth-routing__add > .platform-btn {
        flex-basis: 100%;
    }
}