/* chrome.css — Standard page chrome for non-dashboard pages.
   Provides #bar (top), #tabs (bottom), #main (content area), #plaque (optional banner).
   See _template-page.html for the contract. CLAUDE.md "Page template" section for spec.
   Brand palette: cyan / amber / magenta only — no Christmas red/green. */

/* Universal body padding-bottom rule REMOVED — broke viewport-fit pages
   (fleet, builder, recommend) that use body { overflow:hidden }. The opt-out
   selector only matched inline styles, not <style>-block declarations.
   Pages with content overflow problems (firearms, armor) need a per-page
   fix instead. */

/* ── VIEWPORT ZOOM — design canvas 2560px, scales proportionally ─────
   --vp-zoom is set by quick-nav.js on every page. Pages that override
   zoom explicitly (dashboard, damage-sim) are unaffected since their
   inline/stylesheet rule wins over this one. */
html{ zoom: var(--vp-zoom, 1); }

/* ── HIDE ALL SCROLLBARS ─────────────────────────────────────────────
   Pilots scroll with the wheel/trackpad — visible scrollbars add chrome
   noise. Content still scrolls; only the bar UI is hidden. */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ── #BAR : top-strip chrome (responsive height) ──────────────────── */
#bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h,46px);z-index:99;
  display:flex;align-items:center;gap:clamp(6px,0.5vw,12px);padding:0 clamp(10px,0.9vw,20px);
  background:linear-gradient(180deg,rgba(8,14,22,.96),rgba(4,8,14,.99));
  /* Bottom border + cyan glow retired — read as a stray full-width cyan line under the bar */
  border-bottom:none;
  box-shadow:none;
  font-family:'Inter',-apple-system,sans-serif;
}
/* In-#bar HOME button retired — quick-nav.js injects the canonical HOME in the top-right cluster.
   Keeping the .back base styles below in case other "back" links are added, but suppress any
   in-bar HOME so we don't double-render it. */
#bar > a.back{display:none !important;}
#bar .back{
  font-size:var(--fs-sm,12px);letter-spacing:2px;font-weight:700;
  color:rgba(168,239,255,.85);text-decoration:none;
  padding:clamp(5px,0.5vh,9px) clamp(10px,0.9vw,18px);
  border:1px solid rgba(94,215,255,.45);
  background:linear-gradient(180deg,rgba(20,32,48,.85),rgba(8,14,22,.92));
  border-radius:3px;transition:.15s;
}
#bar .back:hover{color:#fff;border-color:rgba(168,239,255,1);
  box-shadow:0 0 10px rgba(94,215,255,.35);}
/* Version pill + patch-data pill — sit as a pair top-left, both compact.
   Matches Showdown's bright reference styling so every page reads identically. */
#bar .ver,
#bar .bar-data{
  font-family:'JetBrains Mono','Roboto Mono',monospace;
  font-size:12px;font-weight:600;letter-spacing:1.4px;line-height:1;
  padding:5px 11px;border-radius:3px;border:1px solid;white-space:nowrap;
}
#bar .ver{
  color:#a8e0ff;
  border-color:rgba(94,215,255,.50);
  background:rgba(8,18,32,.85);
  text-shadow:0 0 6px rgba(94,215,255,.40);
}
#bar .bar-data{
  color:rgba(168,239,255,.92);
  border-color:rgba(94,215,255,.50);
  background:rgba(8,18,32,.85);
  text-shadow:0 0 6px rgba(94,215,255,.35);
  cursor:help;
}
#bar .bar-data.amber  { color:rgba(255,235,180,.95); border-color:rgba(255,200,80,.60); background:rgba(28,20,8,.85); text-shadow:0 0 6px rgba(255,200,80,.40); }
#bar .bar-data.magenta{ color:rgba(255,180,220,.96); border-color:rgba(255,80,200,.65); background:rgba(28,8,20,.85);  text-shadow:0 0 6px rgba(255,80,200,.40); }
/* ── App-mode (iOS / Android wrapper) — minimal-art mode ───────────
   Activated by app-mode.js when ?app=1 or running in CapacitorWebView.
   Hides RSI/CIG-derived ship renders; replaces with original silhouettes
   so the store listing has zero copyrighted imagery. */
body[data-app-mode="1"] img.ship-img,
body[data-app-mode="1"] img.ship-thumb,
body[data-app-mode="1"] img.ship-render,
body[data-app-mode="1"] img[src*="starcitizen.tools"],
body[data-app-mode="1"] img[src*="robertsspaceindustries"],
body[data-app-mode="1"] img[src*="fleetyards"]{
  /* Fall back to silhouette via CSS variable + bg */
  visibility:hidden;position:relative;
}
body[data-app-mode="1"] img.ship-img::after,
body[data-app-mode="1"] img.ship-thumb::after,
body[data-app-mode="1"] img.ship-render::after{
  content:'';position:absolute;inset:0;
  background:url('/img/ship-silhouette.svg') center center / contain no-repeat;
  visibility:visible;
}
/* Strip CIG branding from any text node that references it inside app-mode */
body[data-app-mode="1"] .rsi-mark,
body[data-app-mode="1"] .cig-mark{display:none !important;}

/* Footer disclaimer slot for the app — visible only in app-mode */
body:not([data-app-mode="1"]) .app-mode-disclaimer{display:none !important;}
body[data-app-mode="1"] .app-mode-disclaimer{
  position:fixed;bottom:48px;left:0;right:0;z-index:50;
  text-align:center;padding:4px 8px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:1.5px;
  color:rgba(168,239,255,.45);
  background:linear-gradient(180deg,rgba(8,14,22,0),rgba(8,14,22,.85));
  pointer-events:none;
}

/* Page name in #bar — kept compact so the centered hero is the primary identifier */
#bar .page-name{display:none;}

/* ── CENTERED PAGE TITLE HERO (auto-injected by quick-nav.js) ──────
   Appears at top-center of every page. The big "⟦ NAME ⟧" identifier.
   Animated bracket phase + scan underline. Mirrors recommend.html's
   hero treatment so identity is consistent. */
/* Hero page title — INLINE (not fixed), uniform across every page.
   Catches: auto-injected #page-title-hero (new), legacy .hud-title > h1
   (mining/salvage/bounty/trading), HUDShell-injected .hud-shell-title,
   modern #main > h1 (template-page), and any opt-in h1.page-hero. */
html:not(.no-v8-theme) .hud-title,
html:not(.no-v8-theme) #title,
.hud-title,
#title{
  position:static !important;top:auto !important;left:auto !important;right:auto !important;
  transform:none !important;z-index:auto !important;pointer-events:auto !important;
  display:block !important;text-align:center !important;
  /* Push the title clear of the 40px fixed #bar — uniform across every page */
  margin:64px auto 14px !important;
}
.hud-title .sub{display:none !important;}
/* Standard subtitle treatment under the hero — uniform across pages. */
html:not(.no-v8-theme) #title-sub,
#title-sub{
  font-family:'Inter','Segoe UI',sans-serif !important;
  font-size:13px !important;letter-spacing:5px !important;font-weight:600 !important;
  color:rgba(220,235,250,.92) !important;text-shadow:0 1px 4px rgba(0,0,0,.85) !important;
  margin-top:6px !important;text-align:center !important;
}
html:not(.no-v8-theme) #page-title-hero,
html:not(.no-v8-theme) h1.page-hero,
html:not(.no-v8-theme) .hud-title h1,
html:not(.no-v8-theme) .hud-shell-title,
html:not(.no-v8-theme) #main > h1:first-of-type,
html:not(.no-v8-theme) .wrap > h1:first-of-type,
#page-title-hero,
#title h1,
h1.page-hero,
.hud-title h1,
.hud-shell-title,
#main > h1:first-of-type,
.wrap > h1:first-of-type{
  position:static !important;display:block !important;width:auto !important;
  margin:10px auto 22px !important;padding:0 !important;text-align:center !important;
  font-family:'Orbitron','Inter',sans-serif !important;font-weight:700 !important;
  font-size:46px !important;letter-spacing:8px !important;line-height:1 !important;
  color:#ffe8a0 !important;
  /* Crisper glow — earlier version used 22px blur which read as fuzzy text. */
  text-shadow:0 0 6px rgba(255,200,80,.40),0 1px 3px rgba(0,0,0,.95) !important;
  background:transparent !important;border:none !important;
  animation:pthEntrance .8s cubic-bezier(.25,.9,.30,1) both;
}

/* Bracket spans (cyan + glow) — matches both .pt-brk (new) and .brk (legacy).
   !important needed to beat v8-theme.css's `html:not(.no-v8-theme)` rules. */
html:not(.no-v8-theme) #page-title-hero .pt-brk,
html:not(.no-v8-theme) h1.page-hero .pt-brk,
html:not(.no-v8-theme) .hud-title h1 .brk,
html:not(.no-v8-theme) .hud-title .brk,
#page-title-hero .pt-brk,
#title h1 .brk,
h1.page-hero .pt-brk,
.hud-title h1 .brk,
.hud-shell-title .brk,
#main > h1:first-of-type .brk,
.wrap > h1:first-of-type .brk{
  color:rgba(94,215,255,.95) !important;
  font-size:58px !important;line-height:1 !important;
  text-shadow:0 0 10px rgba(94,215,255,.65),0 0 22px rgba(94,215,255,.35) !important;
  margin:0 6px !important;
}
/* Damage-sim & auto-hero use a .pt-line flex wrapper — keep that intact */
#page-title-hero .pt-line,
h1.page-hero .pt-line{
  display:inline-flex;align-items:baseline;gap:10px;
  font-size:inherit;letter-spacing:inherit;line-height:1;white-space:nowrap;
}
#page-title-hero .pt-name,
h1.page-hero .pt-name{font-weight:700;}
/* Subtitle under the main title (mono + small caps, cyan) */
#page-title-hero .pt-sub,
h1.page-hero .pt-sub{
  font-family:'JetBrains Mono','Roboto Mono',monospace;
  font-size:12px;letter-spacing:6px;font-weight:500;
  color:rgba(168,239,255,.85);text-shadow:0 0 8px rgba(94,215,255,.45);
  text-transform:uppercase;margin-top:6px;display:block;
}
/* "IN DEV" amber status pill — kept inline with the line */
#page-title-hero .pt-status,
h1.page-hero .pt-status{display:inline-flex;align-items:center;gap:6px;
  margin-left:18px;padding:3px 10px;border-radius:3px;
  font-family:'JetBrains Mono','Roboto Mono',monospace;font-size:11px;letter-spacing:2px;
  font-weight:700;text-shadow:none;line-height:1.2;align-self:center;}
#page-title-hero .pt-status-dev,
h1.page-hero .pt-status-dev{background:rgba(255,180,40,.18);
  border:1px solid rgba(255,180,40,.55);color:#ffcc66;
  box-shadow:0 0 12px rgba(255,180,40,.25);}

@keyframes pthEntrance{
  0%{opacity:0;transform:translateY(-12px);}
  100%{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  #page-title-hero,h1.page-hero,.hud-title h1,#main > h1:first-of-type,.wrap > h1:first-of-type{animation:none;}
}
@media (max-width:760px){
  #page-title-hero,h1.page-hero,.hud-title h1,#main > h1:first-of-type,.wrap > h1:first-of-type{
    font-size:30px;letter-spacing:5px;
  }
  #page-title-hero .pt-brk,h1.page-hero .pt-brk,.hud-title h1 .brk,
  #main > h1:first-of-type .brk,.wrap > h1:first-of-type .brk{font-size:38px;}
  #page-title-hero .pt-sub,h1.page-hero .pt-sub{font-size:10px;letter-spacing:3px;}
}
@media (max-width:480px){
  #page-title-hero,h1.page-hero,.hud-title h1,#main > h1:first-of-type,.wrap > h1:first-of-type{
    font-size:22px;letter-spacing:3px;
  }
  #page-title-hero .pt-brk,h1.page-hero .pt-brk,.hud-title h1 .brk,
  #main > h1:first-of-type .brk,.wrap > h1:first-of-type .brk{font-size:26px;}
  #page-title-hero .pt-sub,h1.page-hero .pt-sub{font-size:9px;letter-spacing:2px;}
}

#bar #global-search-kind{
  padding:clamp(4px,0.4vh,7px) clamp(8px,0.7vw,14px);font-family:inherit;font-size:var(--fs-xs,12px);letter-spacing:1.5px;
  font-weight:700;color:rgba(168,239,255,.85);
  background:linear-gradient(180deg,rgba(20,32,48,.85),rgba(8,14,22,.92));
  border:1px solid rgba(94,215,255,.45);border-radius:3px;cursor:pointer;
}
#bar #global-search{
  flex:1;max-width:clamp(380px,40vw,720px);padding:clamp(5px,0.5vh,9px) clamp(10px,0.9vw,16px);
  font-family:inherit;font-size:var(--fs-sm,13px);
  letter-spacing:1.5px;color:rgba(220,240,255,.92);
  background:rgba(8,14,22,.85);
  border:1px solid rgba(94,215,255,.30);border-radius:3px;
}
#bar #global-search:focus{outline:none;border-color:rgba(168,239,255,1);
  box-shadow:0 0 8px rgba(94,215,255,.45);}
#bar .bar-spacer{flex:1;}
#bar #theme-btn{
  width:clamp(30px,2.0vw,42px);height:clamp(30px,2.0vw,42px);
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(8,14,22,.85);border:1px solid rgba(94,215,255,.30);
  border-radius:3px;cursor:pointer;font-size:var(--fs-md,16px);transition:.15s;
}
#bar #theme-btn:hover{border-color:rgba(168,239,255,1);
  box-shadow:0 0 10px rgba(94,215,255,.35);}

/* ── #MAIN : page content area, bounded by chrome strips ──────────── */
#main{
  position:absolute;top:calc(var(--bar-h,46px) + 8px);left:0;right:0;bottom:calc(var(--tab-h,52px) + 8px);
  overflow-y:auto;overflow-x:hidden;
}

/* ── #TABS : bottom-strip chrome — page tabs + aux action buttons ── */
#tabs{
  position:fixed;bottom:0;left:0;right:0;height:var(--tab-h,52px);z-index:99;
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,rgba(4,8,14,.99),rgba(8,14,22,.96));
  border-top:1px solid rgba(94,215,255,.30);
  box-shadow:0 -1px 0 rgba(0,0,0,.55),0 0 18px rgba(94,215,255,.12);
  font-family:'Inter',-apple-system,sans-serif;
}
#tabs .tab-btn{
  display:flex;align-items:center;gap:clamp(5px,0.4vw,9px);padding:0 clamp(14px,1.2vw,28px);
  font-family:inherit;font-size:var(--fs-sm,13px);letter-spacing:2.5px;font-weight:700;
  color:rgba(168,239,255,.78);
  background:transparent;border:none;border-right:1px solid rgba(94,215,255,.18);
  cursor:pointer;text-transform:uppercase;transition:.15s;
}
#tabs .tab-btn .ico{font-size:var(--fs-md,16px);}
#tabs .tab-btn:hover{color:#fff;background:rgba(94,215,255,.06);}
#tabs .tab-btn.active{
  color:rgba(255,235,180,1);
  background:linear-gradient(180deg,rgba(40,80,120,.50),rgba(20,40,64,.55));
  text-shadow:0 0 6px rgba(255,200,80,.55);
  box-shadow:inset 0 2px 0 rgba(255,200,80,.65);
}
#tabs .tab-spacer{flex:1;}
#tabs .tab-aux{display:flex;align-items:stretch;}
#tabs .aux-btn{
  display:flex;align-items:center;gap:clamp(5px,0.4vw,9px);padding:0 clamp(11px,1vw,22px);
  font-family:inherit;font-size:var(--fs-sm,13px);letter-spacing:2px;font-weight:700;
  color:rgba(168,239,255,.78);text-decoration:none;
  background:transparent;border:none;border-left:1px solid rgba(94,215,255,.18);
  cursor:pointer;text-transform:uppercase;transition:.15s;
}
#tabs .aux-btn .ico{font-size:var(--fs-md,16px);}
#tabs .aux-btn:hover{color:#fff;background:rgba(94,215,255,.06);}
#tabs .aux-btn.warn{color:rgba(255,180,220,.85);}
#tabs .aux-btn.warn:hover{color:#fff;background:rgba(255,80,200,.08);}

/* ── Mobile breakpoints (standard) ──────────────────────────────── */
@media (max-width:760px){
  #bar{padding:0 8px;gap:6px;height:34px;}
  #bar .back{padding:4px 8px;font-size:9px;}
  #bar .ver{font-size:10px;letter-spacing:1px;padding:3px 8px;}
  /* Hide search input on mobile — quick-nav cluster has its own search */
  #bar #global-search,#bar #global-search-kind{display:none;}
  #main{top:42px;bottom:46px;}
  #tabs{height:38px;}
  #tabs .aux-btn{padding:0 10px;font-size:9px;}
  #tabs .aux-btn .ico{font-size:11px;}
  /* Allow tabs row to scroll horizontally rather than overflow off-screen */
  #tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #tabs::-webkit-scrollbar{height:0;display:none;}
}
@media (max-width:480px){
  #bar{height:32px;}
  #bar .back .label,#bar .ver .build-tag{display:none;}
  #main{top:40px;bottom:44px;}
  #tabs{height:36px;}
  #tabs .tab-btn{padding:0 10px;font-size:8.5px;letter-spacing:1px;}
  #tabs .tab-btn span:not(.ico){display:none;}
  #tabs .aux-btn{padding:0 8px;}
  #tabs .aux-btn span:not(.ico){display:none;}
}