/* One shared frame for navigation, archive, inspector and map instruments. */
:root {
  --gutter:clamp(24px,2.6vw,50px);
  --header-height:112px;
  --footer-height:48px;
  --layout-gap:16px;
  --dock-height:64px;
  --panel-pad:24px;
}
.topbar {
  left:var(--gutter);right:var(--gutter);height:var(--header-height);padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:80px 32px;column-gap:20px;
}
.brand {grid-column:1;grid-row:1;justify-self:start;min-width:0}
.view-switch {grid-column:2;grid-row:1;justify-self:center}
.view-switch button {min-width:92px;min-height:36px;padding:10px 14px}
.youtube-channel {
  grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px;
  min-height:42px;padding:0 14px;border:1px solid var(--line);background:#0a161acc;
  font:500 12px 'IBM Plex Sans',sans-serif;color:var(--ink);transition:background .2s,border-color .2s;
}
.youtube-channel:hover {background:#1b3234;border-color:#82977c80;color:var(--ink)}
.youtube-channel small {font:7px 'IBM Plex Mono',monospace;letter-spacing:.08em;margin-left:6px;color:var(--muted)}
.external-arrow {color:var(--muted);font:12px 'IBM Plex Mono',monospace}
.youtube-icon {width:22px;height:17px;display:block;flex-shrink:0}
.youtube-icon rect {fill:#c65344}.youtube-icon path {fill:#fff0df}
.archive-meta {grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;align-self:stretch;border-bottom:1px solid var(--line);padding-bottom:10px;pointer-events:none}
.topbar .sector {position:static;display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:.09em;color:var(--muted)}
.topbar .sector i,.topbar .sector span {margin:0}
.topbar .sector .sector-code {color:#b7c5ae}
.topbar .sector .sector-divider {color:var(--dim)}
.topbar .sector .sector-name {color:var(--muted)}
.receiver {display:flex;gap:8px;font-size:7px;line-height:1;letter-spacing:.06em}
.receiver i {width:3px;height:3px}
.receiver b {margin-left:5px}
.intro {left:var(--gutter);bottom:calc(var(--footer-height) + var(--layout-gap) + var(--dock-height) + 24px);max-width:440px}
.intro h1 {margin:16px 0}
.intro p {font-size:12px;line-height:1.7}
.map-dock {
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--footer-height) + var(--layout-gap));height:var(--dock-height);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0;
  border:0;background:transparent;pointer-events:none;z-index:6;
}
.map-guidance {display:flex;flex-direction:column;gap:9px;min-width:0}
.map-help,.type-key {position:static;margin:0;max-width:none}
.map-help {font-size:8px;line-height:1.4;color:#aab8a7}
.map-help span {padding:0;color:inherit}
.map-help .help-divider {padding:0 8px;color:var(--dim)}
.type-key {gap:15px;font-size:7px;letter-spacing:.05em;color:#81957e}
.map-dock .map-controls {position:static;display:flex;gap:8px;flex-shrink:0;pointer-events:auto;transition:none}
.map-controls button {height:36px;min-width:36px}
.has-selection .map-dock {right:calc(var(--gutter) + var(--panel) + var(--layout-gap))}
.has-selection .map-help {display:block}
.list-view .map-dock {display:none}
.inspector {
  right:var(--gutter);top:calc(var(--header-height) + var(--layout-gap));bottom:calc(var(--footer-height) + var(--layout-gap));
  height:auto;max-height:none;
}
.inspector-scroll {flex:1}
.inspector-top,.identity,.field-report,.record-navigation {padding-left:var(--panel-pad);padding-right:var(--panel-pad)}
.identity {border-left:0;box-shadow:inset 2px 0 #b9b18e}
.inspector[data-type=Anomaly] .identity {box-shadow:inset 2px 0 #c69d72}
.transmission-player {padding-left:var(--panel-pad);padding-right:var(--panel-pad)}
.player-heading {height:48px;gap:8px}
.player-heading h2 {font-size:8px;letter-spacing:.06em;white-space:nowrap}
.player-heading h2 span {margin-right:7px;padding-right:7px}
.player-heading #youtube-link {display:inline-flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid #9e6b5145;background:#38231b66;color:#d4bdab;font-size:9px;white-space:nowrap;letter-spacing:0}
.player-heading #youtube-link:hover {background:#51312499;color:#fff0df;border-color:#b77b5f}
.player-heading .youtube-icon {width:16px;height:12px}
.archive-view {inset:calc(var(--header-height) + var(--layout-gap)) var(--gutter) calc(var(--footer-height) + var(--layout-gap));max-width:none;margin:0;padding:24px;border:1px solid var(--line);background:#081210ed}
.archive-heading {display:block;margin-bottom:20px}
.archive-heading .eyebrow {margin:0}
.archive-heading h1 {display:flex;align-items:baseline;gap:12px;margin:8px 0 0;font-size:clamp(28px,3vw,40px)}
.archive-heading h1 span {margin:0;flex-shrink:0}
.archive-heading>p {display:block;margin:10px 0 0;padding:0;font-size:12px;line-height:1.5}
.archive-tools {gap:16px;padding-bottom:16px}
.search-box,.search-box input {min-width:0}
.archive-row {padding-left:0;padding-right:8px}
.archive-summary {padding-top:16px}
footer {left:var(--gutter);right:var(--gutter);height:var(--footer-height);display:grid;grid-template-columns:1fr auto 1fr;column-gap:16px}
footer>a:first-of-type {margin:0;justify-self:center}
footer .channel-link {justify-self:end;font-size:8px;color:#aa998b}
@media(max-width:1150px) {
  :root {--panel-pad:20px}
  .topbar {column-gap:12px}
  .brand-copy strong {font-size:15px}
  .brand-copy small {font-size:7px}
  .brand {gap:11px}
  .brand-mark,.brand-mark img {width:52px;height:32px}
  .youtube-channel small {display:none}
  .has-selection .map-help {font-size:7px}
  .has-selection .map-help .help-divider {padding:0 5px}
}
@media(min-width:641px) and (max-width:850px) {
  .brand-copy strong {font-size:12px}
  .brand-copy small {font-size:5px}
  .brand-mark,.brand-mark img {width:44px;height:26px}
  .view-switch button {min-width:76px;padding:10px;font-size:9px}
  .view-switch button span {display:none}
  .youtube-channel {min-height:38px;font-size:11px;padding:0 10px;gap:7px}
  .youtube-channel .external-arrow {display:none}
  .type-key {display:none}
  .map-help {font-size:7px}
  .has-selection .map-guidance {display:none}
  .has-selection .map-dock {justify-content:flex-end}
  .player-heading h2 {font-size:7px}
  .player-heading #youtube-link {font-size:8px;padding:6px;gap:4px}
  .archive-view {padding:20px}
}
@media(max-width:640px) {
  :root {--gutter:16px;--header-height:108px;--footer-height:36px;--layout-gap:12px;--dock-height:52px;--panel-pad:16px;--sheet-height:55dvh}
  .topbar {grid-template-rows:60px 48px;column-gap:10px;border-bottom:1px solid var(--line)}
  .brand {grid-column:1/3;grid-row:1;gap:9px}
  .brand-copy strong {font-size:12px;letter-spacing:.03em}
  .brand-copy small {font-size:5px;letter-spacing:.1em}
  .brand-mark,.brand-mark img {width:42px;height:26px}
  .view-switch {grid-column:1/-1;grid-row:2;align-self:start;padding:3px}
  .view-switch button {min-width:88px;min-height:34px;font-size:8px;padding:9px 14px}
  .youtube-channel {grid-column:3;min-height:34px;padding:0 9px;gap:7px;font-size:11px}
  .youtube-channel .external-arrow {display:none}
  .youtube-channel .youtube-icon {width:19px;height:15px}
  .archive-meta {display:none}
  .intro {max-width:calc(100% - var(--gutter)*2);bottom:calc(var(--footer-height) + var(--layout-gap) + var(--dock-height) + 20px)}
  .intro h1 {font-size:30px;margin:12px 0}
  .intro .eyebrow {font-size:7px;letter-spacing:.08em}
  .intro p {font-size:10px;line-height:1.6}
  .map-dock {gap:10px}
  .map-guidance {max-width:112px}
  .map-help,.has-selection .map-help {font-size:7px;line-height:1.6}
  .map-help .help-divider {display:none}
  .map-help .orbit-help,.map-help .zoom-help {display:block}
  .type-key {display:none}
  .map-dock .map-controls {gap:5px}
  .map-controls button {height:34px;min-width:34px}
  .motion-control {padding:0 9px!important;font-size:7px;gap:6px}
  .inspector {top:auto;left:var(--gutter);right:var(--gutter);bottom:calc(var(--footer-height) + var(--layout-gap));height:var(--sheet-height);max-height:calc(100dvh - var(--header-height) - var(--footer-height) - var(--dock-height) - var(--layout-gap)*3 - 50px);width:auto}
  .has-selection .map-dock {right:var(--gutter);bottom:calc(var(--footer-height) + var(--layout-gap)*2 + min(var(--sheet-height),100dvh - var(--header-height) - var(--footer-height) - var(--dock-height) - var(--layout-gap)*3 - 50px))}
  .identity {padding-top:14px;padding-bottom:14px}
  .identity h1 {font-size:30px;margin:10px 0}
  .transmission-player {padding-left:var(--panel-pad);padding-right:var(--panel-pad);padding-bottom:16px}
  .player-heading {padding:0;height:46px}
  .player-heading h2 {font-size:7px;letter-spacing:0}
  .player-heading h2 span {margin-right:5px;padding-right:5px}
  .player-heading #youtube-link {font-size:8px;padding:6px;gap:4px}
  .transport {padding:0 8px;gap:7px}
  .transport-readout {min-width:80px}
  .volume-controls input {width:30px}
  .seek-track {padding-left:9px;padding-right:9px}
  .transmission-player .media {margin-left:calc(-1 * var(--panel-pad));margin-right:calc(-1 * var(--panel-pad));border-left:0;border-right:0}
  .transmission-player:fullscreen .media,.transmission-player.player-expanded .media {margin-left:auto;margin-right:auto}
  .archive-view {padding:16px}
  .archive-heading {margin-bottom:16px}
  .archive-heading h1 {font-size:26px}
  .archive-heading>p {font-size:10px;margin-top:8px}
  .archive-tools {gap:10px;padding-bottom:12px}
  .archive-tools select {width:100px}
  .archive-row {grid-template-columns:72px minmax(0,1fr) 12px;gap:12px}
  .archive-row>img {width:72px}
  .archive-record>strong {font-size:17px}
  footer {grid-template-columns:1fr auto;font-size:6px;column-gap:8px}
  footer>a:first-of-type {justify-self:start}
  footer .channel-link {font-size:6px}
}
@media(max-width:360px) {
  .archive-heading h1 {font-size:23px;gap:8px}
  .brand-copy strong {font-size:10px}
  .brand-copy small {font-size:4px}
  .brand-mark,.brand-mark img {width:34px;height:21px}
  .youtube-channel {padding:0 7px;font-size:10px;gap:5px}
  .map-guidance {max-width:84px}.map-help,.has-selection .map-help {font-size:6px}
  .volume-controls input {display:none}
  .player-heading h2 span {display:none}
  .player-heading #youtube-link {font-size:7px}
}