/* ============================================================
   site.css — shared chrome (menu, header accent, footer)
   Single source of truth for how the navigation and footer LOOK.
   Edit menu ITEMS in site.js; edit menu/footer STYLING here.

   Loaded after each page's inline <style>, so these rules govern
   the chrome consistently across every page. Every colour carries a
   literal fallback before its var() so that very old Safari
   (pre-iOS 9.3, no CSS custom properties) still renders backgrounds.
   ============================================================ */

/* ---- header logo row ----
   Uses inline-block + margins (not flex `gap`, unsupported on old Safari)
   so the logos always sit in a row and wrap rather than stacking. */
.site-logos{ margin-bottom:14px; }
.site-logos > .site-logo,
.site-logos > .site-logo-dark{
  display:inline-block;vertical-align:middle;margin:0 22px 6px 0;
}
.site-logos .site-logo{width:auto;}
.site-logos > .site-logo-dark{
  background:#0A3739;background:var(--teal-deep);
  border-radius:9px;padding:8px 13px;
}
.site-logos .site-logo-dark .site-logo{display:block;margin:0;}

/* ---- section navigation: labelled groups, each title stacked above its pills ----
   Block + inline-block + margins (not flex `gap`) so pill spacing survives on
   old Safari and overrides any legacy inline flex rules left in a page. */
.usecases{
  margin:24px 0 4px;
  padding-top:18px;
  border-top:1px solid rgba(21,24,30,0.09);
  border-top:1px solid var(--line-soft);
  display:block;
}
.usecases .uc-group{ display:block;width:100%;margin-bottom:15px; }
.usecases .uc-group:last-child{ margin-bottom:0; }
.usecases .uc-label{
  display:block;margin-bottom:8px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;font-weight:600;
  color:#6B7280;color:var(--ink-faint);
}
.usecases .uc-links{ display:block; }
.usecases a{
  display:inline-block;vertical-align:middle;margin:0 7px 7px 0;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:0.01em;
  text-decoration:none;border-radius:999px;padding:5px 13px;line-height:1.4;white-space:nowrap;
  color:#0A3739;color:var(--teal-deep);
  background:#EEEADF;background:var(--paper-2);
  border:1px solid rgba(21,24,30,0.16);border:1px solid var(--line);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.usecases a:hover{
  color:#F6F3EC;
  background:#0E4C4F;background:var(--teal);
  border-color:#0E4C4F;border-color:var(--teal);
}
.usecases a.active{
  color:#F6F3EC;background:#0E4C4F;border-color:#0E4C4F;
  cursor:default;pointer-events:none;
}
.usecases .uc-home{border-color:#A9761F;color:#6E4A12;}
.usecases .uc-home:hover{background:#A9761F;border-color:#A9761F;color:#F6F3EC;}
.usecases .uc-home.active{background:#A9761F;border-color:#A9761F;color:#F6F3EC;cursor:default;pointer-events:none;}

@media print{ .usecases a{background:transparent;color:#0A3739;color:var(--teal-deep);} }

/* ---- masthead accent rule (flex-free: fixed-width inline-block segments) ---- */
.accent-rule{height:4px;width:72px;margin-top:18px;border-radius:2px;overflow:hidden;font-size:0;}
.accent-rule span{display:inline-block;vertical-align:top;width:24px;height:4px;}
.accent-rule .a{background:#0E4C4F;background:var(--teal);}
.accent-rule .b{background:#284A63;background:var(--slate);}
.accent-rule .c{background:#A9761F;background:var(--brass);}

/* ---- footer ---- */
.footer{
  margin-top:38px;padding-top:14px;
  border-top:1.5px solid #15181E;border-top:1.5px solid var(--ink);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:0.06em;
  text-align:left;line-height:1.5;
  color:#6B7280;color:var(--ink-faint);
}
.footer .marks span{color:#0E4C4F;color:var(--teal);font-weight:600;}