/* ============================================================
   Pitvolt - Brand-guide shell
   Layout chrome for brand.pitvolt.com: top bar, sidebar,
   content column, specimen cards, chapter patterns.
   Tokens come from colors_and_type.css; components from
   atmospheric.css. No new colors, no new type.
   ============================================================ */

/* ---------- Top bar ---------- */
.gtop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border-subtle);
}
.gtop__inner {
  display: flex; align-items: center; gap: 12px;
  padding-block: 16px;
}
.gtop .wordmark { font-size: 22px; letter-spacing: -0.005em; }
.gtop__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  padding: 4px 10px;
}
.gtop__site {
  margin-left: auto;
  font-size: 0.9375rem; color: var(--text-muted); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--dur-hover) var(--ease-out);
}
.gtop__site:hover { color: var(--text-primary); }

/* ---------- Shell: sidebar + content ---------- */
.gshell {
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: var(--space-8);
  position: relative; z-index: 2;
}
.gside {
  position: sticky; top: 96px;
  display: grid; gap: 2px;
}
.gside__label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.gside a {
  font-size: 0.9375rem; color: var(--text-muted);
  padding: 9px 12px; margin-left: -12px; border-radius: var(--r-sm);
  transition: color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.gside a:hover { color: var(--text-primary); background: var(--glass-fill); }
.gside a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--glass-fill);
  box-shadow: inset 2px 0 0 var(--accent-primary);
}
.gmain { min-width: 0; }

/* ---------- Chapter header ---------- */
.ghead { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.ghead .t-eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.ghead .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-primary); box-shadow: 0 0 14px var(--accent-primary);
}
.ghead p { max-width: 60ch; color: var(--text-muted); margin: 0; }

/* ---------- Guide card grid (index) ---------- */
.ggrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5); margin-top: var(--space-7);
}
.gcard {
  display: grid; grid-template-rows: 160px auto;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass-fill);
  transition: border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
.gcard:hover { border-color: rgba(248,245,238,0.32); background: var(--glass-fill-bright); transform: translateY(-2px); }
.gcard__specimen {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(248,245,238,0.02), rgba(248,245,238,0) 70%);
}
.gcard__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.gcard__name {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.25rem; letter-spacing: -0.005em;
}
.gcard__name .arrow { float: right; opacity: .5; transition: opacity var(--dur-hover) var(--ease-out); }
.gcard:hover .gcard__name .arrow { opacity: 1; color: var(--accent-primary); }
.gcard__desc { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--space-2); line-height: 1.5; }

/* ---------- Chapter sections ---------- */
.gsec { margin-top: var(--space-9); }
.gsec > h2 { margin: 0 0 var(--space-2); }
.gsec > .sub { color: var(--text-muted); margin: 0 0 var(--space-6); max-width: 60ch; }
.glabel {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  display: block; margin: var(--space-6) 0 var(--space-4);
}

/* ---------- Rules: do / don't ---------- */
.grules { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .grules { grid-template-columns: 1fr 1fr; } }
.grule {
  padding: var(--space-5) var(--space-6); border-radius: var(--r-lg);
  border: 1px solid var(--glass-border); background: var(--glass-fill);
  display: grid; gap: var(--space-2); align-content: start;
}
.grule__tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
}
.grule--do .grule__tag { color: var(--accent-primary); }
.grule--dont .grule__tag { color: var(--accent-secondary); }
.grule p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.grule b { color: var(--text-primary); font-weight: 500; }

/* ---------- Token rows (copyable) ---------- */
.tokens { display: grid; gap: 2px; }
.token {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-4);
  align-items: center; padding: 12px 14px; margin-inline: -14px;
  border-radius: var(--r-sm); cursor: copy; border: 0;
  background: none; text-align: left; width: calc(100% + 28px);
  color: var(--text-primary); font-size: inherit;
  transition: background var(--dur-hover) var(--ease-out);
}
.token:hover { background: var(--glass-fill); }
.token__chip { width: 44px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--glass-border); }
.token__name { font-family: var(--font-mono); font-size: 13px; }
.token__val { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.token.copied .token__val { color: var(--accent-primary); }

/* ---------- Code blocks ---------- */
pre.gcode {
  margin: var(--space-4) 0 0; padding: var(--space-5);
  background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  color: #d8d4c8; overflow-x: auto;
}
pre.gcode .k { color: var(--accent-primary); }
pre.gcode .s { color: #ffd6c8; }
pre.gcode .c { color: #6c6c6c; font-style: italic; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .gshell { grid-template-columns: 1fr; padding-block: var(--space-6); }
  .gside {
    /* fixed, sliding out beneath the sticky top bar (z-index 50) */
    position: fixed; top: 0; left: 0; right: 0; z-index: 49;
    max-height: 100dvh; overflow: auto;
    padding: 88px var(--gutter-mobile) 14px;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--border-subtle);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-hover) var(--ease-out),
                transform var(--dur-hover) var(--ease-out),
                visibility 0s linear var(--dur-hover);
  }
  .nav-open .gside {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur-hover) var(--ease-out),
                transform var(--dur-hover) var(--ease-out);
  }
  .gside__label { margin: 8px 0 4px; }
  .gside a { min-height: 48px; display: flex; align-items: center; margin-left: 0; }
  @media (prefers-reduced-motion: reduce) {
    .gside { transform: none; transition: none; }
    .nav-open .gside { transition: none; }
  }
}
@media (min-width: 701px) {
  .gtop .nav-toggle { display: none; }
}