/*
 * Palette mirrors src/palette.ts in the app, so the page and the phone look like one product.
 * The theme is chosen by the small script in index.html, which sets data-theme on <html> before
 * the first paint. It always writes an answer, so the two blocks below cover every case and
 * neither palette is ever written out twice.
 */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --background: #F8F8F3;
  --surface: #FFFFFF;
  --ink: #202D26;
  --muted: #647269;
  --border: #E2E7DF;
  --primary: #275D45;
  --primary-fill: #275D45;
  --on-primary: #FFFFFF;
  --primary-light: #E8F0E6;
  --accent: #D7EEA6;
  --danger: #AE403D;
  --danger-light: #FCEDEA;
  --subtle: #F3F5EF;
  /* Site icons arrive with their own colours and mostly assume a pale backing, so the logo
     chip stays light in both themes rather than swallowing a dark favicon. */
  --artwork: #E8F0E6;
  --artwork-mark: #275D45;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #121814;
  --surface: #1A211C;
  --ink: #E9EFE8;
  --muted: #9AA79D;
  --border: #2C352E;
  --primary: #8ACCA6;
  --primary-fill: #2E6B50;
  --on-primary: #FFFFFF;
  --primary-light: #21332A;
  --accent: #D7EEA6;
  --danger: #E8807C;
  --danger-light: #3A1F1E;
  --subtle: #232B25;
  --artwork: #DDE6DA;
  --artwork-mark: #275D45;
}

/* A QR code keeps its dark-on-white contrast in both themes: scanners expect a light quiet
   zone, and an inverted code is read far less reliably. */
:root { --qr-background: #FFFFFF; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.app {
  --gutter: 22px;
  max-width: 540px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
}

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0 18px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 39px; height: 39px; border-radius: 13px; background: var(--primary-fill); color: var(--accent);
  display: grid; place-items: center;
}
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.8px; }
.brand-dot { color: var(--primary); }
.badge { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); border-radius: 8px; padding: 5px 9px; }
.badge:empty { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }

.theme-toggle {
  display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border-radius: 13px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); border-color: var(--primary); }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }
/* Nothing to press until the script has filled it in. */
.theme-toggle:empty { display: none; }

/* Keep the brand, count, and accessible appearance control together on small phones. */
@media (max-width: 380px) {
  .theme-label { display: none; }
  .theme-toggle { min-width: 38px; justify-content: center; padding: 0 10px; }
  .topbar-actions { gap: 6px; }
  .brand-name { font-size: 20px; white-space: nowrap; }
}

.main { flex: 1; }
.footer { text-align: center; font-size: 11px; color: var(--muted); padding: 24px 0 18px; }

h1 { font-size: 30px; line-height: 1.15; letter-spacing: -1.1px; font-weight: 800; margin: 4px 0 0; }
.subtitle { color: var(--muted); font-size: 13px; margin: 9px 0 22px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 148px; padding: 18px 10px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  text-decoration: none;
}
.tile:hover, .tile:focus-visible { border-color: var(--primary); background: var(--primary-light); }
.tile-name { font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.artwork {
  width: 68px; height: 68px; border-radius: 21px; display: grid; place-items: center;
  background: var(--artwork); overflow: hidden; flex: none;
}
.artwork img { width: 60%; height: 60%; object-fit: contain; }
.artwork svg { width: 52%; height: 52%; color: var(--artwork-mark); }

.back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.back:hover { color: var(--ink); }

.detail { display: flex; flex-direction: column; gap: 12px; }
.detail h1 { text-align: center; font-size: 28px; }
.detail .subtitle { text-align: center; margin-bottom: 4px; }

.qr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; align-items: center; }
.qr-card-header { display: flex; align-items: center; gap: 10px; width: 100%; }
.qr-card-heading { flex: 1; text-align: center; min-width: 0; }
.qr-card-label { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-card-caption { font-size: 8px; color: var(--muted); font-weight: 600; letter-spacing: 1.4px; margin-top: 4px; }
.corner {
  width: 38px; height: 38px; border-radius: 13px; border: 0; background: var(--subtle); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.corner:hover, .corner:focus-visible { color: var(--ink); box-shadow: 0 0 0 2px var(--primary-light); }
.corner[data-copied="true"] { color: var(--primary); }
.corner svg { width: 19px; height: 19px; }
.qr-wrap { margin: 5px 0 4px; background: var(--qr-background); width: 100%; max-width: 320px; }
.qr-wrap canvas, .qr-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.qr-divider { height: 1px; background: var(--border); width: 100%; margin-bottom: 14px; }
.qr-card-footer { display: flex; align-items: center; gap: 5px; width: 100%; }
.qr-card-brand { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: -0.5px; }
.qr-card-note { flex: 1; text-align: right; font-size: 7px; letter-spacing: 0.8px; color: var(--muted); }

.button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 14px 18px; border-radius: 18px; border: 0;
  background: var(--primary-fill); color: var(--on-primary); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; width: 100%;
}
.button:hover { opacity: 0.9; }
.button svg { width: 20px; height: 20px; }

.notice { display: flex; gap: 9px; padding: 14px; border-radius: 14px; background: var(--danger-light); color: var(--danger); font-size: 14px; }
.empty { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 0; }

@media (max-width: 380px) { .app { --gutter: 16px; } }

.action-row { display: flex; gap: 10px; }
.action-row .button { flex: 1; min-width: 0; }
.button.secondary { background: var(--primary-light); color: var(--primary); }
.button:disabled { opacity: .6; cursor: default; }
.action-status { font-size: 12px; color: var(--muted); margin: 0; }
.action-status:empty { display: none; }

/* The viewer's one invitation to install. A card rather than a line of text, so it cannot be
   mistaken for the legal row beneath it, and deliberately below the fold: Open link is what the
   visitor actually came for and nothing here may outrank it. It rides outside #main, so it holds
   on the folder list, on a single code, and on the error notice alike. */
.promo {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 0; padding: 16px 18px;
  background: var(--primary-light); border-radius: 22px;
}
.promo-body { flex: 1; min-width: 0; }
/* Balanced, or the two-line case breaks as "one scan / away." next to the button. */
.promo-title { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); margin: 0; text-wrap: balance; }
.promo-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 3px 0 0; }
/* Overrides .button's full-width phone shape, so it must stay after it in source order. */
.promo-action {
  flex: none; width: auto; min-height: 44px; padding: 12px 16px;
  border-radius: 14px; font-size: 14px; gap: 7px;
}
.promo-action svg { width: 16px; height: 16px; }
/* Below 380px the row runs out of column before the button runs out of label. */
@media (max-width: 380px) {
  .promo { flex-direction: column; align-items: stretch; gap: 12px; }
  .promo-action { width: 100%; }
}

/* Long-form legal pages; the viewer never renders prose. */
.prose { max-width: 62ch; padding-bottom: 8px; }
.prose h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; margin: 30px 0 8px; }
.prose h3 { font-size: 13px; font-weight: 700; color: var(--muted); margin: 18px 0 6px; }
.prose p, .prose li { font-size: 13px; line-height: 1.65; color: var(--ink); }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
.prose li { margin: 0 0 5px; }
.prose a { color: var(--primary); }
/* A contact address is a string someone reads off
   the screen and retypes, so it may not fragment. It measures ~175px against a 288px column
   at the narrowest supported width, so holding it whole cannot overflow. */
.prose a[href^="mailto:"] { white-space: nowrap; }
.prose strong { font-weight: 700; }
.prose .updated { font-size: 11px; color: var(--muted); margin: 9px 0 22px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--muted); font-weight: 700; font-size: 11px; }
.prose .callout {
  background: var(--subtle); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 14px;
}
.prose .callout p:last-child { margin-bottom: 0; }
code {
  font: 500 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--subtle); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere;
}
.footer a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Browser surfaces. Selection, caret, scrollbars and the focus ring ship with
 * defaults belonging to no palette; these pull them into this one. The ring is
 * last so it wins over the controls that style their own hover state.
 * ------------------------------------------------------------------------- */
::selection { background: var(--primary-light); color: var(--ink); }
:root { caret-color: var(--primary); scrollbar-color: var(--border) transparent; }
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}