/*
 * xaa.rocks: a warm neutral page that lets each tool bring its own colour.
 * Every card carries its tool's accent in --tool, so the page previews the
 * family of sites it links to. Inter Tight (OFL, self-hosted) for headings,
 * the system stack for body text.
 */

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

:root {
    --bg: #f7f5f2;
    --surface: #ffffff;
    --ink: #1c1917;
    --muted: #6b635b;
    --line: #e7e2dc;
    --chip: #f1ede8;
    --link: #1d4ed8;
    --up: #15803d;
    --down: #b91c1c;
    --display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 14px;
    --shadow: 0 1px 2px rgb(28 25 23 / 6%), 0 8px 24px -12px rgb(28 25 23 / 12%);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #151312;
        --surface: #1f1c1a;
        --ink: #f3efeb;
        --muted: #a79e95;
        --line: #332e2a;
        --chip: #2a2623;
        --link: #93b4ff;
        --up: #4ade80;
        --down: #f87171;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #151312;
    --surface: #1f1c1a;
    --ink: #f3efeb;
    --muted: #a79e95;
    --line: #332e2a;
    --chip: #2a2623;
    --link: #93b4ff;
    --up: #4ade80;
    --down: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 1rem/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 40rem) { .wrap { padding-inline: 2rem; } }

/* ---------------------------------------------------------------- masthead */

.masthead { padding: 2rem 0 3rem; border-bottom: 1px solid var(--line); }

.wordmark {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 3.5rem;
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Four squares in the four flow colours: the parties of the flow. */
.mark {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 5px;
    background: conic-gradient(#6d28d9 0 25%, #546be7 0 50%, #16a34a 0 75%, #be185d 0);
}

h1 {
    max-width: 18ch;
    font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);
    font-weight: 750;
    letter-spacing: -.035em;
}
h1 span { color: var(--muted); }

.lede { max-width: 44rem; margin: 1.5rem 0 0; font-size: 1.1875rem; color: var(--muted); }
.lede a { color: var(--ink); }

/* The flow, as four steps joined by arrows; stacked on narrow screens. */
.flow {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    counter-reset: step;
}

.flow li {
    position: relative;
    padding: .9rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--tool);
    border-radius: 10px;
    counter-increment: step;
}

.flow li::before {
    content: counter(step);
    display: block;
    margin-bottom: .35rem;
    font: 700 .75rem/1 var(--display);
    color: var(--tool);
}

.flow li + li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-.75rem + 1px);
    width: .75rem;
    border-top: 2px solid var(--line);
}

.flow b { display: block; font-family: var(--display); font-weight: 650; }
/* A step the flow can skip: drawn dashed, like a path not always taken. */
.flow li.optional { border-style: dashed; border-top-style: solid; background: transparent; }
.flow span { display: block; margin-top: .15rem; font-size: .875rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 48rem) {
    .flow { grid-template-columns: 1fr; gap: .5rem; }
    .flow li + li::after { top: calc(-.5rem + 1px); left: 1.5rem; width: 0; height: .5rem; border-top: 0; border-left: 2px solid var(--line); }
}

/* ------------------------------------------------------------ start here */

.start {
    margin: 3rem 0 0;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.start h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.start ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.start li::marker { font-family: var(--display); font-weight: 700; color: var(--muted); }

/* ---------------------------------------------------------------- groups */

.group { margin: 4rem 0 0; scroll-margin-top: 1rem; }

.group-head { display: grid; gap: .35rem; margin-bottom: 1.25rem; max-width: 46rem; }
.group-head h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 700; letter-spacing: -.02em; }
.group-head p { margin: 0; color: var(--muted); }
.group-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
/* The section's step in the flow strip above, so the two read together. */
.step-num {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    border: 2px solid var(--line);
    border-radius: 50%;
}
.optional-tag {
    padding: .1rem .55rem;
    font: 600 .75rem/1.4 var(--body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 999px;
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }

.card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--tool);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card p { margin: 0; }

.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

.card h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--tool); }
.card h3 a::after { content: " \2197"; font-size: .8em; color: var(--muted); }

/* The tool's role, in its own colour. */
.role {
    align-self: flex-start;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tool);
    background: color-mix(in srgb, var(--tool) 10%, var(--surface));
    border-radius: 999px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .role { color: color-mix(in srgb, var(--tool) 45%, white); background: color-mix(in srgb, var(--tool) 22%, var(--surface)); }
    :root:not([data-theme="light"]) .card h3 a:hover { color: color-mix(in srgb, var(--tool) 45%, white); }
}
:root[data-theme="dark"] .role { color: color-mix(in srgb, var(--tool) 45%, white); background: color-mix(in srgb, var(--tool) 22%, var(--surface)); }

/* A card that is one part of a larger, independent tool listed elsewhere too. */
.family { font-size: .8125rem; color: var(--muted); padding-left: .65rem; border-left: 2px solid var(--tool); }

.use { font-size: .9375rem; color: var(--muted); }
.use strong { color: var(--ink); font-weight: 650; }

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }

.specs { list-style: none; margin: auto 0 0; padding: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; border-top: 1px solid var(--line); }
.specs a {
    display: inline-block;
    padding: .1rem .55rem;
    font-size: .75rem;
    color: var(--muted);
    background: var(--chip);
    border-radius: 999px;
    text-decoration: none;
}
.specs a:hover { color: var(--ink); }

/* Up, down, or not checked yet. */
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.status-up .dot { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); }
.status-down { color: var(--down); }
.status-down .dot { background: var(--down); }
.status-soon { padding: .1rem .55rem; background: var(--chip); border-radius: 999px; }

/* Coming soon: present, but visibly not open yet. */
.soon .card { border-style: dashed; border-top-style: solid; box-shadow: none; background: transparent; }

/* ---------------------------------------------------------------- footer */

.footer { margin-top: 5rem; padding-block: 2rem 3rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.footer p { margin: 0; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .card { transition: box-shadow .15s ease, transform .15s ease; }
    .card:has(h3 a:hover) { transform: translateY(-2px); }
}