/* ─────────────────────────────────────────────────────────────────────
   site.css — shared chrome for thegian7.cloud
   ---------------------------------------------------------------------
   Loaded LAST in <head> on every page. The demo pages each carry their
   own bespoke CSS, and most of them style bare `header`, `nav` and
   `footer` element selectors. Every rule here is therefore written at
   class specificity (0,1,x) so it beats a bare element selector (0,0,x),
   and every property that legacy CSS might set is declared explicitly
   rather than left to inherit.

   Per-page tint: set --sc-accent on :root. Defaults to the site cyan.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --sc-bg: rgba(7, 7, 12, 0.88);
  --sc-text: #eaf0f6;
  --sc-dim: #8a8ca3;
  --sc-border: rgba(255, 255, 255, 0.08);
  --sc-font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sc-h: 56px;
}

/* in-page anchors must not land underneath the sticky bar */
html { scroll-padding-top: calc(var(--sc-h) + 12px); }

/* ── the bar ───────────────────────────────────────────────────────── */
.sc-chrome {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  min-height: var(--sc-h);
  margin: 0;
  padding: 0 1.25rem;
  background: var(--sc-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--sc-border);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  font-family: var(--sc-font);
  font-size: 14px;
  line-height: 1.4;
  z-index: 9999;
}

.sc-chrome a { text-decoration: none; }
.sc-chrome a:focus-visible {
  outline: 2px solid var(--sc-accent, #2cc6ff);
  outline-offset: 3px;
  border-radius: 3px;
}

.sc-brand {
  color: var(--sc-accent, #2cc6ff);
  font-weight: 700;
  letter-spacing: .01em;
  flex: 0 0 auto;
}
.sc-brand:hover { text-shadow: 0 0 14px color-mix(in srgb, var(--sc-accent, #2cc6ff) 60%, transparent); }

/* ── the signature: a shell path that says where you are ───────────── */
.sc-path {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sc-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.sc-path a { color: var(--sc-dim); }
.sc-path a:hover { color: var(--sc-accent, #2cc6ff); }
.sc-path .sc-sep { color: rgba(255,255,255,.22); padding: 0 .1em; }
.sc-path .sc-here { color: var(--sc-text); }
.sc-path .sc-sigil { color: var(--sc-accent, #2cc6ff); padding-left: .15em; }

.sc-cur {
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin-left: .4em;
  background: var(--sc-accent, #2cc6ff);
  vertical-align: -.18em;
  animation: sc-blink 1.15s steps(1) infinite;
}
@keyframes sc-blink { 50% { opacity: 0; } }

/* ── nav ───────────────────────────────────────────────────────────── */
.sc-nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  position: static;
  font-size: 13px;
}
.sc-nav a { color: var(--sc-dim); }
.sc-nav a:hover { color: var(--sc-accent, #2cc6ff); }
.sc-nav a.sc-ext { color: var(--sc-accent, #2cc6ff); }

.sc-toggle { display: none; }
.sc-toggle-label {
  display: none;
  color: var(--sc-accent, #2cc6ff);
  cursor: pointer;
  border: 1px solid var(--sc-border);
  border-radius: 6px;
  padding: .2rem .55rem;
  font-size: 13px;
  flex: 0 0 auto;
}

/* ── footer ────────────────────────────────────────────────────────── */
.sc-foot {
  display: block;
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3.5rem;
  border: 0;
  border-top: 1px solid var(--sc-border);
  background: none;
  color: var(--sc-dim);
  font-family: var(--sc-font);
  font-size: 13px;
  text-align: left;
}
.sc-foot a { color: var(--sc-accent, #2cc6ff); text-decoration: none; }
.sc-foot a:hover { text-decoration: underline; }
.sc-foot .sc-foot-sep { color: rgba(255,255,255,.22); padding: 0 .6em; }

/* ── responsive ────────────────────────────────────────────────────── */
.sc-path .sc-ellip { display: none; }

@media (max-width: 720px) {
  .sc-path .sc-mid { display: none; }
  .sc-path .sc-ellip { display: inline; }
}

@media (max-width: 640px) {
  .sc-chrome { flex-wrap: wrap; padding: .5rem 1rem; }
  .sc-toggle-label { display: block; margin-left: auto; }
  .sc-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    order: 3;
    gap: .85rem;
    padding: .8rem 0 .5rem;
  }
  .sc-toggle:checked ~ .sc-nav { display: flex; }
  .sc-path { order: 2; width: 100%; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cur { animation: none; }
  html { scroll-behavior: auto; }
}