/* ---- app/src/styles/tokens.css ---- */
/* kpics design tokens (Prototype A "Gallery Catalog" v2, DL-117): colour, type, spacing, radii,
   layout. Light is the default; the dark theme applies when <html data-theme="dark"> (set before
   first paint by the inline script in the root layout from the visitor's stored choice, else the
   system setting). Without script, the system setting still applies through the media query.
   Contrast ratios are against --surface (see prototypes/gallery-catalog/README.md). */

:root {
  color-scheme: light;

  /* colour */
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --frame: #ECEAE4;
  --hover: #EFEDE7;
  --line: #E4E1D9;
  --line-2: #D5D1C7;
  --line-input: #8C877C;   /* 3.6:1, form-control boundaries (WCAG 1.4.11) */
  --text: #1C1C1F;         /* 17.0:1 */
  --text-2: #4F5058;       /* 8.0:1 */
  --text-3: #62636B;       /* 6.0:1 */
  --accent: #2A4B8D;       /* 8.4:1 with white */
  --accent-strong: #213C73;
  --accent-soft: #E8EDF7;
  --accent-soft-2: #D9E1F1;
  --on-accent: #FFFFFF;
  --focus: #2A4B8D;
  --ok: #1D6B43;
  --ok-soft: #E6F2EA;
  --warn: #8A5300;
  --warn-soft: #FDF3E1;
  --warn-line: #E9CF9E;
  --danger: #A12A2A;
  --danger-soft: #FBEBEA;
  --danger-line: #E7B9B6;
  --sold: #1C1C1F;
  --on-sold: #FFFFFF;
  --on-sold-2: #E9E8E4;
  --on-text: #FFFFFF;
  --badge-bg: rgba(18, 18, 22, 0.76);  /* white text >= 8.7:1 even over a white photo */
  --switch-off: #8C877C;
  --glass: rgba(255, 255, 255, 0.92);
  --glass-hover: #FFFFFF;
  --toast-bg: #26262B;
  --toast-fg: #FFFFFF;
  --placeholder-bg: #3A3A40;
  --placeholder-fg: #FFFFFF;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234F5058' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* space (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* layout */
  --max-w: 1440px;
  --gutter: 16px;
  --sidebar-w: 236px;
  --brand-row-h: 52px;
  --header-h: 104px;       /* phones: brand row + search row */
  --bar-h: 64px;           /* phone purchase bar, excluding the safe area */
  --tap: 44px;

  --shadow-1: 0 1px 2px rgba(20, 20, 25, 0.06);
  --shadow-2: 0 8px 28px rgba(20, 20, 25, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F11;
  --surface: #18181B;
  --surface-2: #141416;
  --frame: #1F1F23;
  --hover: #26262B;
  --line: #2A2A30;
  --line-2: #3A3A42;
  --line-input: #76767F;
  --text: #EDEDEF;
  --text-2: #B6B6BE;
  --text-3: #9C9CA5;
  --accent: #93B0EC;
  --accent-strong: #B3C8F2;
  --accent-soft: #1B2436;
  --accent-soft-2: #25314A;
  --on-accent: #0E1422;
  --focus: #93B0EC;
  --ok: #6CCB94;
  --ok-soft: #12261A;
  --warn: #E8B25C;
  --warn-soft: #2A2112;
  --warn-line: #5A4520;
  --danger: #F29A92;
  --danger-soft: #2E1716;
  --danger-line: #6A302C;
  --sold: #DCDCE0;
  --on-sold: #111114;
  --on-sold-2: #2A2A30;
  --on-text: #111114;
  --switch-off: #6E6E78;
  --glass: rgba(24, 24, 27, 0.92);
  --glass-hover: #26262B;
  --toast-bg: #EDEDEF;
  --toast-fg: #111114;
  --placeholder-bg: #DCDCE0;
  --placeholder-fg: #111114;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23B6B6BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.6);
}

/* No script: follow the system setting (with script, data-theme is always set before paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0F0F11;
    --surface: #18181B;
    --surface-2: #141416;
    --frame: #1F1F23;
    --hover: #26262B;
    --line: #2A2A30;
    --line-2: #3A3A42;
    --line-input: #76767F;
    --text: #EDEDEF;
    --text-2: #B6B6BE;
    --text-3: #9C9CA5;
    --accent: #93B0EC;
    --accent-strong: #B3C8F2;
    --accent-soft: #1B2436;
    --accent-soft-2: #25314A;
    --on-accent: #0E1422;
    --focus: #93B0EC;
    --ok: #6CCB94;
    --ok-soft: #12261A;
    --warn: #E8B25C;
    --warn-soft: #2A2112;
    --warn-line: #5A4520;
    --danger: #F29A92;
    --danger-soft: #2E1716;
    --danger-line: #6A302C;
    --sold: #DCDCE0;
    --on-sold: #111114;
    --on-sold-2: #2A2A30;
    --on-text: #111114;
    --switch-off: #6E6E78;
    --glass: rgba(24, 24, 27, 0.92);
    --glass-hover: #26262B;
    --toast-bg: #EDEDEF;
    --toast-fg: #111114;
    --placeholder-bg: #DCDCE0;
    --placeholder-fg: #111114;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; --header-h: 64px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}
@media (max-width: 359px) {
  :root { --gutter: 12px; }
}

/* ---- app/src/styles/base.css ---- */
/* Storefront base and shell (Prototype A v2). Loaded only by the (store) layout, so the admin and
   auth pages keep their own styles. Mobile first. Breakpoints: 600 · 720 (one-row header, toggle
   label) · 900 (listing two columns, no purchase bar) · 1024 (sidebar replaces drawer) · 1280.
   No inline styles anywhere: the page CSP allows styles from this origin and the nonce only. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--surface-2); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
[hidden] { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--surface); color: var(--accent); padding: var(--s3) var(--s4);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); font-weight: 600;
}
.skip-link:focus { top: var(--s2); }

html.is-locked, html.is-locked body { overflow: hidden; }

.site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site > main { flex: 1 0 auto; }
.site > main:focus { outline: none; }

/* ---------------------------------------------------------------- icons */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------- buttons and controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-secondary { background: var(--surface); border-color: var(--line-input); color: var(--text); }
.btn-secondary:hover { background: var(--hover); color: var(--text); }
.btn-quiet { background: transparent; color: var(--text-2); border-color: transparent; }
.btn-quiet:hover { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-lg { min-height: 52px; font-size: var(--fs-base); padding: 0 var(--s6); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--hover); border-color: var(--line-2); color: var(--text-3); cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text);
}
.icon-btn:hover { background: var(--hover); }

.field { display: grid; gap: var(--s1); }
.field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.input, .select {
  height: var(--tap); width: 100%;
  border: 1px solid var(--line-input); border-radius: var(--r-md);
  background: var(--surface); padding: 0 var(--s3);
  font-size: 16px; /* 16px avoids iOS zoom on focus */
}
.input:focus, .input:focus-within, .select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; font-size: var(--fs-md); width: auto;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center;
}
.field-error { font-size: var(--fs-sm); color: var(--danger); }

.check {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px; border: 1.5px solid var(--line-input); border-radius: var(--r-sm);
  background: var(--surface); display: inline-grid; place-content: center;
}
.check::before {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--on-accent);
}
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::before { transform: scale(1); }

.switch { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; font-size: var(--fs-md); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--r-pill);
  background: var(--switch-off); transition: background-color 0.15s;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }

.segmented { display: inline-flex; border: 1px solid var(--line-input); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.segmented button {
  display: inline-grid; place-items: center; min-width: var(--tap); height: var(--tap); padding: 0 var(--s2);
  border: 0; background: transparent; color: var(--text-2);
}
.segmented button + button { border-left: 1px solid var(--line-2); }
.segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.segmented button:focus-visible { outline-offset: -3px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; line-height: 1.3;
  border-radius: 12px; font-size: var(--fs-xs); font-weight: 650; max-width: 100%;
  background: var(--hover); color: var(--text-2);
}
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--dark { background: var(--sold); color: var(--on-sold); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); }
.dot--warn { background: #C07A00; }
.dot--sold { background: var(--sold); border-radius: 1px; }

/* Owner placeholder marker: policy and legal wording that the owner has not written yet. */
.placeholder-tag {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-sm); background: var(--placeholder-bg); color: var(--placeholder-fg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px;
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: calc(-1 * var(--brand-row-h)); z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand nav" "search search";
  column-gap: var(--s2); align-items: center;
}
.brand {
  grid-area: brand; height: var(--brand-row-h); display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; justify-self: start;
}
.brand:hover { color: var(--text); }
.brand-mark { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); box-shadow: 4px 4px 0 var(--line-2); }
.site-nav { grid-area: nav; display: flex; align-items: center; gap: var(--s1); justify-self: end; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--s3);
  color: var(--text); text-decoration: none; font-size: var(--fs-md); font-weight: 550; border-radius: var(--r-md);
}
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
@media (max-width: 374px) {
  .nav-link { padding: 0 var(--s2); }
}

/* Theme toggle: a real button; aria-pressed = dark theme on. The look is keyed to data-theme (set
   before paint) so the state shows before hydration; aria-pressed carries it for assistive tech. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap); min-height: var(--tap); padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: transparent; color: var(--text);
  font-size: var(--fs-md); font-weight: 550;
}
.theme-toggle:hover { background: var(--hover); }
:root[data-theme="dark"] .theme-toggle { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent); }
:root[data-theme="dark"] .theme-toggle .icon-moon { fill: currentColor; }
.theme-toggle-label { display: none; }
@media (min-width: 720px) { .theme-toggle-label { display: inline; } }

.header-search { grid-area: search; padding: 0 0 var(--s2); min-width: 0; margin: 0; }
.search-field { position: relative; }
.search-field .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-input {
  width: 100%; height: var(--tap); padding: 0 var(--tap) 0 40px;
  border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--surface);
  font-size: 16px; color: var(--text);
}
.search-input::placeholder { color: var(--text-3); opacity: 1; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.search-clear { position: absolute; right: 0; top: 0; color: var(--text-2); }

@media (min-width: 720px) {
  .site-header { top: 0; }
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search nav";
    height: 64px; column-gap: var(--s4);
  }
  .header-search { padding: 0; max-width: 640px; width: 100%; justify-self: center; }
}
@media (min-width: 1024px) {
  /* on the catalog the search box lines up with the results, right of the sidebar */
  .site:has(.catalog) .header-inner { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto; column-gap: var(--s8); }
  .site:has(.catalog) .header-search { justify-self: start; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s8); display: grid; gap: var(--s2); }
.footer-inner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.footer-inner a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); color: var(--text-2); }
.footer-inner a:hover { color: var(--text); }
.footer-note { color: var(--text-3); }

/* ---------------------------------------------------------------- simple pages (placeholders, notices) */
.narrow { max-width: 720px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s12); }
.narrow h1 { font-size: var(--fs-2xl); }
.prose { display: grid; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-md); color: var(--text-2); }
.prose h2 { font-size: var(--fs-lg); color: var(--text); margin-top: var(--s3); }
.notice {
  margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--text); font-size: var(--fs-md);
}

/* ---------------------------------------------------------------- dialogs, toast */
.dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
}
.dialog::backdrop { background: rgba(20, 20, 24, 0.45); }
.dialog-inner { padding: var(--s5) var(--s5) var(--s4); display: grid; gap: var(--s3); }
.dialog-title { font-size: var(--fs-xl); padding-right: var(--s8); }
.dialog-close { position: absolute; top: var(--s2); right: var(--s2); }
.dialog-body { font-size: var(--fs-md); color: var(--text-2); display: grid; gap: var(--s3); }
.dialog-body ol, .dialog-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.dialog-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s2); padding-top: var(--s2); }
.dialog-note { font-size: var(--fs-sm); color: var(--text-3); border-top: 1px dashed var(--line-2); padding-top: var(--s2); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px)); padding: var(--s3) var(--s4);
  border-radius: var(--r-md); background: var(--toast-bg); color: var(--toast-fg); font-size: var(--fs-md); box-shadow: var(--shadow-2);
  transition: opacity 0.2s, transform 0.2s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- motion */
/* 0s, not 0.01ms: with the default transition-property "all", a tiny non-zero duration makes every
   element transition every property, including inherited visibility, so a panel that opens would
   stay hidden (and unfocusable) for a frame. Nothing here listens for transitionend. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- small utilities */
.pre-line { white-space: pre-line; }
.preview-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.preview-list img { max-width: 12rem; height: auto; }

/* ---- app/src/app/(store)/_policy/policy.css ---- */
/* POL-1 policy pages (/terms, /refunds, /privacy, /terms-of-your-copy): the rendered policy text.
   Tokens only (src/styles/tokens.css), so both themes follow. No inline styles (nonce CSP). */

/* <main> is a column flex item with `margin: 0 auto` (.narrow); give it the full width so a wide
   table's min-content can never widen the page at 320px (the ST2 account-pages lesson). */
.site > main.policy-page { width: 100%; min-width: 0; }

.policy-meta { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.policy-meta + .policy-meta { margin-top: var(--s1); }
.policy-versions { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.policy-versions ul { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.policy-versions a { display: inline-flex; align-items: center; min-height: var(--tap); }

.policy-text { display: grid; gap: var(--s3); margin-top: var(--s5); font-size: var(--fs-md); color: var(--text-2); max-width: 70ch; }
.policy-text h2 { font-size: var(--fs-lg); color: var(--text); margin-top: var(--s4); }
.policy-text h3 { font-size: var(--fs-md); color: var(--text); margin-top: var(--s2); }
.policy-text h4, .policy-text h5, .policy-text h6 { font-size: var(--fs-md); color: var(--text); }
.policy-text strong { color: var(--text); font-weight: 650; }
.policy-text ul, .policy-text ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s2); }
.policy-text a { overflow-wrap: anywhere; }

.policy-callout {
  display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text);
}

.policy-table { width: 100%; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; background: var(--surface); overflow: hidden; }
.policy-table th, .policy-table td { text-align: left; vertical-align: top; padding: 10px var(--s3); border-top: 1px solid var(--line); }
.policy-table thead th { border-top: 0; background: var(--surface-2); color: var(--text); font-weight: 600; }
.policy-table td { color: var(--text-2); }
/* Phones: each row becomes a small card; the column name comes from the header (data-label). */
@media (max-width: 599px) {
  .policy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .policy-table, .policy-table tbody, .policy-table tr, .policy-table td { display: block; width: 100%; }
  .policy-table tr { border-top: 1px solid var(--line); padding: var(--s2) 0; }
  .policy-table tbody tr:first-child { border-top: 0; }
  .policy-table td { border-top: 0; padding: 2px var(--s3); }
  .policy-table td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
  .policy-table td:first-child { color: var(--text); font-weight: 600; }
}

.policy-section { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--line); }
.policy-section h2 { font-size: var(--fs-lg); color: var(--text); }
.policy-section .policy-text { margin-top: var(--s2); }
.policy-back { margin-top: var(--s8); font-size: var(--fs-md); }

/* ---- app/front/front.css ---- */
/* FRONT-1: the few rules the front page needs beyond the storefront's shell and policy styles.
   Tokens only (src/styles/tokens.css), so the light and dark schemes both follow. No new visual
   ideas (the design direction is still open): the storefront's .narrow, .prose and .notice. */

/* As .policy-page: <main> takes the full width of the column so nothing can widen the page. */
.site > main.front-page { width: 100%; min-width: 0; }

.front-lead { margin-top: var(--s3); font-size: var(--fs-lg); color: var(--text-2); }
.front-page .prose { margin-top: var(--s8); }
.front-list { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s2); }
.front-list a { overflow-wrap: anywhere; }