/* ============================================================================
   SITE CHROME — util bar, header (topnav), footer.
   Mounted client-side by site/assets/js/partials.js mountChrome(<page>)
   into #util-mount / #header-mount / #footer-mount (empty in the served HTML).
   All classes are FIM-namespaced (.fim-*) and use the design-system tokens so
   the chrome inherits the light cream / teal register and the dark toggle.
   Authored 2026-07-06 with the JS chrome port (partials.js/app.js were never
   ported during the FE clone; see FIM-RUNBOOK ## FIM front-end architecture).
   ========================================================================== */
.fim-wrap{
  max-width:1400px; margin-inline:auto;
  padding-inline:var(--space-6);
  display:flex; align-items:center; gap:var(--space-6);
}

/* --- utility bar (theme toggle) ------------------------------------------- */
.fim-util{
  background:var(--color-surface-offset, var(--panel2));
  border-bottom:1px solid var(--line);
  font-size:var(--text-xs);
}
.fim-util .fim-wrap{ height:36px; justify-content:space-between; }
.fim-util-brand{
  font-family:var(--font-mono); letter-spacing:.06em;
  color:var(--faint); text-transform:none;
}
.fim-themebar{ display:flex; align-items:center; gap:var(--space-2); }
.fim-themebar-lbl{
  font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}
.fim-themebar-opts{
  display:flex; border:1px solid var(--line); border-radius:var(--radius-full);
  overflow:hidden;
}
.fim-themebar-opts button{
  font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  border:0; background:transparent; color:var(--muted);
  padding:3px 12px; transition:background .15s, color .15s;
}
.fim-themebar-opts button.on{ background:var(--color-primary); color:#fff; }

/* --- header / topnav ------------------------------------------------------ */
header.fim-site{
  background:var(--color-surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
header.fim-site .fim-wrap{ height:61px; gap:var(--space-6); }
.fim-logo{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  color:var(--ink); white-space:nowrap; text-decoration:none; line-height:1.05;
}
.fim-logo b{ color:var(--color-primary); }
.fim-logo small{
  display:block; font-size:9.5px; letter-spacing:.18em; font-weight:600;
  color:var(--faint); font-family:var(--font-mono); margin-top:1px;
}
nav.fim-main{ display:flex; gap:2px; flex:1; flex-wrap:wrap; }
nav.fim-main a{
  padding:8px 11px; border-radius:var(--radius-sm); font-size:var(--text-sm);
  color:var(--muted); font-weight:600; text-decoration:none;
  transition:background .15s, color .15s;
}
nav.fim-main a:hover,
nav.fim-main a.active{ background:var(--color-surface-dynamic); color:var(--color-primary); }

/* mobile nav toggle (hidden by default; shown < 860px) */
.fim-nav-toggle{ display:none; }
.fim-nav-toggle-label{ display:none; flex-direction:column; gap:4px; cursor:pointer; padding:6px; }
.fim-nav-toggle-label span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* --- footer --------------------------------------------------------------- */
footer.fim-site-foot{
  background:var(--color-surface-offset, var(--panel2));
  border-top:1px solid var(--line); margin-top:var(--space-12);
  padding:var(--space-8) 0; font-size:var(--text-sm); color:var(--muted);
}
footer.fim-site-foot .fim-wrap{ display:block; }
.fim-foot-cols{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-6);
}
.fim-foot-logo{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:16px; }
.fim-foot-logo b{ color:var(--color-primary); }
.fim-foot-blurb{ opacity:.85; margin-top:var(--space-2); max-width:320px; }
.fim-foot-cols h5{
  font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:var(--space-2);
}
.fim-foot-cols a{
  color:var(--muted); text-decoration:none; display:block; padding:3px 0;
}
.fim-foot-cols a:hover{ color:var(--color-primary); }
.fim-foot-note{
  margin-top:var(--space-6); padding-top:var(--space-4);
  border-top:1px solid var(--line-soft, var(--line));
  font-size:var(--text-xs); color:var(--faint); line-height:1.5; max-width:820px;
}
.fim-foot-entity{ font-size:12px; opacity:0.8; margin-top:8px; }
.fim-foot-copyright{ font-size:12px; opacity:0.8; margin-top:8px; }
.fim-foot-powered{ margin-top:var(--space-3); font-size:var(--text-xs); }
.fim-foot-powered a{ color:var(--faint); text-decoration:none; }
.fim-foot-powered a:hover{ color:var(--color-primary); }

/* --- chrome responsive ---------------------------------------------------- */
@media (max-width:860px){
  nav.fim-main{
    display:none; position:fixed; top:61px; left:0; right:0;
    flex-direction:column; background:var(--color-surface);
    border-bottom:1px solid var(--line); padding:var(--space-2) var(--space-4);
    z-index:59;
  }
  .fim-nav-toggle:checked ~ nav.fim-main{ display:flex; }
  .fim-nav-toggle-label{ display:flex; margin-left:auto; }
  .fim-foot-cols{ grid-template-columns:1fr 1fr; }
}
@media print{
  .fim-util, header.fim-site, footer.fim-site-foot{ display:none !important; }
}