/* SKINCHEESE · TOTAL AWARENESS (v4) — component styles. Square edges. Text links, not pills. */
:root { --gx-bg: #07080a; --gx-panel: #0c0e11; --gx-card: #111419; --gx-hair: rgba(220,215,205,.12); --gx-hair2: rgba(220,215,205,.22);
  --gx-t1: #ece8de; --gx-t2: #a9a293; --gx-t3: #847d70; --gx-sig: #7db3c7; --gx-warn: #e88a3a; --gx-alarm: #d9443f; --gx-ok: #5fae7e;
  --gx-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --gx-sans: 'IBM Plex Sans', system-ui, sans-serif; --gx-r: 2px; }

/* ── links + controls ── */
.gx-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; background: none; border: 0; color: var(--gx-sig); font: 500 12px/1 var(--gx-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.gx-link::after { content: '→'; transition: transform .2s; }
.gx-link:hover::after, .gx-link:focus-visible::after { transform: translateX(4px); }
.gx-link span { border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); padding-bottom: 3px; }
.gx-link:hover span { border-bottom-color: currentColor; }
.gx-link.warn { color: var(--gx-warn); } .gx-link.dim { color: var(--gx-t2); }
.gx-link:focus-visible { outline: 1px solid var(--gx-sig); outline-offset: 4px; }
.gx-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.gx-k { font: 500 10.5px/1.3 var(--gx-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gx-t3); }
.gx-k b { color: var(--gx-t1); font-weight: 500; }

/* sensor tabs (replaces the rounded mode buttons) */
.gx [data-gev="modes"] { gap: 0; border-top: 1px solid var(--gx-hair); }
.gx [data-gev="modes"] button { min-height: 38px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--gx-t2); font-size: 11px; letter-spacing: .14em; }
.gx [data-gev="modes"] button[aria-pressed="true"] { background: none; color: var(--gx-t1); border-bottom-color: var(--gx-sig); }
.gx [data-gev="modes"] button:hover { color: var(--gx-t1); }
.gx .gev-pill { border-radius: var(--gx-r); }

/* ── advisory ── */
[data-gx="advisory"] { --gx-lvl: var(--gx-warn); font-family: var(--gx-mono); }
.gx-adv-top { display: flex; justify-content: space-between; gap: 12px; }
.gx-adv-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.gx-adv-bar i { position: relative; height: 26px; background: color-mix(in srgb, var(--c) 18%, transparent); border-top: 2px solid color-mix(in srgb, var(--c) 45%, transparent); }
.gx-adv-bar i b { position: absolute; left: 5px; right: 3px; top: 8px; overflow: hidden; white-space: nowrap; font: 500 7.5px/1 var(--gx-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--c) 70%, #fff 0%); opacity: .75; }
.gx-adv-bar i.on { background: var(--c); border-top-color: #fff; }
.gx-adv-bar i.on b { color: #0b0b0b; opacity: 1; font-weight: 600; }
@media (max-width: 520px) { .gx-adv-bar i b { display: none; } }
[data-why="off"] .gx-adv-bar i b { display: none; }
.gx-adv-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; }
.gx-adv-now b { font-size: 26px; font-weight: 500; letter-spacing: .06em; color: var(--gx-lvl); }
.gx-adv-now span { font-family: var(--gx-sans); font-size: 15px; color: var(--gx-t1); }
.gx-adv-why { margin-top: 8px; font: 12px/1.6 var(--gx-mono); color: var(--gx-t3); }
[data-gx="strip"] { --gx-lvl: var(--gx-warn); display: block; padding: 9px clamp(16px, 3vw, 32px); font: 500 11.5px/1.4 var(--gx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gx-t1); background: color-mix(in srgb, var(--gx-lvl) 16%, var(--gx-bg)); border-bottom: 1px solid color-mix(in srgb, var(--gx-lvl) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-gx="strip"] b { color: var(--gx-lvl); font-weight: 600; }
[data-gx="strip"] span { color: var(--gx-t2); margin-left: 10px; }
@media (max-width: 640px) { [data-gx="strip"] span { display: none; } }

/* ── dossier ── */
.gx-dos-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--gx-hair2); }
.gx-dos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 32px; }
.gx-dos > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--gx-hair); }
.gx-dos dt { font: 500 10.5px/1.6 var(--gx-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gx-t3); }
.gx-dos dd { margin: 0; min-width: 0; }
.gx-dos dd b { display: block; font: 500 15px/1.4 var(--gx-mono); color: var(--gx-t1); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.gx-dos dd span { display: block; margin-top: 3px; font: 14px/1.5 var(--gx-sans); color: var(--gx-t2); }
[data-gx="file-mini"] > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--gx-hair); font: 12.5px/1.4 var(--gx-mono); }
[data-gx="file-mini"] span { color: var(--gx-t3); letter-spacing: .08em; }
[data-gx="file-mini"] b { font-weight: 500; color: var(--gx-t1); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── sky plot ── */
[data-gx="sky"] { aspect-ratio: 1; width: 100%; max-width: 560px; }
.gx-sky-svg { width: 100%; height: 100%; overflow: visible; font-family: var(--gx-mono); }
.gx-sky-svg .r0 { fill: rgba(125,179,199,.04); stroke: var(--gx-hair2); stroke-width: .6; }
.gx-sky-svg .r { fill: none; stroke: var(--gx-hair); stroke-width: .4; }
.gx-sky-svg .lbl { fill: var(--gx-t3); font-size: 6px; text-anchor: middle; letter-spacing: .1em; }
.gx-sky-svg .lbl.sm { font-size: 4.2px; text-anchor: start; }
.gx-sky-svg .you { fill: var(--gx-warn); } .gx-sky-svg .you-l { fill: var(--gx-warn); text-anchor: middle; }
.gx-sky-svg .sat { fill: var(--gx-sig); } .gx-sky-svg .sat.vip { fill: #fff; stroke: var(--gx-sig); stroke-width: .8; }
.gx-sky-svg .air { fill: #fff; stroke: #000; stroke-width: .3; }
.gx-sky-svg .ol { fill: var(--gx-t1); font-size: 4.4px; letter-spacing: .04em; }
.gx-sweep { transform-origin: 0 0; animation: gxsweep 6s linear infinite; }
@keyframes gxsweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gx-sweep { animation: none; opacity: 0; } }
.gx-tbl { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--gx-mono); }
.gx-tbl th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gx-t3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--gx-hair2); }
.gx-tbl td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--gx-hair); color: var(--gx-t1); vertical-align: top; font-variant-numeric: tabular-nums; }
.gx-tbl td:last-child { font-family: var(--gx-sans); font-size: 14px; color: var(--gx-t2); }
.gx-tbl td:nth-child(2), .gx-tbl td:nth-child(3) { white-space: nowrap; }
.gx-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; background: var(--gx-sig); }
.gx-dot.air { background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 640px) { .gx-tbl .hide-s { display: none; } .gx-tbl td:last-child { font-family: var(--gx-mono); font-size: 13px; color: var(--gx-t1); } }

/* ── track jokes ── */
.gx-assess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gx-hair2); font: 13px/1.4 var(--gx-mono); color: var(--gx-warn); }
.gx-assess span { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gx-t3); margin-bottom: 2px; }

/* ── boot ── */
[data-gx="boot"] { position: fixed; inset: 0; z-index: 10000; background: #030405; color: #b9d7c3; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: pointer; transition: opacity .6s; }
[data-gx="boot"].out { opacity: 0; pointer-events: none; }
[data-gx="boot"] pre { margin: 0; width: min(100%, 720px); font: 13px/1.75 var(--gx-mono); white-space: pre-wrap; text-shadow: 0 0 8px rgba(120,220,160,.35); }
[data-gx="boot"] pre::after { content: '█'; animation: gxblink 1s steps(1) infinite; }
[data-gx="boot"] small { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font: 11px var(--gx-mono); letter-spacing: .2em; color: #4d5a52; }
@keyframes gxblink { 50% { opacity: 0; } }
@media (max-width: 480px) { [data-gx="boot"] pre { font-size: 10.5px; } }