/* mamacool brand tokens — the single source of truth for page styling.
   Values excavated from the live Shopify theme (settings_data.json current
   block + css-variables.liquid); provenance and rules in DESIGN.md.
   Load this BEFORE page CSS: <link rel="stylesheet" href="/brand.css"> */

/* ---- fonts (self-hosted, latin subset; no third-party requests) ---- */

@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400 700; /* variable file */
  font-display: swap;
  src: url("/fonts/petrona-var.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kalam-400.woff2") format("woff2");
}

:root {
  /* ---- color (theme values) ---- */
  --mc-bg: #fee2c7;        /* page background — theme menu/section bg */
  --mc-surface: #fff5ea;   /* cards, inputs — theme scheme-1 section bg */
  --mc-ink: #0b0b0b;       /* text + borders; never #000 */
  --mc-border: #0b0b0b;
  --mc-peach: #ffbe98;     /* theme accent (scheme "apricot") */
  --mc-pink: #ffb1be;      /* theme accent (templates, status css) */
  --mc-maroon: #752329;    /* theme scheme-3 section bg — "undried tomatoes" */
  --mc-error: #d02e2e;     /* theme sale/checkout-error red */
  --mc-success: #56ad6a;   /* theme --COLOR-SUCCESS */

  /* ---- color (our extensions — status set, not in the theme) ---- */
  --mc-status-pending: #ffe9b3;
  --mc-status-published: #bfe3c5;
  --mc-status-rejected: #f4c7bb;
  --mc-muted: #dcc7b1;     /* tracks, disabled, dividers on bg */
  --mc-attn: #ffcfd8;      /* attention surfaces (.mc-callout) — our extension */
  --mc-wipe: #fdc895;      /* button hover wipe: bg darkened 10 (theme math) */
  --mc-rule: rgba(11,11,11,.08);     /* hairlines inside tables */
  --mc-zebra: rgba(11,11,11,.03);    /* table stripe */
  --mc-ink-soft: rgba(11,11,11,.55); /* secondary text on bg */

  /* ---- type ---- */
  --mc-font-heading: "Petrona", Georgia, serif;         /* weight 500 */
  --mc-font-body: "Space Mono", ui-monospace, monospace; /* customer pages */
  --mc-font-ui: system-ui, -apple-system, sans-serif;    /* admin data tables only */
  --mc-font-accent: "Kalam", cursive;                    /* handwritten highlight */

  /* heading ramp (app-scale derivation of the storefront's 60px scale) */
  --mc-h1: 2.4rem;
  --mc-h2: 1.7rem;
  --mc-h3: 1.35rem;
  --mc-h4: 1.15rem;
  --mc-body: 1rem;
  --mc-lh-body: 1.5625;

  /* label ramp — the only four label sizes */
  --mc-label-xs: .58rem;
  --mc-label-s: .62rem;
  --mc-label-m: .68rem;
  --mc-label-l: .8rem;
  --mc-track-btn: .075em;   /* caps tracking: buttons/labels */
  --mc-track-sub: .1em;     /* caps tracking: subheads */

  /* ---- radius ramp (theme RADIUS ramp) ---- */
  --mc-r-pill: 999px;  /* pills, inputs, buttons (theme 30px equivalent) */
  --mc-r-card: 30px;   /* feature cards */
  --mc-r-panel: 22px;  /* panels, admin cards (RADIUS-SMALL) */
  --mc-r-dense: 14px;  /* tiles, rows (RADIUS-TINY) */
  --mc-r-subtle: 8px;  /* textareas, thumbs (RADIUS-TEXTAREA) */
  --mc-r-tick: 4px;    /* checkboxes, swatches (RADIUS-CHECKBOX) */

  /* ---- spacing / layout ---- */
  --mc-pad-page: 40px 20px 80px; /* side gutter = theme --gutter-mobile */
  --mc-pad-card: 22px 24px;
  --mc-max-interstitial: 400px;
  --mc-max-linktree: 480px;
  --mc-max-content: 640px;
  --mc-max-admin: 860px;
  --mc-max-media: 1100px;   /* media pages: map, video */
  --mc-gap: 16px;
}

/* ---- base component classes (hub, styleguide, new pages) ---- */

/* the wordmark: /assets/mamacool-black.svg at a fixed height, width free
   (svg is 1188:144, so 16px tall renders 132px wide). Pages add their own
   spacing/animation in page CSS, never a size. */
.mc-wordmark { height: 16px; }

/* the tagline: the sentence under the wordmark in page headers (hq,
   unlock). Pages add margins only. */
.mc-tagline { font-size: .95rem; opacity: .75; line-height: 1.5; }

.mc-label {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
}

/* the Fable button, verbatim: Space Mono bold (subheading stack +
   button_font_weight: bold), 1rem x 0.75 medium_button_size, line-height
   1.53, padding 15/22 x 0.75, pill (button_style), min-width 120px
   (180px >=1440px), full width under 480px — all from theme.css .btn +
   settings_data. One button, no size forks. */
.mc-btn {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.53;
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  color: var(--mc-surface);
  background: var(--mc-ink);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 11.25px 16.5px;
  min-width: 120px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
@media (min-width: 1440px) { .mc-btn { min-width: 180px; } }
@media (max-width: 479px) { .mc-btn { width: 100%; } }
.mc-btn--outline { color: var(--mc-ink); background: transparent; }
.mc-btn--danger { color: var(--mc-error); background: transparent; border-color: var(--mc-error); }
/* callout buttons only (see DESIGN.md accent standard): maroon primary,
   peach secondary — buttons everywhere else stay ink. */
.mc-btn--maroon { color: var(--mc-surface); background: var(--mc-maroon); }
.mc-btn--peach { color: var(--mc-ink); background: var(--mc-peach); }
.mc-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mc-btn[disabled]::before { content: none; }
/* big thumb button (extension, 2026-09-09): the same Fable button at thumb
   size for one-hand, one-tap pages (Mamalist). Not a style fork — same face,
   pill, caps, wipe; only height, width and type size change. */
.mc-btn--big {
  width: 100%;
  min-height: 64px;
  font-size: 1rem;
  padding: 18px 22px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- button hover: the theme's wipe ----
   The storefront hovers a 30% overlay of the darkened page bg across the
   button, entering from the side the cursor came from (0.3s ease). #fdc895
   is #fee2c7 darkened 10 — the same math as --COLOR-BG-LIGHTEN-DARKEN.
   brand.js sets the entry-side class; with no JS the wipe comes from the top.
   Add .mc-wipe to any page button that isn't an .mc-btn. */
.mc-btn, .mc-wipe { position: relative; z-index: 1; }
.mc-btn::before, .mc-wipe::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--mc-wipe); opacity: .3;
  transform: scale(1, 0); transform-origin: top center;
  transition: transform .3s ease;
}
.mc-wipe--top::before { transform: scale(1, 0); transform-origin: top center; }
.mc-wipe--bottom::before { transform: scale(1, 0); transform-origin: bottom center; }
.mc-wipe--left::before { transform: scale(0, 1); transform-origin: center left; }
.mc-wipe--right::before { transform: scale(0, 1); transform-origin: center right; }
/* hover only where hover exists: on touch screens a tapped button would
   otherwise keep the wipe until the next touch (2026-09-09, Mamalist). */
@media (hover: hover) {
  .mc-btn:hover::before, .mc-wipe:hover::before { transform: none; }
}

.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-card);
  padding: var(--mc-pad-card);
}
@media (max-width: 540px) { .mc-card { padding: 18px; } }

.mc-pill {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 4px 12px;
  background: var(--mc-surface);
  color: var(--mc-ink);
}
.mc-pill--pending { background: var(--mc-status-pending); }
.mc-pill--published { background: var(--mc-status-published); }
.mc-pill--rejected { background: var(--mc-status-rejected); }
.mc-pill--muted { background: var(--mc-muted); }
.mc-pill--accent { background: var(--mc-pink); }
.mc-pill--selected { outline: 2px solid var(--mc-peach); outline-offset: 1px; }

/* accent standard (option B, picked 2026-08-02): buttons stay ink; pink/peach
   in pills, focus rings, hovers; maroon reserved for stats and emphasis */
.mc-stat {
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--mc-maroon);
}

/* data-hierarchy standard (option 1 "serif-led", picked 2026-08-02):
   question in Petrona 600, answer in smaller mono, meta as caps label */
.mc-q {
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 3px;
}
.mc-a { font-size: .85rem; margin: 0; }
.mc-meta {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  opacity: .55;
}

.mc-input {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-l);
  color: var(--mc-ink);
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
}
.mc-input:focus { outline: 2px solid var(--mc-peach); outline-offset: 1px; }
/* Phones: 16px text in fields, or iOS zooms the page on focus. */
@media (max-width: 640px) { .mc-input { font-size: 1rem; } }
textarea.mc-input { border-radius: var(--mc-r-subtle); }

/* data tables — zebra rows, sticky header, tabular figures */
.mc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc-table th {
  position: sticky; top: 0;
  background: var(--mc-surface);
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--mc-border);
}
.mc-table td { padding: 8px 10px; border-bottom: 1px solid var(--mc-rule); }
.mc-table tbody tr:nth-child(even) { background: var(--mc-zebra); }
.mc-table .num { text-align: right; }

/* ---- layout shell: every standalone page is bg + one centered column ----
   body gets .mc-page; the page container gets .mc-shell plus a width
   modifier. Pages keep their scope class (.msv, .mup, .mcl, .mcu) for their
   own vars and selectors. */
.mc-page {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-ink);
  min-height: 100vh;
}
.mc-shell {
  margin: 0 auto;
  padding: var(--mc-pad-page);
  display: grid;
  gap: var(--mc-gap);
  font-family: var(--mc-font-body);
  color: var(--mc-ink);
}
.mc-shell--content { max-width: var(--mc-max-content); }
.mc-shell--linktree { max-width: var(--mc-max-linktree); }
.mc-shell--interstitial { max-width: var(--mc-max-interstitial); }
.mc-shell--admin { max-width: var(--mc-max-admin); }
/* media shell: the content (map, video) leads and the chrome recedes —
   tighter vertical rhythm, near edge-to-edge on mobile. mamamap only for
   now; the store widget carries a self-contained copy in mamamap.css. */
.mc-shell--media { max-width: var(--mc-max-media); padding: 24px 16px 48px; }
@media (max-width: 767px) { .mc-shell--media { padding: 8px 6px 24px; } }
@media (max-width: 540px) { .mc-shell { padding-top: 26px; } }

/* customer top bar: the way back to mamacool.com (survey, upload).
   Theme-true: 60px header wrapper, logo at the theme's 100px logo_max_width,
   centered, no border, not sticky (header settings). The whole bar is chrome;
   the logo link is the action. */
.mc-topbar {
  min-height: 60px;
  background: var(--mc-bg);
  display: flex; align-items: center; justify-content: center;
}
.mc-topbar a { display: flex; align-items: center; min-height: 60px; padding: 0 20px; }
.mc-topbar img { width: 100px; height: 12px; display: block; } /* 1188:144 svg */

/* page head: h1 on the ramp + body-size sub */
.mc-page-head {
  font-family: var(--mc-font-heading);
  font-weight: 500;
  font-size: var(--mc-h1);
  line-height: 1.15;
  margin: 0;
}
.mc-page-sub {
  font-size: var(--mc-body);
  line-height: var(--mc-lh-body);
  opacity: .78;
  margin: -4px 0 0;
}
.mc-page-sub a { color: var(--mc-ink); }
@media (max-width: 540px) { .mc-page-head { font-size: 1.9rem; } }

/* action chip: a small secondary action (view results, open page, copy).
   Outlined pill that reads as pressable — replaces bare underlined links. */
.mc-action {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  color: var(--mc-ink); background: transparent;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 8px 14px;
  text-decoration: none; cursor: pointer;
  transition: background .3s ease;
}
.mc-action:hover { background: rgba(253, 200, 149, .3); }
@media (max-width: 640px) { .mc-action { min-height: 40px; } }

/* panel card: the standard content section (survey sections, upload cards) */
.mc-panel-card {
  padding: 22px 24px;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-card);
  display: grid; gap: 18px;
}
.mc-panel-card[hidden] { display: none; } /* display:grid beats the UA rule */
@media (max-width: 540px) { .mc-panel-card { padding: 18px; } }

/* callout: the attention box — a panel-card whose fill announces itself.
   For the one thing on the page that must be seen (forward-the-discount,
   unlock ticket, share card). Inside it, buttons run maroon primary /
   peach secondary and accent pills flip to plain .mc-pill so they stay
   legible on the pink. Use sparingly: one per page. */
.mc-callout {
  padding: 22px 24px;
  background: var(--mc-attn);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-card);
  display: grid; gap: 18px;
}
.mc-callout[hidden] { display: none; }
@media (max-width: 540px) { .mc-callout { padding: 18px; } }

/* full panel state: centered thank-you / error */
.mc-panel {
  padding: 40px 28px; text-align: center;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-card);
  display: grid; gap: 10px; justify-items: center;
}
.mc-panel__title { font-family: var(--mc-font-heading); font-size: var(--mc-h3); font-weight: 500; }
.mc-panel__text { font-size: .92rem; opacity: .8; max-width: 46ch; }
.mc-panel a { color: var(--mc-ink); }

/* row card (extension): image tile + text, used by the hq links and the
   survey chooser. Tight card padding so the tile fills the card edge-to-edge;
   the text carries its own padding. Inner radius 12 = 22 card - 10 pad
   (concentric corners). Page CSS keeps page-specific bg/hover. */
.mc-rowcard {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-panel);
  color: var(--mc-ink); text-decoration: none;
}
.mc-rowcard__thumb {
  width: 72px; height: 72px; flex: none;
  border-radius: 12px;
  border: 1px solid var(--mc-border);
  object-fit: cover; display: block;
}
.mc-rowcard__body { flex: 1; min-width: 0; padding: 6px 14px; }
.mc-rowcard__actions {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px 6px 6px;
}
@media (max-width: 540px) {
  .mc-rowcard__thumb { width: 56px; height: 56px; }
}

.mc-empty {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--mc-muted);
  border-radius: var(--mc-r-panel);
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-l);
  color: var(--mc-ink-soft);
}

/* ---- admin app bar (injected by /admin-nav.js into #admin-nav) ---- */
.mc-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border);
  /* Stay a full-width, top-anchored bar even when the host page centers its
     body with flex/grid (e.g. the flashcard pages). */
  width: 100%; align-self: start;
}
.mc-nav__in {
  max-width: var(--mc-max-admin); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: stretch; gap: 18px; min-height: 52px;
}
.mc-nav__brand { display: flex; align-items: center; flex: none; }
.mc-nav__brand img { height: 16px; width: 132px; display: block; } /* 1188:144 svg */
.mc-nav__tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  min-width: 0; /* shrink and scroll instead of forcing the bar wide */
}
.mc-nav__tabs::-webkit-scrollbar { display: none; }
.mc-nav__tab {
  display: flex; align-items: center; padding: 0 10px;
  font-family: var(--mc-font-body); font-size: var(--mc-label-m);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn);
  color: var(--mc-ink); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; opacity: .55;
}
.mc-nav__tab:hover { opacity: .85; }
.mc-nav__tab.is-on { border-bottom-color: var(--mc-ink); opacity: 1; }
.mc-nav__logout {
  margin-left: auto; align-self: center; flex: none;
  font-family: var(--mc-font-body); font-size: var(--mc-label-s);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn);
  color: var(--mc-ink); background: none;
  border: 1px solid var(--mc-border); border-radius: var(--mc-r-pill);
  padding: 6px 14px; cursor: pointer;
}
.mc-nav__logout:hover { background: var(--mc-ink); color: var(--mc-surface); }

/* mobile: two rows — logo + log out on top, full-width scrollable tab strip */
@media (max-width: 640px) {
  .mc-nav__in { flex-wrap: wrap; gap: 0 10px; padding-top: 12px; }
  .mc-nav__brand { min-height: 24px; }
  .mc-nav__logout { margin-left: auto; }
  .mc-nav__tabs { order: 3; flex: 1 1 100%; max-width: 100%; margin: 4px -16px 0; padding: 0 16px; }
  .mc-nav__tab { min-height: 44px; }
}

/* ---- the single admin gate ----
   admin-nav.js renders a full-screen sign-in when there is no session key;
   everything behind it stays hidden until <html> carries .mc-authed (set
   pre-paint by the head inline script for returning sessions, or by the gate
   after the password verifies). Pages add .mc-ready once their data lands. */
html.mc-admin:not(.mc-authed) body > *:not(#admin-nav) { visibility: hidden; }
html.mc-authed:not(.mc-ready) body::after {
  content: "loading\2026";
  display: block; text-align: center; padding: 34px 0;
  font-family: var(--mc-font-body); font-size: var(--mc-label-m);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn); opacity: .5;
}
.mc-gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--mc-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; visibility: visible;
}
.mc-gate__card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-panel);
  padding: 34px 30px;
  width: 100%; max-width: 400px;
  display: grid; gap: 14px; justify-items: center;
  text-align: center;
}
.mc-gate__logo { width: 172px; max-width: 70%; height: auto; }
.mc-gate__hint { opacity: .5; }
.mc-gate__form { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.mc-gate__form .mc-input { flex: 1; min-width: 0; }
.mc-gate__btn { flex: none; }
.mc-gate__err { color: var(--mc-error); }
@media (max-width: 479px) {
  .mc-gate__form { flex-wrap: wrap; }
}

/* ---- dark scheme (extension, 2026-09-09): opt-in only ----
   .mc-dark forces it (on <html> or any container); html.mc-auto-dark
   follows the OS. Admin and survey pages carry neither, so they never go
   dark. Built for Mamalist's 2am contributor page: warm dark, cream ink,
   peach/pink/maroon unchanged. Every component reads tokens, so this is a
   remap plus a few contrast fixes for the fixed-color fills.
   The two blocks must stay identical — CSS has no mixins. */
html.mc-dark, html.mc-auto-dark { background: var(--mc-bg); }
.mc-dark {
  color-scheme: dark;
  --mc-bg: #1a1412;
  --mc-surface: #26201c;
  --mc-ink: #fff5ea;
  --mc-border: #fff5ea;
  --mc-attn: #3d2228;
  --mc-muted: #4a3d35;
  --mc-rule: rgba(255,245,234,.12);
  --mc-zebra: rgba(255,245,234,.04);
  --mc-ink-soft: rgba(255,245,234,.6);
}
.mc-dark .mc-stat { color: var(--mc-peach); }
.mc-dark .mc-btn--maroon { color: #fff5ea; }
.mc-dark .mc-btn--peach,
.mc-dark .mc-pill--accent, .mc-dark .mc-pill--pending,
.mc-dark .mc-pill--published, .mc-dark .mc-pill--rejected,
.mc-dark .mc-pill--muted { color: #0b0b0b; }
@media (prefers-color-scheme: dark) {
  html.mc-auto-dark {
    color-scheme: dark;
    --mc-bg: #1a1412;
    --mc-surface: #26201c;
    --mc-ink: #fff5ea;
    --mc-border: #fff5ea;
    --mc-attn: #3d2228;
    --mc-muted: #4a3d35;
    --mc-rule: rgba(255,245,234,.12);
    --mc-zebra: rgba(255,245,234,.04);
    --mc-ink-soft: rgba(255,245,234,.6);
  }
  html.mc-auto-dark .mc-stat { color: var(--mc-peach); }
  html.mc-auto-dark .mc-btn--maroon { color: #fff5ea; }
  html.mc-auto-dark .mc-btn--peach,
  html.mc-auto-dark .mc-pill--accent, html.mc-auto-dark .mc-pill--pending,
  html.mc-auto-dark .mc-pill--published, html.mc-auto-dark .mc-pill--rejected,
  html.mc-auto-dark .mc-pill--muted { color: #0b0b0b; }
}