/* The AMNT look for the small sites. Colours, type, shape and spacing are
   AMNT's own tokens (tokens.css, copied from src/ui at deploy). Nothing here
   picks a colour of its own. */

@font-face { font-family: "Geist"; src: url("/kit/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/kit/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root { --font-brand: "Geist"; --font-brand-mono: "Geist Mono"; --wrap: 1180px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font);
    font-size: var(--md-sys-typescale-body-lg-size);
    line-height: var(--md-sys-typescale-body-lg-line-height);
}
a { color: var(--md-sys-color-primary); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }
h1, h2, h3 { margin: 0; }
h1 {
    font-size: var(--md-sys-typescale-display-sm-size);
    line-height: var(--md-sys-typescale-display-sm-line-height);
    font-weight: var(--md-sys-typescale-display-sm-weight);
    letter-spacing: var(--md-sys-typescale-display-sm-tracking);
}
h2 {
    font-size: var(--md-sys-typescale-headline-sm-size);
    line-height: var(--md-sys-typescale-headline-sm-line-height);
    font-weight: var(--md-sys-typescale-headline-sm-weight);
    letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
}
h3 {
    font-size: var(--md-sys-typescale-title-md-size);
    line-height: var(--md-sys-typescale-title-md-line-height);
    font-weight: var(--md-sys-typescale-title-md-weight);
}
p { margin: 0; }
.mono { font-family: var(--md-sys-typescale-font-mono); }
.small { font-size: var(--md-sys-typescale-body-sm-size); line-height: var(--md-sys-typescale-body-sm-line-height); }
.muted { color: var(--md-sys-color-on-surface-variant); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--md-sys-gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--md-sys-space-4); top: var(--md-sys-space-4); z-index: 10; background: var(--md-sys-color-surface); padding: var(--md-sys-space-2) var(--md-sys-space-4); }

/* ── Header + footer ── */
.top { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-space-4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--md-sys-space-2); min-height: var(--md-sys-size-touch); color: inherit; text-decoration: none; font-weight: 600; font-size: var(--md-sys-typescale-title-lg-size); letter-spacing: var(--md-sys-typescale-title-lg-tracking); }
.nav { display: flex; gap: var(--md-sys-space-1); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--md-sys-space-1); }
.nav a { display: inline-flex; align-items: center; min-height: var(--md-sys-size-touch); padding: 0 var(--md-sys-space-3); border-radius: var(--md-sys-shape-corner-small); color: var(--md-sys-color-on-surface-variant); text-decoration: none; white-space: nowrap; font-size: var(--md-sys-typescale-title-sm-size); font-weight: 500; }
.nav a:hover { background: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-hover-opacity)); color: var(--md-sys-color-on-surface); }
.foot { margin-top: var(--md-sys-space-20); border-top: 1px solid var(--md-sys-color-outline-variant); padding: var(--md-sys-space-8) 0 var(--md-sys-space-12); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-md-size); }
.foot .wrap { display: grid; gap: var(--md-sys-space-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-1) var(--md-sys-space-4); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--md-sys-size-touch); color: inherit; }

.account { display: flex; align-items: center; gap: var(--md-sys-space-3); min-width: 0; }
.account form { margin: 0; }
.who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-md-size); }
@media (max-width: 599px) { .who { display: none; } }

/* ── Sign-in ── */
.auth { max-width: 440px; padding: var(--md-sys-space-12) 0 var(--md-sys-space-8); display: grid; gap: var(--md-sys-space-5); }
.auth-form { display: grid; gap: var(--md-sys-space-3); }
.auth-form[hidden] { display: none; }
.auth-form label { font-size: var(--md-sys-typescale-title-sm-size); font-weight: 600; }
.auth-form .field { flex: none; width: 100%; }
.msg { color: var(--md-sys-color-error); font-size: var(--md-sys-typescale-body-md-size); min-height: 1.5em; }
.btn:disabled { opacity: var(--md-sys-state-disabled-content-opacity); cursor: progress; }

/* ── Buttons: 8px corners, never pills ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--md-sys-space-2); min-height: var(--md-sys-size-touch); padding: 0 var(--md-sys-space-5); border: 0; border-radius: var(--md-sys-shape-corner-small); font: inherit; font-size: var(--md-sys-typescale-label-lg-size); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); }
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-filled:hover { background: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%); }
.btn-tonal { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.btn-tonal:hover { background: var(--md-sys-color-surface-container-highest); }
.btn-outlined { background: transparent; color: var(--md-sys-color-on-surface); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.btn-outlined:hover { background: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-hover-opacity)); }

/* ── Forms ── */
.search { display: flex; gap: var(--md-sys-space-2); max-width: 640px; }
.field, .select { min-height: var(--md-sys-size-touch); padding: 0 var(--md-sys-space-4); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-lowest); color: inherit; font: inherit; font-size: var(--md-sys-typescale-body-lg-size); }
.field { flex: 1; min-width: 0; }
.field:focus, .select:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; }
.filters { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-2); align-items: center; margin-bottom: var(--md-sys-space-4); }

/* ── Sections ── */
.hero { padding: var(--md-sys-space-12) 0 var(--md-sys-space-8); display: grid; gap: var(--md-sys-space-5); }
.hero h1 { font-size: var(--md-sys-typescale-display-md-size); line-height: var(--md-sys-typescale-display-md-line-height); letter-spacing: var(--md-sys-typescale-display-md-tracking); max-width: 18ch; }
.lead { font-size: var(--md-sys-typescale-title-lg-size); line-height: var(--md-sys-typescale-title-lg-line-height); color: var(--md-sys-color-on-surface-variant); max-width: 60ch; }
.stats { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-2) var(--md-sys-space-6); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-md-size); }
.stats strong { color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }
.section { margin-top: var(--md-sys-space-12); display: grid; gap: var(--md-sys-space-4); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--md-sys-space-2) var(--md-sys-space-4); }
.section-head p { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-md-size); margin-top: var(--md-sys-space-1); }
.page-head { padding: var(--md-sys-space-8) 0 var(--md-sys-space-2); display: grid; gap: var(--md-sys-space-3); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-2); font-size: var(--md-sys-typescale-body-md-size); color: var(--md-sys-color-on-surface-variant); }
.crumbs a { color: inherit; }
.empty { padding: var(--md-sys-space-16) 0; display: grid; gap: var(--md-sys-space-4); justify-items: start; }
.band { margin-top: var(--md-sys-space-16); padding: var(--md-sys-space-8); border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); display: grid; gap: var(--md-sys-space-4); justify-items: start; }
.band p { color: var(--md-sys-color-on-surface-variant); max-width: 60ch; }

/* ── Chips (categories): 8px, never pills ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-2); }
@media (max-width: 599px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--md-sys-gutter)); padding: 0 var(--md-sys-gutter); } .chip { flex: none; } }
.chip { display: inline-flex; align-items: center; gap: var(--md-sys-space-2); min-height: 40px; padding: 0 var(--md-sys-space-3); border-radius: var(--md-sys-shape-corner-small); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); text-decoration: none; font-size: var(--md-sys-typescale-label-lg-size); font-weight: 500; }
.chip:hover { background: rgb(var(--md-sys-color-on-surface-rgb) / var(--md-sys-state-hover-opacity)); }
.chip[aria-current="page"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: none; }

/* ── Cards ── */
.grid { display: grid; gap: var(--md-sys-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.card { position: relative; display: grid; gap: var(--md-sys-space-2); align-content: start; padding: var(--md-sys-space-4); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.card:hover { background: var(--md-sys-color-surface-container); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .by { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-sm-size); overflow-wrap: anywhere; }
.card .desc { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-md-size); line-height: var(--md-sys-typescale-body-md-line-height); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: var(--md-sys-space-1) var(--md-sys-space-2); margin-top: var(--md-sys-space-1); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--md-sys-space-2); border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-md-size); font-weight: 500; }
.badge-price { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-family: var(--md-sys-typescale-font-mono); }
.badge-good { background: var(--md-sys-color-positive-container); color: var(--md-sys-color-on-positive-container); }
.badge-amnt { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ── Detail page ── */
.detail { display: grid; gap: var(--md-sys-space-8); margin-top: var(--md-sys-space-4); }
.detail-main { margin-top: 0; }
.gap-top { margin-top: var(--md-sys-space-8); }
/* The price panel comes first in the page (phone: on top), and moves right on wide screens. */
@media (min-width: 840px) {
    .detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .detail > .panel { grid-column: 2; grid-row: 1; position: sticky; top: var(--md-sys-space-6); }
    .detail > .detail-main { grid-column: 1; grid-row: 1; }
}
.panel { padding: var(--md-sys-space-5); border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); display: grid; gap: var(--md-sys-space-4); }
.price { font-family: var(--md-sys-typescale-font-mono); font-size: var(--md-sys-typescale-headline-md-size); line-height: var(--md-sys-typescale-headline-md-line-height); font-weight: 600; }
.actions { display: grid; gap: var(--md-sys-space-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--md-sys-space-2) var(--md-sys-space-4); margin: 0; font-size: var(--md-sys-typescale-body-md-size); }
.facts dt { color: var(--md-sys-color-on-surface-variant); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
pre.code { margin: 0; padding: var(--md-sys-space-4); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest); font-family: var(--md-sys-typescale-font-mono); font-size: var(--md-sys-typescale-body-sm-size); line-height: 1.6; overflow-x: auto; white-space: pre; }
.note { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-sm-size); }

.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--md-sys-space-4); margin-top: var(--md-sys-space-6); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }