/* ============================================================================
   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}

/* 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:20px;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.75rem;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}

/* 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:2.5rem 0}
h2{font-size:1.45rem;font-weight:400;letter-spacing:-.015em;margin:0 0 .85rem;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.1rem;font-weight:400;margin:0 0 .45rem}
p{margin:0 0 1.1rem;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:has(.client-link) .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{font-family:var(--ffmg-font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ffmg-faint);margin-bottom:.2rem}
.link-tile .lt-name{font-weight:400;color:var(--ffmg-purple)}
table{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}
.field-hint{font-size:.82rem;color:var(--ffmg-faint);font-style:italic;margin:.2rem 0 0;max-width:var(--measure)}