/*
  SkyCall brand — skycall-brand.css
  LOCKED 2026-10-12 (v1.0.0). Change only on Owner direction.
  Single source for: theme tokens, page background (operations grey + dot texture),
  top bar, and the SKYCALL wordmark with gold bolt.
  Load on every page, after any page CSS that it should override:
    <link rel="stylesheet" href="/skycall-brand.css">
  Header markup (copy verbatim):
    <header class="topbar">
      <div class="topbar-inner">
        <a class="brand" href="/" aria-label="SkyCall home">
          <svg class="brand-bolt" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.5 1 3 9h4l-1 6 7-8.5H9z" fill="#FFCC00"/></svg>
          SKYCALL
        </a>
        <!-- right side: page nav or user bar -->
      </div>
    </header>
*/

:root {
  --field: #1f2024;
  --field-2: #26272c;
  --panel: #0f1113;
  --panel-2: #16191c;
  --border: #2c3036;
  --border-2: #3a3f46;
  --ink: #f2f4f7;
  --muted: #9aa3ad;
  --dim: #6c7580;
  --cyan: #7cc8dc;
  --live: #3fbf6f;
  --gold: #FFCC00;
  --navy: #1E3A8A;
  --navy-edge: #3b5bc4;
  --navy-hover: #2a4bb0;
  --radius: 6px;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* ---------- Theme: operations grey ---------- */
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--field);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.035), transparent 55%),
    radial-gradient(rgba(124,200,220,.16) 1px, transparent 1.6px),
    radial-gradient(rgba(124,200,220,.08) 1px, transparent 1.6px);
  background-size: 100% 100%, 46px 46px, 29px 29px;
  background-position: 0 0, 0 0, 13px 19px;
  background-attachment: fixed;
}
::selection { background: rgba(124,200,220,.3); }
/* KW-D-358 (Owner 2 Nov 09:41, on his phone): the page "bounced" at the end of a scroll. iOS repaints a fixed-attachment body
   background and a blurred sticky bar on every rubber-band frame. On touch screens the field scrolls with the page and the bar
   is solid — same look, no repaint storm. */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,17,19,.96); }
}

/* ---------- Top bar ---------- */
.topbar {
  background: linear-gradient(to bottom, rgba(15,17,19,.92), rgba(15,17,19,.55));
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.topbar-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------- Logo: SKYCALL wordmark + gold bolt ---------- */
.brand {
  color: var(--ink); text-decoration: none;
  font-family: var(--sans);
  font-weight: 700; font-size: 15px; letter-spacing: .32em;
  display: flex; align-items: center; gap: 10px;
}
.brand-bolt { width: 14px; height: 14px; flex: none; }

/* ---------- Top bar right side ---------- */
.topbar-user { display: flex; align-items: center; gap: 14px; }
.topbar-user .who { color: var(--muted); font-size: 13px; }
.link-btn {
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.link-btn:hover { border-bottom-color: var(--ink); }