/* ── Fonts ─────────────────────────────────────────────────────────────
   These @font-face rules live HERE rather than in global.css because
   header.css is the ONLY stylesheet consumed by all four sites: the vault
   imports it from Header.astro, and qr./ip./time. <link> it via
   /embed/header.css, which re-serves this exact file with ?raw.
   One declaration, four sites, no drift.

   url() MUST stay ABSOLUTE — a relative path resolves against the
   satellite's own origin and 404s.

   Requires nginx `location /fonts/` with Access-Control-Allow-Origin:
   fonts are always fetched in CORS mode, even same-origin.
   ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://itzgee.com/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://itzgee.com/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://itzgee.com/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://itzgee.com/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://itzgee.com/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

/* Shared header — ONE source for itzgee.com and every *.itzgee.com satellite.
   Global, not scoped: injected into foreign pages, so every class is igh- prefixed
   and every token carries a literal fallback. */

.igh-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--border,#333);
  background:rgba(10,10,11,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.igh-wrap{max-width:var(--max-w,1080px);margin:0 auto;padding-inline:1.5rem}
.igh-bar{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;height:56px}

.igh-brand{display:flex;align-items:center;gap:0.6rem;border-bottom:none;font-weight:700;
  font-size:var(--fs-md,1rem);color:var(--text,#e8e8ea);text-decoration:none}
@media (hover:hover){.igh-brand:hover{color:var(--text,#e8e8ea)}}
.igh-glyph{color:var(--ok,#3DDC84);font-size:1.1em}
.igh-tld{color:var(--text-faint,#71757e);font-weight:400}

.igh-nav{display:flex;align-items:center;gap:1.25rem;font-size:var(--fs-sm,0.875rem)}
.igh-pages{display:flex;align-items:center;gap:0.75rem}
.igh-link{color:var(--text-dim,#a8adb5);border-bottom:none;padding:0.2rem 0.1rem;text-decoration:none}
@media (hover:hover){.igh-link:hover{color:var(--ok,#3DDC84)}}
.igh-link--on{color:var(--ok,#3DDC84)}
.igh-link--on::before{content:'/';color:var(--ok-dim,#2a8d55)}

.igh-apps{position:relative;display:flex;align-items:center}
.igh-apps-trigger{display:inline-flex;align-items:center;gap:0.25rem}
.igh-caret{font-size:0.7em;color:var(--text-faint,#71757e);transition:transform .15s ease,color .15s ease}
.igh-apps.is-open .igh-caret{transform:rotate(180deg);color:var(--ok,#3DDC84)}
.igh-menu{position:absolute;top:calc(100% + 0.5rem);left:0;min-width:15rem;
  background:var(--surface,#131316);border:1px solid var(--border,#333);
  border-radius:var(--radius,4px);padding:0.4rem;display:flex;flex-direction:column;gap:0.1rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s}
.igh-apps.is-open .igh-menu{opacity:1;visibility:visible;transform:translateY(0)}
.igh-menu::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}
.igh-menu-item{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  padding:0.5rem 0.6rem;border-radius:var(--radius,4px);border-bottom:none;
  color:var(--text-dim,#a8adb5);text-decoration:none}
.igh-menu-item:focus-visible{background:var(--surface-2,#1c1c21);
  color:var(--text,#e8e8ea);outline:none}@media (hover:hover){.igh-menu-item:hover{background:var(--surface-2,#1c1c21);
  color:var(--text,#e8e8ea);outline:none}}
.igh-menu-name{font-size:var(--fs-sm,0.875rem)}
@media (hover:hover){.igh-menu-item:hover .igh-menu-name{color:var(--ok,#3DDC84)}}
.igh-menu-unit{font-size:var(--fs-xs,0.75rem);color:var(--text-faint,#71757e);letter-spacing:0.15em;
  border:1px solid var(--border,#333);border-radius:var(--radius,4px);padding:0.05rem 0.4rem}
.igh-menu-all{margin-top:0.2rem;padding-top:0.6rem;border-top:1px solid var(--border,#333)}
.igh-menu-all .igh-menu-name{color:var(--text-faint,#71757e);text-transform:uppercase;
  letter-spacing:var(--track-wide,0.18em);font-size:var(--fs-xs,0.75rem)}
@media (hover:hover){.igh-menu-all:hover .igh-menu-name,.igh-menu-all:hover .igh-menu-arrow{color:var(--ok,#3DDC84)}}
.igh-menu-arrow{color:var(--text-faint,#71757e)}

.igh-status{display:flex;align-items:center;gap:0.5rem;border-bottom:none;
  color:var(--text-dim,#a8adb5);text-decoration:none}
@media (hover:hover){.igh-status:hover{color:var(--text,#e8e8ea)}}
.igh-led{width:7px;height:7px;border-radius:50%;background:var(--text-faint,#71757e);flex:none}
.igh-led--ok{background:var(--ok,#3DDC84);box-shadow:0 0 6px var(--ok-dim,#2a8d55)}
.igh-led--warn{background:#e0a944;box-shadow:0 0 6px rgba(224,169,68,0.5)}
.igh-led--down{background:#e05252;box-shadow:0 0 6px rgba(224,82,82,0.5)}

.igh-vpn{display:flex;align-items:center;gap:0.45rem;border-bottom:none;text-decoration:none;
  color:var(--text-faint,#71757e);font-size:var(--fs-xs,0.75rem);letter-spacing:0.08em;
  border:1px solid var(--border,#333);border-radius:var(--radius,4px);padding:0.3rem 0.6rem;white-space:nowrap}
@media (hover:hover){.igh-vpn:hover{color:var(--text-dim,#a8adb5);border-color:var(--border-hi,#4a4a54)}}
.igh-vpn--on{color:var(--ok,#3DDC84);border-color:var(--ok-dim,#2a8d55)}
.igh-vpn-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint,#71757e);
  display:inline-block;flex:none}
.igh-vpn-dot--on{background:var(--ok,#3DDC84);box-shadow:0 0 6px var(--ok-dim,#2a8d55)}
.igh-vpn--static{cursor:default;pointer-events:none}

.igh-chip-wrap{position:relative}
.igh-chip{display:inline-flex;align-items:center;gap:0.45rem;background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-sm,0.875rem);color:var(--ok,#3DDC84);
  border:1px solid var(--ok-dim,#2a8d55);border-radius:var(--radius,4px);padding:0.35rem 0.7rem}
.igh-dot{width:6px;height:6px;border-radius:50%;background:var(--ok,#3DDC84);flex:none;
  box-shadow:0 0 6px var(--ok-dim,#2a8d55)}
.igh-account{position:absolute;top:calc(100% + 0.5rem);right:0;min-width:12rem;
  background:var(--surface,#131316);border:1px solid var(--border,#333);border-radius:var(--radius,4px);
  padding:0.4rem;display:flex;flex-direction:column;gap:0.1rem;box-shadow:0 12px 40px rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s}
.igh-chip-wrap.is-open .igh-account{opacity:1;visibility:visible;transform:translateY(0)}
.igh-account-item{padding:0.5rem 0.6rem;border-radius:var(--radius,4px);border-bottom:none;
  color:var(--text-dim,#a8adb5);font-size:var(--fs-sm,0.875rem);text-decoration:none}
@media (hover:hover){.igh-account-item:hover{background:var(--surface-2,#1c1c21);color:var(--ok,#3DDC84)}}
.igh-account-out{border-top:1px solid var(--border,#333);margin-top:0.2rem;padding-top:0.6rem;
  color:var(--text-faint,#71757e)}

.igh-toggle{display:none;align-items:center;justify-content:center;width:40px;height:36px;padding:0;
  background:none;border:1px solid var(--border,#333);border-radius:var(--radius,4px);
  color:var(--text-dim,#a8adb5);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.igh-header.is-menu-open .igh-toggle{color:var(--ok,#3DDC84);border-color:var(--ok-dim,#2a8d55)}@media (hover:hover){.igh-toggle:hover{color:var(--ok,#3DDC84);border-color:var(--ok-dim,#2a8d55)}}
.igh-toggle-glyph{font-size:1rem;line-height:1}

/* scrim — sits under the panel, over the page */
.igh-scrim{position:fixed;inset:56px 0 0 0;z-index:55;background:rgba(6,6,8,0.6);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s}
.igh-header.is-menu-open ~ .igh-scrim,.igh-scrim.is-on{opacity:1;visibility:visible;pointer-events:auto}

.igh-panel{display:none;position:absolute;top:100%;left:0;right:0;z-index:61;
  background:var(--surface,#131316);border-top:1px solid var(--border,#333);
  border-bottom:1px solid var(--border,#333);box-shadow:0 24px 48px rgba(0,0,0,0.55);
  max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.igh-header.is-menu-open .igh-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.igh-panel-inner{padding:1rem 1.5rem 1.4rem;display:flex;flex-direction:column;gap:0.35rem}
.igh-mlabel{font-size:var(--fs-xs,0.75rem);letter-spacing:0.12em;color:var(--text-faint,#71757e);
  padding:0.4rem 0.1rem 0.15rem}
.igh-group{display:flex;flex-direction:column}
.igh-group + .igh-group{border-top:1px solid var(--border,#333);margin-top:0.5rem;padding-top:0.5rem}
.igh-mitem{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  min-height:48px;padding:0.7rem 0.6rem;border-radius:var(--radius,4px);border-bottom:none;
  color:var(--text-dim,#a8adb5);text-decoration:none}
.igh-mitem + .igh-mitem{border-top:1px solid rgba(255,255,255,0.04)}
.igh-mitem:active{background:var(--surface-2,#1c1c21)}
.igh-mname{font-size:var(--fs-sm,0.875rem)}
.igh-mpage--on{color:var(--ok,#3DDC84)}
.igh-mpage--on::before{content:'/';color:var(--ok-dim,#2a8d55)}
.igh-foot{border-top:1px solid var(--border,#333);margin-top:0.5rem;padding-top:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.igh-mstatus{display:flex;align-items:center;gap:0.5rem;border-bottom:none;
  color:var(--text-dim,#a8adb5);font-size:var(--fs-sm,0.875rem);text-decoration:none}
.igh-mauth{color:var(--ok,#3DDC84);border:1px solid var(--ok-dim,#2a8d55);
  border-radius:var(--radius,4px);padding:0.5rem 0.9rem;border-bottom:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:0.45rem}

/* body lock — JS sets top to the recorded scrollY. overflow alone does not hold on iOS. */
body.igh-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (max-width:720px){.igh-status .igh-status-text{display:none}}
@media (max-width:560px){
  .igh-pages,.igh-signin,.igh-chip-wrap,.igh-vpn{display:none}
  .igh-status{display:flex;font-size:var(--fs-xs,0.75rem)}
  .igh-status .igh-status-text{display:inline;white-space:nowrap}
  .igh-header.is-menu-open .igh-status{display:none}
  .igh-toggle{display:inline-flex}
  .igh-panel{display:block}
  .igh-nav{gap:0.75rem}
  .igh-wrap{padding-inline:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .igh-panel,.igh-scrim,.igh-menu,.igh-account{transition-duration:0.01ms}
}

/* author display rules beat the UA sheet's [hidden] — same trap as the ip. lookup box */
.igh-header [hidden],.igh-panel [hidden]{display:none!important}

/* ================= mobile panel refinement =================
   Appended deliberately: later rules win at equal specificity, so this
   overrides the base block above without re-anchoring inside it. */
@media (max-width: 560px) {
  /* Section labels: present, not apologetic */
  .igh-panel .igh-mlabel {
    color: var(--ok-dim, #2a8d55);
    font-size: var(--fs-xs, 0.75rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.2rem 0.1rem 0.5rem;
  }

  /* Rows: bigger, brighter, with a green edge on the current page */
  .igh-panel .igh-mitem {
    position: relative;
    font-size: var(--fs-md, 1rem);
    color: var(--text, #e8e8ea);
    padding-left: 0.85rem;
    border-radius: 0;
  }
  .igh-panel .igh-mitem::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 2px; height: 0;
    background: var(--ok, #3DDC84);
    transform: translateY(-50%);
    transition: height 0.18s ease;
  }
  .igh-panel .igh-mitem:active { background: rgba(61, 220, 132, 0.06); }
  .igh-panel .igh-mpage--on { color: var(--ok, #3DDC84); }
  .igh-panel .igh-mpage--on::before { height: 60%; }
  /* the base rule prints a "/" marker; the edge replaces it here */
  .igh-panel .igh-mpage--on::after { content: none; }

  /* Footer: a block, not a thin strip. Sign-in is the primary action. */
  .igh-panel .igh-foot {
    margin-top: 0.9rem;
    padding-top: 1.1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .igh-panel .igh-mstatus { justify-content: flex-start; font-size: var(--fs-xs, 0.75rem); }
  .igh-panel .igh-mauth {
    justify-content: center;
    background: var(--ok, #3DDC84);
    border-color: var(--ok, #3DDC84);
    color: #06120b;
    font-weight: 700;
    padding: 0.75rem 1rem;
  }

  .igh-panel-inner { padding-top: 1.2rem; }
}

/* ================= VPN pill — four states =================
   node    = on a network exit          (green, quiet confidence)
   masked  = some other VPN/proxy/Tor    (amber, informative)
   exposed = direct ISP                  (red edge, plain about it)
   unknown = unclassifiable / lookup down (neutral, claims nothing)
   Framing is belonging vs exposure, never a fake lock: /utils is public by
   design and the free starter account includes it, so the site genuinely
   works without a VPN. */
.igh-vpn--node    { color: var(--ok, #3DDC84); border-color: var(--ok-dim, #2a8d55); }
.igh-vpn--node .igh-vpn-dot--node { background: var(--ok, #3DDC84); box-shadow: 0 0 6px var(--ok-dim, #2a8d55); }

.igh-vpn--masked  { color: #e0a944; border-color: rgba(224, 169, 68, 0.45); }
@media (hover:hover){.igh-vpn--masked:hover{ color: #f0bd63; border-color: rgba(224, 169, 68, 0.8); }}
.igh-vpn-dot--masked { background: #e0a944; box-shadow: 0 0 6px rgba(224, 169, 68, 0.5); }

.igh-vpn--exposed { color: #e07070; border-color: rgba(224, 82, 82, 0.5);
                    background: rgba(224, 82, 82, 0.06); }
@media (hover:hover){.igh-vpn--exposed:hover{ color: #f08a8a; border-color: rgba(224, 82, 82, 0.85); }}
.igh-vpn-dot--exposed { background: #e05252; box-shadow: 0 0 6px rgba(224, 82, 82, 0.5); }

.igh-vpn--unknown { color: var(--text-faint, #71757e); border-color: var(--border, #333); }
.igh-vpn-dot--unknown { background: var(--text-faint, #71757e); box-shadow: none; }

/* Panel row carries the full sentence — colour the text, not a box */
.igh-panel .igh-mitem[data-igh-vpn] .igh-mname { font-size: var(--fs-sm, 0.875rem); }
.igh-panel .igh-vpn-dot--node    { background: var(--ok, #3DDC84); }
.igh-panel .igh-vpn-dot--masked  { background: #e0a944; }
.igh-panel .igh-vpn-dot--exposed { background: #e05252; }
.igh-panel .igh-vpn-dot--unknown { background: var(--text-faint, #71757e); }

@media (max-width: 560px) {
  /* the VPN row is the one panel item that should read as status, not a link */
  .igh-panel .igh-mitem[data-igh-vpn] { color: var(--text-dim, #a8adb5); }
}

/* ================= scroll-lock positioning fix =================
   body.igh-locked is position:fixed with a negative top. A sticky element
   inside a fixed body stops sticking to the viewport and reverts to its
   natural document position — which is scrollY pixels above the visible
   area, taking the absolutely-positioned panel with it. Symptom: open the
   menu while scrolled down and you get the scrim with no menu and no close
   button; fine on a fresh load because scrollY is 0.
   Fixed positioning resolves against the viewport regardless. Note body
   being position:fixed does NOT create a containing block for this — only
   transform / filter / backdrop-filter / will-change / contain do, and none
   are on body. */
.igh-header.is-menu-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ============================================================
   CANONICAL BUTTON — the one button treatment for itzgee.com and
   every satellite. Derived from .ac-cta / .app-cta, which were
   byte-identical and are the style confirmed as correct.
   Lives here because header.css is the only stylesheet all four
   sites load as a render-blocking <link> (/embed/header.css).
   igb- prefixed: qr.itzgee.com defines its own .btn / .btn--pri,
   so an unprefixed name would collide silently.
   .igh-signin is ALIASED, not renamed — renaming would mean editing
   header markup on the vault plus seven satellite pages for no
   visual gain. Its mobile display:none rule further down still
   applies. ORDER BELOW IS LOAD-BEARING: quiet's :hover must come
   after base's :hover or the sign-in button gets the green wash.
   ============================================================ */
.igb,.igh-signin{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;font:inherit;font-size:var(--fs-sm,0.85rem);line-height:1.2;text-align:center;text-decoration:none;border-bottom:none;cursor:pointer;background:transparent;border:1px solid var(--ok-dim,#1E5C3C);border-radius:var(--radius,4px);color:var(--ok,#3DDC84);padding:0.6rem 1.2rem;transition:color .15s ease,border-color .15s ease,background .15s ease}
@media (hover:hover){.igb:hover,.igh-signin:hover{background:color-mix(in srgb,var(--ok,#3DDC84) 8%,transparent);border-color:var(--ok,#3DDC84);color:var(--ok,#3DDC84)}}
.igb:focus-visible,.igh-signin:focus-visible{outline:2px solid var(--ok,#3DDC84);outline-offset:2px}
.igb--primary{background:var(--ok,#3DDC84);border-color:var(--ok,#3DDC84);color:var(--bg,#0A0A0B);font-weight:700}
@media (hover:hover){.igb--primary:hover{background:var(--ok,#3DDC84);border-color:var(--ok,#3DDC84);color:var(--bg,#0A0A0B);filter:brightness(1.08)}}
.igb--quiet,.igh-signin{color:var(--text-dim,#A0A0A0);border-color:var(--border,#333333)}
@media (hover:hover){.igb--quiet:hover,.igh-signin:hover{background:transparent;color:var(--ok,#3DDC84);border-color:var(--ok-dim,#1E5C3C)}}
.igb--sm,.igh-signin{font-size:var(--fs-xs,0.75rem);text-transform:uppercase;letter-spacing:0.12em;padding:0.4rem 0.9rem}
.igb--block{width:100%}
.igb--bare{background:none;border-color:transparent;padding:0;color:var(--text-dim,#A0A0A0)}
@media (hover:hover){.igb--bare:hover{background:none;border-color:transparent;color:var(--ok,#3DDC84)}}
@media (hover:hover){.igb--danger:hover{color:var(--down,#E5484D);border-color:var(--down,#E5484D);background:none}}
.igb[disabled],.igb:disabled{opacity:0.5;cursor:not-allowed}
.igb[hidden]{display:none}
/* ================= mobile network card (itzgee.com only) =================
   Satellites don't render .igh-net markup, so these are inert there.
   Presents VPN state + system status as a card in the panel instead of a
   footer strip. Data hooks unchanged -> header-ui.js drives it as-is. */
@media (max-width: 560px) {
  .igh-panel .igh-mlabel--net { padding-top: 0.9rem; }
  .igh-panel .igh-net { display:flex; flex-direction:column; border:1px solid var(--border,#333); border-radius:var(--radius,4px); overflow:hidden; margin:0.15rem 0 0.2rem; background:var(--bg,#0A0A0B); }
  .igh-panel .igh-net-row { display:flex; align-items:center; gap:0.75rem; padding:0.8rem 0.9rem; border:none; border-bottom:1px solid var(--border,#333); background:transparent; text-decoration:none; color:var(--text,#e8e8ea); }
  .igh-panel .igh-net-row:last-child { border-bottom:none; }
  .igh-panel .igh-net-row:active { background:rgba(255,255,255,0.03); }
  .igh-panel .igh-net-ic { flex:none; width:12px; display:inline-flex; justify-content:center; }
  .igh-panel .igh-net-ic .igh-vpn-dot, .igh-panel .igh-net-ic .igh-led { width:8px; height:8px; }
  .igh-panel .igh-net-main { display:flex; flex-direction:column; gap:0.15rem; min-width:0; flex:1; }
  .igh-panel .igh-net-k { font-size:var(--fs-xs,0.75rem); letter-spacing:0.16em; text-transform:uppercase; color:var(--text-faint,#71757e); }
  .igh-panel .igh-net-v { font-size:var(--fs-sm,0.875rem); color:var(--text-dim,#a8adb5); line-height:1.4; word-break:break-word; }
  .igh-panel .igh-net-go { flex:none; color:var(--text-faint,#71757e); font-size:var(--fs-xs,0.75rem); }
  .igh-panel .igh-net-row.igh-vpn--node    .igh-net-v { color:var(--ok,#3DDC84); }
  .igh-panel .igh-net-row.igh-vpn--masked  .igh-net-v { color:#e0a944; }
  .igh-panel .igh-net-row.igh-vpn--exposed .igh-net-v { color:#e07070; }
  .igh-panel .igh-net-row.igh-vpn--unknown .igh-net-v { color:var(--text-dim,#a8adb5); }
}
@media (max-width: 560px) {
  /* The canonical .igb/.igh-signin block above re-shows the desktop sign-in
     on mobile (equal specificity, later source beats the earlier display:none).
     Re-hide it here as the LAST rule so the hamburger is the only control on
     mobile — signed-out users sign in from inside the panel foot. */
  .igh-signin { display: none !important; }
}

/* 2026-08-10: long display names must not wrap/stretch the chip (desktop chip + mobile foot) */
[data-igh-name]{display:inline-block;max-width:12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2026-08-16: MOBILE ACCOUNT DRILL-DOWN. The panel swaps to a second view rather than growing.
   A flat 7-item account list takes the signed-in panel to ~1035px against the ~663px
   max-height cap, so it would scroll; two views fit at ~633px and ~449px. Built by
   header-ui.js when /api/me reports signed in — runtime-only by design, as the account chip
   already was. Replaces the removed "apps group collapses to all apps" rule as the way this
   panel fits one screen. */
.igh-panel.is-account .igh-panel-inner > *:not([data-igh-account-view]){display:none}
[data-igh-account-view]{display:flex;flex-direction:column;gap:0.35rem}
.igh-mback{background:none;border:none;width:100%;font:inherit;cursor:pointer;text-align:left}
.igh-mback .igh-mname{text-transform:uppercase;letter-spacing:var(--track-wide,0.18em);
  font-size:var(--fs-xs,0.75rem);color:var(--text-faint,#71757e)}
button.igh-mauth{width:100%;font:inherit;cursor:pointer}

/* 2026-08-22 — MOBILE HEADER OVERFLOW / hidden hamburger on narrow phones.
   In the <=560px header the status ("all systems operational", white-space:nowrap)
   shares one non-wrapping flex row with the hamburger. On phones narrower than the
   point where that text fits, it pushed .igh-toggle off the right edge — the menu was
   present but parked off-screen. Reported on a Galaxy Z Fold cover screen (~344px);
   also hits ~360px Androids. Two parts, both scoped to mobile:
   1. <=24rem (384px): drop the words, keep the LED dot (full status is in the panel).
      Words stay on ~390px+ phones (iPhone 17, Pixel, iPhone 12-16).
   2. <=560px: let the status text ellipsize and pin the toggle, so no phone in the
      "words shown" band can ever push the hamburger off — breakpoint is cosmetic. */
@media (max-width:560px){
  .igh-nav{min-width:0}
  .igh-status{min-width:0}
  .igh-status .igh-status-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .igh-toggle{flex:0 0 auto}
}
@media (max-width:24rem){
  .igh-status .igh-status-text{display:none}
}