/* maps.applesauce.chat — design tokens + components.
 * Vanilla CSS, dual theme via [data-theme]. Aligned with Applesauce design system.
 */

/* ---------- screenprint typography ----------
 * Franklin Gothic Heavy is the canonical neighborhood-name font (matches the
 * server-side generator). Loaded from the in-repo library for the live designer.
 */
@font-face {
  font-family: 'FranklinGothicHeavy';
  src: url('/static/library/fonts/Franklin_Gothic_Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens ----------
 * maps personality: streetwear / band-merch / DIY screenprint.
 * cream-and-ink in light, deep ink + bone in dark. accent = tomato screenprint
 * red (think Online Ceramics / Stüssy / poster shop), NOT generic tailwind navy.
 */
:root,
[data-theme="warm"] {
  --bg: #F4EFE3;          /* warm bone / printer paper */
  --bg-subtle: #EAE3D2;   /* a shade darker for kraft panels */
  --card-bg: rgba(255,253,247,0.72);
  --card-border: rgba(34,28,20,0.10);
  --card-shadow: 0 1px 0 rgba(34,28,20,0.04), 0 4px 16px rgba(34,28,20,0.06);
  --card-hover-shadow: 0 2px 0 rgba(34,28,20,0.08), 0 12px 32px rgba(34,28,20,0.10);

  --text: #1B1410;        /* near-black ink, NOT pure black */
  --text-muted: #5E4F3C;
  --text-dim: #A2937C;

  --accent-primary: #C7392A;       /* tomato screenprint red */
  --accent-primary-deep: #A02A1F;
  --accent-primary-soft: #F7DBD3;
  --accent-secondary: #1F3358;     /* deep cobalt, used sparingly */
  --accent-green: #3F7B4A;
  --accent-red: #A02A1F;
  --accent-gold: #C28A28;

  --border-subtle: rgba(27,20,16,0.12);
  --border-strong: rgba(27,20,16,0.40);
  --field-bg: #FFFDF7;
  --field-border: rgba(27,20,16,0.25);
  --rule-color: rgba(27,20,16,0.18);

  --hero-font: 'AlfaSlabOne', 'DM Serif Display', Georgia, serif;
  --paper-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/></filter><rect width='240' height='240' filter='url(%23p)' opacity='0.18'/></svg>");

  --noise-opacity: 0.06;
}

[data-theme="dark"] {
  --bg: #14110D;          /* very dark ink, warm undertone */
  --bg-subtle: #1F1A14;
  --card-bg: rgba(34,28,22,0.72);
  --card-border: rgba(241,231,212,0.10);
  --card-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --card-hover-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.20);

  --text: #F1E7D4;        /* bone / oat / unbleached */
  --text-muted: #B2A38B;
  --text-dim: #6E614E;

  --accent-primary: #E94B36;       /* hot tomato — pops on dark */
  --accent-primary-deep: #C7392A;
  --accent-primary-soft: rgba(233,75,54,0.18);
  --accent-secondary: #6FA0E0;
  --accent-green: #7EBA89;
  --accent-red: #E94B36;
  --accent-gold: #E2B95B;

  --border-subtle: rgba(241,231,212,0.10);
  --border-strong: rgba(241,231,212,0.40);
  --field-bg: rgba(241,231,212,0.04);
  --field-border: rgba(241,231,212,0.15);
  --rule-color: rgba(241,231,212,0.18);

  --hero-font: 'AlfaSlabOne', 'DM Serif Display', Georgia, serif;
  --paper-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/></filter><rect width='240' height='240' filter='url(%23p)' opacity='0.10'/></svg>");

  --noise-opacity: 0.04;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }

/* The HTML hidden attribute MUST win over any class-level display value.
 * Without !important, rules like `.saved-neighborhood { display: flex }`
 * override `[hidden]`'s implicit `display: none`, leaving "showing for
 * <empty>" banners and empty "Recently picked" labels visible on first
 * paint. */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

.mono { font-family: 'Space Mono', 'SF Mono', Menlo, monospace; }

/* ---------- noise overlay ---------- */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: multiply;
}
[data-theme="dark"] .noise { mix-blend-mode: screen; }

/* ---------- header / nav ----------
 * Top header is two stacked rows: a "bar" (brand + customer nav) and an
 * optional "band" (saved-neighborhood). Account/admin/theme controls live
 * in the footer so the top stays focused on customer flow.
 *
 * Below 720px: bar wraps so the nav drops onto its own line under the brand.
 * From 720px up: brand left, nav right, single line.
 */
.site-header {
  display: flex; flex-direction: column;
  border-bottom: 1.5px solid var(--text);
  background: var(--bg-subtle);
}
.site-header-bar {
  display: flex; align-items: stretch;
  gap: 0;
  padding: 0 16px;
  min-height: 56px;
}
.site-header-band {
  /* Sits flush below the bar — used for the saved-neighborhood pin. */
  width: 100%;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hero-font);
  color: var(--text);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  min-width: 0;
  white-space: nowrap;
  padding: 8px 0;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand-mark { letter-spacing: -0.02em; }
.brand-tenant {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Hide on tight phones to keep the brand row clean — tenant name is in the
     footer + saved-neighborhood band already. */
}
@media (max-width: 480px) {
  .brand-tenant { display: none; }
}

/* Customer-facing primary nav: Shop / Designer / Map.
 *
 * Tab strip — each link is a real tab with a thick bottom-border on the
 * active page. Mono caps + hard edges match the garment-care-tag rest of
 * the site. Tabs sit flush right of the brand on every viewport (no
 * wrapping below the brand) so the header is always one row.
 */
.site-nav {
  display: flex; align-items: stretch; gap: 0;
  margin-left: auto;
  /* Tabs hug the right edge; allow horizontal scroll on phones if extreme. */
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav-link {
  display: inline-flex; align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;  /* overlap the header's bottom rule */
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.site-nav-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  text-decoration: none;
}
.site-nav-link.is-active {
  color: var(--text);
  border-bottom-color: var(--accent-primary);
}
.site-nav-pin { display: none; }

@media (min-width: 720px) {
  .site-header-bar {
    padding: 0 32px;
    min-height: 64px;
  }
  .site-nav-link {
    padding: 8px 18px;
    font-size: 0.82rem;
  }
}

/* Footer-only controls (moved out of the header) */
.tenant-switch {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}
.logout-form { display: inline; margin: 0; }
.btn-link {
  background: none; border: none; color: var(--text-muted);
  font-size: 0.85rem; cursor: pointer; padding: 0;
  font-family: inherit;
}
.btn-link:hover { color: var(--accent-primary); }
.btn-link-danger { color: var(--accent-red); }
.btn-link-danger:hover { color: var(--accent-red); }
.theme-toggle {
  background: none; border: 1px solid var(--field-border);
  color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: 0.2s cubic-bezier(.4,0,.2,1);
}
.theme-toggle:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

/* ---------- main / footer ---------- */
.site-main { flex: 1; padding: 48px 32px; max-width: 1240px; margin: 0 auto; width: 100%; }

/* Big footer: holds account/admin/theme so the top header stays lean.
 * Three sections in a row on desktop (brand · account · meta), stacks on
 * mobile. Visually a clear "ledger strip" — heavier than the previous
 * one-line copyright so account controls don't feel hidden.
 */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  padding: 28px 16px 24px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.footer-section {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.footer-section-brand { flex-direction: column; align-items: flex-start; gap: 2px; }
.footer-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer-meta { color: var(--text-dim); font-size: 0.75rem; }
.footer-meta-tiny {
  font-size: 0.7rem;
  margin-top: 2px;
  color: var(--text-dim);
}
.footer-meta-tiny a { color: var(--text-muted); }
.footer-meta-tiny a:hover { color: var(--accent-primary); }
.footer-user {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.footer-link { color: var(--text-muted); }
.footer-link:hover { color: var(--accent-primary); text-decoration: underline; }

@media (min-width: 720px) {
  .site-footer { padding: 32px 32px 24px; }
  .site-footer-inner {
    grid-template-columns: 1.4fr 1.6fr 1fr;
    gap: 24px;
    align-items: center;
  }
  .footer-section-account { justify-content: center; }
  .footer-section-meta { justify-content: flex-end; }
}

/* ---------- hero ---------- */
.hero { max-width: 720px; padding: 64px 0 32px; }
.hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-primary);
  margin: 0 0 16px;
}
.hero-title {
  font-size: 2.5rem;
  line-height: 1.05;
  margin-bottom: 20px;
}
.hero-lede {
  font-size: 1rem; color: var(--text-muted); max-width: 56ch;
  margin: 0 0 32px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- buttons ----------
 * Stamped, hard-edged. Mono caps for primary CTAs to match the screenprint
 * personality. Pressed-down :active state suggests a rubber-stamp ink hit.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border-radius: 4px;
  font-family: 'Space Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: 0.15s cubic-bezier(.4,0,.2,1);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent-primary);
  color: #FFFDF7;
  border-color: var(--accent-primary-deep);
  box-shadow: 2px 2px 0 0 var(--text);
}
.btn-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--text);
}
.btn-primary:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 0 var(--text);
}
.btn-primary:disabled,
.btn:disabled {
  background: var(--bg-subtle);
  border-color: var(--field-border);
  color: var(--text-muted);
  transform: none;
  box-shadow: 1px 1px 0 0 var(--field-border);
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--text);
  color: var(--bg);
}
.btn-danger {
  background: transparent;
  color: var(--accent-red);
  border-color: var(--accent-red);
}
.btn-danger:hover { background: var(--accent-red); color: var(--bg); }
/* Slightly smaller compact variant for in-row buttons */
.btn-sm {
  padding: 8px 14px;
  font-size: 0.72rem;
}

/* ---------- glass card ---------- */
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- auth ---------- */
.auth-shell {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}
.auth-card { padding: 40px 36px; max-width: 460px; width: 100%; }
.auth-title { font-size: 1.75rem; margin: 4px 0 12px; }
.auth-lede { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-submit { margin-top: 4px; }
.auth-msg {
  margin: 16px 0 0; min-height: 1.2em;
  font-size: 0.85rem; color: var(--text-muted);
}
.auth-msg-ok { color: var(--accent-green); }
.auth-msg-err { color: var(--accent-red); }

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field-input,
input.field-input,
select.field-input,
textarea.field-input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font-family: inherit;
  /* Keep at 16px to avoid iOS Safari auto-zoom on focus. */
  font-size: 16px;
  transition: 0.15s ease;
  width: 100%;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}
.field-hint { font-size: 0.7rem; color: var(--text-dim); }
.field-checkbox {
  flex-direction: row; align-items: center; gap: 8px;
}
.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flex-1 { flex: 1; }

.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid > .field { grid-column: span 1; }
.form-grid > .field.flex-1 { grid-column: span 2; }
.form-grid > .field-row { grid-column: span 2; }
.form-grid > fieldset { grid-column: span 2; border: none; padding: 0; margin: 0; }
.form-grid > .form-actions { grid-column: span 2; }
.form-row {
  display: flex; gap: 16px; align-items: flex-end;
  flex-wrap: wrap;
}
.form-actions { display: flex; gap: 12px; align-items: center; }
.inline-form { display: inline; margin-left: 8px; }
.danger-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }

/* ---------- admin shell ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.admin-sidebar {
  position: sticky; top: 32px;
  padding: 20px 0;
  min-width: 0;
}
.admin-sidebar-top {
  display: flex; flex-direction: column;
}
.sidebar-heading {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.sidebar-tenant {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: 10px;
  margin-bottom: 12px;
}
.sidebar-tenant-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.sidebar-tenant-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  margin-top: 2px;
}
.sidebar-tenant-form { margin-bottom: 16px; }
.sidebar-tenant-select {
  width: 100%; padding: 8px;
  border: 1px solid var(--field-border);
  background: var(--field-bg); color: var(--text);
  border-radius: 8px; font-family: inherit; font-size: 0.85rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.sidebar-link {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: 0.15s ease;
}
.sidebar-link:hover {
  background: var(--bg-subtle);
  color: var(--text);
  text-decoration: none;
}
.sidebar-link.is-active {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  font-weight: 600;
}
.sidebar-link-super {
  margin-top: 12px; padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  color: var(--accent-primary);
}

/* Mobile: collapse sidebar into a horizontal scrollable chip row above content */
@media (max-width: 860px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .admin-sidebar {
    position: static;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .admin-sidebar-top {
    flex-direction: row; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .sidebar-heading { display: none; }
  .sidebar-tenant {
    flex-direction: row; align-items: baseline; gap: 6px;
    padding: 6px 10px; margin: 0;
  }
  .sidebar-tenant-name { font-size: 0.95rem; }
  .sidebar-tenant-form { margin: 0; }
  .sidebar-tenant-select { padding: 6px 8px; font-size: 0.85rem; }
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 0 6px;
    /* Hide native scrollbar but keep scrollability */
    scrollbar-width: thin;
  }
  .sidebar-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.85rem;
    border: 1px solid transparent;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .sidebar-link.is-active {
    border-color: var(--accent-primary);
  }
  .sidebar-link-super {
    margin-top: 0; padding-top: 8px;
    border-top: none;
    border-left: 1px dashed var(--border-subtle);
    padding-left: 14px;
    margin-left: 4px;
  }
}

.admin-content { min-width: 0; }
.admin-header { margin-bottom: 32px; }
.admin-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.admin-header-actions { display: flex; gap: 8px; }
.admin-h1 { font-size: 2rem; line-height: 1.1; margin: 4px 0 8px; }
.admin-subtle { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.link-inline { color: var(--accent-primary); }

/* ---------- panels ---------- */
.panel {
  padding: 28px 28px;
  border-radius: 16px;
  margin-bottom: 24px;
}
.panel-title {
  font-size: 1.25rem;
  margin: 0 0 20px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.panel-counter { color: var(--text-muted); font-size: 0.8rem; }

/* ---------- metrics ---------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.metric-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: 0.2s cubic-bezier(.4,0,.2,1);
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
  text-decoration: none;
}
.metric-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.metric-value {
  font-family: 'DM Serif Display', serif;
  font-size: 2.5rem;
  line-height: 1;
}
.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- artwork grid ---------- */
.filter-bar {
  display: flex; gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar .field-input { max-width: 280px; }

.bulk-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--accent-primary-soft);
  border-radius: 10px;
  margin-bottom: 16px;
}
.bulk-toolbar-wrap {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.bulk-toolbar-wrap .bulk-toolbar { margin: 0; }
.cleanup-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: color-mix(in srgb, #c8632a 14%, var(--bg-subtle));
  border: 1px solid color-mix(in srgb, #c8632a 35%, var(--card-border));
  border-radius: 10px;
}
.cleanup-banner > div { flex: 1 1 auto; }
.cleanup-banner strong { display: inline-block; margin-right: 6px; }
.bulk-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-primary);
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.art-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 240px;
}
.art-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}
.art-card.glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.art-card-link {
  display: flex; flex-direction: column; gap: 6px;
  color: inherit; text-decoration: none;
}
.art-card-link:hover { text-decoration: none; }
.art-card-check {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 18px; height: 18px; cursor: pointer;
}
.art-card-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-subtle);
}
.art-card-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.75rem;
}
.art-card-title {
  font-size: 0.85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-card-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.art-card-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.art-card-flag {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: center;
}
.art-card-generated { opacity: 0.92; }

.res-badge {
  display: inline-flex; align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem; letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.res-badge-ok {
  background: color-mix(in srgb, #2f9d6f 20%, transparent);
  color: #1d6f4d;
  border-color: color-mix(in srgb, #2f9d6f 35%, transparent);
}
.res-badge-low {
  background: color-mix(in srgb, #c8632a 18%, transparent);
  color: #a04c1d;
  border-color: color-mix(in srgb, #c8632a 35%, transparent);
}
.res-badge-unknown {
  background: var(--bg-subtle);
  color: var(--text-dim);
  border-color: var(--card-border);
}
[data-theme="dark"] .res-badge-ok { color: #6dd9a8; }
[data-theme="dark"] .res-badge-low { color: #e89262; }

/* ---------- artwork stats ---------- */
.art-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.stat-tile-ok {
  border-color: color-mix(in srgb, #2f9d6f 35%, var(--card-border));
}
.stat-tile-warn {
  border-color: color-mix(in srgb, #c8632a 35%, var(--card-border));
}
.stat-tile .stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.stat-tile .stat-value {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; line-height: 1;
}
.stat-tile .stat-sub {
  font-size: 0.7rem; color: var(--text-muted);
}

.filter-bar-wide .field-input { max-width: none; flex: 1 1 160px; }
.art-result-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.art-meta-list { margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.art-meta-row { display: flex; gap: 12px; align-items: baseline; }
.art-meta-row dt {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  min-width: 110px;
}
.art-meta-row dd { margin: 0; font-size: 0.85rem; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- view tabs (grid / by-tag / untagged) ---------- */
.view-tabs {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  margin-bottom: 16px;
}
.view-tab {
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 999px;
  transition: 0.15s ease;
}
.view-tab:hover { color: var(--text); text-decoration: none; }
.view-tab.is-active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ---------- tag pills (on cards + group headers) ---------- */
.art-card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.art-card-tags-empty {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
  font-style: italic;
}
.tag-pill {
  display: inline-flex; align-items: stretch;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  line-height: 1.4;
}
.tag-pill-kind {
  padding: 2px 6px 2px 8px;
  background: var(--bg-subtle);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.55rem;
  border-right: 1px solid var(--card-border);
  display: flex; align-items: center;
}
.tag-pill-name {
  padding: 2px 8px 2px 6px;
  color: var(--text);
  display: flex; align-items: center;
}
.tag-pill[data-kind="neighborhood"] .tag-pill-kind { color: #1d6f4d; background: color-mix(in srgb, #2f9d6f 14%, var(--bg-subtle)); }
.tag-pill[data-kind="city"]         .tag-pill-kind { color: #1f5fa8; background: color-mix(in srgb, #3578d4 14%, var(--bg-subtle)); }
.tag-pill[data-kind="state"]        .tag-pill-kind { color: #6a3da8; background: color-mix(in srgb, #8a5dc4 14%, var(--bg-subtle)); }
.tag-pill[data-kind="collection"]   .tag-pill-kind { color: #a04c1d; background: color-mix(in srgb, #c8632a 14%, var(--bg-subtle)); }
.tag-pill[data-kind="season"]       .tag-pill-kind { color: #8a6f1d; background: color-mix(in srgb, #c8a635 14%, var(--bg-subtle)); }
[data-theme="dark"] .tag-pill[data-kind="neighborhood"] .tag-pill-kind { color: #6dd9a8; }
[data-theme="dark"] .tag-pill[data-kind="city"]         .tag-pill-kind { color: #7eb1ee; }
[data-theme="dark"] .tag-pill[data-kind="state"]        .tag-pill-kind { color: #c19eea; }
[data-theme="dark"] .tag-pill[data-kind="collection"]   .tag-pill-kind { color: #e89262; }
[data-theme="dark"] .tag-pill[data-kind="season"]       .tag-pill-kind { color: #e6c75c; }

.tag-pill-lg { font-size: 0.78rem; }
.tag-pill-lg .tag-pill-kind { font-size: 0.65rem; padding: 4px 10px; }
.tag-pill-lg .tag-pill-name { padding: 4px 12px 4px 8px; }
.tag-pill-untagged .tag-pill-kind {
  border-right: 0;
  color: var(--text-dim);
  background: var(--bg-subtle);
}

/* ---------- tag groups (by-tag view) ---------- */
.tag-group { margin: 0 0 32px; }
.tag-group-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tag-group-count {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.stat-tile-link {
  text-decoration: none; color: inherit;
  transition: 0.15s ease;
}
.stat-tile-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-hover-shadow);
  text-decoration: none;
}

/* ---------- per-card corner action buttons (preview, enable/disable) ---------- */
.art-card-corner-actions {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 4px; align-items: center;
}
.art-card-iconbtn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0; line-height: 1;
  transition: 0.15s ease;
}
.art-card-iconbtn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}
.art-card-iconbtn:disabled { opacity: 0.5; cursor: progress; }
.art-card-toggle-btn[title="Enable"] { color: #c8632a; }
.art-card-toggle-btn[title="Disable"] { color: #2f9d6f; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.art-card-disabled .art-card-thumb {
  filter: grayscale(0.85) opacity(0.55);
}
.art-card-disabled-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(200, 99, 42, 0.92);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}

/* ---------- lightbox preview ---------- */
.art-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 10, 14, 0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 32px;
  backdrop-filter: blur(4px);
}
.art-preview-overlay[hidden] { display: none; }
.art-preview-figure {
  position: relative;
  max-width: min(90vw, 1400px);
  max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0;
}
.art-preview-figure img {
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.art-preview-caption {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.art-preview-close {
  position: absolute;
  top: -12px; right: -12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  color: #111;
  border: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.no-scroll { overflow: hidden; }

/* ---------- tag-group actions row ---------- */
.tag-group-actions {
  display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-left: auto;
}
.btn-sm {
  font-size: 0.75rem;
  padding: 4px 10px;
}
.chip-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--card-border);
}
.chip-toggle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  display: inline-block;
}
.chip-toggle.is-on {
  background: color-mix(in srgb, #2f9d6f 15%, var(--card-bg));
  border-color: color-mix(in srgb, #2f9d6f 40%, var(--card-border));
  color: #1d6f4d;
}
.chip-toggle.is-on .chip-toggle-dot { background: #2f9d6f; box-shadow: 0 0 6px #2f9d6f; }
[data-theme="dark"] .chip-toggle.is-on { color: #6dd9a8; }

/* ---------- shirt colors admin ---------- */
.admin-subtle.small { font-size: 0.75rem; margin: 0 0 14px; }

.color-add-form { align-items: flex-end; gap: 12px; flex-wrap: wrap; }

.hex-field {
  display: inline-flex; align-items: center; gap: 6px;
}
.hex-picker {
  width: 36px; height: 36px;
  padding: 2px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--bg-subtle);
  cursor: pointer;
}
.hex-text { width: 110px; font-family: 'Space Mono', monospace; }

.color-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.color-row {
  display: grid;
  grid-template-columns: 36px 1fr 200px 90px auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.color-row-disabled {
  opacity: 0.55;
  border-style: dashed;
}
.color-swatch {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.color-row-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.color-row-field .field-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.color-row-hex .field-input { font-family: 'Space Mono', monospace; }
.color-row-narrow { width: 90px; }
.color-row-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
}
.color-row-actions { display: inline-flex; gap: 6px; }
.color-row-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 900px) {
  .color-row {
    grid-template-columns: 36px 1fr 1fr;
  }
  .color-row > .color-row-actions,
  .color-row > .color-row-meta,
  .color-row > .color-row-narrow,
  .color-row > .field-checkbox {
    grid-column: span 3;
  }
}

/* ---------- text styles admin ---------- */
.ts-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ts-preview-wrap {
  margin-bottom: 16px;
}
.ts-preview-label {
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ts-clip-warn {
  color: rgb(220, 40, 40);
  font-weight: 600;
}
.ts-preview-stage {
  background: var(--bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  /* Square aspect so the 1500x1500 canvas reads at correct proportions. */
}
.ts-preview {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  display: block;
  background: white;
  border-radius: 6px;
}
.ts-preview-mini {
  max-width: 280px;
}
.field-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 6px;
}
.ts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ts-row {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.ts-row-disabled { opacity: 0.55; border-style: dashed; }
.ts-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.ts-row-preview {
  background: var(--bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
}
.ts-row-actions { display: inline-flex; gap: 8px; }

/* ---------- library cliparts admin ---------- */
.graphic-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.graphic-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 12px;
  margin: 0;
}
.graphic-card-thumb-link {
  display: block;
  aspect-ratio: 1;
  background: var(--bg-subtle);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.graphic-card-thumb {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
}
.graphic-card-meta {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0;
}
.graphic-card-name { font-size: 0.85rem; font-weight: 500; }
.graphic-card-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.graphic-card-slug {
  font-size: 0.65rem;
  color: var(--text-dim);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.graphic-card-delete {
  align-self: flex-start;
  margin-top: 4px;
}

/* ---------- members table ---------- */
.members-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}
.members-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) 140px 180px 120px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
}
.members-row:last-child { border-bottom: 0; }
.members-head {
  background: var(--bg-subtle);
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.members-row-owner { background: color-mix(in srgb, #2f9d6f 6%, transparent); }
.members-email { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.members-actions-col { text-align: right; }
.members-role-form { margin: 0; }
.members-role-form .field-input { padding: 4px 8px; font-size: 0.8rem; }
.tag-pill-self {
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--card-bg));
  border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--card-border));
}

@media (max-width: 700px) {
  .members-row {
    grid-template-columns: 1fr 1fr;
  }
  .members-head { display: none; }
  .members-actions-col { grid-column: span 2; text-align: left; }
}

/* ---------- upload dropzone ---------- */
.dropzone {
  border: 2px dashed var(--field-border);
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  margin-bottom: 24px;
  transition: 0.2s ease;
  cursor: pointer;
}
.dropzone.drag-active {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}
.dropzone-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem; margin: 0 0 6px;
}
.dropzone-sub { color: var(--text-muted); margin: 0; }

.upload-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.upload-item {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-subtle);
  font-size: 0.85rem;
}
.upload-item-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-progress {
  width: 100%; height: 6px;
  background: var(--field-border);
  border-radius: 3px; overflow: hidden;
}
.upload-progress-bar {
  height: 100%; width: 0%;
  background: var(--accent-primary);
  transition: width 0.2s ease;
}
.upload-status { font-family: 'Space Mono', monospace; font-size: 0.75rem; text-align: right; }
.upload-status-ok  { color: var(--accent-green); }
.upload-status-err { color: var(--accent-red); }
.upload-warn { font-size: 0.75rem; color: var(--accent-gold); margin-top: 4px; grid-column: span 2; }

/* ---------- table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}
.table th {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
/* On mobile let the table scroll horizontally inside its panel. The thead/tbody/
   tr/th/td default display values keep the row/column layout intact within the
   scroll region. */
@media (max-width: 720px) {
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  .table th, .table td {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
}

/* ---------- tags ---------- */
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tag-list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-subtle);
}
.tag-list-item[hidden] { display: none; }
.tag-name { flex: 1; font-weight: 500; }
.tag-usage { color: var(--text-muted); font-size: 0.75rem; }

.tag-kind-panel { padding: 16px 18px; }
.tag-kind-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tag-kind-header .panel-title { margin: 0; }
.tag-kind-count {
  display: inline-flex; align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.tag-filter-input {
  margin-left: auto;
  max-width: 240px;
  font-size: 0.85rem;
  padding: 6px 10px;
}
.tag-list-scroll {
  max-height: 480px;
  overflow-y: auto;
  /* Inset scroll so the scrollbar doesn't hug the card edge */
  padding-right: 6px;
  /* Soft fade at the bottom hints there's more below */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.tag-list-empty { margin: 8px 0 0; color: var(--text-dim); }

.tag-fieldset { border: none; padding: 0; margin: 0; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field-bg);
  cursor: pointer;
  font-size: 0.8rem;
  transition: 0.15s ease;
}
.tag-chip:has(input:checked) {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.tag-chip input { display: none; }
.tag-chip-kind {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
}
.tag-chip:has(input:checked) .tag-chip-kind { color: var(--accent-primary); }

/* ---------- feed filters ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--field-border);
}
.filter-chip-include { background: var(--accent-primary-soft); border-color: var(--accent-primary); color: var(--accent-primary); }
.filter-chip-exclude { background: rgba(185,28,28,0.08); border-color: var(--accent-red); color: var(--accent-red); }
.filter-chip-mode {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.filter-chip-remove {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: 1rem; line-height: 1;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.filter-chip-remove:hover { background: rgba(0,0,0,0.08); }
.empty-state-inline { color: var(--text-dim); font-size: 0.85rem; }

/* ---------- artwork edit grid ---------- */
.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: start;
}
.art-preview {
  width: 100%; border-radius: 12px;
  background: var(--bg-subtle);
}
.art-meta {
  margin-top: 12px; color: var(--text-muted); font-size: 0.8rem;
}

/* ---------- empty / dialog ---------- */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--bg-subtle);
  border-radius: 12px;
}
.dialog {
  border: none; padding: 0;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.dialog::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.dialog-form { padding: 28px; min-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.dialog-title { font-size: 1.25rem; margin: 0; }
.dialog-sub { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .field, .form-grid > .field.flex-1, .form-grid > .field-row,
  .form-grid > .form-actions { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-main { padding: 24px 16px; }
  .site-header { padding: 12px 16px; }
  .hero-title { font-size: 2rem; }
}

/* ======================================================================
 * Landing (/) — text-first mockup tool, screenprint personality
 *
 * Layout brief: asymmetric on desktop. Headline hugs the left edge in slab
 * serif, runs slightly past the input form's right edge for poster energy.
 * Shirt mockup floats inside a kraft-paper panel on the right, set lower
 * than visual center so it falls off the headline's eye-line. On mobile
 * everything stacks but the kraft texture stays.
 * ====================================================================== */
.lander {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0 12px;
  align-items: start;
  position: relative;
}
.lander::before {
  /* register-mark accent — subtle screenprint detail in the top-right */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}
.lander::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  opacity: 0.85;
  pointer-events: none;
}
.lander-text {
  position: relative;
  z-index: 2;
}
.lander-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin: 8px 0 18px;
  position: relative;
  padding-left: 32px;
}
.lander-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 2px;
  background: var(--accent-primary);
}
.lander-title {
  font-family: var(--hero-font);
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: var(--text);
}
.lander-title em {
  font-style: normal;
  color: var(--accent-primary);
  display: inline-block;
  /* Ever-so-slight rotation breaks AI-perfect alignment */
  transform: rotate(-2deg) translateY(-4px);
}
.lander-lede {
  font-family: 'Space Mono', monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 36ch;
}
.lander-quickform {
  display: flex; gap: 0;
  margin: 0 0 12px;
  border: 2px solid var(--text);
  background: var(--field-bg);
  max-width: 520px;
  box-shadow: 4px 4px 0 0 var(--text);
}
.lander-quickinput {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--text);
}
.lander-quickinput:focus {
  outline: none;
  background: var(--bg-subtle);
}
.lander-quickinput::placeholder {
  color: var(--text-dim);
}
.lander-quicksubmit {
  white-space: nowrap;
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--text);
  box-shadow: none;
}
.lander-quicksubmit:hover {
  transform: none;
  box-shadow: none;
  background: var(--accent-primary-deep);
}
.lander-quicksubmit:active {
  transform: none;
}
.lander-quickhint {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 8px 0 0;
}

/* Right column: shirt floats on a kraft-paper panel.
   The panel has a paper-grain texture and a thin ink rule (one corner) for
   poster-shop personality. */
.lander-preview {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 20px 16px 8px;
  position: relative;
}
.lander-preview::before {
  content: '';
  position: absolute;
  inset: 24px 0 0 8%;
  background: var(--bg-subtle);
  background-image: var(--paper-tex);
  background-size: 240px 240px;
  border: 1.5px solid var(--border-strong);
  border-radius: 2px;
  z-index: 0;
}
.lander-preview > * { position: relative; z-index: 1; }
.lander-preview .shirt-mockup {
  max-width: 460px;
  margin: 0 auto;
}

@media (min-width: 880px) {
  .lander {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    padding: 56px 0 32px;
  }
  .lander-text { padding-top: 36px; }
  .lander-preview { padding: 0; min-height: 540px; align-items: flex-start; }
  .lander-preview::before {
    inset: 16px -32px 32px 4%;
  }
  .lander-preview .shirt-mockup {
    margin-top: 24px;
    transform: translateY(8px) rotate(0.6deg);
  }
}

/* Demoted maps + featured-feed cards under the lander hero —
   styled like museum-label index cards instead of generic clickable boxes. */
.lander-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 24px 0 40px;
  border-top: 1.5px solid var(--border-strong);
  border-bottom: 1.5px solid var(--border-strong);
}
.preset-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 16px;
  background: transparent;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
  border-right: 1px dashed var(--border-subtle);
}
.preset-card:last-child { border-right: none; }
.preset-card:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}
.preset-card-marker {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
  flex: 0 0 auto;
  padding-top: 4px;
}
.preset-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.preset-card-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.preset-card-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 640px) {
  .preset-card { border-right: none; border-bottom: 1px dashed var(--border-subtle); }
  .preset-card:last-child { border-bottom: none; }
}

/* ======================================================================
 * Storefront (/) — Phase 2 (kept for legacy templates / rail re-use)
 * ====================================================================== */
.store-hero {
  max-width: 720px;
  padding: 56px 0 32px;
}
/* When a featured shirt is shown, the hero becomes a 2-column layout on
   desktop: text on the left, an example shirt on the right. We only opt in
   to the grid when a child .store-hero-shirt is actually present so the
   text-only fallback keeps its single-column layout. */
.store-hero-default:has(.store-hero-shirt) {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 48px;
  align-items: center;
  padding: 48px 0 32px;
}
/* Critical: [hidden] must beat the grid layout above. Without this the
   personalized hero's JS-set hidden attribute silently fails to hide the
   default hero, so both stack on the page. */
.store-hero-default[hidden] { display: none; }
.store-hero-default .store-hero-text { max-width: 560px; }
.store-hero-shirt {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  text-decoration: none;
  color: inherit;
  transition: 0.25s cubic-bezier(.4,0,.2,1);
}
.store-hero-shirt:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.store-hero-shirt-caption {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 880px) {
  /* Selector matches .store-hero-default:has(.store-hero-shirt) so it wins
   * the cascade — a plain .store-hero-default rule has lower specificity
   * and silently loses, leaving the 2-column layout active and squishing
   * the text column down to ~150px (one-word-per-line wrap). */
  .store-hero-default,
  .store-hero-default:has(.store-hero-shirt) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px 0 16px;
  }
  .store-hero-shirt { max-width: 360px; margin: 0 auto; }
}

/* ---------- passive locate prompt (storefront first-visit nudge) ---------- */
.locate-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--accent-primary-soft);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
  border-radius: 12px;
  position: relative;
}
.locate-prompt[hidden] { display: none; }
.locate-prompt.is-loading { opacity: 0.6; pointer-events: none; }
.locate-prompt-pin { font-size: 1.2rem; }
.locate-prompt-text {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-width: 0;
}
.locate-prompt-text strong {
  color: var(--accent-primary);
  font-size: 0.95rem;
  font-weight: 600;
}
.locate-prompt-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.locate-prompt-actions {
  display: inline-flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.locate-prompt-close {
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.locate-prompt-close:hover { color: var(--text); }
@media (max-width: 600px) {
  .locate-prompt { flex-wrap: wrap; }
  .locate-prompt-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- shirt mockup component (hero + rail + everywhere) ----------
 *
 * The mockup is rendered as an inline <svg><use href="#shirt-mockup-symbol"/></svg>
 * so the body fill can pick up `currentColor` from a CSS variable. JS sets
 * --shirt-color per tile to randomize the palette, and --shirt-blend swaps
 * between 'multiply' (default — works on light shirts) and 'screen' (used
 * on dark shirts so the artwork stays readable instead of disappearing). */
.shirt-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 900;
  color: var(--shirt-color, #E5E5E5);
  border-radius: 8px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
}
.shirt-mockup-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.shirt-mockup-art {
  position: absolute;
  /* Print zone in the 800x900 SVG: x=240,y=240,w=320,h=320
     → 30%, 26.67%, 40%, 35.56% */
  left: 30%;
  top: 26.67%;
  width: 40%;
  height: 35.56%;
  object-fit: contain;
  mix-blend-mode: var(--shirt-blend, multiply);
  pointer-events: none;
}
[data-theme="dark"] .shirt-mockup {
  filter: brightness(0.92) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}
.shirt-mockup-lg { max-width: 480px; }

/* Some artworks (Hollywood-collection-style imports from ekay.com) are
   complete portrait shirt designs already, not chest-print art. Wrapping
   them in another shirt mockup makes a doubly-shirted absurdity. JS
   detects via image aspect ratio and tags those tiles `--bare` so they
   render as a clean poster instead. */
.shirt-mockup--bare {
  aspect-ratio: auto;
  background: var(--bg-subtle);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
  display: flex; align-items: center; justify-content: center;
  padding: 8%;
  min-height: 0;
}
.shirt-mockup--bare .shirt-mockup-svg { display: none; }
.shirt-mockup--bare .shirt-mockup-art {
  position: static;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  mix-blend-mode: normal;
}
.store-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-primary);
  margin: 0 0 16px;
}
.store-title {
  font-size: 2.75rem;
  line-height: 1.05;
  margin-bottom: 20px;
}
.store-lede {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 28px;
}
.store-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.store-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.store-feed-bar {
  margin: 24px 0 28px;
}

.store-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.store-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.15s ease;
}
.store-chip:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.store-chip.is-active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.store-rail-section { margin-top: 16px; }
.store-rail-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.store-rail-title {
  font-size: 1.5rem; margin: 0;
}
.store-rail-more {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-primary);
}

.store-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.store-rail.is-loading { opacity: 0.5; }

/* Mobile: the "rail" reads as an actual rail — horizontal scroller with
 * snap, so the customer swipes through tiles instead of scrolling 14
 * full-width tiles vertically and growing the page to ~5000px tall. */
@media (max-width: 720px) {
  .store-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    /* Bleed slightly outside the page padding so tiles touch the screen
     * edge while the rail still scrolls smoothly. */
    margin: 0 -16px;
    padding: 4px 16px 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .store-rail > .store-tile {
    flex: 0 0 64%;
    max-width: 240px;
    scroll-snap-align: start;
  }
}

.store-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: var(--text);
  transition: 0.2s cubic-bezier(.4,0,.2,1);
}
.store-tile:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--card-hover-shadow);
}
.store-tile-img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-subtle);
}
.store-tile-title {
  font-size: 0.85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ======================================================================
 * Designer (/design) — Phase 2
 * ====================================================================== */
.designer {
  display: grid;
  /* minmax(0, 1fr) prevents children with intrinsically-wide content
     (the 89-thumb art rail) from forcing the column wider than the
     viewport — without this the page horizontally scrolls ~10000px. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.designer-canvas-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  min-width: 0;
}
.designer-canvas {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 800 / 900;
  border-radius: 16px;
  background: var(--bg-subtle);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  isolation: isolate;
}
.designer-shirt {
  /* Inline SVG container — JS rewrites <path class="shirt-body"> fill
     to the chosen shirt color. The SVG itself is pinned to fill the
     canvas; we don't tint anything outside the silhouette. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.designer-shirt svg {
  width: 100%; height: 100%; display: block;
}
.designer-art {
  position: absolute;
  /* Print zone: SVG (240,240) -> (560,560) on an 800x900 viewBox.
     Convert to percentages of the box: x=30% y=26.67% w=40% h=35.56%. */
  left: 30%;
  top: 26.67%;
  width: 40%;
  height: 35.56%;
  object-fit: contain;
  /* Multiply makes the artwork ink-like on light shirts (looks printed
     into the fabric). On dark shirts JS toggles is-dark-shirt and we
     switch to screen so it doesn't disappear into black. */
  mix-blend-mode: multiply;
  z-index: 2;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.designer-canvas.is-dark-shirt .designer-art {
  mix-blend-mode: screen;
}

/* Live compose layer: an SVG whose viewBox (0 0 1500 1500) matches the
 * server-side generator canvas exactly. Both text + graphic positioned in
 * the same coordinates the server uses, so the on-screen preview and the
 * print-ready PNG line up.  Sized + positioned to overlay the print zone. */
.designer-compose {
  position: absolute;
  left: 30%;
  top: 26.67%;
  width: 40%;
  height: 35.56%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 0.25s ease;
  overflow: visible;
}
.designer-canvas.is-dark-shirt .designer-compose { mix-blend-mode: screen; }
[data-compose-text] { fill: #2a2a2a; }
.designer-canvas.is-dark-shirt [data-compose-text] { fill: #f5f5f5; }

/* Compose mode hides the static .designer-art layer, and vice versa. */
.designer-canvas.is-compose .designer-art { display: none; }
.designer-canvas:not(.is-compose) .designer-compose { display: none; }

/* ---- Graphic library grid (compose mode) ---- */
.graphic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1.5px solid var(--field-border);
  border-radius: 4px;
  background: var(--bg-subtle);
}
.graphic-tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  /* Slight cream fabric tone instead of pure #fff so the silhouettes feel
     like screenprint thumbnails on natural cotton, not flat web tiles. */
  background: #FBF6E9;
  border: 1.5px solid transparent;
  border-radius: 2px;
  padding: 6px;
  cursor: pointer;
  transition: 0.12s ease;
}
.graphic-tile img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.graphic-tile:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}
.graphic-tile.is-active {
  border-color: var(--accent-primary);
  box-shadow: 1px 1px 0 0 var(--accent-primary);
}
[data-theme="dark"] .graphic-tile { background: #F1E7D4; }

/* ---- Neighborhood text input (compose mode) ---- */
.designer-text-row {
  display: flex; gap: 8px; align-items: stretch;
}
.designer-text-input {
  flex: 1 1 auto;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 4px;
  padding: 11px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  min-width: 0;
}
.designer-text-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 2px 2px 0 0 var(--text);
}
.designer-text-locate {
  flex: 0 0 auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  padding: 0 12px;
}
.designer-text-help {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.designer-caption {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 8px 0 0;
  text-align: center;
}

/* Tonal-contrast warning chip — surfaces under the preview when ink × shirt
   would print muddy or invisible. Hard-edged, mono caps to match the
   garment-care-tag personality. data-level=warn → amber, bad → red. */
.contrast-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 0;
  padding: 8px 12px;
  border: 1.5px solid;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.45;
  max-width: 100%;
}
.contrast-flag-mark {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.contrast-flag[data-level="warn"] {
  color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-gold) 65%, transparent);
}
.contrast-flag[data-level="warn"] .contrast-flag-mark {
  background: var(--accent-gold);
}
.contrast-flag[data-level="bad"] {
  color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-red) 65%, transparent);
}
.contrast-flag[data-level="bad"] .contrast-flag-mark {
  background: var(--accent-red);
}
/* Center the chip under the preview without forcing display: none semantics. */
.designer-canvas-wrap > .contrast-flag {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.contrast-flag[hidden] { display: none !important; }

.designer-panel {
  display: flex; flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.designer-row {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-color);
}
.designer-row:first-child {
  padding-top: 0;
  border-top: none;
}
.designer-row-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.designer-row-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* swatches */
.swatch-row {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.swatch {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--field-border);
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: 0.15s ease;
}
.swatch-dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--swatch-color, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}

/* art rail (designer) */
.art-rail {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.art-rail.is-loading { opacity: 0.5; }
.art-tile {
  flex: 0 0 96px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--card-bg);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: 0.15s ease;
}
.art-tile img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-subtle);
}
.art-tile-title {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 84px;
}
.art-tile:hover { transform: translateY(-2px); }
.art-tile.is-active {
  border-color: var(--accent-primary);
}
.art-tile.is-active .art-tile-title { color: var(--accent-primary); }

/* size pills — square tags, mono caps, like garment care labels */
.size-pills { display: flex; gap: 0; flex-wrap: wrap; }
.size-pill {
  min-width: 48px;
  padding: 10px 14px;
  border-radius: 0;
  border: 1.5px solid var(--field-border);
  border-right-width: 0;
  background: var(--field-bg);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: 0.15s ease;
}
.size-pill:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.size-pill:last-child {
  border-right-width: 1.5px;
  border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
.size-pill:hover { background: var(--bg-subtle); }
.size-pill.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* footer */
.designer-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 2px solid var(--text);
}
.designer-price {
  display: flex; flex-direction: column; gap: 2px;
}
.designer-price-amount {
  font-family: var(--hero-font);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.designer-price-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.designer-order {
  min-width: 140px;
}
.designer-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.designer-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.checkout-msg {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
  margin: 0;
}
.checkout-msg.is-err { color: var(--accent-red); }
.checkout-msg.is-ok  { color: var(--accent-primary); }

/* font picker — chips render in their own font so the picker IS the preview.
   Hard-edged tags, the active one gets stamped tomato (matches CTA personality). */
.font-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.font-chip {
  appearance: none;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.15s ease;
}
.font-chip:hover {
  background: var(--bg-subtle);
  border-color: var(--text);
}
.font-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* Two-button stack for [Order] + [Email me this design] */
.designer-cta-stack {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px;
  min-width: 180px;
}
.designer-email {
  font-size: 0.85rem;
  padding: 8px 14px;
}

/* Compact dialog for the email-me exit (smaller than the full checkout one) */
.dialog.dialog-sm .dialog-form {
  min-width: 320px;
  max-width: 420px;
  padding: 24px;
  gap: 12px;
}

/* desktop layout */
@media (min-width: 900px) {
  .designer {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
    align-items: start;
    gap: 48px;
  }
  .designer-canvas-wrap {
    position: sticky;
    top: 32px;
  }
  .designer-canvas { max-width: 100%; }
}

/* mobile tightening */
@media (max-width: 600px) {
  .store-title { font-size: 2.25rem; }
  .designer { gap: 20px; }
  .designer-price-amount { font-size: 1.5rem; }
}

/* Mobile-only: sticky shirt preview + horizontal graphic grid.
 *
 * Below the desktop-grid breakpoint the canvas is the only thing the
 * customer wants to keep in view as they pick a graphic, type a name,
 * and try colors. Pin it to the top of the viewport, cap its height at
 * 50vh so the panel still has room to breathe, and convert the graphic
 * library to a single-row horizontal scroller so vertical page scrolling
 * keeps moving smoothly past the panel instead of fighting a nested
 * vertical scrollpane. */
@media (max-width: 899px) {
  .designer-canvas-wrap {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    /* Bleed slightly past the column so the noise/page bg doesn't peek
       through at the edges when the canvas is pinned. */
    padding: 8px 0 4px;
    margin: -8px 0 0;
  }
  .designer-canvas {
    /* Cap the box at 50vh tall while keeping the 800x900 aspect ratio.
     * width = min(parent-width, 50vh × 800/900) so the canvas can never
     * imply a height that exceeds 50vh. Width: auto + max-height alone
     * collapses to 0 inside a flex column on Android Chrome — using an
     * explicit width derived from the height cap avoids that. */
    width: min(100%, calc(50vh * 8 / 9));
    max-width: none;
  }
  .designer-caption {
    /* Caption sits below the canvas; keep it tight on mobile. */
    font-size: 0.85rem;
    margin: 0;
  }

  .graphic-grid {
    /* Single-row horizontal scroller. Vertical page scroll passes through
       cleanly; the user swipes left/right on this band to browse graphics. */
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: 8px;
    padding: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .graphic-grid > .graphic-tile {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
}

/* ======================================================================
 * Order success / cancelled
 * ====================================================================== */
.order-confirm { max-width: 720px; padding: 56px 0 32px; }
.order-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
  margin: 24px 0;
}
.order-preview {
  width: 100%;
  border-radius: 12px;
  background: var(--bg-subtle);
}
.order-summary-fields p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.order-summary-fields p:last-child { margin-bottom: 0; }
.order-summary-fields .field-label {
  display: inline-block;
  margin-right: 8px;
  min-width: 70px;
}
@media (min-width: 700px) {
  .order-summary { grid-template-columns: 320px 1fr; align-items: start; }
}

/* ───────────── /map — interactive Leaflet stage + recents rail ─────────────
 * Layout intent (top-to-bottom):
 *   1. Compact intro (title + sub + locate button)
 *   2. The map itself — gets the most vertical real estate
 *   3. Result card (only when a pick has happened)
 *   4. Below-the-fold band: outline toggle + recent picks + tips
 *   5. "Make it yours" pitch panel for the designer page
 *   6. Back-link
 *
 * The legacy SVG click-map (rendered into `.map-stage`) is gone — the
 * Leaflet stage with the optional polygon overlay covers the same job
 * and reads as a real map instead of a stylized one.
 */
.map-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.map-intro {
  text-align: center;
  margin: 0 auto 18px;
  max-width: 560px;
}
.map-intro-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.map-intro-sub {
  margin: 0 0 16px;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.map-intro-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  align-items: center;
}
.map-intro-fallback {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 8px;
}
.map-intro-fallback:hover {
  color: var(--accent-primary);
  text-decoration: none;
}

/* Below-the-map control row + recents + tips. The toggle that used to
 * live in a toolbar above the map sits here so the map reads as primary.
 */
.map-belowfold {
  margin: 12px 0 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.map-belowfold-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.map-recents {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.map-recents-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.map-recents-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.map-recents-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--field-border);
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  transition: 0.12s ease;
}
.map-recents-chip:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  text-decoration: none;
}

.map-tips {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.map-tips kbd {
  font-family: 'Space Mono', monospace;
  font-size: 0.75em;
  padding: 1px 5px;
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* "Make it yours" panel — replaces the bare "Open designer" button with
 * a section that says what's on the next page and why someone'd want it.
 */
.design-pitch {
  margin: 20px 0 16px;
  padding: 28px 24px;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.012) 0 2px,
      transparent 2px 6px
    ),
    var(--card-bg);
  text-align: center;
}
.design-pitch-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin: 0 0 8px;
}
.design-pitch-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.design-pitch-body {
  margin: 0 auto 20px;
  max-width: 52ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.design-pitch-cta {
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 10px;
}

.map-actions {
  text-align: center;
  margin-top: 12px;
}
.map-back-link {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ───────────── mobile-formatting fixes (mobile_visual.py findings) ───────────── */

/* Inputs <16px trigger iOS Safari auto-zoom on focus, which can break layout.
   The :not([type]) catches inputs with no explicit type — they default to
   text but `input[type="text"]` wouldn't match without the attribute set. */
input:not([type]),
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="search"], input[type="number"], input[type="url"],
select, textarea, .field-input {
  font-size: 16px;
}

/* Tap targets on mobile — bump small clickables to ≥36px */
@media (max-width: 720px) {
  .site-header .site-nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-footer .btn-link,
  .site-footer .footer-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
  }
  .theme-toggle {
    min-height: 40px;
    min-width: 40px;
  }
  .site-footer .footer-link,
  .store-rail-more {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* Inline edit / delete actions in admin tables, file-upload "browse" link */
  .link-inline,
  .btn-link-danger,
  .upload-dropzone .btn-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
  }
  /* Selects that aren't .field-input still need 16px to avoid iOS zoom */
  select { font-size: 16px; }
}

/* Belt-and-suspenders: prevent any future intrinsically-wide content from
   forcing the page to horizontally scroll. If something needs scroll, the
   element itself should opt in via overflow-x. */
html, body { overflow-x: hidden; }

/* ───────────── /map — Leaflet stage + locate result card ───────────── */
.locate-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.locate-btn { font-size: 0.95rem; }
.locate-result {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.locate-result-text { font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.locate-result-text strong { color: var(--accent-primary); font-weight: 600; }
.locate-result-action { margin-top: 12px; }
.locate-result-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--bg);
  transition: 0.15s ease;
  text-decoration: none;
}
.locate-result-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
  text-decoration: none;
}
.locate-result-card img {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-subtle);
  flex: 0 0 auto;
}
.locate-result-card-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.locate-result-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  color: var(--text);
}
.locate-result-card-cta {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent-primary);
  letter-spacing: 0.04em;
}

.leaflet-stage {
  width: 100%;
  height: 50vh;
  min-height: 320px;
  max-height: 560px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  margin: 0 0 8px;
}
/* ---- Leaflet neighborhood overlay tooltip + legend ---- */
.maps-poly-tooltip {
  background: rgba(20, 24, 32, 0.92);
  color: #fff;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.maps-poly-tooltip:before { display: none; }

.map-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.map-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.map-legend-swatch {
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-block;
}
.map-legend-swatch.has-art {
  background: rgba(30, 64, 175, 0.18);
  border: 1.5px solid #1E40AF;
}
.map-legend-swatch.no-art {
  background: rgba(203, 213, 225, 0.18);
  border: 1px solid #94a3b8;
}

/* The big locate button — "📍 Use my location" — rendered prominently
 * below the map intro. (The .locate-hero hero block was retired when
 * the page reflowed to title → map → recents.)
 */
.locate-btn-big {
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(30,64,175,0.30);
}
.locate-btn-big:hover { box-shadow: 0 6px 22px rgba(30,64,175,0.42); }

/* Result — large, anchors the page after find-me. Vintage poster feel:
 * kraft background, slab-stamped accent line, wider frame than other cards.
 */
.locate-result-big {
  position: relative;
  margin: 0 auto 24px;
  max-width: 640px;
  padding: 28px 24px 24px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.012) 0 2px,
      transparent 2px 6px
    ),
    var(--card-bg);
  border: 1.5px solid var(--text);
  box-shadow:
    4px 4px 0 var(--accent-primary),
    var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}
[data-theme="dark"] .locate-result-big {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.015) 0 2px,
      transparent 2px 6px
    ),
    var(--card-bg);
  border-color: var(--text);
}
.locate-result-big .locate-result-text {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
}
.locate-result-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.locate-result-place {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.25rem, 7vw, 3.4rem);
  line-height: 1.0;
  color: var(--text);
  margin: 6px 0 8px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  position: relative;
}
.locate-result-place::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--accent-primary);
  margin: 12px auto 0;
}
.locate-result-error {
  color: var(--accent-red);
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter', sans-serif;
}
.locate-result-big .locate-result-card {
  max-width: 380px;
  margin: 0 auto;
  padding: 12px 14px;
}
.locate-result-big .locate-result-card img {
  width: 64px; height: 64px;
}
.locate-result-big .locate-result-card-title { font-size: 1.15rem; }

/* Map stage wrapper + the "outline neighborhoods" toggle (now sits in
 * .map-belowfold-row below the map, not in a toolbar above it). */
.leaflet-stage-wrap { margin: 0 auto 12px; }
.leaflet-overlay-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-muted);
  cursor: pointer;
}
.leaflet-overlay-toggle input { width: 16px; height: 16px; cursor: pointer; }

/* ---- Inline shirt preview inside /map result card ---- */
.locate-preview {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0 auto;
  max-width: 320px;
}
.locate-preview-stage {
  position: relative;
  width: 240px;
  aspect-ratio: 800 / 900;
  border-radius: 12px;
  background: var(--bg-subtle);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.locate-preview-mockup {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.locate-preview-art {
  position: absolute;
  /* Same print-zone proportions as designer-art on /design */
  left: 30%;
  top: 26.67%;
  width: 40%;
  height: 35.56%;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.locate-preview-caption {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  margin: 0;
  color: var(--text);
}
.locate-preview-cta {
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 10px;
}

/* Generator: skeleton shimmer while the server composes the shirt */
.locate-preview-skeleton {
  width: 240px;
  aspect-ratio: 800 / 900;
  margin: 0 auto;
  border-radius: 12px;
  background:
    linear-gradient(
      100deg,
      var(--bg-subtle) 30%,
      var(--card-border) 50%,
      var(--bg-subtle) 70%
    );
  background-size: 200% 100%;
  animation: locate-shimmer 1.4s infinite linear;
  box-shadow: var(--card-shadow);
}
@keyframes locate-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Marker on auto-generated shirts: small "fresh print" stamp */
.locate-preview-generated .locate-preview-stage {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
}
.locate-preview-generated .locate-preview-stage::after {
  content: "Fresh print";
  position: absolute;
  bottom: -10px;
  right: -8px;
  background: var(--accent-primary);
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  transform: rotate(-3deg);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.18);
}

/* ---- Saved-neighborhood banner ----
 * Now lives as a third row inside <header>, flush below the bar. Spans full
 * width with content centered to a max column so it reads as part of the
 * header strip rather than a floating pill.
 */
.saved-neighborhood {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  font-size: 0.85rem;
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  border-top: 1px solid var(--border-subtle);
}
.site-header-band.saved-neighborhood {
  /* Center the contents but let the colored band reach the viewport edges. */
  justify-content: center;
}
.site-header-band.saved-neighborhood > * { flex: 0 0 auto; }
.site-header-band.saved-neighborhood .saved-neighborhood-text {
  flex: 0 1 auto;
}
@media (min-width: 720px) {
  .saved-neighborhood { padding: 8px 32px; }
}
.saved-neighborhood strong { color: var(--accent-primary); font-weight: 600; }
.saved-neighborhood-pin { font-size: 1rem; }
.saved-neighborhood-text { flex: 1 1 auto; }
.saved-neighborhood-link {
  color: var(--accent-primary);
  text-decoration: underline;
  font-size: 0.8rem;
}
.saved-neighborhood-close {
  background: none; border: none; padding: 2px 8px;
  font-size: 1.1rem; line-height: 1;
  color: var(--accent-primary);
  cursor: pointer;
  border-radius: 4px;
}
.saved-neighborhood-close:hover { background: rgba(30,64,175,0.10); }

/* ---- Personalized storefront hero (rendered when localStorage has saved neighborhood) ---- */
.store-hero-personal {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  padding: 32px 16px 16px;
}
.store-hero-personal .store-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-primary);
  background: var(--accent-primary-soft);
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.store-hero-personal .store-title {
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  line-height: 0.95;
  margin: 8px 0 4px;
}
/* Personalized hero stage: now houses a .shirt-mockup wrapper instead of a
 * bare clip-art. Per Astron's feedback (2026-05-05): cliparts with light
 * tones blend into the cream background; putting the design on a shirt
 * gives it contrast and reads as a product the customer is about to buy. */
.store-personal-stage {
  margin: 8px auto 0;
  width: min(360px, 80vw);
  display: flex; align-items: center; justify-content: center;
}
.store-personal-stage .shirt-mockup { max-width: 100%; }
.store-personal-place {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 4px;
}
.store-hero-personal .store-cta {
  flex-wrap: wrap; justify-content: center;
}

/* ---------- admin: orders ---------- */
.status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill-pending {
  background: rgba(180,83,9,0.10);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.status-pill-paid {
  background: rgba(21,128,61,0.10);
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.status-pill-sent_to_fulfillment,
.status-pill-shipped {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.status-pill-delivered {
  background: rgba(21,128,61,0.18);
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.status-pill-cancelled {
  background: rgba(185,28,28,0.10);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.color-swatch-mini {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* status filter chips on the orders list */
.orders-status-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 16px;
}
.orders-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: 0.15s ease;
}
.orders-chip:hover {
  color: var(--text);
  border-color: var(--accent-primary);
}
.orders-chip.is-active {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.orders-chip-count {
  font-size: 0.7rem;
  color: var(--text-dim);
  background: var(--bg-subtle);
  padding: 1px 8px;
  border-radius: 999px;
}
.orders-chip.is-active .orders-chip-count {
  color: var(--accent-primary);
  background: rgba(255,255,255,0.4);
}

/* table cell helpers */
.order-row-name { display: block; font-weight: 500; }
.order-row-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.order-row-date { color: var(--text-muted); white-space: nowrap; }

/* ---------- admin: order detail ---------- */
.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.order-detail-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-detail-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 860px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

.order-preview {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  display: block;
  background: var(--bg-subtle);
}

.order-dl {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 8px 16px;
  margin: 0;
}
.order-dl dt {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.order-dl dd {
  margin: 0;
  word-break: break-word;
}

.order-address {
  font-style: normal;
  line-height: 1.5;
  color: var(--text);
}

.order-meta-sep {
  display: inline-block;
  margin: 0 6px;
  color: var(--text-dim);
}

/* ---------- generic banner (used by order detail flash) ---------- */
.banner {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 16px;
  font-size: 0.85rem;
  border: 1px solid var(--border-subtle);
}
.banner-warn {
  background: rgba(180,83,9,0.10);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}