/* ── Batman4NY console — shared styles across all pages ─────────────── */
:root{
  color-scheme: light;
  /* Metallic paper palette */
  --paper:      #d0ccbf;
  --paper-hi:   #d8d3c5;
  --paper-lo:   #beb9aa;
  --paper-x:    #a29c8b;

  --ink:        #1a1813;
  --ink-2:      #34302a;
  --ink-3:      #64604f;
  --faint:      #948e7d;
  --muted:      #726a55;

  --rule:       #a8a288;
  --rule-str:   #7f7961;

  --bg:         var(--paper);
  /* Sidebar tones map to paper so the light metallic aesthetic
     carries through the shell without hunting every .side rule. */
  --side:       var(--paper);
  --side-2:     var(--paper-hi);

  /* Accents retuned deeper for light bg */
  --cyan:       #0e5a80;
  --cyan-hi:    #1370a0;
  --cyan-lo:    #7a9db2;
  --cyan-tint:  rgba(14,90,128, .08);
  --cyan-glow:  rgba(14,90,128, .18);

  --green:      #4a6f18;
  --green-hi:   #5e8a1e;
  --green-lo:   #a8b585;
  --green-tint: rgba(74,111,24, .08);
  --green-glow: rgba(74,111,24, .18);

  --amber:      #8a4a08;
  --amber-hi:   #a55a10;
  --amber-line: rgba(138,74,8, .35);
  --amber-tint: rgba(138,74,8, .06);

  --red:        #9a2b12;
  --red-tint:   rgba(154,43,18, .08);
  --violet:     #6a4a95;
  --danger:     var(--red);

  /* Type stacks — serif for editorial headings, sans body, mono labels */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);height:100%}
body{
  margin:0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "ss01" 1;
  /* Metallic paper grain */
  background-image:
    radial-gradient(rgba(70,68,60,.06) 1px, transparent 1.5px),
    radial-gradient(rgba(90,88,80,.04) 1px, transparent 2px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 3px;
}
::selection{background:rgba(14,90,128,.28);color:var(--ink)}
a{color:var(--cyan);text-decoration:none;transition:color .16s ease}
a:hover{color:var(--cyan-hi)}
.mono{font-family: var(--mono)}

/* ── shell ─────────────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

/* ── sidebar ────────────────────────────────────────────────────────── */
.side{
  width:262px;flex-shrink:0;
  background: var(--side);
  color: var(--ink-2);
  border-right: 1px solid var(--rule-str);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.10);
}
.brand{padding: 24px 22px 4px;display:flex;align-items:center;gap:13px}
.brand a{
  display:flex;align-items:center;gap:13px;
  color:var(--ink);text-decoration:none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.01em;
}
.brand .mark{
  width:32px;height:12px;color:var(--cyan);flex-shrink:0;
}
.brand .mark svg{display:block;width:100%;height:100%}
.brand .wm{
  font-family: var(--serif);
  font-size: 23px;font-weight: 700;letter-spacing: -.01em;color: var(--ink);
  text-transform: none;line-height: 1;
}
.brand-role{
  padding: 0 22px 18px;
  font-family: var(--mono);
  font-size: 11.5px;color: var(--ink-2);letter-spacing: .04em;font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-role b{color:var(--ink);font-weight:800}

.nav{padding: 8px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav .sec{
  font-family: var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);padding:20px 4px 8px;font-weight:800;
}

/* Collapsible group using <details> */
.nav-group{margin: 0 0 4px}
.nav-group > summary{
  list-style: none;
  display:flex;align-items:center;gap:12px;
  padding: 10px 12px;border-radius: 6px;
  font-family: var(--mono);
  color: var(--ink-2);font-weight: 800;font-size: 11px;letter-spacing: .2em;
  text-transform: uppercase;cursor: pointer;transition: .14s;
  border-left: 2.5px solid transparent;
}
.nav-group > summary::-webkit-details-marker{display:none}
.nav-group > summary::marker{content:""}
.nav-group > summary::after{
  content: "";margin-left:auto;
  width: 0;height: 0;border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform .16s ease;
}
.nav-group[open] > summary::after{transform: rotate(90deg)}
.nav-group > summary:hover{color: var(--ink)}
.nav-group > .sub-links{
  padding: 4px 0 6px 12px;display:flex;flex-direction:column;gap:2px;
}
.nav-group .sub-link{
  display:flex;align-items:center;gap:10px;
  padding: 7px 12px;border-radius: 4px;
  color: var(--ink-2);font-weight: 500;font-size: 13.5px;
  border-left: 2px solid transparent;transition: .14s;
  text-decoration: none;letter-spacing:-.005em;
}
.nav-group .sub-link:hover{background: var(--paper-hi);color: var(--ink);text-decoration:none}
.nav-group .sub-link.active{color:var(--ink);font-weight:700;border-left-color:var(--cyan);background:var(--paper-hi)}
.nav-group .sub-link .live{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px var(--green-glow);
  margin-left:auto;flex-shrink:0;
  animation:pulse 2.6s ease-in-out infinite;
}

.navlink{
  display:flex;align-items:center;gap:12px;
  padding: 10px 12px;border-radius: 6px;
  color: var(--ink);font-weight: 500;font-size: 14.5px;
  border-left: 3px solid transparent;transition: .14s;
  text-decoration: none;
}
.navlink svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.navlink:hover{background: var(--paper-hi);color: var(--ink);text-decoration:none}
.navlink.active{
  background: var(--paper-hi);color: var(--ink);
  font-weight: 700;
  border-left: 3px solid var(--cyan);
}
.navlink.active svg{color:var(--cyan);opacity:1}
.navlink .cnt{
  margin-left:auto;
  font-family: var(--mono);
  font-size:10.5px;font-weight:700;color:var(--ink-3);
  padding: 2px 7px;background:var(--paper-lo);border-radius:10px;line-height:1;
}
.navlink.active .cnt{color:var(--cyan);background:var(--cyan-tint)}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

.side .foot{
  padding: 16px 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;color: var(--ink-2);letter-spacing: .04em;
}
.side .foot .row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:6px;
  font-size:11.5px;color:var(--ink-2);font-weight:500;
}
.side .foot .row b{color:var(--ink);font-weight:800}
.side .foot .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px var(--green-glow);margin-right:6px;
  animation:pulse 2.6s ease-in-out infinite;
}
.side .foot .live-t{
  color:var(--green);
  font-size:11px;letter-spacing:.16em;font-weight:800;
  text-transform:uppercase;
}

/* ── main ─────────────────────────────────────────────────────────── */
main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:5;
  background: rgba(208,204,191, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  padding: 16px 34px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.crumb{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;
}
.crumb b{color:var(--ink);font-weight:700}
.crumb .sep{color:var(--faint);margin:0 8px}
.crumb .path{color:var(--muted);font-size:11.5px}
.topbar .status{
  margin-left:auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  display:inline-flex;gap:12px;align-items:baseline;
}
.topbar .status b{color:var(--ink);font-weight:700}
.topbar .status .sep{color:var(--faint)}

.content{padding: 32px 34px 84px;max-width: 1120px}

/* ── section header (used on all pages) ──────────────────────────── */
.sec-head{
  display:flex;align-items:baseline;gap:16px;margin: 44px 0 20px;
  padding-top: 12px;
  border-top: 2px solid var(--rule-str);
}
.sec-head:first-child, .content > .sec-head:first-child{margin-top:0}
.sec-head .eyebrow{
  font-family: var(--mono);
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);font-weight:800;
}
.sec-head .eyebrow.g{color:var(--green)}
.sec-head .eyebrow.a{color:var(--amber)}
.sec-head .eyebrow.d{color:var(--danger)}
.sec-head .eyebrow.m{color:var(--ink-3)}
.sec-head .t{
  font-family: var(--serif);
  font-size:34px;font-weight:700;letter-spacing:-.018em;line-height:1.15;color:var(--ink);
}
.sec-head .r{
  flex:1;height:1px;background: linear-gradient(90deg, var(--rule) 0, transparent 100%);
}
.sec-head .x{
  font-family: var(--mono);
  font-size:11px;color:var(--ink-3);letter-spacing:.04em;
}
.sec-head .x b{color:var(--ink);font-weight:700}

/* ── data table (used on repos, docs, services) ──────────────────── */
.tbl{
  width:100%;border-collapse:collapse;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.tbl th{
  text-align:left;
  padding: 12px 18px 10px;
  background: var(--paper-hi);
  border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.tbl td{
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size:13.5px;color:var(--ink-2);vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--paper-hi)}
.tbl td.title{color:var(--ink);font-weight:600;font-size:14.5px}
.tbl td.title .sub{color:var(--ink-3);font-weight:400;font-size:12px;display:block;margin-top:2px;letter-spacing:-.004em}
.tbl td.mono, .tbl td .mono{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size:12px;color:var(--ink-2);letter-spacing:.005em;
}
.tbl td a{color:var(--cyan)}
.tbl td a:hover{color:var(--cyan-hi)}
.tbl td .arr{color:var(--ink-3);transition:transform .16s ease;margin-left:4px}
.tbl td a:hover .arr{transform:translateX(2px);color:var(--cyan-hi)}

/* ── status pill (used on tables + status indicators) ────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2.5px 9px;border-radius:20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size:10px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;
  line-height:1;
}
.pill.live{color:var(--green);background:var(--green-tint);border:1px solid var(--green-lo)}
.pill.live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px var(--green-glow);
  animation:pulse 2.6s ease-in-out infinite;
}
.pill.pub{color:var(--cyan);background:var(--cyan-tint);border:1px solid var(--cyan-lo)}
.pill.oss{color:var(--ink-2);background:var(--paper-hi);border:1px solid var(--rule-str)}
.pill.doc{color:var(--ink-3);background:var(--paper-lo);border:1px solid var(--rule)}

/* ── notice (disclaimer) ─────────────────────────────────────────── */
.notice{
  background: var(--amber-tint);
  border: 1px solid var(--amber-line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 18px 22px 20px;
}
.notice-title{
  font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.008em;
}
.notice-body{
  font-size:13px;line-height:1.6;color:var(--ink-2);margin:0;max-width:82ch;
}
.notice-body b{color:var(--ink);font-weight:600}

/* ── responsive ──────────────────────────────────────────────────── */
@media(max-width:820px){
  .app{flex-direction:column}
  .side{
    width:100%;height:auto;position:static;flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid #000;overflow-x:auto;padding:0;
  }
  .brand{padding:14px 20px;flex-shrink:0}
  .brand-role,.side .foot,.nav .sec,.nav-group{display:none}
  .nav{flex-direction:row;padding:8px;flex-shrink:0}
  .navlink{border-left:0;border-bottom:2.5px solid transparent;white-space:nowrap}
  .navlink.active{border-left:0;border-bottom-color:var(--cyan)}
  .navlink .cnt{display:none}
  .content{padding:22px 22px 60px}
  .topbar{padding:12px 22px}
}

/* ─── MATTE + TYPE-BUMP (2026-07-09, amplified) ─────────────────────
   Kill glossy gradients + shadows + hover-lifts, sharpen card corners
   for cardstock feel, and bump prose type meaningfully (15→17px).
   Palette tokens untouched. To revert: delete this block. */

/* ── kill EVERY card gradient (flatten to a single paper tone) ────── */
.repo-head, .guide-head, .saf-banner, .agent-head,
.hero-block, .about-card, .disc-body, .thesis,
.tier, .tier.next, .c3-companion, .saif, .agent-panel,
.zone, .zone.cisco, .zone.nvidia, .zone.oci, .zone.github,
.zone.home, .zone.users, .topo{
  background-image: none !important;
}
.repo-head, .guide-head, .saf-banner, .agent-head{
  background-color: var(--paper-hi) !important;
}
.tier.next{ background-color: var(--paper) !important; }

/* Topology zones: keep the semantic color as a flat tint, drop the fade */
.zone.cisco   { background-color: #049fd90d !important; }
.zone.nvidia  { background-color: #76b9000d !important; }
.zone.oci     { background-color: #c05a260d !important; }
.zone.github  { background-color: #99a2ac0d !important; }
.zone.home    { background-color: #d977060d !important; }
.zone.users   { background-color: #7f5abf0d !important; }

/* SAIF status layers: retain semantic tint but drop the fade */
.saif-layer.hit{ background-color: var(--green-tint) !important; background-image: none !important; }
.saif-layer.adj{ background-color: var(--cyan-tint)  !important; background-image: none !important; }

/* ── kill non-focus, non-modal shadows ────────────────────────────── */
.side{ box-shadow: inset -1px 0 0 rgba(0,0,0,.10) !important; }
.hero-block, .repo, .guide, .about-card, .disc-body,
.thesis, .c3-companion, .saif, .agent-panel, .tier,
.notice, .close, .zone, .topo{ box-shadow: none !important; }

/* ── editorial serif for hero heading (index.html) ───────────────── */
.hero-block h1{
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.08 !important;
}

/* ── sharper card corners (cardstock feel, not rounded plastic) ──── */
.hero-block, .about-card, .disc-body, .thesis,
.repo, .guide, .repo-summary, .lib-summary, .tier,
.c3-companion, .close, .saif, .agent-panel, .tbl,
.notice, .zone, .topo{ border-radius: 6px !important; }
.saf-stack{ border-radius: 6px !important; }

/* ── prose type BUMP (undeniably visible: 15→17, 16.5→19) ────────── */
.prose-block p        { font-size: 17px   !important; line-height: 1.72 !important; }
.hero-block .lede     { font-size: 19px   !important; line-height: 1.55 !important; }
.about-bio p          { font-size: 17px   !important; line-height: 1.72 !important; }
.disc-body p          { font-size: 17px   !important; line-height: 1.7  !important; }
.guide-head .desc,
.repo-head  .desc     { font-size: 16px   !important; line-height: 1.6  !important; }
.live-intro,
.adj-intro,
.ref-intro            { font-size: 16.5px !important; line-height: 1.7  !important; }
.about-contact .v     { font-size: 14.5px !important; }
.colophon             { font-size: 12.5px !important; }
/* — end MATTE + TYPE-BUMP — */

/* ─── PILL CONTRAST FIX (2026-07-09) ─────────────────────────────────
   Saturated bg + white/paper text for readability on the metallic-paper
   light palette. Overrides low-contrast tinted pills from the earlier
   dark-mode design (light-tint bg + accent-color text read as
   light-on-light on this palette).

   Pattern:
     LIVE / Complete   -> --green    bg, #fff text
     WIP / Adjacent    -> --amber    bg, #fff text
     Planned / Plan    -> --ink-2    bg, --paper text
     Draft             -> --ink-3    bg, --paper text
     Public / Docs /
       OSS / Priv      -> --ink-2    bg, --paper text
     Sidebar count     -> --ink-2    bg, --paper text (cyan when active)

   Palette tokens untouched. To revert: delete this block.
   ────────────────────────────────────────────────────────────────── */

/* ── status pills ─────────────────────────────────────────────────── */
.pill.live,
.badge.live,
.node .name .badge.live,
.saif-status.impl {
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
  font-weight: 700;
}
.pill.live::before,
.saif-status.impl::before {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

.pill.complete {
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
  font-weight: 700;
}

.pill.wip,
.badge.wip,
.node .name .badge.wip,
.saif-status.adj,
.saif-wrap-status.wip {
  background: var(--amber);
  color: #fff;
  border: 1px solid var(--amber);
  font-weight: 700;
}

.pill.plan,
.badge.plan,
.node .name .badge.plan,
.saif-status.planned,
.saif-status.plan {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  font-weight: 700;
}

.pill.draft {
  background: var(--ink-3);
  color: var(--paper);
  border: 1px solid var(--ink-3);
  font-weight: 700;
}

/* Partial: green family, slightly muted vs. LIVE */
.saif-status.part,
.saif-wrap-status.part {
  background: var(--green-hi);
  color: #fff;
  border: 1px solid var(--green-hi);
  opacity: 1;
  font-weight: 700;
}
.saif-status.part::before {
  color: #fff;
}

/* Neutral pills (Public / Docs / OSS / Priv) — dark neutral bg */
.pill.pub,
.pill.doc,
.pill.priv,
.pill.oss,
.saif-wrap-status {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--ink-2);
  font-weight: 700;
}

/* Sidebar count pills */
.navlink .cnt {
  background: var(--ink-2);
  color: var(--paper);
  font-weight: 700;
}
.navlink.active .cnt {
  background: var(--cyan);
  color: #fff;
}
/* — end PILL CONTRAST FIX — */