/* The console, sign-up and sign-in, and the docs. The parts come from the first motor.dev
   (Galadriel), softened as the home page is: frames are gray, black frames are for buttons, and
   headers are light. */

:root {
    --color-danger: #b3261e;
    --color-danger-surface: #fdecea;
    /* The frame of panels and groups, as the frame of the prices on the home page. */
    --color-frame: var(--color-faint);
    --field-height: 2.75rem;
    --shadow-inset: inset 0.125rem 0.125rem 0 var(--color-line);
    --hatch: repeating-linear-gradient(-45deg, var(--color-line) 0 1px, var(--color-background) 1px 0.5rem);
}

/* The console is wider than the other pages, for the sections at its side. */
body.wide {
    max-width: 76rem;
}

.lead {
    font-size: 1.1875rem;
    line-height: 1.55;
    margin: 0 0 2rem;
}

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

.small {
    font-size: 0.875rem;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.nowrap {
    white-space: nowrap;
}

/* Fields. Text fields are set in, with their shadow inside the border; selects are raised, as
   buttons are. Fields and selects have one height, so fields side by side line up. */
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea,
select {
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-muted);
    border-radius: 0;
    background: var(--color-field);
    color: var(--color-text);
    font: inherit;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea {
    box-shadow: var(--shadow-inset);
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select {
    height: var(--field-height);
}

select {
    appearance: none;
    padding-right: 2.75rem;
    /* A long choice stays on one line and ends with an ellipsis, in the field's one height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--color-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5L7 10L12 5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") right 0.875rem center / 0.875rem no-repeat;
    box-shadow: var(--shadow);
    cursor: pointer;
}

/* Where the browser allows it, the open list is below the field, in the frame of a panel, as in
   Galadriel: a row for each choice, with light rules between them, and the chosen one in black
   with a turquoise mark. Elsewhere the browser draws its own list. */
@supports (appearance: base-select) {
    select,
    ::picker(select) {
        appearance: base-select;
    }

    select::picker-icon {
        display: none;
    }

    select > button {
        display: block;
        min-width: 0;
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        font: inherit;
        color: inherit;
        text-align: left;
    }

    select selectedcontent {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    ::picker(select) {
        margin-top: 0.25rem;
        padding: 0;
        border: 2px solid var(--color-muted);
        background: var(--color-field);
        box-shadow: var(--shadow);
    }

    select option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: var(--field-height);
        padding: 0 0.75rem;
        border-top: 1px solid var(--color-line);
        cursor: pointer;
    }

    select option:first-of-type {
        border-top: 0;
    }

    select option::checkmark {
        content: "";
        flex: none;
        width: 0.625rem;
        height: 0.625rem;
    }

    select option:not(:checked):hover,
    select option:not(:checked):focus-visible {
        background: var(--color-surface);
        outline: 0;
    }

    select option:checked {
        background: var(--color-text);
        color: var(--color-background);
    }

    select option:checked::checkmark {
        background: var(--color-turquoise);
    }
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

::placeholder {
    color: var(--color-faint);
}

.field {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.field input,
.field select {
    width: 100%;
}

.field.short {
    max-width: 26rem;
}

.field > span:first-child,
.legend {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.hint {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* A row of fields, with the button at its end. */
.inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.inline .field {
    flex: 1 1 14rem;
    margin: 0;
}

.inline .field.role {
    flex: 0 1 11rem;
}

.inline .field.money {
    flex: 0 1 14rem;
}

form > .inline + .problem,
form > .inline + .hint {
    margin-top: 0.75rem;
}

/* Buttons: the button of the home page, and smaller ones for the console. */
.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

button.button {
    font-family: var(--font-display);
}

.button[hidden] {
    display: none;
}

.button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.button.small {
    min-height: var(--field-height);
    padding: 0 1rem;
    font-size: 1rem;
}

.button.danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.button.danger:hover {
    background: var(--color-danger-surface);
}

.button.destroy {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: #fff;
}

.button.destroy:hover {
    border-color: #8f1d17;
    background: #8f1d17;
}

/* The button of Google: the G in its own square. */
.button.google {
    gap: 1rem;
    padding: 0 1.5rem 0 0;
    min-height: 3.25rem;
    font-size: 1.125rem;
}

.button.google .g {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 3rem;
    border-right: 2px solid var(--color-text);
    background: #fff;
}

.button.google svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

/* A link that looks like a link, in a button element. Its padding makes a target 24px tall. */
.link {
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font: 600 0.875rem var(--font-sans);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    cursor: pointer;
}

.link:hover {
    color: var(--color-link-hover);
}

.link.danger {
    color: var(--color-danger);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* A problem: what went wrong in red, and what to do next. */
.problem {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 40rem;
    margin: 1rem 0 1.5rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-danger);
    background: var(--color-field);
}

.problem[hidden] {
    display: none;
}

.problem .mark {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.3125rem;
    background: var(--color-danger);
}

.problem strong {
    display: block;
    font-weight: 600;
    color: var(--color-danger);
}

.problem p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

/* A caution: a problem that hasn't happened, in the yellow of the palette. */
.problem.caution {
    border-color: var(--color-cadmium-yellow-line);
}

.problem.caution .mark {
    background: var(--color-cadmium-yellow);
}

.problem.caution strong {
    color: var(--color-text);
}

/* A toast: a black block at the bottom right, which goes when its bar runs out, after 6 seconds,
   and waits while the pointer or the focus is on it. */
.toasts {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10;
    display: grid;
    gap: 0.75rem;
}

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 24rem;
    max-width: calc(100vw - 3rem);
    padding: 0.875rem 1rem 1.125rem;
    background: var(--color-text);
    color: var(--color-background);
    box-shadow: var(--shadow);
}

.toast .mark {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.3125rem;
    background: var(--color-turquoise);
}

.toast p {
    flex: 1;
    margin: 0;
}

.toast .close {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.125rem -0.375rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.toast .close svg {
    width: 0.875rem;
    height: 0.875rem;
}

.toast .time {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--color-turquoise);
    animation: drain 6s linear forwards;
}

.toast:hover .time,
.toast:focus-within .time {
    animation-play-state: paused;
}

@keyframes drain {
    to {
        width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast .time {
        animation-timing-function: steps(1, end);
    }
}

/* A confirmation: a modal dialog in the frame of a panel, red for an action that removes
   something. */
.dialog {
    box-sizing: border-box;
    width: 34rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 2px solid var(--color-frame);
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: 0.5rem 0.5rem 0 rgba(17, 17, 17, 0.2);
}

.dialog::backdrop {
    background: rgba(17, 17, 17, 0.45);
}

.dialog > header {
    padding: 0.75rem 1.25rem;
    border-bottom: 2px solid var(--color-line);
    background: var(--color-surface);
}

.dialog.danger {
    border-color: var(--color-danger);
}

.dialog.danger > header {
    border-bottom-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.dialog h2 {
    margin: 0;
    font-size: 1.25rem;
}

.dialog .body {
    padding: 1.25rem;
}

.dialog .body p {
    margin: 0;
}

.dialog .actions {
    margin: 1.25rem 0 0;
    gap: 0.75rem;
}

/* Sign-up, sign-in, and the approvals of the CLI. */
.auth {
    max-width: 44rem;
}

.auth .lead {
    margin-bottom: 1.5rem;
}

.auth .alternative {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--color-line);
}

.auth .alternative h2 {
    font-size: 1.375rem;
}

.auth form.passkey,
.auth form.card {
    margin: 1.5rem 0;
}

/* The parts that only development has, such as the sign-in without Google, under a rule. */
.auth hr,
.test-card hr {
    margin: 2rem 0 1.5rem;
    border: 0;
    border-top: 2px solid var(--color-line);
}

.auth form.dev {
    padding: 1.25rem;
    border: 2px dashed var(--color-frame);
}

.auth form.dev > p:first-of-type {
    margin: 0 0 1rem;
}

.test-card p {
    margin: 0 0 0.75rem;
}

.facts.grant {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--color-frame);
}

.user-code {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}

/* The steps of sign-up. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    border: 2px solid var(--color-frame);
}

.steps li {
    display: flex;
    min-height: 5rem;
    min-width: 0;
}

.steps li + li {
    border-left: 2px solid var(--color-frame);
}

.steps .label {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0.5rem 1rem;
}

.steps small {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.steps strong {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
}

.steps .detail {
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--color-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.steps .now .label {
    background: var(--color-surface);
}

.steps .now strong {
    text-decoration: underline 3px var(--color-text);
    text-underline-offset: 0.3em;
}

.steps .todo strong,
.steps .todo small {
    color: var(--color-faint);
}

/* Stripe's Payment Element. */
#payment {
    min-height: 9rem;
}

/* The console: the sections at the left, and the page at the right. The sections move above
   the page on a narrow screen. */
.admin {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5rem;
}

.sections {
    flex: 1 1 14rem;
    max-width: 100%;
}

.content {
    flex: 999 1 560px;
    min-width: 0;
}

.content > h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

/* A page without a lead keeps the same space between its title and what's under it, as in the
   first motor.dev. */
.content > h1 + :not(.lead) {
    margin-top: 1.5rem;
}

.content > .lead {
    margin-bottom: 2rem;
    font-size: 1.0625rem;
    color: var(--color-muted);
}

.content > .heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.content > .heading h1 {
    margin: 0;
    font-size: 2rem;
}

.content > .problem {
    margin: 0 0 2rem;
}

/* The page above this one, over the title, as in the first motor.dev. The arrow is outside the
   underline. */
.crumbs {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.crumbs a::before {
    content: "←";
    display: inline-block;
    margin-right: 0.375rem;
}

/* The groups of sections: the team's, the person's, and the Internal ones. Each group is one gray
   frame, with light rules between its rows. */
.sections .group {
    border: 2px solid var(--color-frame);
}

.sections .group + .group {
    margin-top: 1.25rem;
}

.sections .group.internal {
    border-style: dashed;
}

.team-name {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-line);
}

.team-name small {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.team-name strong {
    overflow: hidden;
    font: 500 1.25rem var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The team switcher: the team's name opens the list of the person's teams, as rows like the
   sections under it. The open team has a check at its end. */
.switcher summary {
    display: block;
    cursor: pointer;
    list-style: none;
}

.switcher summary::-webkit-details-marker {
    display: none;
}

.switcher summary:hover .team-name {
    background: var(--color-surface);
}

.switcher summary strong::after {
    content: " ▾";
    font-size: 0.875rem;
    color: var(--color-muted);
}

.switcher[open] summary strong::after {
    content: " ▴";
}

.switcher .teams li {
    border-bottom: 1px solid var(--color-line);
}

/* The list ends with the rule of a header, so it doesn't run into the sections. */
.switcher .teams li:last-child {
    border-bottom-width: 2px;
}

.switcher .teams a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: inherit;
    font: 500 1.0625rem var(--font-display);
    text-decoration: none;
}

.switcher .teams a > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switcher .teams a:hover {
    background: var(--color-surface);
}

.switcher .teams a[aria-current]::after {
    content: "✓";
    margin-left: auto;
    color: var(--color-turquoise);
}

.switcher .teams a.new {
    color: var(--color-link);
}

.switcher .teams a.new::before {
    content: "+";
    width: 1rem;
}

.sections ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sections > .group > ul > li + li {
    border-top: 1px solid var(--color-line);
}

.sections > .group > ul > li > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-left: 4px solid transparent;
    color: inherit;
    font: 500 1.0625rem var(--font-display);
    text-decoration: none;
}

.sections > .group > ul > li > a:hover {
    background: var(--color-surface);
}

/* The open section: the gray of the surface, with a bar of Motor's vermilion. */
.sections > .group > ul > li > a[aria-current="page"] {
    border-left-color: var(--color-vermilion);
    background: var(--color-surface);
}

/* A banner at the top of a team's pages, such as for a team without a card. */
.banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin: 0 0 2rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-cadmium-yellow-line);
    background: #fdf6dc;
}

.banner p {
    margin: 0;
}

/* The note at the top of each Internal page. */
.internal-note {
    margin: 0 0 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 2px dashed var(--color-frame);
    font-size: 0.875rem;
}

.internal-note strong {
    margin-right: 0.5rem;
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* A note: a tip in the gray of the surface. */
.note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1rem;
    border-left: 4px solid var(--color-cobalt);
    background: var(--color-surface);
}

.note p,
p.note {
    margin: 0;
}

/* Panels: a gray frame, with a light header. */
.panel {
    margin: 0 0 2rem;
    border: 2px solid var(--color-frame);
    background: var(--color-background);
}

.panel > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 2px solid var(--color-line);
    background: var(--color-surface);
}

/* A panel's title is in sentence case. The small labels around it (the header's own label, the
   sidebar groups', the fields', and the tables' columns) stay in capitals. */
.panel > header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
}

.panel > header span {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* A link in a panel's header reads as the header's label does, small and in capitals, with the
   underline of a link. */
.panel > header span a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.panel > header span a:hover {
    color: var(--color-link-hover);
}

.panel.danger {
    border-color: var(--color-danger);
}

.panel.danger > header {
    border-bottom-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.panel .body {
    padding: 1.25rem 1rem;
}

.panel .body + .body,
.panel .list + .body,
.panel .scroll + .body,
.panel .body + .list,
.panel .body + .scroll {
    border-top: 1px solid var(--color-line);
}

.panel .body > :first-child {
    margin-top: 0;
}

.panel .body > :last-child {
    margin-bottom: 0;
}

/* Lists: a row for each thing, with its actions at the end. */
.list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
}

.list > li + li {
    border-top: 1px solid var(--color-line);
}

.list .what {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

/* The line under the name. */
.list .what > span {
    font-size: 0.875rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.list .what strong .badge {
    font-weight: 400;
    vertical-align: 1px;
}

.list .end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.list .end form {
    margin: 0;
}

.revoked .what strong {
    color: var(--color-muted);
}

/* A badge: a word in capitals, in a light frame, as the small labels are. A plain badge
   describes the thing, such as its role; a turquoise one is good, or the person's own; a red one
   needs attention. */
.badge {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    line-height: 1.6;
    text-transform: uppercase;
    vertical-align: 0.125em;
    color: var(--color-faint);
    white-space: nowrap;
}

/* A badge after a name, or after another badge, is always the same distance from it. A badge on
   its own, such as a status in a table, has no space before it. */
.badge {
    margin-left: 0.5rem;
}

td > .badge:only-child,
header > .badge {
    margin-left: 0;
}

.badge.on {
    border-color: var(--color-turquoise);
    color: var(--color-turquoise);
}

.badge.hot {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Four numbers in a row. */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 2rem;
    padding: 0 2px 2px 0;
    list-style: none;
}

.stats li {
    min-width: 0;
    margin: 0 -2px -2px 0;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-frame);
}

.stats small {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.stats strong {
    display: block;
    overflow: hidden;
    font: 500 1.75rem var(--font-display);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats span {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.standing {
    text-transform: capitalize;
}

.standing.s-active {
    color: var(--color-turquoise);
}

.standing.s-billing_required,
.standing.s-over_limit {
    color: var(--color-cadmium-yellow-line);
}

.standing.s-suspended {
    color: var(--color-danger);
}

/* The prompt of a new team's overview, for the person's coding agent. It wraps, so it fits the
   panel. */
pre.code.prompt {
    margin-top: 0;
    white-space: pre-wrap;
}

/* Tabs above a list, such as running and all agents. */
.tabs {
    display: flex;
    gap: 1.25rem;
}

.tabs a {
    font-family: var(--font-display);
    font-weight: 500;
}

.tabs a[aria-current] {
    color: var(--color-text);
    text-decoration-color: var(--color-vermilion);
}

/* Filters above a list. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filters .field {
    margin: 0;
}

.filters .field.wide {
    flex: 1 1 16rem;
}

.panel .filters {
    margin: 0;
}

/* Tables. */
.scroll {
    overflow-x: auto;
}

.panel table {
    width: 100%;
    border-collapse: collapse;
}

.panel th {
    padding: 0.625rem 1rem;
    border-bottom: 2px solid var(--color-line);
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-align: left;
    color: var(--color-muted);
    white-space: nowrap;
}

/* A row's name is a header for screen readers, and looks like the other cells. */
.panel tbody th {
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    color: var(--color-text);
}

.panel td,
.panel tbody th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-line);
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}

.panel tbody tr:last-child td,
.panel tbody tr:last-child th {
    border-bottom: 0;
}

.panel tfoot td {
    padding: 0.625rem 1rem;
    border-top: 2px solid var(--color-line);
}

.panel tfoot tr:last-child td {
    font-weight: 600;
}

.panel .num {
    text-align: right;
    white-space: nowrap;
}

/* The line under a cell's name, such as an ID, clears the name's underline. */
.panel td .sub {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.panel td form {
    margin: 0;
}

.audit td {
    vertical-align: top;
}

.audit .detail {
    width: 100%;
    min-width: 14rem;
    overflow-wrap: anywhere;
}

.audit .detail code {
    font-size: 0.75rem;
}

code.scope {
    padding: 0.0625rem 0.375rem;
    background: var(--color-surface);
    font-size: 0.75rem;
    white-space: nowrap;
}

.pager {
    display: flex;
    gap: 1.5rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--color-line);
}

.pager .older {
    margin-left: auto;
}

/* Facts: a label at the left of each value, stacked on a phone. */
.facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.625rem 2rem;
    margin: 0;
}

.facts dt {
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
    line-height: 1.5rem;
}

.facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.facts ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* A value that people read and copy but don't change, such as the team's ID. */
.fixed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
}

.fixed .legend {
    flex: 0 0 6rem;
}

.fixed code {
    padding: 0.25rem 0.625rem;
    background: var(--color-surface);
}

.fixed .hint {
    flex-basis: 100%;
    margin: 0;
}

/* A secret that Motor shows once: the one black block of the console besides the toasts. */
.reveal {
    padding: 1.25rem;
    background: var(--color-text);
    color: var(--color-background);
    box-shadow: var(--shadow);
}

.reveal small {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: #d6d6d6;
}

.reveal .secret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.375rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    word-break: break-all;
}

/* The docs, after the doc browser of the first motor.dev: the overview and a reference for each
   spec, with the sections at the left. The section list is above the page, and on a wide screen
   it's at the left and stays in view while the page scrolls. One breakpoint sets both, so the list
   is never sticky while it's above the page. */
.docs {
    display: block;
}

.docs .sections {
    margin-bottom: 2.5rem;
}

@media (min-width: 56rem) {
    .docs {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    /* The sidebar scrolls as one, so a short window doesn't squeeze a group under its header. */
    .docs .sections {
        position: sticky;
        top: 1rem;
        align-self: start;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        margin-bottom: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--color-frame) var(--color-surface);
    }

    .docs .sections .group {
        flex: none;
    }
}

/* The topics of the open page: a plain list in the frame of its group, with the endpoints of
   each topic under it. */
.docs .on-page ul {
    padding: 0.5rem 0;
}

.docs .on-page ul ul {
    margin: 0 0 0.375rem 0.75rem;
    padding: 0;
}

.docs .on-page > ul > li + li {
    border-top: 0;
}

.docs .on-page > ul > li > a,
.docs .on-page li a {
    display: block;
    padding: 0.25rem 1rem;
    border-left: 0;
    color: inherit;
    font: 400 0.9375rem var(--font-sans);
    text-decoration: none;
}

.docs .on-page > ul > li > a {
    font-weight: 600;
}

.docs .on-page > ul > li > a:hover,
.docs .on-page li a:hover {
    background: none;
    text-decoration: underline;
}

.docs .lead p {
    margin: 0;
}

.docs .lead p + p {
    margin-top: 0.75rem;
}

/* The base URL and the version, under the lead. */
.docs .lead + .muted {
    margin: -1.25rem 0 2rem;
}

.docs .list .end a {
    font-size: 0.875rem;
}

.topic,
.reference {
    margin: 0 0 3rem;
}

.topic > h2,
.reference > h2 {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-frame);
    font-size: 1.5rem;
}

.topic h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.0625rem;
}

.docs .topic li + li {
    margin-top: 0.875rem;
}

.topic table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
}

.topic th,
.topic td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: baseline;
}

.topic th {
    border-bottom: 2px solid var(--color-line);
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.docs td p {
    margin: 0;
}

/* The small uppercase heading of a part of a panel, such as "Example request". */
.panel .label {
    display: block;
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.panel pre.code:last-child {
    margin-bottom: 0;
}

/* An endpoint of a reference: the method and the path in the header, then what it takes and
   answers. */
.endpoint > header {
    align-items: center;
    padding: 0.75rem 1rem;
}

.endpoint > header h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

.endpoint > header code {
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.endpoint .body p {
    margin: 0 0 0.5rem;
}

.method {
    display: inline-block;
    min-width: 3.75rem;
    padding: 0.0625rem 0.5rem;
    font: 600 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-align: center;
    color: var(--color-text);
    background: var(--color-background);
}

.method.get    { color: #fff; background: var(--color-turquoise); }
.method.post   { color: #fff; background: var(--color-cobalt); }
.method.put    { background: var(--color-cadmium-yellow); }
.method.patch  { background: var(--color-cadmium-yellow); }
.method.delete { background: var(--color-vermilion); }

.responses > summary {
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
    cursor: pointer;
}

.responses[open] > summary {
    margin-bottom: 1rem;
}

.response + .response {
    margin-top: 1.25rem;
}

.response p {
    margin: 0;
}

.response .scroll {
    margin-top: 0.75rem;
}

.response .fields th,
.response .fields td {
    padding-left: 0;
}

/* A status code: turquoise for success, vermilion for an error. */
.status {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.0625rem 0.5rem;
    font: 600 0.8125rem var(--font-mono);
    background: var(--color-surface);
}

.status.s2 {
    color: #fff;
    background: var(--color-turquoise);
}

.status.s4,
.status.s5 {
    background: var(--color-vermilion);
}

/* The parameters and the fields of a request or a response: each table has the same columns, so
   that the types and the descriptions line up down the page. (A response's table starts at the
   padding of its body, and its cells have no padding at the left, so its columns line up too.)
   The name stays on one line, with whether it's required and where it goes below it. */
.fields {
    table-layout: fixed;
    min-width: 36rem;
}

.fields col.name {
    width: 16rem;
}

.fields col.type {
    width: 10rem;
}

.fields td:first-child code {
    white-space: nowrap;
}

.fields .sub .badge {
    margin: 0 0.25rem 0 0;
}

/* On a phone, the numbers stack in pairs, and the steps of sign-up stack. */
@media (max-width: 40rem) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .steps li + li {
        border-left: 0;
        border-top: 2px solid var(--color-frame);
    }

    .facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .facts dd + dt {
        margin-top: 0.75rem;
    }
}