:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "New York", Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
    /* Geometric display fonts with a system sans fallback. */
    --font-display: Futura, "Futura PT", "Century Gothic", "URW Gothic", "URW Gothic L", var(--font-sans);
    --tracking-caps: 0.08em;
    --color-text: #111;
    --color-muted: #4a4a4a;
    --color-line: #e4e4e4;
    --color-surface: #f2f2f2;
    --color-field: #fff;
    --color-field-border: #888;
    --field-height: 3rem;
    /* The gray shadow of buttons, selects, and raised panels, and the same shadow inside text fields. */
    --shadow: 0.25rem 0.25rem 0 var(--color-line);
    --shadow-inset: inset 0.25rem 0.25rem 0 var(--color-line);
    --color-background: #fefefe;

    /* Kandinsky palette. Contrast ratios: against background, white, and --color-text.
       WCAG AA minimums: 4.5:1 for text; 3:1 for lines, borders, and icons. */
    --color-cobalt: #1c4ba0;         /* 8.1:1, white 8.2:1, text 2.3:1 */
    --color-turquoise: #1a7f86;      /* 4.7:1, white 4.8:1, text 4.0:1 */
    --color-violet: #5b3a8e;         /* 8.5:1, white 8.6:1, text 2.2:1 */
    --color-rose-madder: #b8285f;    /* 5.9:1, white 6.0:1, text 3.2:1 */
    --color-vermilion: #e34234;      /* 4.1:1, white 4.1:1, text 4.6:1 */
    --color-cadmium-yellow: #f2c12e; /* 1.7:1, white 1.7:1, text 11.2:1: only for fills under dark text */
    --color-cadmium-yellow-line: #bc8c00; /* 3.0:1: the yellow for lines and borders */

    /* Links are text-colored, with an underline in this color. */
    --color-link-underline: var(--color-turquoise);
    /* The lightest gray with a contrast of 4.5:1 (WCAG AA) on the background. */
    --color-faint: #757575;
    /* Maintains 4.5:1 contrast over the --color-line hatch. */
    --color-empty: #666;
}

html {
    /* Keeps focused and linked items below the sticky category headers. */
    scroll-padding-top: 4rem;
    /* Every page keeps space for the scrollbar, so short pages and long pages have the same frame. */
    scrollbar-gutter: stable;
}

body {
    margin: 0 auto;
    max-width: 52rem;
    padding: 1.5rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
}

h1 {
    font-size: 2.5rem;
}

main > section:first-child {
    margin-bottom: 3rem;
}

main > section:first-child p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

pre.code.motor-prompt {
    margin: 0;
    border-left: 0;
    padding-right: 3rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.prompt {
    position: relative;
    margin: 0.75rem 0 1.25rem;
    scroll-margin-top: 1.5rem;
}

.prompt > [role="status"] {
    font-size: 0.875rem;
}

.prompt > [role="status"]:not(.copy-error) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.prompt-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.prompt-copy svg {
    vertical-align: middle;
}

.prompt-copy .copy-check {
    display: none;
    position: absolute;
    right: 3px;
    bottom: 3px;
    color: #188038;
    background: var(--color-surface);
    border-radius: 50%;
}

.prompt-copy.copied .copy-check {
    display: block;
}

.prompt-copy:hover {
    color: var(--color-text);
}

.prompt-copy:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* The tabs of the hero: one text for humans and one for agents. The tabs touch, so they share
   their borders. The other tab is raised, as a button is, and has a gray label. The selected tab
   is flat and gray, as if it is pressed. */
.audience {
    display: flex;
}

/* The tabs share the width of the page equally. */
.audience button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-text);
    border-radius: 0;
    background: var(--color-field);
    color: var(--color-muted);
    font: 500 1.0625rem var(--font-display);
    /* The gray of --shadow on the background, but transparent, so that over the selected tab it
       reads as a shadow on that tab. */
    box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0.1);
    cursor: pointer;
}

.audience button + button {
    border-left: 0;
}

/* The raised tab is above the selected tab, so its shadow shows in full when it is the first tab. */
.audience button[aria-selected="false"] {
    position: relative;
}

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

.audience button:focus-visible {
    position: relative;
    outline: 3px solid var(--color-link-underline);
    outline-offset: 3px;
}

.audience button[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
    cursor: default;
}

.audience svg {
    display: block;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* A panel of a tab that isn't selected is hidden only from view. It stays in the page and in the
   accessibility tree, so screen readers and agents that read the page get each panel. */
[role="tabpanel"]:not(.selected) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* On a phone, the tabs are tighter, so each label stays on one line. */
@media (max-width: 40rem) {
    .audience button {
        gap: 0.5rem;
        padding: 0.5rem;
        font-size: 1rem;
    }

    .audience svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

a {
    color: inherit;
    font-weight: 600;
    text-decoration-color: var(--color-link-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

a:hover {
    text-decoration-thickness: 4px;
}

a:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Fields and buttons have the same gray shadow. The shadow doesn't take space, so it doesn't
   move or misalign anything. */
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea,
select {
    font: inherit;
    color: var(--color-text);
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--color-text);
    border-radius: 0;
    background: var(--color-field);
}

/* Text fields are set in: their shadow is inside the border. Selects are raised, as buttons are. */
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea {
    box-shadow: var(--shadow-inset);
}

select {
    box-shadow: var(--shadow);
}

/* Text fields and selects have one height, so fields side by side line up. */
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select {
    box-sizing: border-box;
    height: var(--field-height);
}

/* Selects draw their own caret, 1rem from the right edge. */
select {
    appearance: none;
    padding-right: 3rem;
    /* 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 1rem center / 0.875rem no-repeat;
    cursor: pointer;
}

/* Where the browser allows it, the open list is below the field, in the frame of a panel. */
@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-text);
        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.875rem;
        border-top: 1px solid var(--color-line);
    }

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

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

    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 {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

body > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

body > header svg {
    display: block;
    height: 2rem;
    width: auto;
}

/* The items line up on the baseline of their text, so the sign-out button lines up with the links. */
body > header ul {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > header nav a {
    font-family: var(--font-display);
    font-size: 1.125rem;
    /* Futura has no semibold; use medium. */
    font-weight: 500;
    white-space: nowrap;
}

/* The link of the page that is open: a black underline, as thick as the hover underline. */
body > header nav a[aria-current="page"] {
    text-decoration-color: var(--color-text);
    text-decoration-thickness: 4px;
}

/* Search form. */
form[role="search"] {
    display: flex;
}

form[role="search"]:focus-within {
    outline: 3px solid var(--color-link-underline);
    outline-offset: 3px;
}

form[role="search"] input {
    flex: 1;
    min-width: 0;
    height: 3.5rem;
    box-sizing: border-box;
    padding: 0 1rem;
    border: 3px solid var(--color-text);
    border-right: 0;
    font-size: 1.125rem;
}

form[role="search"] input:focus-visible {
    outline: 0;
}

form[role="search"] button {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 0;
    background: var(--color-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='2.75'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15 21 21'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
    cursor: pointer;
}

form[role="search"] button:hover,
form[role="search"] button:focus-visible {
    background-color: var(--color-link-underline);
    outline: 0;
}

#catalog > [role="status"] {
    color: var(--color-muted);
}

/* Match the switch margin to the API count to align them. */
main > section[aria-label="APIs"] {
    display: flow-root;
}

.toggle {
    float: right;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0 1rem;
    cursor: pointer;
}

/* Availability switch. */
.toggle input {
    appearance: none;
    position: relative;
    flex: none;
    width: 2.5rem;
    height: 1.375rem;
    margin: 0;
    border: 2px solid var(--color-text);
    border-radius: 0;
    background: var(--color-field);
    cursor: pointer;
}

.toggle input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.375rem - 8px);
    height: calc(1.375rem - 8px);
    background: var(--color-text);
    transition: transform 0.15s;
}

.toggle input:checked {
    background: var(--color-link-underline);
}

.toggle input:checked::before {
    background: var(--color-background);
    transform: translateX(calc(2.5rem - 1.375rem));
}

@media (prefers-reduced-motion: reduce) {
    .toggle input::before {
        transition: none;
    }
}

#catalog section {
    margin: 1.5rem 0 2.5rem;
    border: 2px solid var(--color-text);
}

#catalog section > header {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1rem;
    padding: 0.625rem 1rem;
    background: var(--color-text);
    color: var(--color-background);
}

#catalog h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

#catalog section > header a {
    padding: 0.25rem 0;
    font-weight: 500;
    text-decoration-color: currentColor;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

#categories ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-auto-rows: 1fr;
    margin: 0 0 2rem;
    padding: 0 2px 2px 0;
    list-style: none;
}

#categories li {
    /* Overlaps the borders of neighbouring cells, so each line is 2px wide. */
    margin: 0 -2px -2px 0;
    border: 2px solid var(--color-text);
}

#categories li > * {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    height: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    white-space: nowrap;
}

#categories small {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* The cells look like buttons, so their names aren't underlined. */
#categories a {
    font-weight: inherit;
    text-decoration: none;
}

#categories a:hover {
    background: var(--color-surface);
}

#categories small {
    color: var(--color-muted);
}

/* A category without matches: faded text on a diagonal hatch. */
#categories li > span,
#categories li > span small {
    color: var(--color-empty);
}

#categories li > span {
    background: repeating-linear-gradient(
        -45deg,
        var(--color-line) 0 1px,
        var(--color-background) 1px 0.5rem
    );
}

#catalog section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#catalog section li {
    padding: 0.75rem 1rem;
}

#catalog section li + li {
    border-top: 1px solid var(--color-line);
}

#catalog article {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.25rem 1.25rem;
    align-items: baseline;
}

#catalog article > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

#catalog h3 {
    grid-column: 1;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
}


#catalog .badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-faint);
    white-space: nowrap;
}

#catalog article p {
    grid-row: 2;
    margin: 0;
    color: var(--color-muted);
}

#catalog .price {
    grid-column: 2;
    text-align: right;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

#catalog .price > span {
    display: block;
}

@media (max-width: 40rem) {
    h1 {
        font-size: 2rem;
    }

    main > section:first-child p {
        font-size: 1.0625rem;
    }

    /* When the links don't fit next to the logo, they go below it. */
    body > header {
        flex-wrap: wrap;
        row-gap: 1rem;
    }

    body > header svg {
        height: 1.625rem;
    }

    body > header ul {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    body > header nav a,
    body > header nav .link.nav {
        font-size: 1rem;
    }

    #categories ul {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }

    #categories li > * {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    #catalog article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #catalog article p {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #catalog .price {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* The investors on the About page: a row of logos below the line that introduces them. */
.backers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.backers a {
    display: flex;
    text-decoration: none;
}

.backers img {
    width: auto;
    height: 1.625rem;
}

.backers li:last-child img {
    height: 2.25rem;
}

/* The Terms of Service and the Privacy Policy: long text in the body size, with numbered sections. */
main > section.legal p {
    font-size: 1rem;
    line-height: 1.5;
}

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

.legal h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.legal h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.125rem;
}

.legal li + li {
    margin-top: 0.375rem;
}

/* The copyright line and the footer links. */
body > footer {
    margin-top: 3rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1.25rem;
}

body > footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > footer a {
    font-weight: 500;
}

body > footer a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-color: var(--color-text);
}

/* Reserve space for tiles.js to prevent layout shift. */
.tiles {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    aspect-ratio: 12 / 1;
    margin-bottom: 2.5rem;
    border: 2px solid var(--color-text);
    overflow: hidden;
}

.tiles svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tiles + h1 {
    margin-top: 0;
}

/* Half-height shape band; clip tiles beyond the first row. */
.tiles.shapes {
    grid-template-columns: repeat(24, 1fr);
    grid-auto-rows: 100%;
    aspect-ratio: 24 / 1;
    margin: 2.5rem 0 0;
}

@media (max-width: 40rem) {
    .tiles {
        grid-template-columns: repeat(6, 1fr);
        aspect-ratio: 6 / 2;
    }

    .tiles.shapes {
        grid-template-columns: repeat(12, 1fr);
        aspect-ratio: 12 / 1;
    }
}

/* Sign-up, sign-in, and admin pages. */

:root {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --color-danger: #b3261e;
    --color-danger-surface: #fdecea;
    --hatch: repeating-linear-gradient(-45deg, var(--color-line) 0 1px, var(--color-background) 1px 0.5rem);
}

/* The admin pages are wider than the other pages, for the section list. */
body.wide {
    max-width: 76rem;
}

code,
.mono {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

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

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

.small {
    font-size: 0.875rem;
}

/* A problem: what went wrong in red, and what to do next, under the thing that failed. */
.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;
    font-size: 0.875rem;
}

.problem p:empty {
    display: none;
}

.problem .button {
    margin-top: 0.75rem;
}

.field.invalid input,
.field.invalid select {
    border-color: var(--color-danger);
}

.field > .error {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-danger);
}

.field > .error::before {
    content: "";
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--color-danger);
}

.panel.failed .body {
    background: repeating-linear-gradient(-45deg, #f6e3e1 0 1px, var(--color-background) 1px 0.5rem);
}

.panel.failed .problem {
    margin: 0;
}

/* A toast: the black block of a button, at the bottom right. It 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;
    border: 3px solid var(--color-text);
    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: 3px solid var(--color-text);
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: 0.5rem 0.5rem 0 rgba(17, 17, 17, 0.35);
}

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

.dialog > header {
    padding: 0.75rem 1.25rem;
    background: var(--color-text);
    color: var(--color-background);
}

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

.dialog.danger > header {
    background: 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;
}

/* The field where a person types a phrase to confirm, such as "delete my team". */
.dialog .field {
    margin: 1.25rem 0 0;
}

.dialog .field[hidden] {
    display: none;
}

.dialog [data-yes][disabled] {
    cursor: not-allowed;
}

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

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

/* Sign-up steps: blue circle, red square, yellow triangle. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
    border: 2px solid var(--color-text);
}

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

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

.steps .tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 5.5rem;
    border-right: 2px solid var(--color-text);
}

.steps .tile svg {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
}

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

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

.steps small {
    font-size: 0.75rem;
    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-text);
    color: var(--color-background);
}

.steps .now small,
.steps .now .detail {
    color: #d6d6d6;
}

.steps .todo .tile {
    background: var(--hatch);
}

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

/* While the browser waits for a passkey or a card, the shape of the step turns. */
.steps .busy .tile svg {
    animation: turn 1.6s cubic-bezier(0.15, 0.75, 0.25, 1) infinite;
}

@keyframes turn {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .steps .busy .tile svg {
        animation: none;
    }
}

/* Buttons. */
/* Links and buttons with this class have one size: `a` and `button` size their borders differently. */
.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0 1.5rem;
    border: 3px solid var(--color-text);
    border-radius: 0;
    background: var(--color-field);
    color: var(--color-text);
    font: 500 1.125rem var(--font-display);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: var(--color-surface);
}

.button:focus-visible {
    outline: 3px solid var(--color-link-underline);
    outline-offset: 3px;
}

.button[hidden] {
    display: none;
}

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

/* A small button is as tall as the fields next to it. */
.button.small {
    min-height: var(--field-height);
    padding: 0 1rem;
    border-width: 2px;
    font-size: 1rem;
}

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

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

.button.google {
    gap: 1.25rem;
    padding: 0 1.5rem 0 0;
}

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

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

.button.google svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* 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: inherit;
    font: 600 0.875rem var(--font-sans);
    text-decoration: underline;
    text-decoration-color: var(--color-link-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    cursor: pointer;
}

.link:hover {
    text-decoration-thickness: 4px;
}

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

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

/* Form fields. */
.field {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.field input,
.field select {
    width: 100%;
    box-sizing: border-box;
}

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

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

.inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

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

/* A row of fields has the space of a field under it when more of the form follows. */
form > .inline:not(:last-child) {
    margin-bottom: 1.25rem;
}

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

.inline > form {
    display: contents;
}

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

/* Panels. */
.panel {
    margin: 0 0 2rem;
    border: 2px solid var(--color-text);
    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;
    background: var(--color-text);
    color: var(--color-background);
}

.panel > header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

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

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

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

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

.panel .body + .body,
.panel .list + .body,
.panel .body + .list {
    border-top: 2px solid var(--color-text);
}

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

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

.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 {
    min-width: 0;
}

.list .what strong {
    display: block;
}

.list .what span {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* A role next to a name. */
.list .what strong .badge {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    vertical-align: 1px;
}

.list .what strong .badge.dark {
    color: var(--color-text);
}

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

.list .end form {
    margin: 0;
}

/* Row links have a target 24px tall. Buttons keep their own size. */
.list .end a:not(.button),
.key > header .end a:not(.button) {
    display: inline-block;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.revoked .what strong {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.badge {
    display: inline-block;
    padding: 0.0625rem 0.625rem;
    border: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-faint);
    white-space: nowrap;
}

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

.badge.dark {
    border-color: var(--color-text);
    color: var(--color-text);
}

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

/* The note at the top of each Internal page: only employees see the page, and the audit log
   records what they do. */
.internal-note {
    margin: 0 0 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 2px dashed var(--color-text);
    font-size: 0.875rem;
}

.nowrap {
    white-space: nowrap;
}

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

.note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--color-text);
    background: var(--color-surface);
}

.note svg {
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
}

.note p {
    margin: 0;
}

/* Admin sidebar moves above content on narrow screens. */
.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 its first panel. */
.content > h1 + .panel {
    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;
}

/* A value that people read and copy but don't change, such as the team 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 7rem;
}

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

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

/* The admin sections in two groups: the team's, and the person's own. Each group is one black
   frame, with light rules between its heading and rows. */
.sections .group {
    border: 2px solid var(--color-text);
}

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

/* The role of the person is at the right, on the line of the name. */
.team-name em {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--color-muted);
}

.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 {
    font: 500 1.25rem var(--font-display);
}

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

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

.sections li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font: 500 1.0625rem var(--font-display);
    text-decoration: none;
}

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

.sections li a[aria-current="page"] {
    background: var(--color-text);
    color: var(--color-background);
}

/* On the black row of the open page, the white square of the icon doesn't have a gray frame. */
.sections li a[aria-current="page"] .chip {
    stroke: var(--color-background);
}

.sections li svg {
    display: block;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* The number of open issues, at the end of the Issues row. */
.sections li .count {
    margin-left: auto;
    padding: 0 0.5rem;
    border: 1px solid var(--color-danger);
    font-size: 0.875rem;
    color: var(--color-danger);
}

.sections li a[aria-current="page"] .count {
    border-color: var(--color-background);
    color: var(--color-background);
}

/* Meters and the stacked bar of the billing breakdown. */
.meter {
    height: 0.875rem;
    border: 2px solid var(--color-text);
    background: var(--color-background);
}

.meter span {
    display: block;
    height: 100%;
    background: var(--color-turquoise);
}

.meter.hot span {
    background: var(--color-vermilion);
}

.meter.none {
    background: var(--hatch);
}

.stack {
    display: flex;
    height: 2.75rem;
    margin-bottom: 1.25rem;
    border: 2px solid var(--color-text);
}

.stack span {
    display: block;
    height: 100%;
}

.stack span + span {
    border-left: 2px solid var(--color-text);
}

.stack.none {
    background: var(--hatch);
}

.swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.625rem;
    border: 2px solid var(--color-text);
    vertical-align: -1px;
}

.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-text);
}

.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;
    font: 500 1.75rem var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filters .field {
    margin: 0;
}

/* A search field takes the rest of the row, with the other fields and the button at its right. */
.filters .field.wide {
    flex: 1 1 16rem;
}

.stats.team {
    margin-bottom: 0.5rem;
}

.stats-note {
    margin: 0 0 2rem;
}

/* The filters of the usage panel, and the total for them. */
.usage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.usage-bar .filters {
    margin: 0;
}

.usage-total {
    text-align: right;
}

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

.usage-total strong {
    font: 500 1.75rem var(--font-display);
    font-variant-numeric: tabular-nums;
}

.usage-total span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.scroll {
    overflow-x: auto;
}

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

.panel th {
    padding: 0.625rem 1rem;
    border-bottom: 2px solid var(--color-text);
    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;
}

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

/* The panel's border closes the table, so the last row has no rule of its own. */
.panel tbody tr:last-child td {
    border-bottom: 0;
}

/* Facts: a label at the left of each value, in the type of table headers, and stacked on a phone. */
.facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.75rem 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;
}

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

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

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

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

/* The audit log: a second line under the time, the person, and the action, and a detail column
   that breaks long IDs and queries anywhere, so the table fits without scrolling. */
.panel table.audit td {
    vertical-align: top;
}

/* A second line in a table cell, such as the service under a request's ID. */
.panel td .sub,
.panel td .line {
    display: block;
}

.panel td .sub {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

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

/* The registered service configuration values: the description takes the rest of the row. */
.values .description {
    width: 100%;
    min-width: 12rem;
}

/* The activity log of a team: one line per request, with a long path breaking anywhere, and the
   links to older and newer pages under the table. */
.log .request {
    width: 100%;
    min-width: 16rem;
    overflow-wrap: anywhere;
}

/* On a phone, each request stacks: the time and the status, then the key, then the request. */
@media (max-width: 40rem) {
    .log thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .log tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 1rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-line);
    }

    .panel .log td {
        padding: 0;
        border-bottom: 0;
    }

    .log td:nth-child(2),
    .log .request {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .log td.num {
        grid-row: 1;
        grid-column: 2;
    }
}

/* The Database pages: the tables of each module, and rows whose cells stay on one line, so wide
   tables scroll sideways. A row page breaks long values anywhere. */
.db-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 1rem;
    list-style: none;
}

.db-rows td {
    white-space: nowrap;
}

.db-row th {
    width: 1%;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.875rem;
    vertical-align: top;
}

.db-row td {
    overflow-wrap: anywhere;
}

.db-row .json {
    white-space: pre-wrap;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem 1rem;
}

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

.panel tfoot td {
    border-top: 2px solid var(--color-text);
    border-bottom: 0;
    font-weight: 600;
}

/* A key: the secret key and its publishable key in one frame. */
.keys {
    display: grid;
    gap: 1.5rem;
}

.keys + .panel {
    margin-top: 2rem;
}

.key {
    border: 2px solid var(--color-text);
}

.key > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--color-text);
}

.key > header h2 {
    margin: 0;
    font-size: 1.375rem;
}

.key > header .meta {
    font-size: 0.875rem;
    color: var(--color-muted);
}

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

.key > header form {
    margin: 0;
}

.key .pair,
.key .rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.key .rules {
    border-top: 2px solid var(--color-text);
}

.key .pair > div,
.key .rules > div {
    min-width: 0;
    padding: 0.875rem 1rem;
}

.key .pair > div + div,
.key .rules > div + div {
    border-left: 2px solid var(--color-text);
}

.token {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.token span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The APIs of a key: a count, and the list by category on demand. */
.scope .count {
    display: block;
    font: 500 1.75rem var(--font-display);
    line-height: 1.2;
}

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

.scope-list {
    padding: 0.875rem 1rem;
    border-top: 2px solid var(--color-text);
}

.scope-list summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-link-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

.scope-list details[open] .show,
.scope-list details:not([open]) .hide {
    display: none;
}

.apis-by-category {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-line);
}

.apis-by-category h3 {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.apis-by-category ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.apis-by-category li {
    padding: 0.125rem 0;
}

.apis-by-category .badge {
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.chip {
    padding: 0.125rem 0.625rem;
    border: 2px solid var(--color-text);
    font: 500 0.875rem var(--font-display);
    white-space: nowrap;
}

.chip.all {
    background: var(--color-text);
    color: var(--color-background);
}

.limit-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.375rem 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.limit-line .over {
    font-weight: 600;
    color: var(--color-danger);
}

/* The secret key, shown once. */
.reveal {
    padding: 1.25rem;
    border: 3px solid var(--color-text);
    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;
}

.reveal .secret:last-child {
    margin-bottom: 0;
}

/* The choice of APIs for a key. Without "Only some APIs", the list of APIs is hidden. */
.choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.choice label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid var(--color-text);
    cursor: pointer;
}

.choice label:has(:checked) {
    outline: 3px solid var(--color-link-underline);
    outline-offset: 3px;
    box-shadow: var(--shadow);
}

.choice strong {
    display: block;
    font: 500 1.0625rem var(--font-display);
}

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

input[type="radio"],
.checks input[type="checkbox"]:not([role="switch"]) {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--color-text);
}

.panel:has(input[name="scope"][value="all"]:checked) .checks,
.panel:has(input[name="scope"][value="all"]:checked) .checks + .hint {
    display: none;
}

/* A list that scrolls: a thin black scrollbar in a gray track, group headers that stay on top,
   and, at the end, the count of what's below and of what's chosen. */
.checks {
    position: relative;
    max-height: 26rem;
    overflow: auto;
    border: 2px solid var(--color-text);
    scrollbar-width: thin;
    scrollbar-color: var(--color-text) var(--color-surface);
}

.checks h3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.checks h3 .link {
    color: #d6d6d6;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    text-decoration-color: #d6d6d6;
}

.checks .more {
    position: sticky;
    bottom: 3rem;
    padding: 0.375rem 1rem;
    background: var(--color-text);
    color: var(--color-background);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.checks .tally {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    box-sizing: border-box;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border-top: 2px solid var(--color-text);
    background: var(--color-surface);
    font-size: 0.875rem;
}

.checks .more[hidden],
.checks .tally[hidden] {
    display: none;
}

.checks .tally .toggle {
    margin: 0;
    padding: 0;
}

.checks input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid var(--color-text);
    box-shadow: none;
}

.checks h3 {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0.375rem 1rem;
    background: var(--color-text);
    color: var(--color-background);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.checks label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.checks label + label {
    border-top: 1px solid var(--color-line);
}

.checks label span {
    flex: 1;
}

.checks label small {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.toggle.inline {
    float: none;
    margin: 0 0 1rem;
    font-weight: 600;
}

.panel:has(input[name="limited"]:not(:checked)) .limit {
    display: none;
}

.money {
    display: flex;
    align-items: stretch;
    max-width: 16rem;
}

.money span {
    display: grid;
    place-items: center;
    padding: 0 0.875rem;
    border: 2px solid var(--color-text);
    border-right: 0;
    background: var(--color-text);
    color: var(--color-background);
    font-family: var(--font-display);
}

.money input {
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Post-sign-up welcome panel. */
.welcome {
    margin-bottom: 2rem;
    border: 2px solid var(--color-text);
}

.welcome .tiles.shapes {
    margin: 0;
    border: 0;
    border-bottom: 2px solid var(--color-text);
}

.welcome .body {
    padding: 1.5rem 1rem 0;
}

.welcome h2 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}

.next {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

/* The steps are as tall as the tallest step, and each link is at the bottom, so the links line up. */
.next li {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border-top: 2px solid var(--color-text);
}

.next li > a {
    align-self: flex-start;
    margin-top: auto;
}

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

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

.next strong {
    display: block;
    margin: 0.125rem 0 0.25rem;
    font: 500 1.125rem var(--font-display);
}

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

/* A link back to the section of a page that isn't in the section list. */
.crumbs {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

@media (max-width: 40rem) {
    .steps,
    .next {
        grid-template-columns: 1fr;
    }

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

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

    .choice,
    .key .pair,
    .key .rules,
    .apis-by-category {
        grid-template-columns: 1fr;
    }

    .usage-total {
        text-align: left;
    }

    .key .pair > div + div,
    .key .rules > div + div {
        border-top: 2px solid var(--color-text);
        border-left: 0;
    }
}

/* The three shapes of the sign-up steps, as a small band on the sign-in page. */
.trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 18rem;
    margin-bottom: 2.5rem;
    border: 2px solid var(--color-text);
}

.trio svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The sign-out button in the main navigation looks like the links next to it. */
body > header nav form {
    margin: 0;
}

body > header nav .link.nav {
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: inherit;
}

/* The doc browser: a guide and a reference for each service, with a form to try the API. */
/* 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 list fits the window. The topics of the page scroll in their frame, and the whole list
       scrolls if even a few topics don't fit. */
    .docs .sections {
        position: sticky;
        top: 1rem;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        margin-bottom: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--color-text) var(--color-surface);
    }

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

    .docs .sections .on-page {
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        min-height: 12rem;
    }

    /* A shadow at the bottom of the topics says there are more below. The cover scrolls with the
       list and hides the shadow once the last topic is in view. */
    .docs .on-page ul {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-text) var(--color-surface);
        background:
            linear-gradient(transparent, var(--color-background) 70%) bottom / 100% 2.5rem no-repeat local,
            linear-gradient(transparent, rgb(0 0 0 / 0.18)) bottom / 100% 1rem no-repeat scroll,
            var(--color-background);
    }
}

/* The services: one short line each, with a small icon. A long name ends with an ellipsis, and its
   link's title shows all of it. */
.docs .services li a {
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
}

.docs .services li svg {
    width: 1.125rem;
    height: 1.125rem;
}

.docs .sections .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.docs .on-page li {
    margin: 0;
    border: 0;
}

.docs .on-page li a {
    padding: 0.25rem 1rem;
    font: 400 0.9375rem var(--font-sans);
}

.docs .on-page li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-link-underline);
    background: none;
}

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

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

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

.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-text);
    font: 500 0.75rem var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* A block of code: mono text on the gray surface, with a black rule at the left. */
pre.code {
    margin: 0.75rem 0 1.25rem;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    border-left: 4px solid var(--color-text);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
}

pre.code code {
    font-size: inherit;
}

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

/* A message to users: its draft fields fill the panel, and its text keeps its line breaks. */
.mail-draft .field input,
.mail-draft .field textarea {
    width: 100%;
    box-sizing: border-box;
}

.mail-draft .audience {
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
}

.mail-draft .audience .checks {
    margin-top: 0.75rem;
}

.mail-draft .audience .checks label[hidden],
.mail-draft .audience .checks .none[hidden] {
    display: none;
}

.mail-draft .audience .checks .none {
    margin: 0;
    padding: 0.75rem 1rem;
    color: var(--color-muted);
}

pre.mail {
    margin: 0.5rem 0 0;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

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

/* An endpoint of the reference: the method and the path in the black header. */
.endpoint > header h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1rem;
}

.endpoint > header code {
    overflow-wrap: anywhere;
}

.endpoint > header a {
    color: var(--color-background);
    font-size: 0.875rem;
    text-decoration-color: var(--color-cadmium-yellow);
}

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

.endpoint > header .method {
    display: inline-block;
    min-width: 3.75rem;
    padding: 0.125rem 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);
}

.endpoint > header .method.get {
    color: #fff;
    background: var(--color-turquoise);
}

.endpoint > header .method.post {
    color: #fff;
    background: var(--color-cobalt);
}

.endpoint > header .method.patch {
    background: var(--color-cadmium-yellow);
}

.endpoint > header .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;
}

/* A status code: turquoise for success, vermilion for an error. */
.status {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    border: 2px solid var(--color-text);
    font: 600 0.8125rem var(--font-mono);
}

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

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

/* The fields of a request body. */
.fields td:first-child {
    white-space: nowrap;
}

/* The form to try the API: the key, the method, and the path on one line, then the body. */
/* The form fits the width of its panel rather than of the screen, since the section list takes some
   of the screen beside it. On a narrow panel, the key is on a line of its own, then the method and
   the path; on a very narrow one, each field is on a line of its own. */
.console {
    container-type: inline-size;
}

.console .request {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 8rem minmax(14rem, 2fr);
    gap: 0 1rem;
}

.console .request select {
    width: 100%;
    min-width: 0;
}

@container (max-width: 50rem) {
    .console .request {
        grid-template-columns: 8rem minmax(0, 1fr);
    }

    .console .request .key-choice {
        grid-column: 1 / -1;
    }
}

@container (max-width: 26rem) {
    .console .request {
        grid-template-columns: minmax(0, 1fr);
    }
}

.console .request .field {
    margin-bottom: 1.25rem;
}

.console textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 9rem;
    resize: vertical;
}

.console .actions {
    margin: 0.5rem 0 0;
}

.answer pre.code {
    max-height: 28rem;
}