/* tozneberto web — palette mirrors the mobile app (app/src/theme/colors.ts).
   Light is the default; dark applies via prefers-color-scheme, and an explicit
   [data-theme] set by app.js wins over the system preference. */

:root {
  --bg:        #faf7f2;
  --card:      #f0ece4;
  --input:     #e8e3d8;
  --subtle:    #ddd8ce;
  --elevated:  #f5f1ea;
  --border:    #ddd8ce;
  --text:      #1a1818;
  --text-sec:  #666666;
  --text-muted:#999999;
  --text-faint:#bbbbbb;
  --accent:    #7b7bff;
  --accent-dim:#e0e0ff;
  --danger:    #c04040;
  --danger-bg: #fde8e8;
  --shadow:    0 1px 3px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0d1a;
    --card:      #1a1a2e;
    --input:     #1e1e30;
    --subtle:    #252540;
    --elevated:  #161628;
    --border:    #252540;
    --text:      #ffffff;
    --text-sec:  #888888;
    --text-muted:#555555;
    --text-faint:#333333;
    --accent:    #7b7bff;
    --accent-dim:#3a3a6a;
    --danger:    #e06060;
    --danger-bg: #402020;
    --shadow:    0 1px 3px rgba(0,0,0,0.4), 0 6px 24px rgba(0,0,0,0.3);
  }
}

/* Explicit override from the theme toggle. */
:root[data-theme="light"] {
  --bg:#faf7f2; --card:#f0ece4; --input:#e8e3d8; --subtle:#ddd8ce; --elevated:#f5f1ea;
  --border:#ddd8ce; --text:#1a1818; --text-sec:#666; --text-muted:#999; --text-faint:#bbb;
  --accent:#7b7bff; --accent-dim:#e0e0ff; --danger:#c04040; --danger-bg:#fde8e8;
  --shadow:0 1px 3px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.05);
}
:root[data-theme="dark"] {
  --bg:#0d0d1a; --card:#1a1a2e; --input:#1e1e30; --subtle:#252540; --elevated:#161628;
  --border:#252540; --text:#fff; --text-sec:#888; --text-muted:#555; --text-faint:#333;
  --accent:#7b7bff; --accent-dim:#3a3a6a; --danger:#e06060; --danger-bg:#402020;
  --shadow:0 1px 3px rgba(0,0,0,0.4), 0 6px 24px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
/* App-like header: logo centred, controls pinned to the corners with a caption
   under each — the same shape as the About screen in the mobile app. */
.apphead {
  max-width: 720px; margin: 0 auto;
  padding: 22px 16px 4px;
}
.apphead-row { position: relative; display: flex; justify-content: center; }
.apphead-logo { margin: 0; padding: 0; font-size: 0; line-height: 0; }

.ctl { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2px; }
.ctl-left  { left: 0;  align-items: flex-start; }
.ctl-right { right: 0; align-items: flex-end; }
.ctl-hint  { font-size: 10px; line-height: 12px; color: var(--text-muted); }

.icon-btn {
  height: 24px; padding: 0; border: 0; background: none;
  color: var(--text); cursor: pointer; display: flex; align-items: center;
}
.ico { width: 24px; height: 24px; }

/* The language picker keeps only the active flag visible until it is opened. */
.lang-switch { height: 24px; display: flex; align-items: center; gap: 6px; }
.lang-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center;
}
.lang-btn:not(.active) { display: none; order: 1; }   /* alternatives open to the LEFT */
.lang-btn.active { order: 2; }
.lang-switch.open .lang-btn { display: flex; }
/* The source PNGs are 512×512 with transparent padding; `cover` crops them
   the way React Native's default resizeMode does in the app, instead of
   squashing the artwork into the 3:2 box. */
.flag { width: 30px; height: 20px; border-radius: 2px; display: block; object-fit: cover; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 20px;
}

/* Leaves room for the corner controls on narrow screens. */
.hero-logo { width: min(62%, 300px); height: auto; margin: 0 auto; }

/* Theme-switched wordmark. Light is the default; dark applies via the system
   preference, and an explicit [data-theme] (theme toggle) wins over it. The
   theme icon is not switched here — theme-icon.js morphs its single path. */
.logo-light { display: block; }
.logo-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark  { display: block; }
}
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark  { display: none; }
:root[data-theme="dark"]  .logo-light { display: none; }
:root[data-theme="dark"]  .logo-dark  { display: block; }

/* The button keeps Buy Me a Coffee's own 217×60 dimensions. */
.bmc-wrap { margin: 16px 0 0; text-align: center; line-height: 0; }
.bmc-btn  { display: inline-block; border-radius: 12px; transition: transform .08s ease; }
.bmc-btn:hover { transform: translateY(-1px); }
.bmc-img  { width: 217px; height: 60px; display: block; }

.hero-sub {
  margin: 14px auto 0; max-width: 46ch; text-align: center;
  color: var(--text-sec); font-size: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 4px; font-size: 20px; }
.card-sub { margin: 0 0 18px; color: var(--text-sec); font-size: 14px; }

/* ── Store buttons + QR ──────────────────────────────────────────────────── */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.store-btn {
  flex: 1 1 160px;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
  background: var(--input); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px;
  transition: transform .08s ease, border-color .15s ease;
}
.store-btn:not(.disabled):hover { transform: translateY(-1px); border-color: var(--accent); }
.store-btn-top { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.store-btn-name { font-size: 16px; font-weight: 700; }
.store-btn.disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.store-btn.disabled .store-btn-name::after {
  content: attr(data-badge);
  display: block; font-size: 11px; font-weight: 500; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}

/* Centred in its card, pushed to the bottom so both cards line up even when
   one store name wraps and the other does not. */
.qr {
  margin: auto auto 0; padding-top: 18px;   /* bottom of the card, centred */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qr-box {
  width: 128px; height: 128px; border-radius: 14px;
  display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--subtle); background: var(--elevated);
  color: var(--text-muted);
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.qr-placeholder { font-size: 12px; padding: 0 10px; white-space: pre-line; }
.qr-cap { font-size: 12px; color: var(--text-sec); }

/* ── Shopping list ───────────────────────────────────────────────────────── */
#code-form { display: flex; gap: 10px; flex-wrap: wrap; }
#code-input {
  flex: 1 1 220px;
  background: var(--input); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px; letter-spacing: 2px; text-align: center;
}
#code-input::placeholder { color: var(--text-faint); letter-spacing: 2px; }
#code-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.primary-btn {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 14px 20px;
  transition: opacity .15s ease, transform .08s ease;
}
.primary-btn:not(:disabled):hover { transform: translateY(-1px); }
.primary-btn:disabled { opacity: 0.4; cursor: default; }

.link-btn {
  border: 0; background: transparent; color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0;
}

.error-text { color: var(--danger); font-size: 14px; margin: 12px 0 0; }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-status { font-size: 12px; color: var(--text-muted); }
.list-status.busy { color: var(--accent); }
#list-name { margin: 8px 0 2px; font-size: 22px; }
/* Scripted focus target (see app.js) — not keyboard-reachable, so no focus ring. */
#list-name:focus { outline: none; }
.list-meta { margin: 0 0 14px; font-size: 13px; color: var(--text-sec); }

/* Each item is its own rounded card, mirroring the app's shopping list. */
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.item:hover { border-color: var(--accent); }
.item.flagged { border-color: var(--danger); }
.item-check {
  flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--text-muted);
  display: grid; place-items: center;
  transition: background .12s ease, border-color .12s ease;
}
.item.checked .item-check { background: var(--accent); border-color: var(--accent); }
.item-check svg { width: 14px; height: 14px; opacity: 0; }
.item.checked .item-check svg { opacity: 1; }
.item-body { flex: 1 1 auto; min-width: 0; }
.item-name { font-size: 15px; word-break: break-word; }
.item.checked .item-name { text-decoration: line-through; color: var(--text-muted); }
.item-qty { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.item-flag { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--danger); }
.item.pending { opacity: 0.5; }

.empty-text { color: var(--text-muted); text-align: center; padding: 28px 0; }
.empty-text::before { content: "🛒"; display: block; font-size: 40px; margin-bottom: 10px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  text-align: center; color: var(--text-muted); font-size: 13px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.footer p { margin: 4px 0; }
/* Links in prose and in the footer take the app's accent instead of the
   browser default blue. Store cards set their own colour, so they are
   unaffected. */
.footer-qr { display: inline-block; line-height: 0; }
.footer-qr-img { width: 132px; height: auto; border-radius: 10px; }
/* The blank line the legal links sit below. */
.footer-legal { margin-top: 18px; }
.footer a, .card a { color: var(--accent); text-decoration: none; }
.footer a:hover, .card a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .card { padding: 18px; border-radius: 16px; }
  .hero-logo { width: min(54%, 220px); }
  .qr-box { width: 112px; height: 112px; }
}