/* Top bar (full width, one row of sections) in the solid-shadow (neubrutalist) style:
   flat colour, thick black outline, hard offset black shadow, no blur. */
:root{
  --tb-h:58px;
  --nb-line:#000;
  --nb-border:2px solid var(--nb-line);
  --nb-shadow:4px 4px 0 var(--nb-line);
  --nb-shadow-lg:6px 6px 0 var(--nb-line);
  --ocean-deep:#07121d;
  --ocean-mid:#1f3c58;
  --ocean-card:#0e1b27;
  --accent:#3fd0ff;
  --text-hi:#eaf6ff;
}
#topbar{position:fixed;top:0;left:0;right:0;z-index:10;height:calc(var(--tb-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gr) 0 var(--gl);display:flex;align-items:center;gap:16px;
  background:var(--ocean-deep);border-bottom:var(--nb-border);box-shadow:0 4px 0 var(--nb-line);isolation:isolate}
#tbbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
#topbar .tb-logo{height:22px;width:auto;flex:none}
.tb-nav{display:flex;gap:10px;flex:1;min-width:0}
.tb-nav a{font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--text-hi);
  padding:9px 14px;border:var(--nb-border);border-radius:6px;background:var(--ocean-mid);box-shadow:3px 3px 0 var(--nb-line);
  transition:transform .12s,box-shadow .12s;white-space:nowrap}
.tb-nav a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--nb-line)}
.tb-nav a:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--nb-line)}
.tb-nav a[aria-current="page"]{background:var(--accent);color:var(--ocean-deep)}
.tb-nav a:focus-visible{outline:2px solid var(--hazard);outline-offset:3px}
.tb-meta{display:flex;align-items:center;gap:12px;flex:none}
#clock{font:600 12px/1 var(--mono);color:var(--text-hi);font-variant-numeric:tabular-nums;letter-spacing:.04em}
#srcBadge{background:var(--ocean-deep);color:var(--text-hi);border:var(--nb-border);box-shadow:2px 2px 0 var(--nb-line)}
#srcBadge.sim i{background:var(--hazard);box-shadow:none}
#srcBadge.live i{background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* The 3D loading screen belongs to Principal only. */
body[data-view]:not([data-view="principal"]) #loader{display:none}

/* Principal: the controller panel sits under the bar, same solid style. */
#hmi{top:calc(var(--tb-h) + 16px + env(safe-area-inset-top,0px));background:var(--ocean-card);border:var(--nb-border);
  box-shadow:var(--nb-shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none}
#hmi .evap{border-top:var(--nb-border)}

@media (max-width:720px){
  :root{--tb-h:52px}
  #topbar{gap:10px}
  #topbar .tb-logo{height:17px}
  #clock{display:none}
  .tb-nav{gap:8px}
  .tb-nav a{font-size:13px;padding:8px 10px}
}
@media (max-width:520px){
  #topbar{gap:8px}
  #topbar .tb-logo{height:12px}
  .tb-nav{gap:6px;min-width:0}
  .tb-nav a{font-size:11.5px;letter-spacing:.03em;padding:7px 7px;box-shadow:2px 2px 0 var(--nb-line)}
  .tb-count{margin-left:4px;min-width:16px;height:16px;font-size:10px}
  #srcBadge span{display:none}
  #srcBadge{padding:6px}
}
@media (prefers-reduced-motion:reduce){.tb-nav a{transition:none}}

/* Brands: Safran wordmark, a divider, then the Alser icon and name straight on the bar. */
.tb-brand{display:flex;align-items:center;gap:14px;flex:none}
.tb-alser{display:inline-flex;align-items:center;gap:8px;padding-left:14px;border-left:2px solid rgba(234,246,255,.28)}
.tb-alser img{height:28px;width:auto;filter:drop-shadow(0 0 1.5px rgba(234,246,255,.55))}
.alser-name{display:flex;flex-direction:column;line-height:1}
.alser-name b{font:700 15px/1 var(--display);letter-spacing:.08em;color:var(--text-hi)}
.alser-name i{font:600 8px/1.3 var(--display);font-style:normal;letter-spacing:.14em;color:var(--text-hi);opacity:.75}

/* Update banner: solid yellow strip under the bar with a black button. */
.upd{position:fixed;z-index:11;left:50%;transform:translateX(-50%);top:calc(var(--tb-h) + 12px + env(safe-area-inset-top,0px));
  width:min(640px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 16px;background:var(--hazard);color:#0b0b0b;border:var(--nb-border);border-radius:10px;
  box-shadow:var(--nb-shadow);font:500 14px/1.3 var(--body)}
.upd-txt b{font-weight:700}
.upd-btn{flex:none;background:#0b0b0b;color:#fff;border:var(--nb-border);border-radius:7px;box-shadow:3px 3px 0 rgba(0,0,0,.35);padding:10px 14px}
.upd-btn:hover{background:#222}
.upd-btn:active{transform:translate(2px,2px);box-shadow:none}
.upd-btn:disabled{opacity:.7;cursor:progress}
body.has-update #hmi{top:calc(var(--tb-h) + 92px + env(safe-area-inset-top,0px))}

@media (max-width:720px){
  .tb-brand{gap:10px}
  .alser-name{display:none}
  .tb-alser{padding-left:10px}
  .tb-alser img{height:22px}
  .upd{font-size:13px}
}
@media (max-width:520px){
  .tb-brand{gap:7px}
  .tb-alser{padding-left:7px}
  .tb-alser img{height:18px}
  .upd-txt span,.upd-txt{font-size:12px}
}
@media (max-width:359px){ #topbar .tb-meta{display:none} }