/* The design language of motor.dev (galadriel's assets/app.css): Futura headings, black rules,
   flat gray shadows, and the Kandinsky palette. Keep the tokens in step with app.css. */

:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* 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-background: #fefefe;
    /* The gray shadow of buttons and raised panels. */
    --shadow: 0.25rem 0.25rem 0 var(--color-line);

    /* 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 */

    /* Links are bold, cobalt, and underlined. Cobalt is only 2.3:1 with --color-text, so the
       underline, not the color, marks a link in a paragraph (WCAG 1.4.1). */
    --color-link: var(--color-cobalt);
    --color-link-hover: #2563d3;
}

html {
    scroll-padding-top: 1.5rem;
    /* 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,
h4 {
    font-family: var(--font-display);
    /* Futura has no semibold; use medium. */
    font-weight: 500;
    line-height: 1.15;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.35;
}

h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.75rem;
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.125rem;
}

h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
}

/* The first paragraph after the title of a page leads into it. */
main > h1 + p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

/* Keep the landing page prose and benefits at Motor's reading size. */
.index main > p,
.index main > ul {
    font-size: 1.1875rem;
    line-height: 1.55;
}

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

a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    transition: color 150ms ease;
}

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

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

/* A heading that links to itself keeps the color of the text. */
h2 a,
h3 a {
    color: inherit;
}

/* The logo and the main navigation. */
body > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* The logo keeps the color of the text, without an underline. */
.logo {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text);
    text-decoration-line: none;
    font: 500 2rem/1 var(--font-display);
}

.logo svg {
    display: block;
    height: 2rem;
    width: auto;
}

.logo .cutout {
    fill: var(--color-background);
}

body > header ul {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > header li + li {
    margin-top: 0;
}

body > header nav a {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* The link of the page that is open is black, without an underline. */
body > header nav a[aria-current="page"],
body > footer a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-line: none;
}

/* 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 li + li {
    margin-top: 0;
}

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

/* Code: mono text, and a block of code on the gray surface with a black rule at the left. */
code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

pre {
    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 {
    font-size: inherit;
}

/* A quotation or a note: the text on the gray surface, with a turquoise rule at the left. */
blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-turquoise);
    background: var(--color-surface);
}

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

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

/* A wide table scrolls on its own, so the page doesn't scroll sideways. */
@media (max-width: 40rem) {
    table {
        display: block;
        overflow-x: auto;
    }
}

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

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

hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 2px solid var(--color-text);
}

img {
    max-width: 100%;
}

/* A band of tiles that tiles.js draws: `<div class="tiles rotors" aria-hidden="true"></div>` for
   rotors, or `class="tiles shapes"` for simple shapes. The band reserves its space, so the page
   doesn't shift when the tiles are drawn. */
.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;
    }

    h1 {
        font-size: 2rem;
    }

}

/* Audience and copy controls from galadriel/assets/app.css. */
pre.code.amp-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;
}

[role="tabpanel"] > .prompt:first-child {
    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-turquoise);
    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;
    }
}

/* An unlinked comparison page for proposed Amp symbols. */
.icon-options {
    display: grid;
    gap: 3rem;
    margin: 3rem 0;
}

.icon-option {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.icon-puzzle {
    position: relative;
    transform: rotate(5deg);
    color: var(--color-background);
    --icon-cut: var(--color-rose-madder);
}

.puzzle-shape {
    display: block;
    fill: var(--color-rose-madder);
    width: 100%;
}

.puzzle-symbol {
    position: absolute;
    width: 34%;
    height: 34%;
    top: 33%;
    left: 33%;
}

.icon-option h2 {
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--color-rose-madder);
}

.icon-sizes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    --icon-cut: var(--color-background);
}

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