/* ============================================================================
   Firefly x Mangrove (FFxMG) shared brand stylesheet.
   Linked by every FFxMG template (page, page-internal) so the co-brand header
   and all components are defined ONCE. Internal vs client = which markup a
   template includes (e.g. .internal-banner), not a different stylesheet.
   Brand source of truth: ../../docs/brand/firefly-mangrove.md

   FONT WEIGHTS: Firefly's Stabil Grotesk ships only Light (300) + Regular (400)
   and Monosten only Regular (400) — there is NO bold face. So headings and
   labels are weight 400 (matching the Firefly proposal deck); asking for 700
   would force an off-brand synthetic bold. Do not "bolden" past what the real
   faces provide.

   Fonts are self-hosted .woff2. Each @font-face lists TWO paths: ../fonts/
   (works when served, where templates live in /brand/<token>/ and fonts in
   /brand/fonts/) and fonts/ (works when a template is opened as a local file,
   with a fonts/ subdir alongside it). The browser uses whichever resolves.
   ============================================================================ */

/* ../../docs/brand/firefly-mangrove-tokens.css :root block — keep in sync */
:root {
  --measure:38em;   /* one reading measure for prose + callouts; tables/grids stay full width */

  --ffmg-yellow: #FFC817; --ffmg-purple: #868BFC; --ffmg-orange: #FF661F;
  --ffmg-accent-soft: #EDEBFF;
  --ffmg-ink: #141414; --ffmg-muted: #565A61; --ffmg-faint: #63676E;
  --ffmg-border: #E3E3E3; --ffmg-border-strong: #CFCFCF;
  --ffmg-ground: #FFFFFF; --ffmg-panel: #F6F6F6;
  --ffmg-internal-ground: #FEFDF8; /* internal pages only — very faint warm tint (matched to the Mangrove page tint) */
  --ffmg-font-body: "Stabil Grotesk", "Instrument Sans", system-ui, sans-serif;
  --ffmg-font-mono: "Monosten", "Space Mono", monospace;
}
/* Firefly brand fonts (self-hosted; dual path for served + local-file viewing) */
@font-face{font-family:'Stabil Grotesk';src:url('../fonts/StabilGrotesk-Regular.woff2') format('woff2'),url('fonts/StabilGrotesk-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Stabil Grotesk';src:url('../fonts/StabilGrotesk-Light.woff2') format('woff2'),url('fonts/StabilGrotesk-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Monosten';src:url('../fonts/monosten-regular.woff2') format('woff2'),url('fonts/monosten-regular.woff2') format('woff2');font-weight:400;font-display:swap}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ffmg-font-body);color:var(--ffmg-ink);background:var(--ffmg-ground);line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding:calc(1.5rem + 35px) 1.5rem 5rem}
/* Top padding reserves the internal banner's height (~35px) PLUS a 1.5rem comfortable gap, so the
   logo lockup sits at the same height with or without the banner (no jump), and the banner never
   crowds the logos. Internal pages drop the reserved 35px because the banner itself fills it. */
.internal-banner+.wrap{padding-top:1.5rem}

/* light-yellow internal banner — internal variants include the markup */
/* internal pages get a subtle tinted ground so they never read as the client version */
body.internal{background:var(--ffmg-internal-ground)}
/* sticky so the internal warning rides along on scroll, not just a one-time strip up top */
.internal-banner{position:sticky;top:0;z-index:50;background:#fbe7a8;color:#6b4e00;font-family:var(--ffmg-font-mono);font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.5rem 1rem;border-bottom:1px solid #e8c96a}
/* microsite nav — sits under the brandbar, above the ffrule */
.internal-nav{margin:0 0 2.6rem;font-family:var(--ffmg-font-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;display:flex;gap:1.4rem;flex-wrap:wrap}
.internal-nav a{color:var(--ffmg-muted);text-decoration:none;padding-bottom:.2rem;border-bottom:2px solid transparent}
.internal-nav a:hover{color:var(--ffmg-ink);border-bottom-color:var(--ffmg-border-strong)}
.internal-nav a.current{color:var(--ffmg-ink);border-bottom-color:var(--ffmg-orange)}
/* Dropdown group in the nav. The whole item is the trigger. The padding-bottom bridges the gap
   to the menu so the pointer can travel into it without the hover dropping. */
.nav-item{position:relative;display:inline-flex;align-items:center;padding-bottom:.55rem;margin-bottom:-.55rem}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{display:block}
.nav-caret{margin-left:.3rem;font-size:.6rem;color:var(--ffmg-border-strong)}
.nav-item:hover .nav-caret{color:var(--ffmg-orange)}
.nav-item.current .nav-page{color:var(--ffmg-ink);border-bottom-color:var(--ffmg-orange)}
.nav-menu{position:absolute;top:100%;left:0;z-index:40;display:none;min-width:230px;padding:.4rem;background:var(--ffmg-ground);border:1px solid var(--ffmg-border-strong);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.09);text-transform:none;letter-spacing:0}
.nav-menu a{display:block;font-family:var(--ffmg-font-body);font-size:.82rem;line-height:1.3;color:var(--ffmg-muted);text-decoration:none;padding:.3rem .5rem;border-radius:4px;border-bottom:0}
.nav-menu a:hover{color:var(--ffmg-ink);background:var(--ffmg-panel)}
.nav-menu a.current{color:var(--ffmg-ink);font-weight:600}
.nav-internal{margin-left:auto;color:var(--ffmg-purple)!important;border:1px solid var(--ffmg-border-strong);border-radius:4px;padding:.1rem .5rem!important;border-bottom-width:1px!important}
.nav-internal:hover{color:var(--ffmg-orange)!important;border-color:var(--ffmg-orange)}

/* co-brand header: Firefly x Mangrove, then client mark */
.brandbar{display:flex;align-items:flex-end;gap:14px;margin-bottom:0}
.brandbar .ffmark{height:32px;color:var(--ffmg-ink);display:inline-flex;align-items:center}
.brandbar .ffmark img{height:100%;width:auto;display:block}
.brandbar .mgmark{height:26px;color:var(--ffmg-ink);display:inline-flex;align-items:center}
.brandbar .mgmark img{height:100%;width:auto;display:block}
.brandbar .cross{font-family:var(--ffmg-font-mono);font-size:1rem;color:var(--ffmg-faint);line-height:1}
.brandbar .bdiv{width:1px;height:22px;background:var(--ffmg-border-strong)}
.brandbar .clientmark{height:28px;display:inline-flex;align-items:center}
.brandbar .clientmark img{height:100%;width:auto;display:block}
.brandbar .samplemark{font-family:var(--ffmg-font-mono);font-size:.8rem;font-weight:400;letter-spacing:.04em;color:var(--ffmg-faint);border:1px dashed var(--ffmg-border-strong);border-radius:5px;padding:.2rem .5rem}
.brandbar .doc-date{margin-left:auto;font-family:var(--ffmg-font-mono);font-size:.72rem;color:var(--ffmg-faint);letter-spacing:.02em;text-align:right;line-height:1.45}
.brandbar .doc-date .upd{display:block;font-size:.66rem;opacity:.8}

/* signature Firefly rule — brand yellow/orange/purple */
.ffrule{height:4px;border-radius:2px;margin:1.1rem 0 1.15rem;background:linear-gradient(90deg,var(--ffmg-yellow),var(--ffmg-orange) 55%,var(--ffmg-purple))}

.eyebrow{font-family:var(--ffmg-font-mono);font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ffmg-orange);margin:0 0 .35rem;max-width:none}

/* project card — yellow code badge is unmistakably Firefly */
.project-card{display:flex;align-items:flex-start;gap:1rem;background:var(--ffmg-panel);border:1px solid var(--ffmg-border);border-left:0;border-right:0;border-radius:0;padding:.9rem 1.5rem;margin:1.5rem -1.5rem 0}
.project-card .pc-code{flex:none;font-family:var(--ffmg-font-mono);font-size:.82rem;font-weight:400;letter-spacing:.03em;color:var(--ffmg-ink);background:var(--ffmg-yellow);border-radius:8px;padding:.5rem .65rem;line-height:1}
.project-card .pc-client{font-weight:400;font-size:1.1rem;color:var(--ffmg-ink);line-height:1.15}
.project-card .pc-line{font-size:.8rem;color:var(--ffmg-faint);margin-top:.15rem}

h1{font-size:2.3rem;font-weight:400;letter-spacing:-0.02em;line-height:1.08;margin:0 0 .55rem}
p.sub{color:var(--ffmg-muted);max-width:var(--measure);margin:0;font-size:1.15rem;line-height:1.5}
section{margin:3.25rem 0}
h2{font-size:1.4rem;font-weight:400;letter-spacing:-.015em;margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem}
h2::before{content:"";flex:none;width:1.5rem;height:3px;border-radius:2px;background:var(--ffmg-orange)}
h3{font-size:1.02rem;font-weight:400;color:var(--ffmg-ink);margin:2.1rem 0 .65rem}
h3:first-child{margin-top:0}
h2+h3{margin-top:.4rem}
p{margin:0 0 1.05rem;max-width:var(--measure)}
section ul,section ol{max-width:var(--measure);padding-left:1.35rem;margin:0 0 1.3rem}
section li{margin:0 0 .4rem}
section blockquote{max-width:var(--measure)}
a{color:var(--ffmg-ink);text-decoration:underline;text-decoration-color:var(--ffmg-purple);text-underline-offset:2px;font-weight:400}
a:hover{text-decoration-color:var(--ffmg-orange)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:0 0 1.5rem}
@media (max-width:600px){.two-col{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--ffmg-border);border-top:3px solid var(--ffmg-purple);border-radius:10px;padding:1.35rem 1.6rem}
.panel p:last-child{margin-bottom:0}

/* callouts — yellow (warm) default, .cool purple variant */
.callout{max-width:var(--measure);background:#fff6d6;border-left:3px solid var(--ffmg-yellow);border-radius:0 10px 10px 0;padding:1.1rem 1.35rem;margin:0 0 1.5rem}
.callout.cool{background:var(--ffmg-accent-soft);border-left-color:var(--ffmg-purple)}
.callout p:last-child{margin-bottom:0}

/* Client-facing space link — every INTERNAL overview must carry one near the top so the
   shareable client link is never buried. Points at the client token URL, not this internal page. */
/* Client-facing space link — plain linked text, right-aligned within the project-card bar. */
.project-card:has(.client-link){align-items:center}
.project-card .pc-row{display:flex;align-items:flex-start;gap:1rem;flex:1;min-width:0}
.client-link{margin-left:auto;flex:none;white-space:nowrap;font-family:var(--ffmg-font-mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ffmg-purple);text-decoration:underline;text-decoration-color:var(--ffmg-purple);text-underline-offset:3px}
.client-link:hover{color:var(--ffmg-orange);text-decoration-color:var(--ffmg-orange)}

ul.checklist{list-style:none;padding:0;margin:0 0 1rem 1.5rem}
ul.checklist li{position:relative;padding:.6rem 0 .6rem 1.6rem;border-bottom:1px solid var(--ffmg-border)}
ul.checklist li:last-child{border-bottom:none}
ul.checklist li::before{content:"";position:absolute;left:0;top:.95rem;width:.55rem;height:.55rem;border-radius:2px;background:var(--ffmg-purple)}

footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--ffmg-border);font-size:.82rem;color:var(--ffmg-faint)}
footer::before{content:"";display:block;width:3rem;height:3px;border-radius:2px;margin-bottom:1rem;background:linear-gradient(90deg,var(--ffmg-yellow),var(--ffmg-orange),var(--ffmg-purple))}

/* ===== project-overview components (firefly-mangrove-overview-*) ===== */
.meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:0 0 1rem}
@media (max-width:640px){.meta{grid-template-columns:1fr}}
.pm-card{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--ffmg-border);border-top:3px solid var(--ffmg-purple);border-radius:10px;padding:1rem 1.15rem}
.pm-card .avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--ffmg-accent-soft);border:1px solid #d7d5ff;display:flex;align-items:center;justify-content:center;font-family:var(--ffmg-font-mono);color:var(--ffmg-purple);font-size:1rem}
.pm-card .pm-name{font-size:1.05rem;font-weight:400;color:var(--ffmg-ink);line-height:1.2}
.pm-card .pm-role{font-family:var(--ffmg-font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ffmg-orange);margin:.15rem 0}
.pm-card .pm-email a{font-size:.85rem}
ul.team{list-style:none;padding:0;margin:0}
ul.team li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .1rem;border-bottom:1px solid var(--ffmg-border)}
ul.team li:last-child{border-bottom:none}
ul.team .role{color:var(--ffmg-faint);font-size:.85rem;white-space:nowrap}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem;margin:0 0 1rem}
.link-tile{display:block;background:#fff;border:1px solid var(--ffmg-border);border-radius:10px;padding:.85rem 1.05rem;text-decoration:none;color:var(--ffmg-ink);transition:box-shadow .2s ease,border-color .2s ease}
.link-tile:hover{box-shadow:0 4px 12px rgba(134,139,252,.18);border-color:#d7d5ff;color:var(--ffmg-ink)}
.link-tile .lt-label{display:block;font-family:var(--ffmg-font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ffmg-faint);margin-bottom:.2rem}
.link-list{display:flex;flex-direction:column;gap:.6rem;max-width:var(--measure);margin:0 0 1.3rem}
.link-tile .lt-name{font-weight:400;color:var(--ffmg-purple)}
table{margin:0 0 1.5rem;width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1rem}
th{text-align:left;font-family:var(--ffmg-font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ffmg-faint);font-weight:400;padding:.5rem .6rem;border-bottom:2px solid var(--ffmg-border)}
td{padding:.6rem .6rem;border-bottom:1px solid var(--ffmg-border);vertical-align:top}
tr:last-child td{border-bottom:none}
.who{display:block;font-size:.76rem;color:var(--ffmg-faint);margin-top:.15rem}
.field-hint{font-size:.83rem;color:var(--ffmg-faint);font-style:normal;max-width:var(--measure);margin:0 0 1.3rem;padding:.15rem 0 .15rem .8rem;border-left:2px solid var(--ffmg-border-strong)}

/* Project plan — status band, legend, phase cards */
.status-band{display:flex;gap:.7rem;align-items:flex-start;background:var(--ffmg-accent-soft);border:1px solid var(--ffmg-border);border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1rem;font-size:.9rem;line-height:1.55}
.status-band .dot{width:9px;height:9px;border-radius:50%;background:var(--ffmg-yellow);flex:none;margin-top:.4rem;box-shadow:0 0 0 3px color-mix(in srgb,var(--ffmg-yellow) 30%,transparent)}
.status-band b{font-weight:600;color:var(--ffmg-ink)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;margin:0 0 1.6rem;font-size:.8rem;color:var(--ffmg-faint)}
.pill{display:inline-block;font-family:var(--ffmg-font-mono);font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:.15rem .5rem;vertical-align:middle}
.pill.now{background:var(--ffmg-yellow);color:#3a2c00}
.pill.next{background:transparent;color:var(--ffmg-muted);box-shadow:inset 0 0 0 1px var(--ffmg-border-strong)}
.pill.scoped{background:var(--ffmg-accent-soft);color:var(--ffmg-purple);box-shadow:inset 0 0 0 1px var(--ffmg-purple)}
.phases{display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.5rem}
.phase{display:grid;grid-template-columns:32px 1fr;gap:.9rem;background:var(--ffmg-ground);border:1px solid var(--ffmg-border);border-radius:12px;padding:.95rem 1.1rem}
.phase.now{border-color:var(--ffmg-yellow);box-shadow:inset 0 0 0 1px var(--ffmg-yellow)}
.pnum{font-family:var(--ffmg-font-mono);font-weight:700;font-size:1.05rem;color:var(--ffmg-faint);line-height:1.25}
.phase.now .pnum{color:var(--ffmg-ink)}
.phead{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-bottom:.3rem}
.phead h3{font-size:1.02rem;margin:0;font-weight:600;letter-spacing:-.01em}
.pdate{font-family:var(--ffmg-font-mono);font-size:.64rem;color:var(--ffmg-faint);letter-spacing:.04em;text-transform:uppercase}
.phase p{margin:0;font-size:.9rem;color:var(--ffmg-muted);line-height:1.55;max-width:var(--measure)}
.pmile{margin-top:.55rem;font-size:.82rem;color:var(--ffmg-muted);border-top:1px dashed var(--ffmg-border);padding-top:.5rem;max-width:var(--measure)}
.pmile .mno{font-family:var(--ffmg-font-mono);font-size:.62rem;color:var(--ffmg-purple);font-weight:700;letter-spacing:.04em;margin-right:.4rem}
.pmile b{color:var(--ffmg-ink);font-weight:600}
@media(max-width:560px){.phase{grid-template-columns:24px 1fr;gap:.6rem;padding:.85rem .9rem}}

/* theme titles on the current-state and intake themes pages: larger with an accent bar, since the font has no bold weight */
body[data-page="know"] section h3,body[data-page="themes"] section h3{font-size:1.25rem;letter-spacing:-.012em;line-height:1.25;margin:2.4rem 0 .7rem;padding-left:.8rem;border-left:3px solid var(--ffmg-yellow)}
body[data-page="know"] section h3:first-of-type,body[data-page="themes"] section h3:first-of-type{margin-top:1.2rem}

/* small screens: keep the header, nav and tables inside the viewport */
@media (max-width:640px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .project-card{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
  .brandbar{flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
  .brandbar .doc-date{width:100%;margin-left:0;text-align:left}
  .internal-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem .6rem;font-size:.7rem;letter-spacing:.03em;margin-bottom:1.8rem}
  .internal-nav>a,.internal-nav>.nav-item{justify-self:start}
  .nav-item{padding-bottom:0;margin-bottom:0}
  .internal-nav>:nth-child(3n) .nav-menu{left:auto;right:0}
  .nav-menu{min-width:200px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  h1{font-size:1.9rem}
}

/* ---- Made for Good lockup (scaffold addition, 2026-10-19). Same FFxMG styling for now; no MFG style guide yet.
   Brand = Made for Good, a partnership between Firefly Partners and Mangrove Web, so both marks sit beside the wordmark. */
.brandbar .mfgmark{white-space:nowrap;font-family:var(--ffmg-font-body);font-weight:400;font-size:1.25rem;letter-spacing:-.01em;color:var(--ffmg-ink);line-height:1}
.partnership{margin:.5rem 0 0;font-family:var(--ffmg-font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ffmg-faint)}
.partnership+.ffrule{margin-top:.8rem}
.brandbar{flex-wrap:wrap;row-gap:.5rem}
.brandbar .samplemark{white-space:nowrap}

/* Made for Good lockup, stacked like madeforgood.tech: wordmark above the two marks. */
.brandbar.brandbar-mfg{display:block}
.brandbar-mfg .mfgmark{display:block;font-size:2rem;line-height:1.05;margin:0 0 .7rem;white-space:nowrap}
.brandbar-mfg .logo-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;row-gap:.5rem}
/* Both marks 26px tall, like madeforgood.tech. Alignment is by ink, not by box: the Mangrove wordmark's "g" descender
   fills its box bottom, so the arches sit about 5px above the box edge, while the Firefly "Partners" baseline sits
   about 1.6px above its box edge (the bee dips below the text). Measured in the browser at 26px. The Mangrove mark is
   pushed down 3.75px so the bottom of the arches lands on the Partners baseline. */
.brandbar-mfg .ffmark,.brandbar-mfg .mgmark{height:26px;margin:0}
.brandbar-mfg .mgmark{margin-bottom:-3.75px}
.brandbar-mfg .ffmark img,.brandbar-mfg .mgmark img{height:100%;width:auto;display:block}
.brandbar-mfg .cross,.brandbar-mfg .bdiv,.brandbar-mfg .samplemark,.brandbar-mfg .doc-date{align-self:center}
.brandbar-mfg .logo-row .doc-date{margin-left:auto}

/* Fill-in placeholders in template pages: subtle, italic, findable. Replace the whole span with real content. */
.fill{font-style:italic;color:var(--ffmg-muted);background:color-mix(in srgb,var(--ffmg-yellow) 16%,transparent);border-radius:3px;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
th .fill,.eyebrow .fill,.pill .fill{text-transform:none;letter-spacing:0}