/* rosa camina looks like what it is: a price list, the kind the Liga de Amas
   de Casa passed from hand to hand. Paper and ink, one red for what matters,
   rows with a hairline between them, and nothing decorative. See
   rose-walks/website/docs/identity.md before changing the look.

   Mobile first: every rule here targets the phone. Wider screens are the
   exception at the bottom of the file. */

:root {
  --paper: #faf8f3;         /* the sheet */
  --surface: #ffffff;       /* the search box and the dialog chrome */
  --ink: #1c1a17;
  --muted: #6e6759;
  --line: #ddd7c9;          /* hairline between rows */
  --red: #b42318;           /* one accent: the price, the mark, the link */
  --red-soft: #f4ddd7;
  --radius: 3px;            /* squared, like printed matter */
  --tap: 44px;              /* minimum comfortable tap target */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171614;
    --surface: #211f1b;
    --ink: #ece6d8;
    --muted: #a39c8c;
    --line: #37332c;
    --red: #e8604c;
    --red-soft: #3c231e;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  overflow-wrap: break-word;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}

.topbar h1 {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.topbar h1 a { color: inherit; text-decoration: none; }
.topbar h1 .country { color: var(--muted); font-weight: 500; letter-spacing: 0; }
.topbar h1:last-child { margin-bottom: 0; }   /* the home page has no search box */

/* the home page: what the name means, in one line */
.topbar .motto {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}

.searchbox { position: relative; }

.searchbox .icon {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

#q {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem 2.6rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;            /* 16px or iOS Safari zooms in on focus */
  appearance: none;
}

#q:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

#q::-webkit-search-cancel-button { display: none; }

#clear {
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- scan a barcode ---------- */
/* Hidden until the script finds a camera and a barcode reader to use. */

.scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: var(--tap);
  margin-top: .6rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.scan[hidden] { display: none; }

.scan .icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.scanner {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  background: #000;
  color: #fff;
  text-align: center;
}

.scanner[open] { display: flex; flex-direction: column; gap: 1rem; }

.scanner video {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.scanner p { margin: 0; }

.scanner button {
  min-height: var(--tap);
  border: 1px solid #fff;
  border-radius: var(--radius);
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- results: the list ---------- */

main {
  padding: 0 1rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}

.status { margin: .75rem 0 .25rem; min-height: 1.3em; color: var(--muted); font-size: .9rem; }

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

/* One row per listing: the name and the price on the first line, the
   store, the size and the price per kilo under them. A hairline between
   rows, no boxes. */
.card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}

.card .name { font-weight: 600; }

/* the words that matched what was typed: underlined in red, like a pen */
.card .name mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
}

.card .row {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .82rem;
}

.tag { white-space: nowrap; }

.tag.store { color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* the world page: which country a price is from */
.tag.place { color: var(--red); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

.card .price {
  align-self: start;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card .unit {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---------- home: one line per country ---------- */

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

.country-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--tap);
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.country-link:hover, .country-link:focus-visible { color: var(--red); }

.country-link .flag { font-size: 1.4rem; line-height: 1; }
.country-link .hint { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 400; }

/* home: re-download the site past the browser cache */
.refresh {
  min-height: var(--tap);
  padding: 0 .75rem;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.refresh:disabled { color: var(--muted); text-decoration: none; cursor: default; }

footer {
  margin-top: 1.5rem;
  padding: 0 1rem;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

footer a { color: inherit; }

/* ---------- wider screens ---------- */

@media (min-width: 640px) {
  .topbar { padding: 1rem 1.5rem; }
  .topbar h1 { font-size: 1.6rem; }
  .topbar > *, main, footer { max-width: 44rem; margin-inline: auto; }
  main { padding: 0 1.5rem; }
}