/* Moneypal Marketplaces — shared stylesheet.
 *
 * Apps override the --brand-* custom properties in an inline <style> block;
 * everything else, including the focus treatment, is shared so that keyboard
 * behaviour cannot drift between marketplaces.
 */

:root {
  --brand: #1f5f4f;
  --brand-dark: #16453a;
  --brand-tint: #e8f2ee;
  --accent: #b4591f;

  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f3f1ed;
  --ink: #1b1d1c;
  --ink-soft: #4d524f;
  --line: #d9d5cf;
  --focus: #0b4ff0;
  --danger: #a5231b;

  --radius: 10px;
  --wrap: 68rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6cc0a7;
    --brand-dark: #8ad3bc;
    --brand-tint: #16241f;
    --accent: #e9a165;

    --bg: #121413;
    --surface: #1b1e1d;
    --surface-2: #232726;
    --ink: #f0efec;
    --ink-soft: #b4bab7;
    --line: #353a38;
    --focus: #7fb0ff;
    --danger: #ff9b92;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.65 var(--font);
}

body.dialog-open { overflow: hidden; }

/* --- focus -------------------------------------------------------------- */

/* A single, high-contrast focus treatment for everything. Never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Older engines without :focus-visible still get a ring. */
@supports not selector(:focus-visible) {
  :focus { outline: 3px solid var(--focus); outline-offset: 2px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 2px solid var(--focus);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Screen-reader-only, still focusable. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.wrap.narrow { max-width: 42rem; }

main { display: block; }
main:focus { outline: none; }

/* --- header ------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  margin-right: auto;
}

.brand .mark {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

@media (prefers-color-scheme: dark) {
  .brand .mark { color: #10211b; }
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text small { font-weight: 400; color: var(--ink-soft); font-size: 0.78rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem 1rem;
  flex-wrap: wrap;
}

/* `.nav-links` (the app's own nav array) and `.nav-account` (sign in /
   register / assistant) are two separate elements only so `.nav-wide` below
   can lay them out independently; everywhere else they should be invisible
   as containers and behave exactly as one flat list of flex items, which is
   what every app before VVF was built and tested against. */
.site-nav .nav-links, .site-nav .nav-account { display: contents; }

/* A nav with enough items to approach the header's full width (an editorial
   top bar like VVF's eight sections, versus the 0-6 items the marketplace
   apps carry) should not be left to wrap link-by-link next to the logo —
   that produces a ragged, unpredictable number of short rows and can push
   the last item onto a row of its own. Above the mobile breakpoint, give
   such a nav its own full-width line below the brand row instead: the
   app's own links scroll horizontally if they're ever still too long for
   the viewport, while sign in/register stay put at the right, always fully
   visible rather than possibly scrolled out of view (all items stay
   keyboard-reachable via Tab either way). */
@media (min-width: 52.01rem) {
  .site-header .wrap:has(> .site-nav.nav-wide) { row-gap: 0; }
  .site-nav.nav-wide {
    flex-basis: 100%;
    flex-wrap: nowrap;
    padding-bottom: 0.6rem;
  }
  .site-nav.nav-wide .nav-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem 0.75rem;
    min-width: 0;
    padding-right: 0.25rem;
  }
  /* Without this, flex's default min-width:auto lets the browser shrink a
     multi-word label (e.g. "Plant Intelligence") until it wraps onto two
     lines instead of scrolling — the opposite of the single clean row this
     is meant to produce. */
  .site-nav.nav-wide .nav-links a { flex: none; white-space: nowrap; }
  .site-nav.nav-wide .nav-account {
    display: flex;
    align-items: center;
    gap: 0.35rem 1rem;
    flex: none;
    margin-left: auto;
    padding-left: 0.75rem;
  }
  /* The header's own height is no longer the fixed single-row figure the
     persona switch assumes when it sticks below it; let it scroll away with
     the header instead of overlapping it. */
  .site-header:has(.nav-wide) + .persona-bar { position: static; }
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

/* `.site-nav a` is more specific than `.btn-primary`, so a button in the nav
   would otherwise inherit the muted link colour and sit dark-on-dark against
   its own brand background. Restore the button colours explicitly. */
.site-nav a.btn { border-bottom: 0; }
.site-nav a.btn-primary { color: #fff; }
.site-nav a.btn-ghost { color: var(--ink); }

@media (prefers-color-scheme: dark) {
  .site-nav a.btn-primary { color: #10211b; }
}

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

.nav-toggle { display: none; }

@media (max-width: 52rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle .bars {
    width: 1rem; height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.9rem;
    gap: 0.25rem;
  }
  .site-nav.is-open { display: flex; }
}

/* --- wordmark ----------------------------------------------------------- */

.wordmark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--accent);
  flex: none;
}
.wordmark-arc { width: 100%; height: 100%; display: block; }

.brand-text strong {
  display: block;
  font: 700 1.15rem/1.15 var(--serif);
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* --- persona bar and the Read / Interact switch ------------------------- */

.persona-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 4.25rem;
  z-index: 15;
}
.persona-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.persona-pick, .mode-pick { display: flex; align-items: center; gap: 0.6rem; }
.persona-label {
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.segmented {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.segmented a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.segmented a:hover { color: var(--ink); background: var(--surface-2); }
.segmented a[aria-current] {
  background: var(--brand);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .segmented a[aria-current] { color: #0d1620; }
}

/* The Read / Interact pair reads as one switch rather than two buttons. */
.segmented.switch { border-color: var(--brand); }
.segmented.switch a[aria-current] { background: var(--brand); }

@media (max-width: 52rem) {
  .persona-bar { position: static; }
  .persona-bar .wrap { justify-content: flex-start; }
  .persona-label { width: 100%; }
}

/* --- type --------------------------------------------------------------- */

h1 { font: 700 clamp(1.9rem, 4.4vw, 3rem)/1.12 var(--serif); margin: 0 0 0.6rem; letter-spacing: -0.01em; }
h2 { font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--serif); margin: 0 0 0.75rem; }
h3 { font: 600 1.06rem/1.35 var(--font); margin: 0 0 0.4rem; }

p { margin: 0 0 1rem; }
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 46rem; }
.small { font-size: 0.875rem; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 0.5rem;
}

a { color: var(--brand-dark); }
@media (prefers-color-scheme: dark) { a { color: var(--brand-dark); } }

kbd {
  font: 600 0.8em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.2em 0.42em;
  white-space: nowrap;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.9rem; }

.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
@media (prefers-color-scheme: dark) {
  .btn-primary { color: #10211b; }
}

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--brand-dark);
  text-decoration: underline;
  cursor: pointer;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* --- bands -------------------------------------------------------------- */

.hero, .page-head { padding: clamp(2.5rem, 7vw, 4.75rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.hero { background: linear-gradient(180deg, var(--brand-tint), var(--bg)); }
.hero h1 { max-width: 34rem; }

/* Dark hero: the headline sits on the brand colour with an accent highlight. */
.hero-dark {
  background: var(--hero-bg, var(--brand-dark));
  color: var(--hero-ink, #fff);
  padding: clamp(3.25rem, 9vw, 7rem) 0 clamp(2.75rem, 8vw, 5.5rem);
}
.hero-dark h1 { color: inherit; max-width: 16ch; }
.hero-dark h1 em { font-style: normal; color: var(--accent-light, var(--accent)); }
.hero-dark .eyebrow { color: var(--accent-light, var(--accent)); }
.hero-dark .lead { color: var(--hero-ink-soft, #e2ded6); max-width: 60ch; }
.hero-dark .crumb { color: var(--hero-ink-soft, #cfd8c9); font-size: 0.9375rem; margin-top: 1.75rem; }
.hero-dark .crumb a { color: var(--hero-ink, #fff); }

.hero-dark .btn-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--hero-ink, #fff);
  background: transparent;
}
.hero-dark .btn-ghost:hover { background: #fff; color: var(--hero-bg, var(--brand-dark)); }
.hero-dark .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink, #1d1a19);
}
.hero-dark .btn-primary:hover {
  background: var(--accent-light, var(--accent));
  border-color: var(--accent-light, var(--accent));
  color: var(--accent-ink, #1d1a19);
}

.band { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.band.tone-soft { background: var(--surface-2); }
.band.tone-brand { background: var(--brand-tint); }

.prose { max-width: 46rem; }
.prose h3 { margin-top: 1.25rem; }

ul.ticks { padding-left: 0; list-style: none; margin: 0 0 1rem; }
ul.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  background: var(--brand);
  border-radius: 2px;
}

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
}
.card p:last-child { margin-bottom: 0; }
.cards-wide { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.card-points { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.card-points li { margin-bottom: 0.3rem; }

/* Anchor targets must clear the sticky header when jumped to. */
.band[id], .hero[id] { scroll-margin-top: 5rem; }

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 3rem;
}
.steps > li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) { .steps > li::before { color: #10211b; } }
.steps p:last-child { margin-bottom: 0; }

/*
 * `.chain` — a sequence of hand-offs rendered as a visibly connected flow
 * (e.g. farm to patient), not an unordered grid of cards. Stays a single
 * column and scrolls with the page rather than inside itself, so there is no
 * extra keyboard or scroll mechanism to get right — Tab/Shift+Tab and the
 * normal page scroll already reach every step.
 */
.chain { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; display: grid; gap: 0; }
.chain-step:not(:last-child) {
  position: relative;
  padding-bottom: 1.6rem;
}
.chain-step:not(:last-child)::after {
  content: '↓';
  position: absolute;
  left: 1.95rem; bottom: 0.1rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
}
.chain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.1rem 3.5rem;
}
.chain-card p:last-child { margin-bottom: 0; }
.chain-card .eyebrow { margin: 0 0 0.2rem; }
.chain-num {
  position: absolute;
  left: 1.1rem; top: 1.1rem;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: 0.85rem;
}
@media (prefers-color-scheme: dark) { .chain-num { color: #10211b; } }
.chain-new .chain-card { border-color: var(--brand); border-width: 2px; padding: calc(1.1rem - 1px) 1.15rem calc(1.1rem - 1px) calc(3.5rem - 1px); }
.chain-new .chain-num { background: var(--accent); color: var(--accent-ink, #1d1a19); }

.facts { margin: 0; display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.fact dt { font-weight: 700; margin-bottom: 0.15rem; }
.fact dd { margin: 0; color: var(--ink-soft); }

.pull {
  margin: 0;
  border-left: 4px solid var(--brand);
  padding: 0.25rem 0 0.25rem 1.1rem;
  max-width: 44rem;
}
.pull p { font: 500 1.15rem/1.5 var(--serif); }
.pull footer { color: var(--ink-soft); font-size: 0.9rem; }

.cta-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  max-width: 46rem;
}

/* --- question and answer ------------------------------------------------ */

.qa { max-width: 46rem; display: grid; gap: 1.4rem; }
.qa-item h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.qa-item p { margin: 0 0 0.5rem; color: var(--ink-soft); }
.qa-item p:last-child { margin-bottom: 0; }

.note {
  max-width: 46rem;
  background: var(--surface-2);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0;
  color: var(--ink-soft);
}

/* --- section layout: consistent breathing room between stacked blocks --- */

/*
 * A section can list several blocks back to back (e.g. two different card
 * groups, or a list of steps followed by a note). Without an explicit gap
 * they read as one undifferentiated slab — this is the generic fix for that,
 * on top of giving any block its own `subhead` label where two groups in the
 * same section need telling apart.
 */
.section-blocks { display: grid; gap: 1.75rem; }

/*
 * A pull-quote or a CTA box reads as "highlighted" content — set apart from
 * the surrounding prose with a border or a filled background. The standard
 * 1.75rem block gap read as too tight against that visual weight (e.g. a
 * steps list running straight into a quote, or a card grid running straight
 * into a CTA box), so these two block kinds get extra breathing room above
 * them whenever something precedes them in the same section.
 */
.section-blocks > .pull:not(:first-child),
.section-blocks > .cta-block:not(:first-child) { margin-top: 0.75rem; }

.block-sub { margin: 0; }
.block-sub h3 { font: 700 1rem/1.3 var(--font); margin-bottom: 0.25rem; }
.block-sub p { color: var(--ink-soft); margin: 0; }

/* --- role groups -------------------------------------------------------- */

.groups {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.group h3 { font: 600 1.3rem/1.25 var(--serif); margin-bottom: 0.25rem; }
.group-lead { color: var(--ink-soft); margin-bottom: 1.1rem; }
.group-items { margin: 0; display: grid; gap: 0.9rem; }
.group-item dt { font-weight: 700; margin-bottom: 0.15rem; }
.group-item dd { margin: 0; color: var(--ink-soft); }

/* --- forms -------------------------------------------------------------- */

fieldset.checks { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem 1rem; }
fieldset.checks legend { font-weight: 600; padding: 0 0.35rem; }
.check-grid {
  display: grid;
  gap: 0.5rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.check { display: flex; align-items: flex-start; gap: 0.55rem; }
.check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--brand);
}
/* Must out-rank `.field label`, which is equally specific and declared later. */
.checks .check label { font-weight: 400; margin: 0; }

.form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 0.4rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
}
.form legend { font-weight: 700; padding: 0 0.4rem; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field .optional { font-weight: 400; color: var(--ink-soft); }
.field .help { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.4rem; }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
}
textarea { resize: vertical; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); border-width: 2px; }

.field .error { color: var(--danger); font-weight: 600; font-size: 0.9rem; margin: 0.35rem 0 0; }

.summary {
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
}
.summary h2 { font-size: 1.1rem; color: var(--danger); margin-bottom: 0.5rem; }
.summary ul { margin: 0; padding-left: 1.2rem; }
.summary a { color: var(--danger); }

/* --- chat --------------------------------------------------------------- */

.chat { padding: clamp(1.5rem, 4vw, 2.5rem) 0 3rem; }
.chat-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.transcript {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  /* A real scroll container, so wheel, PageUp/PageDown, Home/End and arrow
     keys all work once it has focus. Never a fixed height with hidden overflow. */
  max-height: min(58vh, 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.turn { margin: 0 0 1.4rem; }
.turn:last-child { margin-bottom: 0; }

.turn-who {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}

.turn-body p { margin: 0 0 0.7rem; }
.turn-body p:last-child, .turn-body ul:last-child { margin-bottom: 0; }
.turn-body ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.turn-body li { margin-bottom: 0.4rem; }

.turn-member .turn-body {
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}

.turn.pending .turn-body { color: var(--ink-soft); font-style: italic; }

.status { min-height: 1.4rem; margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }

.suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 1rem; }
.chip {
  font: inherit;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.chip:hover { background: var(--surface-2); border-color: var(--brand); }

.composer {
  /* Always a fixed gap below the transcript/status, whatever happens to sit
     above it — the response must read as directly above the box, not whatever
     margin a neighbour happened to bring. */
  margin-top: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
}
.composer textarea {
  border: 0;
  background: transparent;
  padding: 0.2rem 0.1rem;
  resize: none;
  /* Grown by ui.js up to ~40% of the viewport, then scrolls internally. */
  max-height: 40vh;
  overflow-y: auto;
}
.composer textarea:focus-visible { outline-offset: 4px; }

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
  padding-top: 0.6rem;
}
.hint { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* --- dialog ------------------------------------------------------------- */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 11, 0.55);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  z-index: 50;
}
.dialog-backdrop[hidden] { display: none; }

.dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  width: min(34rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
.dialog h2 { font-size: 1.3rem; }

.shortcuts { margin: 0 0 1.2rem; display: grid; gap: 0.5rem; }
.shortcut { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.75rem; align-items: baseline; }
.shortcut dt { text-align: right; }
.shortcut dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 30rem) {
  .shortcut { grid-template-columns: 1fr; gap: 0.1rem; }
  .shortcut dt { text-align: left; }
}

/* --- the Nirmund stack strip -------------------------------------------- */

.stack-strip {
  background: #16191b;
  color: #d9d6cf;
  padding: 1.4rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 2rem;
}
.stack-strip .ss-title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stack-strip .ss-title a { color: #e4c878; text-decoration: none; }
.stack-strip .ss-title a:hover { text-decoration: underline; }
.stack-strip ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.stack-strip li {
  border-top: 2px solid #3b4044;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.stack-strip li.here { border-top-color: #e4c878; }
.stack-strip .lyr {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a968f;
  margin-bottom: 0.15rem;
}
.stack-strip a { color: #f2efe8; text-decoration: none; }
.stack-strip a:hover { text-decoration: underline; }
.stack-strip a[aria-current] { color: #e4c878; font-weight: 700; }
.stack-strip :focus-visible { outline-color: #e4c878; }

@media (max-width: 44rem) {
  .stack-strip ol { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 2rem 0;
  margin-top: 0;
}
.site-footer p { margin: 0 0 0.6rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.6rem; }
.site-footer a { color: var(--ink-soft); }

.footer-cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: 1.25rem;
}
/* `.site-footer nav` is the more specific selector, so the column needs to
   out-rank it or the heading sits beside its links instead of above them. */
.site-footer nav.footer-col { display: block; gap: 0; margin-bottom: 0; }
.footer-col h2 {
  font: 700 0.75rem/1.4 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.35rem; }

.site-footer .supported {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  font-weight: 600;
  color: var(--ink);
}
.site-footer .supported img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  width: 64px;
  height: auto;
  flex: none;
}
.site-footer .legal { color: var(--ink-soft); margin-top: 0.75rem; }

.footer-simple { text-align: center; }
.footer-simple .initiative {
  max-width: 44rem;
  margin: 0 auto 0.5rem;
  font-weight: 600;
  color: var(--ink);
}
.footer-simple .supported { justify-content: center; }

/* The coach fills the viewport in Interact, so the conversation gets the room
   rather than the page scrolling behind it. */
.chat-full .transcript { max-height: min(62vh, 44rem); }
.chat-full .chat-head { max-width: 46rem; }
.chat-foot { margin-top: 0.9rem; }

.brand-logo { height: 2.5rem; width: auto; display: block; }
@media (prefers-color-scheme: dark) {
  /* A dark-on-transparent mark needs a light plate to stay visible. */
  .brand-logo { background: #fff; border-radius: 6px; padding: 3px 5px; }

  /* …but a logo wrapped in <picture> has its own light-on-dark variant, and
     putting that white artwork on a white plate makes it disappear. */
  picture .brand-logo { background: none; padding: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.seg-icon { width: 1em; height: 1em; flex: none; display: block; }

/* --- named outputs ------------------------------------------------------ */

.outputs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0.9rem 0 1rem;
}
.outputs-title {
  font: 700 0.75rem/1.4 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.outputs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.outputs .small { margin: 0.6rem 0 0; }
.output-download { color: var(--ink-soft); font-size: 0.9rem; }

/* A generated document is read as a block, not as prose. */
.turn-body pre, .doc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  overflow-x: auto;
}

/* --- co-brand in the top bar -------------------------------------------- */

/* The brand normally pushes the nav right. When a second mark sits beside it,
   that job moves to the co-brand so the two stay together on the left. */
.site-header.has-cobrand .brand { margin-right: 0; }

.cobrand-rule {
  width: 1px;
  height: 1.7rem;
  align-self: center;
  margin: 0 0.15rem;
  background: var(--line);
  flex: none;
}

.cobrand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  flex: none;
}
.cobrand img {
  /* Secondary to the 2nd Innings mark, not level with it. */
  height: 1.25rem;
  width: auto;
  display: block;
}

@media (prefers-color-scheme: dark) {
  /* The supplied mark is dark-on-transparent, so give it a light plate. */
  .cobrand img {
    background: #fff;
    border-radius: 5px;
    padding: 3px 6px;
  }
}

@media (max-width: 34rem) {
  /* The header wraps at this width, so the two marks stack and a vertical
     rule between them would float beside nothing. Free the space the tagline
     was using so they stay on one line for as long as possible. */
  .cobrand-rule { display: none; }
  .cobrand img { height: 1.05rem; }
  .brand-text small { display: none; }
  .wordmark { width: 2.1rem; height: 2.1rem; }
}

/* --- supplied logo ------------------------------------------------------ */

/* A logo that carries its own wordmark stands alone: no brand text beside it.
   The README for the 2nd Innings pack asks for ~44px and clear space of at
   least the height of the gold dot, which this spacing gives. */
.brand-logo-only { gap: 0; padding: 0.25rem 0; }
.brand-logo-only .brand-logo {
  /* Overridable per app with `logo.navHeight`: a tall or square mark needs
     more height than a wide wordmark to read at the same size. */
  height: var(--brand-logo-height, 2.75rem);
  width: auto;
  max-width: min(17rem, 56vw);
  object-fit: contain;
  display: block;
}
.brand-logo-only picture { display: block; }

@media (max-width: 34rem) {
  .brand-logo-only .brand-logo { height: calc(var(--brand-logo-height, 2.75rem) * 0.82); }
}

/* --- event blocks ------------------------------------------------------- */
/* Added for the expo site: a film hero, tag pills, a date block, a poster
   grid, partner logo cards, a contact row and the "who are you" chooser.
   Every one of them is inert on apps that do not use the block. */

/* A film above the hero copy. Muted and looping until someone asks for
   sound, at which point expo.js turns on native controls. */
.hero-film { position: relative; background: #000; }
.hero-film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  object-fit: cover;
  background: #000;
}
.hero-film-on.sound-on .hero-film video { max-height: 82vh; object-fit: contain; }
.sound-btn {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  right: 0.9rem;
  font: 600 0.9375rem/1.2 var(--font);
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}
.sound-btn:hover { background: #fff; color: #000; border-color: #fff; }
.sound-on .sound-btn { display: none; }
/* With a film, the hero's own top padding would show as a band of brand
   colour above the video. Drop it and let the film butt up to the header,
   then give the copy below its own breathing room. */
.hero-film-on { padding-top: 0; }
.hero-film-on > .wrap { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.hero-meta {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--accent-light, var(--hero-ink-soft));
}

/* Tag pills, with an optional countdown beside them. */
.pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  align-items: center;
}
.count {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-weight: 700;
  margin: 0;
  font-size: 1.25rem;
}
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pills li {
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.hero .pills li, .band.tone-dark .pills li {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--hero-ink);
}

/* The three days of the expo, plus an optional anniversary badge. */
.dates-row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; margin: 1.4rem 0; }
.dates { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.dates li {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  width: 5.4rem;
  text-align: center;
  overflow: hidden;
}
.date-day { display: block; font-size: 2rem; font-weight: 800; line-height: 1.5; }
.date-dow {
  display: block;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 2;
  font-weight: 700;
}
.date-badge { height: 7rem; width: auto; }

/* Posters: an image and a visible text label inside one download link. */
.posters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.posters a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.posters a:hover { border-color: var(--brand); }
.posters img { display: block; width: 100%; height: auto; }
.poster-label {
  display: block;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Partner and organiser cards. */
.orgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.org-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.org-logos { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.org-logos img { height: 4.5rem; width: auto; background: #fff; border-radius: 4px; }
.org-logos img.wide { height: 3.4rem; }

/* Contact row. */
.contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.contact-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.contact-line { margin: 0 0 0.3rem; }
.contact-line a { font-weight: 700; font-size: 1.0625rem; }

/* The "who are you" chooser on the front door. */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.choice .actions { margin: 1rem 0 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.9375rem; }

@media (max-width: 40rem) {
  .dates li { width: 4.4rem; }
  .date-day { font-size: 1.5rem; }
  .date-badge { height: 5rem; }
  .hero-film video { max-height: 44vh; }
}

/* --- the family strip --------------------------------------------------- */
/* A thin row above the header linking the moneypal.mp sites to each other.
   Plain links; the current site is a <span aria-current>, not a link to
   itself. Suppressed with `family: false` in an app's config. */
.family-bar {
  background: var(--brand-dark, var(--brand));
  color: #fff;
  font-size: 0.8125rem;
}
.family-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.4rem 0;
}
.family-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  opacity: 0.75;
}
.family-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.family-nav a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.1rem 0;
}
.family-nav a:hover { border-bottom-color: #fff; }
.family-nav a:focus-visible { outline: 3px solid var(--accent-light, #fff); outline-offset: 2px; }
.family-here {
  font-weight: 700;
  border-bottom: 2px solid var(--accent-light, var(--accent));
  padding: 0.1rem 0;
}

@media (max-width: 34rem) {
  .family-label { width: 100%; }
}

/* --- the language switcher ----------------------------------------------- */
/* Opt-in via `config.languages`: one thin row above the header, one plain
   link per edition of the site. Same structure as the family strip above,
   on its own class so an app can show both, or either, independently. */
.language-bar {
  background: var(--brand-dark, var(--brand));
  color: #fff;
  font-size: 0.8125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.language-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.4rem 0;
}
.language-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  opacity: 0.75;
}
.language-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.language-nav a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.1rem 0;
}
.language-nav a:hover { border-bottom-color: #fff; }
.language-nav a:focus-visible { outline: 3px solid var(--accent-light, #fff); outline-offset: 2px; }
.language-here {
  font-weight: 700;
  border-bottom: 2px solid var(--accent-light, var(--accent));
  padding: 0.1rem 0;
}

@media (max-width: 34rem) {
  .language-label { width: 100%; }
}