/*
 * One stylesheet, no build step, dressed in Okta's Odyssey design system.
 *
 * Only Odyssey's look is used, not its React components: every colour, radius,
 * shadow, focus ring, spacing step and type setting comes from its design
 * tokens, vendored as CSS custom properties in vendor/odyssey/tokens.css
 * (--ods-*, regenerated by scripts/odyssey-tokens.php). The short names below
 * map this stylesheet's vocabulary onto them. Light only, like the Okta admin
 * console. Inter is self-hosted; Aeonik, Odyssey's heading face, is commercial,
 * so headings fall back to Inter exactly as Odyssey's own font stack does.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter/inter-latin-wght-italic.woff2") format("woff2-variations"),
         url("fonts/inter/inter-latin-wght-italic.woff2") format("woff2");
}

:root {
    --bg: var(--ods-hue-neutral-50);
    --surface: var(--ods-hue-neutral-white);
    --ink: var(--ods-typography-color-body);
    --muted: var(--ods-typography-color-subordinate);
    --line: var(--ods-border-color-display);
    --control: var(--ods-border-color-control);
    --accent: var(--ods-palette-primary-main);
    --accent-text: var(--ods-palette-primary-text);
    --accent-dark: var(--ods-palette-primary-dark);
    --accent-ink: var(--ods-typography-color-inverse);
    --accent-soft: var(--ods-palette-primary-lighter);
    --ok: var(--ods-palette-success-text);
    --ok-soft: var(--ods-palette-success-lighter);
    --warn: var(--ods-palette-warning-text);
    --warn-soft: var(--ods-palette-warning-lighter);
    --danger: var(--ods-palette-danger-text);
    --danger-soft: var(--ods-palette-danger-lighter);
    --radius: var(--ods-border-radius-outer);
    --radius-small: var(--ods-border-radius-main);
    --shadow: var(--ods-depth-low);
    --focus: var(--ods-focus-outline-width-main) var(--ods-focus-outline-style) var(--ods-focus-outline-color-primary);
    --mono: var(--ods-typography-family-mono);
    --header-height: 3.5rem;
    --nav-width: 15rem;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Odyssey sets its base size at 14px (87.5%), and every rem below follows it. */
html { -webkit-text-size-adjust: 100%; font-size: var(--ods-typography-size-base); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ods-typography-family-body);
    font-size: var(--ods-typography-size-body);
    line-height: var(--ods-typography-line-height-body);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-underline-offset: .15em; }
a:hover { color: var(--accent-dark); }

h1, h2, h3 {
    font-family: var(--ods-typography-family-heading);
    font-weight: var(--ods-typography-weight-heading);
    color: var(--ods-typography-color-heading);
}
h1 { margin: 0 0 .5rem; font-size: var(--ods-typography-size-heading4); line-height: var(--ods-typography-line-height-heading4); }
h2 { margin: 0 0 .5rem; font-size: var(--ods-typography-size-heading6); line-height: var(--ods-typography-line-height-heading6); }
h3 { margin: 0 0 .35rem; font-size: var(--ods-typography-size-body); font-weight: var(--ods-typography-weight-body-bold); line-height: var(--ods-typography-line-height-heading6); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

code {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--ods-hue-neutral-100);
    border-radius: var(--ods-border-radius-tight);
    padding: .1em .35em;
    overflow-wrap: anywhere;
}

img { max-width: 100%; }

/* A section break inside a long form. Semantic's `ui divider` was doing this. */
hr {
    margin: 2rem 0 1.25rem;
    border: 0;
    border-top: 1px solid var(--line);
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- chrome */

/*
 * The Okta admin console's frame: a full-width white bar across the top, a
 * white side nav down the left under it, and the page on light grey beside it.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--header-height);
    background: var(--surface);
    border-bottom: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
}

.bar {
    height: 100%;
    padding: 0 var(--ods-spacing-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ods-spacing-4);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ods-spacing-2);
    color: var(--ods-palette-primary-heading);
    font-family: var(--ods-typography-family-heading);
    font-size: var(--ods-typography-size-heading6);
    font-weight: var(--ods-typography-weight-body-bold);
    text-decoration: none;
}

.brand:hover { color: var(--ods-palette-primary-heading); }

.brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: inset 0 0 0 .45rem var(--surface);
    border: .2rem solid var(--accent);
}

.shell {
    flex: 1;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--ods-spacing-7) var(--ods-spacing-5) var(--ods-spacing-9);
}

.shell.wide { max-width: 72rem; }

.site-footer {
    padding: var(--ods-spacing-5);
    text-align: center;
    color: var(--muted);
    font-size: var(--ods-typography-size-subordinate);
}

.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ods-spacing-2) var(--ods-spacing-5); margin-bottom: var(--ods-spacing-2); }
.site-footer a { color: var(--muted); }

/*
 * The main menu: the side nav on wide screens. On narrow screens it is a
 * popover drawer opened by the header's menu button (popovertarget), so the
 * browser handles Escape, tapping outside and focus with no JavaScript.
 * Browsers without popover support show it as a plain list above the page.
 */
.frame {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    align-items: start;
}

.frame > .shell { grid-column: 2; grid-row: 1; padding-inline: var(--ods-spacing-6); }

/* The footer sits beside the nav, under the page it belongs to. */
.frame + .site-footer { margin-left: var(--nav-width); }

.site-menu {
    /* Undo the browser's popover styles: a side nav until narrow screens. */
    position: sticky;
    inset: auto;
    top: var(--header-height);
    width: auto;
    height: calc(100vh - var(--header-height));
    margin: 0;
    color: inherit;
    overflow-y: auto;

    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ods-spacing-4);
    padding: var(--ods-spacing-5) var(--ods-spacing-3);
    background: var(--surface);
    border: 0;
    border-right: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
    font-size: var(--ods-typography-size-body);
}

.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu-group form { margin: 0; }

.menu-heading {
    margin: 0 0 var(--ods-spacing-1);
    padding: 0 var(--ods-spacing-3);
    font-size: var(--ods-typography-size-overline);
    line-height: var(--ods-typography-line-height-overline);
    font-weight: var(--ods-typography-weight-body-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ods-hue-neutral-600);
}

.site-menu a, .site-menu .menu-link {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--ods-spacing-2) var(--ods-spacing-3);
    text-align: left;
    color: var(--ods-hue-neutral-800);
    text-decoration: none;
    border-radius: var(--radius-small);
    transition: background-color var(--ods-transition-duration-main) var(--ods-transition-timing-main);
}

/* A form button (Log out) dressed as the links around it. */
.site-menu .menu-link { font: inherit; background: none; border: 0; cursor: pointer; }

.site-menu a:hover, .site-menu .menu-link:hover { color: var(--ods-hue-neutral-900); background: var(--bg); }
.site-menu a:focus-visible, .site-menu .menu-link:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--ods-focus-outline-width-main)); }

/* The current page: tinted, in the primary text colour, with a bar on its left. */
.site-menu [aria-current="page"] {
    color: var(--accent-text);
    background: var(--accent-soft);
    font-weight: var(--ods-typography-weight-body-bold);
}
.site-menu [aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--ods-spacing-1);
    bottom: var(--ods-spacing-1);
    width: 3px;
    border-radius: 3px;
    background: var(--accent);
}

/* The sandbox session id: identifying, not actionable, so it reads as a note
   rather than as another menu entry. */
.menu-note { margin: var(--ods-spacing-1) 0 0; padding: 0 var(--ods-spacing-3); font-size: var(--ods-typography-size-subordinate); color: var(--muted); }
.menu-note code { background: none; padding: 0; }

.menu-button {
    display: none;
    align-items: center;
    gap: var(--ods-spacing-2);
    min-height: 2.5rem;
    padding: 0 var(--ods-spacing-3);
    font: inherit;
    font-weight: var(--ods-typography-weight-body-bold);
    color: var(--ods-hue-neutral-800);
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--control);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.menu-button:hover { background: var(--bg); }
.menu-button:focus-visible { outline: var(--focus); outline-offset: var(--ods-focus-outline-offset-main); }

@media (max-width: 48rem) {
    .frame { display: block; }
    .frame > .shell { padding-inline: var(--ods-spacing-4); }
    .frame + .site-footer { margin-left: 0; }
    .site-menu { position: static; height: auto; border-right: 0; border-bottom: var(--ods-border-width-main) var(--ods-border-style-main) var(--line); }

    @supports selector(:popover-open) {
        .menu-button { display: inline-flex; }

        .site-menu {
            position: fixed;
            /* From the right, the side the header's menu button is on. */
            inset: 0 0 0 auto;
            width: min(18rem, 85vw);
            height: 100dvh;
            border-bottom: 0;
            border-left: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
            box-shadow: var(--ods-depth-high);
            transform: translateX(100%);
            transition: transform .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
        }

        .site-menu:not(:popover-open) { display: none; }
        .site-menu:popover-open { transform: none; }
        .site-menu::backdrop { background: rgb(39 39 39 / .4); }

        @starting-style {
            .site-menu:popover-open { transform: translateX(100%); }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-menu, .site-menu a { transition: none; }
}

/* --------------------------------------------------------------- blocks */

.card {
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--ods-spacing-5);
}

.card + .card, .notice + .card, .alert + .card, .warn + .card,
.page-header + .card, .actions + .card { margin-top: 1.25rem; }

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
}

.card-header h2 { margin: 0; overflow-wrap: anywhere; }
/* The identifier under a record's name — a client_id, an entity id, an issuer. */
.card-header .subtitle { margin: .15rem 0 0; font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.card-header > div:first-child { min-width: 0; }

.card-secret { border-color: var(--accent); border-width: var(--ods-border-width-heavy); }

.page-header { margin-bottom: 1.5rem; }
.page-header .badge { margin-top: .25rem; }

.lede { margin: 0; color: var(--ods-typography-color-support); max-width: 50rem; }
.page-header .lede { margin-top: .25rem; }

.empty { color: var(--muted); font-style: italic; }

/* Odyssey callouts: the status palette's lightest tint, a border in its light
   shade, and the heading in its darkest. .notice is information (primary),
   .warn is something for the reader to do, .alert is something wrong. */
.notice, .alert, .warn {
    margin: 0 0 var(--ods-spacing-4);
    padding: var(--ods-spacing-3) var(--ods-spacing-4);
    border-radius: var(--radius-small);
    border: var(--ods-border-width-main) var(--ods-border-style-main);
    color: var(--ink);
}

.notice { background: var(--ods-palette-primary-lighter); border-color: var(--ods-palette-primary-light); }
.alert { background: var(--ods-palette-danger-lighter); border-color: var(--ods-palette-danger-light); }
.warn { background: var(--ods-palette-warning-lighter); border-color: var(--ods-palette-warning-light); }
.notice strong:first-child { color: var(--ods-palette-primary-heading); }
.alert strong:first-child { color: var(--ods-palette-danger-heading); }
.warn strong:first-child { color: var(--ods-palette-warning-heading); }
.card .alert:last-child { margin-bottom: 0; }

/* URLs quoted in a banner are tinted with the banner's own colour rather than
   the accent; `code` already lets them break mid-URL on a narrow screen. */
.notice code, .alert code, .warn code { background: rgb(255 255 255 / .6); }

/* What the banner means for the reader, set apart from the message itself. */
.notice p, .alert p, .warn p { margin: .5rem 0 0; }
.notice p:first-child, .alert p:first-child, .warn p:first-child { margin-top: 0; }
.notice strong:first-child, .alert strong:first-child, .warn strong:first-child { display: block; margin-bottom: .25rem; }
.alert ul, .notice ul, .warn ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* ---------------------------------------------------------------- forms */

/*
 * A form's vertical rhythm comes from the grid rather than from margins: a
 * hidden CSRF input is display:none and so occupies no track, where a
 * margin-based rule would leave a gap above the first real field. `.fields`
 * gives an inner group of fields the same rhythm — `.auth-section` beside it
 * is a hook script.js reads, and stays free of styling.
 */
form.card, .fields { display: grid; align-content: start; gap: 1.1rem; }
form.card > h3 { margin: 0; }
form.card > hr { margin: .9rem 0 0; }
form.card > .notice, form.card > .alert, form.card > .warn { margin: 0; }
form.card > .actions { margin: .4rem 0 0; }
/* A hint under the row it explains, rather than floating between two rows. */
form.card > .hint { margin-top: -.6rem; }

.field { display: grid; gap: .35rem; }
.field label { font-weight: var(--ods-typography-weight-body-bold); }

/* Two or three inputs that belong on one line, stacking when they cannot. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; }
/* A group nested under a checkbox that switches it on, set off from its hint. */
.field > .field-row, .field > .field { margin-top: .4rem; }

input[type="text"], input[type="url"], input[type="email"], input[type="password"], input:not([type]), select, textarea {
    width: 100%;
    min-height: 2.857rem;
    padding: var(--ods-spacing-2) var(--ods-spacing-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--control);
    border-radius: var(--radius-small);
    transition: border-color var(--ods-transition-duration-main) var(--ods-transition-timing-main);
}

input:hover, select:hover, textarea:hover { border-color: var(--ods-hue-neutral-900); }

textarea { font-family: var(--mono); font-size: var(--ods-typography-size-subordinate); line-height: var(--ods-typography-line-height-body); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: var(--focus);
    outline-offset: var(--ods-focus-outline-offset-tight);
    border-color: var(--ods-border-color-primary-control);
}

/* The field the server rejected. Semantic put this on `.field.error`. */
.field-error > label { color: var(--danger); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--ods-border-color-danger-control); }
.field-error input:focus-visible, .field-error select:focus-visible, .field-error textarea:focus-visible {
    outline-color: var(--ods-focus-outline-color-danger);
}

.hint { margin: 0; font-size: var(--ods-typography-size-subordinate); color: var(--muted); }
.hint code { font-size: .9em; }
.actions + .hint { margin-top: .6rem; }
/* A hint belonging to the checkbox above it, lined up with its label. */
.hint-indent { margin-left: 1.9rem; }

/* Odyssey buttons: primary is solid blue; .button-quiet is its secondary
   (white with a grey border); danger ones use the danger palette. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ods-spacing-1);
    min-height: 2.857rem;
    padding: 0 var(--ods-spacing-4);
    font: inherit;
    font-family: var(--ods-typography-family-button);
    font-weight: var(--ods-typography-weight-body-bold);
    line-height: var(--ods-typography-line-height-ui);
    color: var(--accent-ink);
    background: var(--accent);
    border: var(--ods-border-width-main) var(--ods-border-style-main) transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ods-transition-duration-main) var(--ods-transition-timing-main),
                border-color var(--ods-transition-duration-main) var(--ods-transition-timing-main);
}

.button:hover { color: var(--accent-ink); background: var(--ods-palette-primary-dark); }
.button:active { background: var(--ods-palette-primary-darker); }
.button:focus-visible { outline: var(--focus); outline-offset: var(--ods-focus-outline-offset-main); }
.button:disabled { color: var(--ods-typography-color-disabled); background: var(--ods-hue-neutral-100); border-color: transparent; cursor: not-allowed; }
/* .button sets display, so the UA's [hidden] rule alone would not hide one. */
.button[hidden] { display: none; }

.button-quiet { color: var(--ods-hue-neutral-800); background: var(--surface); border-color: var(--control); }
.button-quiet:hover { color: var(--ods-hue-neutral-900); background: var(--bg); border-color: var(--ods-hue-neutral-900); }
.button-quiet:active { background: var(--ods-hue-neutral-100); }
.button-small { min-height: 2.286rem; padding: 0 var(--ods-spacing-3); font-size: var(--ods-typography-size-subordinate); }
.button-danger-quiet { color: var(--ods-palette-danger-text); background: var(--surface); border-color: var(--ods-border-color-danger-light); }
.button-danger-quiet:hover { color: var(--ods-typography-color-inverse); background: var(--ods-palette-danger-main); border-color: var(--ods-palette-danger-main); }
.button-danger-quiet:focus-visible { outline-color: var(--ods-focus-outline-color-danger); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.actions form { margin: 0; }

.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.inline-form input { flex: 1 1 12rem; width: auto; min-height: 2.286rem; }

/* A fixed prefix fused to the input after it — the "@" before an email domain. */
.input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 .7rem;
    font-family: var(--mono);
    color: var(--muted);
    background: var(--bg);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--control);
    border-right: 0;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.input-prefix + input { border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.inline-form .input-prefix + input { flex: 1 1 12rem; }
/* In a row of controls the prefix is its own flex item, so take back the
   row's gap after it or it would stand apart from the input it belongs to. */
.inline-form .input-prefix { margin-right: -.5rem; }
/* One control, one border: the prefix follows the input's hover and focus. */
.input-prefix:has(+ input:hover) { border-color: var(--ods-hue-neutral-900); }
.input-prefix:has(+ input:focus-visible) { border-color: var(--ods-border-color-primary-control); }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* A disclosure toggle: the chevron points right when closed and down when open. */
.fallback-details > summary { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-text); font-weight: var(--ods-typography-weight-body-bold); }
.fallback-details > summary::before {
    content: ""; flex: none; width: .4rem; height: .4rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s ease;
}
.fallback-details[open] > summary::before { transform: rotate(45deg); }
.fallback-details > summary:hover { text-decoration: underline; text-underline-offset: .15em; }
.fallback-details > summary:focus-visible { outline: var(--focus); outline-offset: var(--ods-focus-outline-offset-main); border-radius: var(--ods-border-radius-tight); }
.fallback-details[open] > summary { margin-bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { .fallback-details > summary::before { transition: none; } }

.inline-details { position: relative; }
.inline-details[open] > form { margin-top: .5rem; }
.inline-details > .rows { margin: .5rem 0 0; }

/* ----------------------------------------------------------------- lists */

.rows { margin: 1rem 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.rows > li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: var(--ods-spacing-3) var(--ods-spacing-4);
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
    border-radius: var(--radius-small);
}

.rows p { margin: .1rem 0 0; }
.row-main { color: var(--ink); text-decoration: none; }
.row-main:hover strong { color: var(--accent-text); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.row-actions form { margin: 0; }

/* Odyssey status pills: each status's lightest tint behind its text colour. */
.badge {
    display: inline-block;
    padding: 2px var(--ods-spacing-2);
    font-size: var(--ods-typography-size-subordinate);
    font-weight: var(--ods-typography-weight-body-bold);
    line-height: var(--ods-typography-line-height-ui);
    color: var(--ods-hue-neutral-700);
    background: var(--ods-hue-neutral-100);
    border-radius: var(--ods-border-radius-round);
    vertical-align: middle;
    /* Badges carry auth method names, which otherwise wrapped inside the pill
       as "client_secre t_basic". */
    white-space: nowrap;
}

.badge-ok { color: var(--ok); background: var(--ok-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-accent { color: var(--accent-text); background: var(--accent-soft); }
.badge-small { padding: 1px var(--ods-spacing-2); font-size: var(--ods-typography-size-overline); }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0; padding: 0; list-style: none; }
.tag { padding: 1px var(--ods-spacing-2); font-size: var(--ods-typography-size-subordinate); font-family: var(--mono); background: var(--ods-hue-neutral-100); border-radius: var(--ods-border-radius-round); }
.tag code { background: none; padding: 0; font-size: inherit; }

.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--ods-spacing-2) var(--ods-spacing-5); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts .tags { margin: 0; }
/* Opaque identifiers stay intact and wrap only when they genuinely cannot fit. */
.facts code { word-break: normal; overflow-wrap: anywhere; }

/* Several values under one term — a client's redirect URIs, say. */
.lines { display: grid; gap: .2rem; }

/* Lists of records as stacked entries rather than tables, so they read the
   same at phone width. Facts flow into as many columns as fit. */
.entries { margin: 0; padding: 0; list-style: none; }
.entry { padding: .9rem 0; border-top: 1px solid var(--line); }
.entry:first-child { padding-top: .25rem; border-top: 0; }
.entry:last-child { padding-bottom: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.entry-title { font-weight: var(--ods-typography-weight-body-bold); overflow-wrap: anywhere; }
.entry-head form { margin-left: auto; }
.entry-subtitle { margin: .15rem 0 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--ods-spacing-3) var(--ods-spacing-3) var(--ods-spacing-3) 0; text-align: left; border-bottom: var(--ods-border-width-main) var(--ods-border-style-main) var(--line); }
th { color: var(--muted); font-weight: var(--ods-typography-weight-body-bold); font-size: var(--ods-typography-size-subordinate); }

/* A revoked hop: still listed, visibly spent. */
.admin-table tr.row-off td { opacity: .55; }

.code-block {
    margin: .75rem 0;
    padding: .9rem 1rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: var(--ods-typography-size-subordinate);
    line-height: var(--ods-typography-line-height-body);
    background: var(--bg);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
    border-radius: var(--radius-small);
}

.code-block code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.code-block.secret code { user-select: all; font-size: 1rem; }
/* A long single-line value — a recovery URL — should wrap rather than scroll. */
.code-block.break code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* A code block with a copy button attached to its end. */
.copy-field { display: flex; align-items: stretch; margin: .75rem 0; }
.copy-field .code-block { flex: 1; min-width: 0; margin: 0; }

.copy-field:has(.copy-button:not([hidden])) .code-block {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.copy-button {
    flex: none;
    padding: 0 1rem;
    font: inherit;
    font-weight: var(--ods-typography-weight-body-bold);
    color: var(--ods-hue-neutral-800);
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--control);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    cursor: pointer;
    white-space: nowrap;
}

.copy-button:hover { background: var(--bg); }
.copy-button:focus-visible { outline: var(--focus); outline-offset: var(--ods-focus-outline-offset-main); }

/* -------------------------------------------------------------- choices */

fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: .5rem; }
legend { margin-bottom: var(--ods-spacing-2); padding: 0; font-weight: var(--ods-typography-weight-body-bold); }

.choice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: var(--ods-spacing-2) var(--ods-spacing-3);
    background: var(--surface);
    border: var(--ods-border-width-main) var(--ods-border-style-main) var(--line);
    border-radius: var(--radius-small);
    cursor: pointer;
    font-weight: 400;
}

.choice input { margin: .35rem 0 0; accent-color: var(--accent); }
.choice:hover { border-color: var(--control); }
.choice:has(input:checked) { border-color: var(--ods-border-color-primary-control); background: var(--accent-soft); }
.choice code { background: none; padding: 0; font-size: .9375em; }
/* A stack of them inside a .field, where the label above is the question. */
.choices { display: grid; gap: .35rem; }

/* ------------------------------------------------------------ dashboard */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.card-grid .card { margin-top: 0; }

/* A whole tile that is one link, so there is no separate "Manage" button. */
.card-link { display: flow-root; color: inherit; text-decoration: none; transition: box-shadow var(--ods-transition-duration-main) var(--ods-transition-timing-main), border-color var(--ods-transition-duration-main) var(--ods-transition-timing-main); }
.card-link:hover { color: inherit; border-color: var(--control); box-shadow: var(--ods-depth-medium); }
.card-link:focus-visible { outline: var(--focus); outline-offset: var(--ods-focus-outline-offset-main); }
.card-link h2 { margin: 0 0 .25rem; }
.card-link p { color: var(--muted); }

.count {
    float: right;
    margin-left: .75rem;
    font-family: var(--ods-typography-family-heading);
    font-size: var(--ods-typography-size-heading4);
    font-weight: var(--ods-typography-weight-heading);
    line-height: 1;
    color: var(--ods-palette-primary-heading);
}

@media (max-width: 36rem) {
    .facts { grid-template-columns: 1fr; gap: .1rem; }
    .facts dd { margin-bottom: .5rem; }
}

/* A rendered Mermaid diagram. It opens fitted to the card's width; zooming in
   past that scrolls inside the card rather than widening the page. */
.diagram-rendered { margin: 0; padding: 0; background: none; border: 0; overflow: auto; max-height: 85vh; }
.diagram-rendered svg { display: block; margin: 0 auto; }

.diagram-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.diagram-zoom-level { min-width: 3.5rem; text-align: center; font-size: var(--ods-typography-size-subordinate); color: var(--muted); font-variant-numeric: tabular-nums; }

/* "Fill window": the card lifts out of the page and covers the viewport, with
   the zoom bar pinned at the top and the diagram filling the rest. */
.diagram-expanded {
    position: fixed;
    inset: 0;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.diagram-expanded .diagram-rendered { flex: 1; max-height: none; min-height: 0; }
.diagram-expanded-open, .diagram-expanded-open body { overflow: hidden; }
.diagram-expand { margin-left: auto; }