/* ------------------------------------------------------------------
   lookwhatihave.com

   The same look as the tablet app, and the same floors. The palette and
   the sizes are lifted from archive_tablet/lib/theme.dart rather than
   eyeballed, so the site and the app cannot drift apart:

     background  #1C1C1E      onSurface       #F5F5F7
     surface     #2C2C2E      onSurfaceMuted  #B8B8BE
     record      #D9483B      accent          #6BA6D9
     gift        #4A9E7F

   TEXT SIZE. The app's floor is 24pt because it is held at arm's length
   by a 92-year-old. A phone browser is read closer, so the body scales
   from 20px on a small screen to 24px on a desktop rather than sitting
   at 24 everywhere, which would wrap every other line on a phone. The
   floor is never crossed downwards on the screens that matter.

   TOUCH TARGETS. 60px minimum, as in the app. Anything tappable gets
   it, including links in prose that sit on their own line.

   No framework, no build step, one stylesheet. The admin console is
   built the same way and for the same reason: there is nothing here to
   rebuild when something else changes.
   ------------------------------------------------------------------ */

:root {
  --bg: #1C1C1E;
  --surface: #2C2C2E;
  --surface-raised: #3A3A3C;
  --text: #F5F5F7;
  --muted: #B8B8BE;
  --record: #D9483B;
  --accent: #6BA6D9;
  --gift: #4A9E7F;
  --radius: 16px;
  --gutter: 20px;
  --touch: 60px;
}

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

html {
  /* 20px on a phone, 24px from about 900px up. */
  font-size: clamp(20px, 0.6vw + 17.6px, 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* No horizontal scroll at any width. The console had this bug and it
     reads as broken, because the header slides away with the content. */
  overflow-wrap: break-word;
}

/* ---------- skip link, for a keyboard or a screen reader ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #10243A;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.bar {
  background: var(--surface);
  border-bottom: 1px solid #000;
  position: sticky;
  top: 0;
  z-index: 5;
}
.bar-inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  /* min-width:0 so a long word in a link cannot widen the page. */
  min-width: 0;
}
.brand {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
}
.brand img { width: 34px; height: 34px; display: block; }
nav.top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
nav.top a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 2px;
}
nav.top a:hover, nav.top a:focus { text-decoration: underline; }
nav.top a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---------- layout ---------- */
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px var(--gutter) 72px;
}
main.wide { max-width: 62rem; }

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 8px;
}
h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 40px 0 12px;
}
h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 28px 0 8px;
}
p, li { font-size: 1rem; }
p { margin: 0 0 18px; }
ul, ol { padding-left: 1.3em; margin: 0 0 18px; }
li { margin: 0 0 12px; }

.lead {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 28px;
}
.muted { color: var(--muted); }
.small { font-size: 0.8rem; line-height: 1.5; }

a { color: var(--accent); }
a:hover, a:focus { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--surface-raised);
  margin: 40px 0;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0 0 20px;
}
.card h2, .card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
/* A grid item's min-width is auto, so its widest unbreakable child sets
   the track width - and a <pre> holding a long command is exactly that.
   Measured on Get the app at 390px: 175px of sideways scroll, which
   reads as broken because the header and every other card slide away
   with it. The same fault the admin console had, for the same reason.
   With min-width:0 the pre scrolls itself and nothing else moves. */
.cards > * { min-width: 0; }
.card { min-width: 0; }
@media (min-width: 46rem) {
  .cards.two { grid-template-columns: 1fr 1fr; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface-raised);
  color: var(--text);
  border: 0;
  cursor: pointer;
}
.btn:hover, .btn:focus { text-decoration: none; filter: brightness(1.15); }
.btn-primary { background: var(--record); color: #fff; }
.btn-accent { background: var(--accent); color: #10243A; }
.btn-block { display: flex; width: 100%; }
.btn + .btn { margin-top: 12px; }
@media (min-width: 34rem) {
  .btn + .btn { margin-top: 0; margin-left: 12px; }
  .btn-block + .btn-block { margin-left: 0; margin-top: 12px; }
}

/* ---------- steps ---------- */
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 56px;
  margin-bottom: 28px;
  min-height: 40px;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--accent);
  color: #10243A;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- notes ---------- */
.note {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px;
  margin: 0 0 24px;
}
.note.warn { border-left-color: var(--record); }
.note.good { border-left-color: var(--gift); }
.note > :last-child { margin-bottom: 0; }
.note strong { display: block; margin-bottom: 4px; }

/* ---------- status pills: shape and word, never colour alone ------- */
.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid var(--muted);
  color: var(--muted);
  white-space: nowrap;
}
.pill-now { border-color: var(--gift); color: var(--gift); }
.pill-soon { border-style: dashed; }

/* ---------- images and screenshots ---------- */
figure { margin: 0 0 28px; }
figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
}
figcaption {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ---------- code, checksums ---------- */
code, pre, .mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
code { font-size: 0.85em; background: var(--surface); padding: 2px 6px; border-radius: 6px; }
pre {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0 0 24px;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* A checksum has to be readable one character at a time, and copyable
   in one gesture. It wraps rather than scrolling, because a hash that
   runs off the edge on a phone cannot be checked at all. */
.checksum {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.75rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 0 0 24px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--surface-raised); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

/* ---------- QR ---------- */
.qr {
  background: #fff;
  padding: 16px;
  border-radius: var(--radius);
  width: 232px;
  max-width: 100%;
}
.qr img, .qr svg { width: 100%; height: auto; display: block; }

/* ---------- footer ---------- */
footer {
  background: var(--surface);
  border-top: 1px solid #000;
  padding: 32px var(--gutter) 48px;
}
.foot-inner { max-width: 62rem; margin: 0 auto; }
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-bottom: 20px;
}
footer nav a {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}
footer p { font-size: 0.78rem; color: var(--muted); margin: 0 0 8px; }

/* ---------- print ---------- */
@media print {
  .bar, footer nav, .skip { display: none; }
  body { background: #fff; color: #000; }
  .card, .note, pre, .checksum { background: #f2f2f2; }
  a { color: #000; }
}