/*
 * Joy Machine — joymachin.es-inspired stylesheet (v1.5).
 *
 * Design tokens extracted from joymachin.es (Kadence theme, April 2026):
 *   - Primary accent:  #BE530B  (warm burnt-sienna; dominant on the home page)
 *   - Deep accent:     #0d6e6e  (teal; from the verification-email button)
 *   - Neutrals:        #f2f2f2 / #eeeeee / #878787 / #444444 / #313131
 *   - Body font:       Kadence system stack (Apple/Segoe/Roboto/Helvetica Neue)
 *   - Display font:    Georgia serif for warmth without a web-font request
 *   - Content width:   842px narrow / 1290px wide (we use 720–842 for prose)
 *   - Spacing rhythm:  4 / 8 / 12 / 16 / 24 / 32 / 48 (matches Kadence padding)
 *   - Type ramp:       clamp() fluid scaling so headings shrink on phones
 *
 * Visual mood: warm, craft-oriented, mildly nostalgic. Joy Machines is about
 * "interactive, tactile, often absurd little creations" — the type ramp leans
 * a touch editorial (serif headings) while keeping the body utterly readable.
 */

:root {
  /* ---------- Type ---------- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
               Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Type ramp (Kadence-style fluid clamps; smaller floor than joymachin.es
     because our pages are denser admin/profile screens, not a hero home page). */
  --fs-xs: 0.8125rem;     /* 13px */
  --fs-sm: 0.9rem;        /* 14.4px */
  --fs-base: 1rem;        /* 16px */
  --fs-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.15rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --fs-xxl: clamp(2rem, 1.6rem + 2vw, 2.75rem);

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  /* ---------- Colors ---------- */
  /* Brand accents pulled from joymachin.es */
  --color-primary: #BE530B;          /* warm burnt-sienna — primary action */
  --color-primary-hover: #9c4308;    /* darker rust for hover */
  --color-primary-soft: #fdf2e8;     /* tinted bg for primary highlights */

  --color-accent: #0d6e6e;           /* teal — secondary accent / links */
  --color-accent-hover: #0a5757;
  --color-accent-soft: #e6f0f0;

  /* Neutrals — slightly warm grayscale to match the burnt-sienna primary */
  --color-bg: #fbf9f6;               /* very warm off-white */
  --color-surface: #ffffff;
  --color-surface-alt: #f2f2f2;
  --color-text: #2a2622;             /* warm near-black */
  --color-text-muted: #6e6863;
  --color-text-subtle: #8a847f;
  --color-border: #e3ddd5;
  --color-border-strong: #c8c0b6;

  /* Status colors */
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --color-warning: #b08400;
  --color-warning-bg: #fff7e1;
  --color-success: #1d6b3a;
  --color-success-bg: #e6f4ea;

  /* ---------- Spacing (Kadence rhythm) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ---------- Layout ---------- */
  --container-prose: 720px;     /* readable text */
  --container-narrow: 842px;    /* matches Kadence narrow */
  --container-wide: 1100px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(42, 38, 34, 0.06);
  --shadow: 0 2px 8px rgba(42, 38, 34, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-body);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-xxl); margin-bottom: var(--space-5); }
h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 var(--space-4) 0; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ---------- Site header / footer ---------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.site-header__brand:hover { color: var(--color-primary-hover); text-decoration: none; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.site-header__nav a,
.site-header__nav .link-button {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.site-header__nav a:hover,
.site-header__nav .link-button:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.logout-form { margin: 0; padding: 0; display: inline; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}

.site-main {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: var(--fs-sm);
}

/* ---------- Messages / banners ---------- */

.messages {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
}

.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
}
.message--error, .message--danger {
  background: var(--color-error-bg);
  border-left-color: var(--color-error);
}
.message--warning {
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning);
}
.message--success {
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
}

.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.banner--warning {
  background: var(--color-warning-bg);
  border-color: rgba(176, 132, 0, 0.3);
  border-left: 3px solid var(--color-warning);
}
.banner--info {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
}
.banner__title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* ---------- Forms ---------- */

form.joy-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-row label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select,
.form-row textarea,
.joy-form input[type="text"],
.joy-form input[type="email"],
.joy-form input[type="password"],
.joy-form select,
.joy-form textarea {
  font: inherit;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.joy-form input:focus,
.joy-form select:focus,
.joy-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(190, 83, 11, 0.18);
}

.form-row textarea { resize: vertical; min-height: 5rem; }

.form-row .helptext {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.form-row .errorlist,
.form-errors {
  color: var(--color-error);
  font-size: var(--fs-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

button.btn,
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease,
              transform 60ms ease;
  line-height: 1.2;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: #ffffff;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid rgba(190, 83, 11, 0.4);
  outline-offset: 2px;
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid transparent;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.btn--ghost:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}
.btn--danger:hover {
  background: #8f1d18;
  border-color: #8f1d18;
}

/* ---------- Card / section ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.section { margin-bottom: var(--space-6); }
.section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section__heading h2 { margin: 0; }
.section__heading .section__action { font-size: var(--fs-sm); }

/* ---------- QR code ---------- */

.qr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow);
}

.qr-frame {
  display: inline-block;
  background: #ffffff;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin: 0 auto var(--space-4) auto;
  /* Clamp the rendered QR so it stays scannable on phones without
     overwhelming desktop; the SvgPathImage scales cleanly via viewBox. */
  width: min(320px, 80vw);
}

.qr-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

/* When .qr-frame is also a <button> (the heart/circle toggle), strip native
   button chrome and make the cursor a pointer so it reads as tappable. */
button.qr-frame.qr-toggle {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  /* Subtle press feedback; the actual swap is instantaneous. */
  transition: transform 0.08s ease-out;
  position: relative;
}
button.qr-frame.qr-toggle:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
button.qr-frame.qr-toggle:active { transform: scale(0.98); }
.qr-frame__layer {
  display: block;
}
.qr-frame__layer[hidden] {
  display: none;
}
.qr-frame__layer svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-caption {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  max-width: 36ch;
  margin: 0 auto var(--space-3) auto;
}

.qr-meta {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  margin: 0;
}
.qr-meta code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.qr-fullscreen-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}

/* ---------- Inline chat composer (profile page) ----------
   Always-rendered. When chat_unlocked is False the textarea is disabled and
   the placeholder reads "Scan at a kiosk first!" — the input is visible so
   users see what they're working toward, but they can't type into it. */
.chat-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  margin-top: var(--space-5);
  align-items: flex-end;
}
.chat-composer__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}
.chat-composer__input:focus {
  outline: 2px solid rgba(190, 83, 11, 0.35);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.chat-composer__send { white-space: nowrap; }
.chat-composer--locked .chat-composer__input {
  background: rgba(190, 83, 11, 0.04);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.chat-composer--locked .chat-composer__input::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.chat-composer--locked .chat-composer__send {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-composer__status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  min-height: 1.4em;
}
.chat-composer__status[data-kind="error"] { color: var(--color-error); }
.chat-composer__status[data-kind="info"]  { color: var(--color-accent); }
.chat-composer__status[data-kind="ok"]    { color: var(--color-success); }

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

.qr-token-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  word-break: break-all;
}

/* ---------- Conversation list ---------- */

.conversation-message {
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.conversation-message__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.conversation-message__role--user {
  border-left: 3px solid var(--color-accent);
}
.conversation-message__role--assistant {
  border-left: 3px solid var(--color-primary);
}

.conversation-message__content {
  white-space: pre-wrap;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Inline conversation preview (on the profile page) */
.convo-preview {
  list-style: none;
  margin: 0;
  padding: 0;
}
.convo-preview__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.convo-preview__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.convo-preview__site { font-weight: 600; color: var(--color-text); }
.convo-preview__body {
  white-space: pre-wrap;
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}
.convo-preview__readmore {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}
.convo-preview__empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.milestone-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pagination {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}

/* ---------- Collapsible details (Settings, Danger zone) ---------- */

details.joy-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
details.joy-details > summary {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
details.joy-details > summary::-webkit-details-marker { display: none; }
details.joy-details > summary::after {
  content: "+";
  font-size: 1.2em;
  color: var(--color-text-muted);
  font-weight: 400;
  transition: transform 120ms ease;
}
details.joy-details[open] > summary::after { content: "−"; }
details.joy-details > summary:hover { background: var(--color-surface-alt); }
details.joy-details[open] > summary { border-bottom: 1px solid var(--color-border); }

.joy-details__body {
  padding: var(--space-5) var(--space-4);
}
.joy-details__body > *:last-child { margin-bottom: 0; }

details.joy-details--danger { border-color: rgba(179, 38, 30, 0.25); }
details.joy-details--danger > summary { color: var(--color-error); }
details.joy-details--danger > summary:hover { background: var(--color-error-bg); }

/* ---------- Misc ---------- */

.note {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.text-center { text-align: center; }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .site-header__inner {
    padding: var(--space-3) var(--space-4);
  }
  .site-header__nav { gap: var(--space-3); }
  .site-main { padding: var(--space-5) var(--space-4); }
  .qr-card { padding: var(--space-5) var(--space-4); }
}

/* Dark-mode opt-in for user agents that prefer it; preserves the warm palette
   by darkening the surface tones rather than going cold-grey. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1d1a17;
    --color-surface: #26221e;
    --color-surface-alt: #2f2a25;
    --color-text: #f0eae2;
    --color-text-muted: #b6ada3;
    --color-text-subtle: #8a8278;
    --color-border: #3a342e;
    --color-border-strong: #4a433b;
    --color-primary-soft: #3a2716;
    --color-accent-soft: #1c2e2e;
    --color-warning-bg: #3a2e0c;
    --color-error-bg: #3a1815;
    --color-success-bg: #15321f;
  }
  .qr-frame {
    /* QR must stay light for kiosk camera contrast even in dark mode. */
    background: #ffffff;
  }
}

/* ---------- Registration page extras ---------- */
.register-intro {
  font-size: var(--fs-md);
  max-width: 60ch;
  color: var(--color-text);
}
.register-inspiration {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: rgba(190, 83, 11, 0.04);
  border: 1px solid rgba(190, 83, 11, 0.18);
  border-radius: 8px;
}
.register-inspiration > summary {
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-primary);
}
.register-inspiration ul {
  margin: var(--space-3) 0 var(--space-3);
  padding-left: var(--space-5);
  line-height: 1.55;
}
.register-inspiration li { margin-bottom: var(--space-2); }
.register-inspiration li strong {
  color: var(--color-text);
  font-weight: 600;
}
.register-credits-note {
  font-size: var(--fs-sm);
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}
.register-experimental {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(220, 38, 38, 0.06);
  border-left: 4px solid #dc2626;
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.register-experimental strong {
  color: #b91c1c;
  letter-spacing: 0.04em;
}

/* ---------- Personalization mode (custom prompt vs pinned recipe) ---------- */
.personalization {
  border: 1px solid rgba(190, 83, 11, 0.18);
  border-radius: 8px;
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.personalization legend {
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-primary);
  padding: 0 var(--space-2);
}
.personalization__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
  font-weight: 500;
}
.personalization__panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 6px;
  background: rgba(190, 83, 11, 0.03);
  transition: opacity 0.15s ease;
}
.personalization__panel--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.personalization__panel--disabled textarea,
.personalization__panel--disabled input {
  background: #f0ede8;
  cursor: not-allowed;
}

/* ---------- Recipe typeahead ---------- */
.recipe-typeahead { position: relative; }
.recipe-typeahead__input { width: 100%; }
.recipe-typeahead__results {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(31, 29, 26, 0.18);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(31, 29, 26, 0.12);
  max-height: 280px;
  overflow-y: auto;
}
.recipe-typeahead__result {
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.recipe-typeahead__result:hover {
  background: rgba(190, 83, 11, 0.08);
}
.recipe-typeahead__desc { color: var(--color-text-muted, #6b6258); }

/* ---------- Donation-receipt landing page ---------- */
.receipt-card {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(31, 29, 26, 0.08);
}
.receipt-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.receipt-card__label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #9a3412;
  font-weight: 600;
}
.receipt-card__code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 700;
  color: #1f1d1a;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
}
.receipt-card__body {
  margin: 0;
  padding: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #1f1d1a;
  font-style: normal;
  border-left: 3px solid #9a3412;
  padding-left: var(--space-4);
}
.receipt-card__foot {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* ---------- Example conversation entries (chat_locked + future empty states) ---------- */
.convo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.convo-entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-4);
}
.convo-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  margin-bottom: var(--space-3);
}
.convo-entry__sep { opacity: 0.5; }
.convo-entry__site { color: var(--color-accent); font-weight: 500; }
.convo-entry__voice { font-style: italic; }
.convo-entry__body {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
  margin: 0;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-4);
  color: var(--color-text);
}

/* ---------- Admin tools — prompt-preview visualizer ----------
   Color-codes each architecture-layer of the composited system prompt so an
   operator can see at a glance which chunk came from which source. Tints are
   intentionally pale and warm; left borders carry the strong color so the
   page reads "stack of warm cards" rather than "rainbow grid". */

.prompt-preview-page { max-width: var(--container-wide); }

.prompt-preview-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: end;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.prompt-preview-form .form-row { gap: var(--space-2); }
.prompt-preview-form__submit { align-self: end; }

.prompt-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-primary-soft);
  border: 1px solid rgba(190, 83, 11, 0.18);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.prompt-preview-meta strong {
  color: var(--color-text);
  font-weight: 600;
}
.prompt-preview-meta__token-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.prompt-section {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.prompt-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.prompt-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  margin: 0;
  color: var(--color-text);
}
.prompt-section__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: rgba(42, 38, 34, 0.08);
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: lowercase;
}
.prompt-section__note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0 0 var(--space-2) 0;
}
.prompt-section__content {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(42, 38, 34, 0.08);
  color: var(--color-text);
  overflow-x: auto;
}

/* Per-section color scheme. Backgrounds are pale; left borders carry the
   strong identity color so the page stays warm + readable. */
.prompt-section--base_personality {
  background: #fbf2e6;
  border-left-color: var(--color-primary);
}
.prompt-section--field_site_flavor {
  background: #e7f2f2;
  border-left-color: var(--color-accent);
}
.prompt-section--voice_preset {
  background: #f0eff2;
  border-left-color: #8a8589;
}
.prompt-section--default_mode {
  background: #fdf7e4;
  border-left-color: var(--color-warning);
}
.prompt-section--milestone {
  background: #eaf6ee;
  border-left-color: var(--color-success);
}
.prompt-section--context {
  background: #f0f3f5;
  border-left-color: #5b6770;
}
.prompt-section--crisis_fence {
  background: #fdecea;
  border-left-color: var(--color-error);
}
.prompt-section--user_character_context {
  background: #f8f1e8;
  border-left-color: #9a8b7a;
}
.prompt-section--user_turn {
  background: #fff5e9;
  border-left-color: var(--color-primary);
}
.prompt-section--history {
  background: #ffffff;
  border-left-color: #b9a99a;
}

.prompt-history-group {
  background: rgba(42, 38, 34, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.prompt-history-group__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text);
}
.prompt-history-group__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--fs-sm);
}

/* Tool-call simulation panel. Visually distinct from system prompt cards
   via a dashed border + cool purple-grey tint, so it reads as "this is NOT
   in the system prompt". */
.tool-sim {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: #f1eef8;
  border: 2px dashed #8b86a3;
  border-radius: var(--radius-lg);
}
.tool-sim__heading {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: #4d4866;
}
.tool-sim__lede {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
  max-width: 60ch;
}
.tool-sim__placeholder {
  font-style: italic;
  color: var(--color-text-muted);
  margin: var(--space-3) 0;
}
.tool-sim__chooser {
  display: flex;
  gap: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tool-sim__chooser select {
  min-width: 240px;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.tool-sim__result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
}
.tool-sim__result-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: #4d4866;
  margin: 0 0 var(--space-1) 0;
}
.tool-sim__result-summary {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.tool-sim__result-block {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
  padding: var(--space-3);
  background: #fbfaff;
  border: 1px dashed #c8c2dd;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  overflow-x: auto;
}

.prompt-preview-warning {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}