/* Terminal tab bar */
.tab-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--crust);
  border-bottom: 1px solid var(--surface0);
  display: flex;
  align-items: stretch;
  height: 44px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  overflow-x: auto;
  overflow-y: hidden;
  /* Both ends of this scrollport are pinned with position:sticky and painted
     over the section links: the action buttons on the right, the parent link
     on the left. Without this, app.js's scrollIntoView({inline:'center'})
     centres the active tab in the FULL scrollport and can park a long label
     like "Testimonials" underneath one of them. scroll-padding shrinks the
     region scroll-into-view aims at, which is exactly what it is for.

     The left value is not a guess the way 140px is: --tab-home-w below is the
     declared width of .tab-home, so the padding and the thing it compensates
     for cannot drift apart when the breakpoints change either one. */
  scroll-padding-right: 140px;
  scroll-padding-left: var(--tab-home-w);

  /* Width of the pinned parent link. Overridden per breakpoint in
     responsive.css; read by both .tab-home and scroll-padding-left above.
     Arrow plus label measures 94px in JetBrains Mono, so this is the same
     ~18px each side the section tabs get from their padding, with room for a
     wider fallback face. */
  --tab-home-w: 130px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab-bar a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  color: var(--overlay1);
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--surface0);
  border-bottom: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-bottom-color 0.2s;
  flex-shrink: 0;
}

/* Gated so a tap does not leave the control stuck in its hovered,
   transformed state until the next tap elsewhere on the page. */
@media (hover: hover) {
  .tab-bar a:hover {
    background: var(--mantle);
    color: var(--text);
    text-decoration: none;
  }
}

.tab-bar a.active {
  background: var(--base);
  color: var(--text);
  border-bottom: 2px solid var(--pink);
}

.tab-bar a .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Subtle scanline overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Terminal window chrome.
   1100, not 900: the frame was leaving 270px dead on each side at 1440. This
   is only safe because the long-form paragraphs now carry their own reading
   caps (.history-content .desc, .project-desc, .cert-full) -- without those,
   widening the frame pushes them from 95 to ~115 characters per line, which
   is where readers start losing the return sweep to the next line. */
.terminal-window {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Section styling */
.section {
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.section .stagger {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.section.visible .stagger { opacity: 1; transform: translateY(0); }
.section.visible .stagger:nth-child(1) { transition-delay: 0ms; }
.section.visible .stagger:nth-child(2) { transition-delay: 80ms; }
.section.visible .stagger:nth-child(3) { transition-delay: 160ms; }
.section.visible .stagger:nth-child(4) { transition-delay: 240ms; }
.section.visible .stagger:nth-child(5) { transition-delay: 320ms; }

/* Section headers */
.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.section-title .icon {
  width: 24px;
  height: 24px;
  color: var(--pink);
}

.section-divider {
  color: var(--surface2);
  margin-bottom: 16px;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

/* Footer */
.site-footer {
  margin-top: 32px;
  padding: 24px 24px 28px;
  border-top: 1px solid var(--surface0);
  text-align: center;
  font-size: 0.75rem;
  color: var(--overlay0);
  line-height: 1.8;
}

.site-footer .icon {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  color: var(--overlay0);
}

/* The unsigned line, and the motif under it. Mirrors hub/css/style.css. The
   explicit font-size on both is not redundant: .site-footer sets 0.75rem for
   the legal lines, and these two have to escape it rather than inherit it. */
.footer-quote {
  max-width: 46ch;
  margin: 16px auto 10px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--overlay1);
  text-wrap: balance;
}

.footer-motif {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--subtext0);
  letter-spacing: 0.13em;
  margin-bottom: 10px;
}

/* The way back up to the hub.
   ────────────────────────────────────────────────────────────────────────
   Pinned to the LEFT edge of the scrolling bar, the mirror of .tab-actions
   below and for the same reason: the bar scrolls itself horizontally
   (app.js centres the active tab as you read down the page), so a plain
   first child would be gone by the time a reader on a phone reached
   Projects — exactly when they most want a way out.

   The width is declared rather than intrinsic. .tab-bar's scroll-padding-left
   has to equal it, and CSS cannot read a sibling's rendered width, so the two
   share --tab-home-w instead of a hard-coded approximation that would drift
   apart from the real width at every breakpoint. padding is dropped for the
   same reason: with an explicit width and centred content, the variable IS
   the contract and inherited padding cannot quietly change it.

   z-index 2, not 1: if text zoom ever makes both pinned ends wider than the
   viewport, equal z-index would let .tab-actions win on source order and
   paint over the way out. The way out wins instead.

   Selected as `.tab-bar .tab-home`, not `.tab-home`: `.tab-bar a` above is a
   class AND an element, so a lone class loses to it and both the colour and
   the zeroed padding here would silently do nothing. */
.tab-bar .tab-home {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 var(--tab-home-w);
  justify-content: center;
  padding: 0;
  /* The box must not be wider than --tab-home-w even if the font is: the
     scroll-padding above is that number, and an overflowing label would
     paint on top of the first section tab. The widths are set with enough
     slack that this never actually clips the real face. */
  overflow: hidden;
  background: var(--crust);
  color: var(--text);
}

/* Tab bar action buttons.
   ────────────────────────────────────────────────────────────────────────
   Pinned to the right edge of the scrolling bar with position:sticky, so the
   theme, language and command-palette buttons stay on screen while the eleven
   section links scroll underneath them.

   `margin-left: auto` alone is not enough and was the bug: in a flex container
   that OVERFLOWS, auto margins resolve to zero, so the actions simply sat at
   the end of an ~840px-wide row. On a 320px phone that put them ~500px off
   screen, behind a bar with `scrollbar-width: none` — no scrollbar, no
   affordance, nothing to suggest they existed. The palette was unreachable on
   mobile entirely, since Ctrl-K does not exist there either.

   The background is required: sticky elements are painted over, not around,
   so without it the section links would slide visibly beneath the buttons. */
.tab-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  border-left: 1px solid var(--surface0);
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--crust);
}

.tab-actions button {
  background: none;
  border: none;
  border-right: 1px solid var(--surface0);
  color: var(--overlay1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0 12px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.tab-actions button:last-child {
  border-right: none;
}

.tab-actions button:hover {
  color: var(--text);
  background: var(--mantle);
}

.tab-actions button .icon {
  width: 13px;
  height: 13px;
}