/* Albor's site styles. Every colour, size, space and radius comes from tokens.css (DESIGN.md is normative):
   tinted rows and cards, GOV.UK-style fields, olive only for what you can do. */

html { scrollbar-color: var(--color-control) var(--color-ground); }
input, textarea, select, button { font: inherit; }
input, textarea { caret-color: var(--color-primary); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
img { max-width: 100%; }

.wrap { max-width: var(--width-page); margin: 0 auto; padding: 0 var(--space-5); }
main.wrap { padding-top: var(--space-6); padding-bottom: var(--space-7); }
main p, main li, main dd { max-width: var(--measure); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-7)); background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius); }
.skip:focus { top: var(--space-2); }

/* The header (DESIGN.md, Navigation): the logo, then on desktop the search box, icon-and-word links, «Publicar» and the
   theme menu, with the category strip under them. The links and the theme menu wrap together, so the menu never sits
   alone on a row. Phones keep the logo and the theme menu, and the tab bar takes the links. The staff pages share
   .shell, .shell-row and .wordmark. */
.shell { border-bottom: 1px solid var(--color-rule); }
.shell-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.wordmark { font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); text-decoration: none; padding: var(--space-3) 0; margin-right: auto; }
.logo-link { display: inline-flex; align-items: center; min-height: var(--touch-target); margin-right: auto; }
.site-logo { display: block; height: var(--height-logo); width: auto; color: var(--color-ink); }
.site-logo .logo-mark { fill: var(--color-brand); }
.shell-search { position: relative; flex: 1 1 0; min-width: calc(var(--touch-target) * 4); max-width: var(--width-form); }
.shell-search input { padding-right: var(--touch-target); border-color: var(--color-ink); }
.shell-search button { position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--touch-target); background: none; border: 0; border-radius: var(--radius); color: var(--color-primary); cursor: pointer; }
.shell-search button .icon { width: var(--space-5); height: var(--space-5); }
.shell-end, .shell-nav { display: flex; align-items: center; gap: var(--space-4); }
.shell-nav a:not(.button) { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.shell-nav a:not(.button):hover { text-decoration: underline; }
.shell-nav a[aria-current="page"]:not(.button) { font-weight: 600; }
.tab-icon { position: relative; display: inline-flex; }
.count { position: absolute; bottom: 50%; left: 50%; margin-left: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius); background: var(--color-ink); color: var(--color-ground); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); }
/* In the header the word sits beside the icon, not under it, so the count follows the word instead of sitting on the icon. */
.shell-nav .tab-icon { display: contents; }
.shell-nav .count { position: static; order: 1; margin: 0; }
/* From 641px to 815px the links' words don't fit beside the logo, so the links show their icons alone, the phone tab
   bar's, with the word as their tooltip and their accessible name; «Publicar» keeps its word. */
@media (min-width: 641px) and (max-width: 815px) {
  .shell-nav .nav-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shell-nav a:not(.button) { min-width: var(--touch-target); justify-content: center; }
  .shell-nav { gap: var(--space-2); }
}
/* Under 1100px the search box takes a row of its own under the logo and the links. */
@media (max-width: 1099px) {
  .shell-search { order: 1; flex-basis: 100%; max-width: none; }
}

/* The theme menu: the current theme's icon, opening onto Automático, Claro and Oscuro. */
.theme-menu { position: relative; }
.theme-menu summary { display: flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); border-radius: var(--radius); color: var(--color-ink); cursor: pointer; list-style: none; }
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-menu summary .icon { width: var(--space-5); height: var(--space-5); }
.theme-options { position: absolute; z-index: 20; top: 100%; right: 0; display: flex; flex-direction: column; padding: var(--space-1) 0; background: var(--color-surface); border: 1px solid var(--color-control); border-radius: var(--radius); }
.theme-options button { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); padding: 0 var(--space-5) 0 var(--space-4); background: none; border: 0; color: var(--color-ink); white-space: nowrap; text-align: left; cursor: pointer; }
.theme-options button:hover { background: var(--color-tint); }
.theme-options button[aria-pressed="true"] { color: var(--color-primary); font-weight: 600; }

/* The category strip: each category's drawing in the logo's orange over its name. Under the header on desktop; on
   phones it moves into the home page, under the search box, with the short names, and scrolls sideways if it must. */
.category-strip ul { list-style: none; margin: 0 auto; padding-top: var(--space-1); padding-bottom: var(--space-3); display: flex; gap: var(--space-6); }
.category-strip a { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.category-strip a:hover span:last-child { text-decoration: underline; }
.category-strip a[aria-current="page"] { font-weight: 600; }
.category-strip .drawing { flex: none; width: calc(var(--height-drawing) * 3.5); height: var(--height-drawing); }
.category-strip.in-page { display: none; }
/* Five categories: the drawings narrow under 1100px and again under 900px, so the strip keeps to one line. */
@media (max-width: 1099px) {
  .category-strip .drawing { width: calc(var(--height-drawing) * 2.5); }
}
@media (max-width: 899px) {
  .category-strip ul { gap: var(--space-4); }
  .category-strip .drawing { width: calc(var(--height-drawing) * 2); }
}

.site-footer { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); padding-bottom: var(--space-6); font-size: var(--text-sm); color: var(--color-muted); }
.site-footer p { max-width: var(--measure); margin: 0 0 var(--space-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer .footer-links { max-width: none; } /* links, not prose: one row wherever they fit */
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: 700; margin: 0 0 var(--space-4); text-wrap: balance; }
h2 { font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: 600; margin: 0 0 var(--space-3); text-wrap: balance; }
h3 { font-size: var(--text-base); line-height: var(--leading-tight); font-weight: 600; margin: 0; }
p { margin: 0 0 var(--space-3); }
.facts { font-size: var(--text-sm); color: var(--color-muted); }
.facts .data { color: var(--color-ink); }
.hint { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }
.section { margin-top: var(--space-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.section-head > h1, .section-head > h2 { margin: 0; }
ul.plain { margin: 0; padding-left: var(--space-5); }

/* Actions. One primary button per form; secondary actions read as underlined olive text. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: var(--space-2) var(--space-5); background: var(--color-primary); color: var(--color-on-primary); border: 0; border-radius: var(--radius); font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--color-primary-hover); }
.button.secondary, .link-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0; background: none; border: 0; color: var(--color-primary); font-weight: 400; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer; text-align: left; }
.button.secondary { padding: 0 var(--space-3); }
.button.secondary:hover, .link-button:hover { background: none; text-decoration-thickness: 2px; }
.link-button.danger { color: var(--color-danger); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); }
.actions form { margin: 0; }
.back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); margin-bottom: var(--space-2); }

/* Fields: label above, hint under it, error above the control. */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-5); min-width: 0; border: 0; padding: 0; }
.field label, .field legend { font-weight: 600; }
legend { padding: 0; margin-bottom: var(--space-2); }
.error { font-size: var(--text-sm); font-weight: 600; color: var(--color-danger); margin: 0; }
input:not([type="radio"], [type="checkbox"], [type="file"]), select, textarea { color: var(--color-ink); background: var(--color-surface); border: 2px solid var(--color-control); border-radius: var(--radius); padding: var(--space-2) var(--space-3); min-height: var(--touch-target); width: 100%; min-width: 0; }
textarea { resize: vertical; line-height: var(--leading-body); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-ink); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--color-danger); }
input[type="file"] { min-height: var(--touch-target); padding: var(--space-2) 0; }
.radios { display: flex; flex-direction: column; gap: var(--space-1); }
.radio, .checkbox { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); font-weight: 400; cursor: pointer; }
.radio input, .checkbox input { width: var(--space-5); height: var(--space-5); margin: 0; flex: none; accent-color: var(--color-primary); }
.field label.radio, .field label.checkbox { font-weight: 400; } /* the answer reads as text; the question is the legend */
.stack { max-width: var(--width-form); }
.stack + p { margin-top: var(--space-4); }
.with-suffix { display: flex; align-items: center; gap: var(--space-2); }
.with-suffix input { max-width: 14ch; }
.search-line { display: flex; gap: var(--space-2); align-items: stretch; }
.search-line input { flex: 1; }
.error-summary { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.error-summary h2 { color: var(--color-danger); }
.error-summary ul { margin: 0; padding-left: var(--space-5); }
.error-summary a { color: var(--color-danger); }

.banner { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); max-width: var(--width-banner); }
.banner.error { color: var(--color-danger); font-weight: 600; }
.banner.wide { max-width: none; }
.banner p { margin: 0; }
.banner a { font-weight: 600; }
.empty { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); color: var(--color-muted); max-width: var(--measure); }
.empty a, .empty .link-button { font-weight: 600; }
.empty form { margin: 0 0 var(--space-2); }

/* «Revisado» in the model picker: the drawn tick in the ok colour, with its word for screen readers and as its title. */
.marker { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; color: var(--color-ok); }
.state { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; }

/* Search. The box in the page is for phones; on desktop the header carries it. */
.search-box { margin-bottom: var(--space-4); max-width: var(--width-banner); }
.search-box label { display: block; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.search-box input { border-color: var(--color-ink); }
@media (min-width: 641px) {
  .search-box { display: none; }
  .category-strip.in-page + .section { margin-top: 0; }
}
.recent { list-style: none; padding: 0; margin: 0; }
.recent li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-height: var(--touch-target); }
.fresh { font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; }
.filter-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-bottom: var(--space-3); }
.filter-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); }
.filter-links a[aria-current="page"] { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.saved-note { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); }

.results-layout { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.filters summary { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font-weight: 600; }
.filter-form { margin-top: var(--space-3); }
.filter-form .field { margin-bottom: var(--space-4); }
.price-range { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); }
.price-range label { font-weight: 400; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-5); min-height: var(--touch-target); }

@media (min-width: 900px) {
  .results-layout { grid-template-columns: var(--width-filters) minmax(0, 1fr); gap: var(--space-6); }
  .filters::details-content { content-visibility: visible; display: contents; }
  .filters > summary { display: none; }
  .filter-form { margin-top: 0; }
}

/* Result rows: photo left, facts in the middle, status and price on the right. The whole row opens the listing. A
   grid of them becomes cards on desktop, further down. */
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
.rows + p { margin-top: var(--space-4); }
.row { position: relative; display: grid; grid-template-columns: var(--thumb-row) minmax(0, 1fr) auto; gap: var(--space-1) var(--space-5); align-items: start; background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.row:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
.row h3 a { color: var(--color-ink); text-decoration: none; }
.row h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.row h3 a:focus-visible { outline: none; }
.row:hover h3 a { text-decoration: underline; text-underline-offset: 0.18em; }
.row-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.row-main p { margin: 0; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; }
.row-side form { position: relative; z-index: 1; margin: 0; }
.price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.thumb { display: block; width: var(--thumb-row); aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius); background: var(--color-ground); }
.thumb.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); }
.thumb.empty { padding: var(--space-2) var(--space-2) var(--space-1); }
.thumb.empty .drawing { width: 100%; }
.saved { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.saved-row { grid-template-columns: minmax(0, 1fr) auto; }

/* Cards: the home page's and the search's results on desktop (DESIGN.md, Layout). Photo on top, the price first, then
   the title, the facts and, for an import, when it was last posted. Phones keep rows. */
@media (min-width: 641px) {
  .rows.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--width-card), 1fr)); gap: var(--space-4); }
  .rows.grid .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "thumb" "side" "main"; align-content: start; gap: var(--space-1); padding: 0 0 var(--space-4); }
  .rows.grid .thumb { grid-area: thumb; width: 100%; margin-bottom: var(--space-2); border-radius: var(--radius) var(--radius) 0 0; }
  .rows.grid .thumb.empty { background: none; }
  .rows.grid .row-side { grid-area: side; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 0 var(--space-4); text-align: left; }
  .rows.grid .row-main { grid-area: main; padding: 0 var(--space-4); }
  .rows.grid .when:not(.copied) { display: none; } /* a card dates only an import */
  .rows.grid .price { font-size: var(--text-lg); }
  .rows.grid h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* The listing page: photos, then what it is and how to ask, then the description. On desktop the description sits
   under the photos and the facts column runs beside both. */
.listing { display: grid; gap: var(--space-5); grid-template-areas: "photos" "info" "more"; }
.listing-photos { grid-area: photos; min-width: 0; }
.listing-info { grid-area: info; min-width: 0; }
.listing-more { grid-area: more; min-width: 0; }
.price-history-title { margin: var(--space-4) 0 var(--space-2); }
.price-history { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.photo-main { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-tint); border-radius: var(--radius); }
.photo-main.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-muted); }
.photo-main.empty .drawing { width: 60%; flex: 0 1 40%; }
/* A missing photo shows a drawing of the item's type (src/config.ts TYPES), in muted ink so it never passes for a photo. */
.drawing { display: block; width: 100%; flex: 1 1 auto; min-height: 0; background: var(--color-muted); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.drawing.t-rifle { -webkit-mask-image: url(/static/types/rifle.svg); mask-image: url(/static/types/rifle.svg); }
.drawing.t-escopeta { -webkit-mask-image: url(/static/types/escopeta.svg); mask-image: url(/static/types/escopeta.svg); }
.drawing.t-carabina { -webkit-mask-image: url(/static/types/carabina.svg); mask-image: url(/static/types/carabina.svg); }
.drawing.t-pistola { -webkit-mask-image: url(/static/types/pistola.svg); mask-image: url(/static/types/pistola.svg); }
.drawing.t-revolver { -webkit-mask-image: url(/static/types/revolver.svg); mask-image: url(/static/types/revolver.svg); }
.drawing.t-carabina_aire { -webkit-mask-image: url(/static/types/carabina_aire.svg); mask-image: url(/static/types/carabina_aire.svg); }
.drawing.t-pistola_aire { -webkit-mask-image: url(/static/types/pistola_aire.svg); mask-image: url(/static/types/pistola_aire.svg); }
.drawing.t-visor { -webkit-mask-image: url(/static/types/visor.svg); mask-image: url(/static/types/visor.svg); }
.drawing.t-punto_rojo { -webkit-mask-image: url(/static/types/punto_rojo.svg); mask-image: url(/static/types/punto_rojo.svg); }
.drawing.t-prismaticos { -webkit-mask-image: url(/static/types/prismaticos.svg); mask-image: url(/static/types/prismaticos.svg); }
.drawing.t-telemetro { -webkit-mask-image: url(/static/types/telemetro.svg); mask-image: url(/static/types/telemetro.svg); }
.drawing.t-termico { -webkit-mask-image: url(/static/types/termico.svg); mask-image: url(/static/types/termico.svg); }
.drawing.t-nocturno { -webkit-mask-image: url(/static/types/nocturno.svg); mask-image: url(/static/types/nocturno.svg); }
.drawing.t-telescopio { -webkit-mask-image: url(/static/types/telescopio.svg); mask-image: url(/static/types/telescopio.svg); }
.drawing.t-pieza { -webkit-mask-image: url(/static/types/pieza.svg); mask-image: url(/static/types/pieza.svg); }
.drawing.t-cargador { -webkit-mask-image: url(/static/types/cargador.svg); mask-image: url(/static/types/cargador.svg); }
.drawing.t-funda { -webkit-mask-image: url(/static/types/funda.svg); mask-image: url(/static/types/funda.svg); }
.drawing.t-culata { -webkit-mask-image: url(/static/types/culata.svg); mask-image: url(/static/types/culata.svg); }
.drawing.t-montura { -webkit-mask-image: url(/static/types/montura.svg); mask-image: url(/static/types/montura.svg); }
.drawing.t-bipode { -webkit-mask-image: url(/static/types/bipode.svg); mask-image: url(/static/types/bipode.svg); }
.drawing.t-armero { -webkit-mask-image: url(/static/types/armero.svg); mask-image: url(/static/types/armero.svg); }
.drawing.t-accesorio { -webkit-mask-image: url(/static/types/accesorio.svg); mask-image: url(/static/types/accesorio.svg); }
.drawing.t-chaqueta { -webkit-mask-image: url(/static/types/chaqueta.svg); mask-image: url(/static/types/chaqueta.svg); }
.drawing.t-pantalon { -webkit-mask-image: url(/static/types/pantalon.svg); mask-image: url(/static/types/pantalon.svg); }
.drawing.t-calzado { -webkit-mask-image: url(/static/types/calzado.svg); mask-image: url(/static/types/calzado.svg); }
.drawing.t-prenda { -webkit-mask-image: url(/static/types/prenda.svg); mask-image: url(/static/types/prenda.svg); }
/* The category strip's drawings take the logo's orange: decoration that is never an action. */
.drawing.brand { background: var(--color-brand); }
.photo-strip { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.photo-strip a { display: block; border-radius: var(--radius); }
.photo-strip img { display: block; width: var(--thumb-row-phone); aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius); }
.photo-strip a[aria-current="true"] { outline: var(--focus-ring); outline-offset: 2px; }
.listing-price { display: flex; align-items: center; }
.listing-price .data { font-size: var(--text-xl); font-weight: 400; }
.listing-when { display: flex; align-items: center; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }
.report-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.identity { margin-top: var(--space-5); }
.contact, .owner-actions { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.contact .hint { margin-bottom: var(--space-3); }
.contact form, .contact .button { margin-bottom: var(--space-3); }
.favorite { margin-top: var(--space-3); }
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery li { max-width: none; margin-bottom: var(--space-5); }
.gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--color-tint); }

@media (min-width: 900px) {
  .listing { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "photos info" "more info"; gap: var(--space-5) var(--space-6); align-items: start; }
}

/* Summary lists: key, value, change link. Separated by space, never by boxes. */
.summary { margin: 0 0 var(--space-4); }
.summary-row { display: grid; grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; }
.summary dt { font-weight: 600; }
.summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.summary-action { text-align: right; }
.summary.compact .summary-row { padding: var(--space-1) 0; }
.summary.inline .summary-row { grid-template-columns: minmax(7rem, 35%) minmax(0, 1fr); padding: var(--space-1) 0; }
.summary.inline .summary-action { display: none; }
.review-title { margin-top: var(--space-2); }

/* Notices and sessions. */
.notices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.notice-row { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); max-width: var(--width-banner); }
.notice-row p { margin: 0 0 var(--space-1); }

/* The publishing flow: one question per page, each answer a button. */
.step-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.step-bar .back { margin-bottom: 0; }
.step-count { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.options { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--width-form); margin: 0 0 var(--space-4); }
.option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: var(--option-height); padding: var(--space-3) var(--space-5); background: var(--color-tint); color: var(--color-ink); border: 0; border-radius: var(--radius); text-align: left; cursor: pointer; }
.option:hover .option-label { text-decoration: underline; text-underline-offset: 0.18em; }
.option[aria-pressed="true"] { outline: var(--outline-selected) solid var(--color-primary); outline-offset: calc(-1 * var(--outline-selected)); }
.option-label { font-weight: 600; }
.option-label.data { font-weight: 400; }
.option-hint { display: block; font-size: var(--text-sm); color: var(--color-muted); }
/* A type's drawing, muted, on the right of its answer: the answer stays the words. */
.option .drawing { flex: none; width: calc(var(--height-drawing) * 7 / 3); height: calc(var(--height-drawing) * 2 / 3); }
.options form > .option, .options > .option { flex-direction: row; }
.option:has(.option-hint) { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); }
.options-title { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.picker-search { max-width: var(--width-form); }
.picker-search .field { margin-bottom: var(--space-3); }
.hatch { font-size: var(--text-sm); margin-top: var(--space-3); }
.photo-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--width-tile), 1fr)); gap: var(--space-4); }
.photo-grid li { max-width: none; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius); }
.photo-grid p { margin: var(--space-1) 0 0; }
.photo-grid .actions { margin-top: 0; gap: 0 var(--space-4); }
.upload { margin-top: var(--space-4); }
.next { margin-top: var(--space-6); }

/* Guides: the owner's articles, at reading width. */
.guide-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.guide-list h2 { margin-bottom: var(--space-1); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin: var(--space-5) 0 var(--space-2); }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.prose li { margin-bottom: var(--space-1); }
.prose blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-4); border-left: 1px solid var(--color-rule); color: var(--color-muted); }
.prose table { border-collapse: collapse; margin: 0 0 var(--space-4); }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }

/* Staff review. */
.queue { display: flex; flex-direction: column; gap: var(--space-4); }
.queue-item { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.queue-item h2 a { color: var(--color-ink); }
.report { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: var(--space-3) 0; margin: var(--space-3) 0; }
.report p { margin: 0 0 var(--space-1); }
.candidates { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); }
.candidates form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); }
.resolve-new label { display: block; font-weight: 600; margin: var(--space-3) 0 var(--space-1); }
.decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--width-filters), 1fr)); gap: var(--space-4) var(--space-6); margin-top: var(--space-4); }
.decisions label { font-weight: 600; display: block; margin-bottom: var(--space-1); }
.decisions .button, .decisions .link-button { margin-top: var(--space-2); }

@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-4); }
  main.wrap { padding-top: var(--space-5); }
  .shell-row { gap: 0 var(--space-4); }
  /* The header's search, links and category strip give way to the tab bar and the home page's own. */
  .shell-search, .shell-nav, .shell .category-strip { display: none; }
  .category-strip.in-page { display: block; margin: 0 calc(-1 * var(--space-4)) var(--space-5); }
  .category-strip.in-page ul { overflow-x: auto; padding: 0 var(--space-4) var(--space-2); gap: var(--space-4); }
  .category-strip.in-page li { flex: none; }
  .category-strip.in-page .drawing { width: calc(var(--height-drawing) * 2); }
  .row { grid-template-columns: var(--thumb-row-phone) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
  .thumb { width: var(--thumb-row-phone); }
  .row-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; text-align: left; }
  .saved-row { grid-template-columns: minmax(0, 1fr); }
  .saved-row .row-side { grid-column: 1; }
  .search-line .button { padding: var(--space-2) var(--space-4); }
  .summary-row { grid-template-columns: minmax(0, 1fr) auto; }
  .summary-row dd:not(.summary-action) { grid-column: 1 / -1; grid-row: 2; }
  .summary-action { grid-row: 1; grid-column: 2; }
  .summary.inline .summary-row dd:not(.summary-action) { grid-column: 2; grid-row: 1; }
  .option { padding: var(--space-3) var(--space-4); }
  .notice-row, .contact, .owner-actions, .queue-item, .empty, .error-summary { padding: var(--space-3) var(--space-4); }
}

/* Phones: the tab bar at the bottom, icon and word, as in the app people know (DESIGN.md, Navigation). A page with one
   main action of its own, the listing's contact, puts it there instead, with the price. */
.tabbar, .bottom-bar { display: none; }
@media (max-width: 640px) {
  .tabbar { position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--color-surface); border-top: 1px solid var(--color-rule); padding: var(--space-1) 0 calc(var(--space-1) + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--option-height); color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
  .tabbar .icon { width: var(--space-5); height: var(--space-5); }
  body.has-tabbar { padding-bottom: calc(var(--option-height) + var(--space-2) + env(safe-area-inset-bottom)); }
  .bottom-bar { position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); border-top: 1px solid var(--color-rule); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .bottom-bar > .data { font-size: var(--text-lg); white-space: nowrap; }
  .bottom-bar form { margin: 0; }
  body.has-bar { padding-bottom: calc(var(--touch-target) + var(--space-4) + env(safe-area-inset-bottom)); }
}

/* When a listing went up: the clock and the date, and the paper plane on an import copied from Telegram. */
.when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; }
.when .origin { display: inline-flex; margin-left: var(--space-1); }
/* With a mouse the plane rises over the row's link, so its title shows; a tap on it still opens the listing. */
@media (hover: hover) {
  .when .origin { position: relative; z-index: 1; }
}

/* A fact behind an icon (DESIGN.md, Fact tips): a tap, a click or Enter opens one sentence, without JavaScript, and on a
   wide screen hovering the icon shows it too. menus.js closes it on Escape or a tap elsewhere, and hides one shown by
   hovering on Escape or a click that closes it. The tap area reaches past the icon. From 900px the box floats under the
   icon and opens to the right, or to the left in the listing's facts column, which sits at the right edge. Under 900px
   it is a bar along the bottom of the screen, above the bottom bar on phones, where no edge cuts it off and a thumb
   doesn't cover it. */
.tip { position: relative; display: inline-block; vertical-align: middle; margin-left: var(--space-1); }
.tip summary { display: inline-flex; padding: var(--space-3) var(--space-2); margin: calc(-1 * var(--space-3)) 0; border-radius: var(--radius); color: var(--color-muted); cursor: pointer; list-style: none; }
.tip summary::-webkit-details-marker { display: none; }
.tip.ai summary { color: var(--color-warn); }
.field-head .tip summary { color: var(--color-ok); } /* the picker's «Revisado», in the tick's own colour */
.tip summary:hover, .tip[open] summary { color: var(--color-ink); }
.tip-text { position: absolute; z-index: 20; top: 100%; left: 0; width: max-content; max-width: var(--width-tip); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-control); border-radius: var(--radius); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-body); text-align: left; white-space: normal; }
.tip-text p { margin: 0 0 var(--space-1); }
.tip-text p:last-child { margin: 0; }
@media (min-width: 900px) {
  .listing-info .tip-text { left: auto; right: 0; }
}
@media (min-width: 900px) and (hover: hover) {
  .tip:not([open]):not(.hushed):hover::details-content { content-visibility: visible; }
}
@media (max-width: 899px) {
  .tip { position: static; }
  .tip-text { position: fixed; inset: auto var(--space-4) var(--space-4); width: auto; max-width: none; }
}
@media (max-width: 640px) {
  body.has-tabbar .tip-text { bottom: calc(var(--option-height) + var(--space-4) + env(safe-area-inset-bottom)); }
  body.has-bar .tip-text { bottom: calc(var(--touch-target) + var(--space-6) + env(safe-area-inset-bottom)); }
}
.ai-summary { max-width: var(--measure); margin: 0 0 var(--space-3); }
.field-head { display: flex; align-items: center; } /* a label with a tip after it */

/* Filter links with a short form on phones («Fuego» for «Armas de fuego»); the link's accessible name keeps the long one. */
.label-short { display: none; }
@media (max-width: 640px) {
  .label-wide { display: none; }
  .label-short { display: inline; }
}

/* A photo the classifier flagged, large enough to judge in the review queue. */
.flagged-photo { display: block; width: 100%; max-width: var(--width-form); height: auto; border-radius: var(--radius); background: var(--color-ground); margin: var(--space-2) 0; }

/* Numbered steps in a help page, and the dictation form above the details. */
.steps { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.steps li { margin-bottom: var(--space-2); }
.dictation { margin-bottom: var(--space-6); }