/* ============================================================
   THEME — edit this block to reskin the whole page.
   Everything below reads from these variables.
   ============================================================ */
:root{
  --bg-void:        #05070a;
  --bg-panel:       #0d1117;
  --bg-panel-2:     #10151d;
  --line:           #1c242e;

  --accent:         #ff9e1b;   /* HUD amber — stat fill           */
  --accent-dim:     #4a3211;   /* unfilled segment, amber family  */
  --accent-glow:    rgba(255, 158, 27, 0.55);

  --text-hi:        #eef2f5;
  --text-mid:       #93a1ad;
  --text-low:       #55626d;

  --font-display:   'Rajdhani', sans-serif;
  --font-data:      'Share Tech Mono', monospace;

  --segments:       10;        /* bar resolution: 10 segments = 0.5 pts each on a 0-5 scale */
  --stat-max:       5;         /* fixed rating ceiling, matches the source table */
  --radius-cut:     14px;      /* chamfer size on panels */
}

*{ box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,158,27,0.06), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 110%, rgba(72,224,209,0.04), transparent 60%),
    var(--bg-void);
  color: var(--text-hi);
  font-family: var(--font-display);
  padding: 48px 32px 64px;
}

.site-head{
  max-width: 1180px;
  margin: 0 auto 16px;
}
.site-head h1{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin:0;
}
.head-row{
  width: 100%;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.site-head p.tagline{
  margin:0;
  color: var(--accent);
  font-size: 14px;
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.page-head{
  max-width: 1180px;
  margin: 0 auto 36px;
}
.page-head p.page-desc{
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}

.glossary{
  max-width: 1180px;
  margin: 34px auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 28px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.glossary-term{
  display:block;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.glossary-def{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mid);
}

.grid{
  max-width: 1180px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.flip-card{
  perspective: 1400px;
  cursor: pointer;
}
.flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  transition: transform 0.55s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }

.flip-face{
  grid-area: 1 / 1;
  backface-visibility: hidden;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  clip-path: polygon(
    var(--radius-cut) 0, 100% 0, 100% calc(100% - var(--radius-cut)),
    calc(100% - var(--radius-cut)) 100%, 0 100%, 0 var(--radius-cut)
  );
  display:flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.flip-back{
  padding: 22px 22px 20px;
}
.flip-front::before, .flip-back::before{ z-index: 3; }
.flip-front::before{
  content:"";
  position:absolute; top:0; left:0;
  width: 46px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.flip-back::before{
  content:"";
  position:absolute; top:0; right:0;
  width: 46px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.flip-back{
  transform: rotateY(180deg);
  clip-path: polygon(
    0 0, calc(100% - var(--radius-cut)) 0, 100% var(--radius-cut),
    100% 100%, var(--radius-cut) 100%, 0 calc(100% - var(--radius-cut))
  );
}

/* ---- front-face background photo, fading to panel grey by 1/3 down ---- */
.bg-image{
  position:absolute; top:0; left:0;
  width:100%; height: 340px;
  object-fit: cover;
  z-index: 0;
}
.bg-scrim{
  position:absolute; inset:0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(16,21,29,0) 0px,
    var(--bg-panel-2) 300px,
    var(--bg-panel-2) 100%);
}
/* bright photos (content.json "strongScrim"): darken sooner so the name stays readable */
.bg-scrim.strong{
  background: linear-gradient(180deg,
    rgba(16,21,29,0.15) 0px,
    rgba(16,21,29,0.75) 150px,
    var(--bg-panel-2) 270px,
    var(--bg-panel-2) 100%);
}
.card-content{
  position:relative;
  z-index: 2;
  height: 100%;
  display:flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}
.image-spacer{ height: 130px; flex-shrink: 0; }

.flip-hint{
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-data);
  font-size: 10.5px;
  color: var(--text-low);
  text-align: center;
}

.back-section{ margin-bottom: 16px; }
.back-section:last-of-type{ margin-bottom: 0; }
.back-label{
  display:block;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.back-text{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0;
}
.build-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.build-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--accent-dim);
  background: rgba(255, 158, 27, 0.06);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.build-link:hover{
  background: rgba(255, 158, 27, 0.15);
  border-color: var(--accent);
}
.build-arrow{ font-size: 11px; opacity: 0.85; }

/* ---- back-face header: ship name + "open in Side-by-Side" jump ----
   The jump button(s) share the name's row, so they add no card height
   (the name wraps under them only on the narrowest cards). */
.back-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.back-head .ship-name{ min-width: 0; }
/* back-head is its own size container so the jump can compact itself on the
   narrowest cards: "Imperial Eagle" + the full STATS/DRIVE/DRAG group needs
   ~276px, min-width cards give 254px. Below that, the STATS caption drops. */
.back-head{ container-type: inline-size; }
@container (max-width: 280px){ .sbs-jump .sbs-cap{ display: none; } }
.sbs-jump{
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  border: 1px solid var(--accent-dim);
  background: rgba(255, 158, 27, 0.06);
}
.sbs-jump button{
  background: none;
  border: none;
  margin: 0;
  padding: 4px 9px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sbs-jump button:hover, .sbs-jump button:focus-visible{ background: rgba(255, 158, 27, 0.18); outline: none; }
.sbs-jump .sbs-cap{
  padding: 4px 3px 4px 9px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-low);
  white-space: nowrap;
}
/* dual-build ships: the build currently shown on the card's front is lit */
.sbs-jump.dual button + button{ border-left: 1px solid var(--accent-dim); }
.sbs-jump.dual button.current{ background: rgba(255, 158, 27, 0.22); color: var(--text-hi); }

.ship-name{
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 3px;
}
.ship-flavor{
  font-family: var(--font-data);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
  color: var(--accent);
  opacity: 0.85;
  margin: 0 0 10px;
}

/* ---- boost profile (front face) ---- */
.boost-profile{
  margin-top: 16px;
}
.boost-header{
  font-size: 13.5px;
  color: var(--text-mid);
  font-weight: 600;
  margin-bottom: 7px;
}
.boost-track{
  position: relative;
  width: 100%;
}
.boost-bar{
  display: flex;
  height: 16px;
  width: 100%;
  overflow: hidden;
}
.boost-phase{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
.boost-phase.spinup, .boost-phase.cooldown{
  background: var(--accent-dim);
}
.boost-phase.accel{
  background: linear-gradient(180deg, var(--accent), #c97810);
  box-shadow: 0 0 6px var(--accent-glow);
}
.boost-phase-label{
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: var(--text-hi);
  opacity: 0.85;
  padding: 0 3px;
}
.boost-phase.accel .boost-phase-label{ color: #201200; opacity: 0.9; }

/* tick axis */
.boost-axis{
  position: relative;
  height: 12px;
  margin-top: 3px;
}
.boost-tick{
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--text-low);
}
.boost-tick.minor{ height: 4px; }
.boost-tick.major{ height: 8px; background: var(--text-mid); }
.boost-tick-label{
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--text-low);
}

.ship-desc{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 18px 0 22px;
}

.stat-row{ margin-bottom: 13px; }
.stat-row:last-child{ margin-bottom: 0; }

.stat-label{
  display:block;
  font-size: 13.5px;
  color: var(--text-mid);
  font-weight: 600;
  margin-bottom: 5px;
}

.stat-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: 5px;
}
.stat-top .stat-label{ margin-bottom: 0; }
.stat-value{
  font-family: var(--font-data);
  font-size: 12.5px;
  color: var(--text-hi);
  white-space: nowrap;
}
.stat-value .alt-speed{
  font-size: 0.82em;
  color: var(--text-low);
  margin-right: 4px;
}

.speed-toggle{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.speed-toggle .stat-value{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-low);
}
.speed-toggle:hover .stat-value{
  text-decoration-color: var(--accent);
}
.speed-toggle .speed-first{ margin-right: 4px; }
.speed-toggle[data-state="primary"] .speed-first{ font-size: 0.82em; color: var(--text-low); }
.speed-toggle[data-state="primary"] .speed-second{ color: var(--text-hi); }
.speed-toggle[data-state="alt"] .speed-second{ font-size: 0.82em; color: var(--text-low); }
.speed-toggle[data-state="alt"] .speed-first{ color: var(--text-hi); }
.build-tag{
  display:block;
  font-family: var(--font-data);
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.bar{
  display:grid;
  grid-template-columns: repeat(var(--segments), 1fr);
  gap: 3px;
  height: 12px;
}
.seg{
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0% 100%);
  background: var(--accent-dim);
  transition: background 0.15s ease;
}
.seg.on{
  background: linear-gradient(180deg, var(--accent), #c97810);
  box-shadow: 0 0 6px var(--accent-glow);
}

.footnote{
  max-width: 1180px;
  margin: 30px auto 0;
  color: var(--text-mid);
  font-family: var(--font-data);
  font-size: 12px;
}
.site-nav{
  max-width: 1180px;
  margin: 0 auto 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.site-nav a{
  font-family: var(--font-data);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover{
  color: var(--text-hi);
  border-color: var(--text-low);
}
.site-nav a.active{
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.nav-copy{
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(255, 158, 27, 0.06);
  border: 1px solid var(--accent-dim);
  padding: 7px 13px;
  cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-copy:hover{ background: rgba(255, 158, 27, 0.15); border-color: var(--accent); }

/* ---- footer (every tab) ---- */
.site-foot{
  max-width: 1180px;
  margin: 48px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-data);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-mid);
}
.site-foot p{ margin: 0 0 4px; }

/* shown by index.html if the data or scripts fail to load */
.load-error{
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-data);
  font-size: 13px;
}

/* phones: narrower page gutters */
@media (max-width: 640px){
  body{ padding: 24px 16px 48px; }
}
.placeholder{
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
  border: 1px dashed var(--line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.placeholder h2{
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--accent);
}
.placeholder p{
  margin: 0 auto;
  max-width: 46ch;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- detailed stats table ---- */
.table-wrap{
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.stats-table{
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-data);
  font-size: 13px;
  white-space: nowrap;
}
.stats-table thead th{
  position: sticky;
  top: 0;
  background: var(--bg-panel-2);
  color: var(--text-mid);
  font-weight: 600;
  text-align: right;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.stats-table thead th:first-child{
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 3;
}
.stats-table thead th:hover{ color: var(--text-hi); background: #141b25; }
.stats-table thead th.sorted{ color: var(--accent); }
.sort-arrow{ opacity: 0.9; margin-left: 3px; }
.stats-table thead th:not(.sorted) .sort-arrow{ opacity: 0; }

.stats-table tbody td{
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(28,36,46,0.6);
  color: var(--text-hi);
}
.stats-table tbody td:first-child{
  text-align: left;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  position: sticky;
  left: 0;
  background: var(--bg-panel);
  z-index: 1;
}
.stats-table tbody tr:hover td{ background: #10151d; }
.stats-table tbody tr:hover td:first-child{ background: #141b25; }

/* tint whichever column is currently sorted */
.stats-table th.sorted-col, .stats-table td.sorted-col{
  background: rgba(255, 158, 27, 0.06);
}
.stats-table tbody tr:hover td.sorted-col{ background: rgba(255, 158, 27, 0.11); }
.stats-table tbody td.sorted-col:first-child{ background: rgba(255, 158, 27, 0.06); }
.stats-table tbody tr:hover td.sorted-col:first-child{ background: rgba(255, 158, 27, 0.11); }
.stats-table td .unit{
  color: var(--text-low);
  font-size: 0.85em;
  margin-left: 2px;
}
.stats-table td .unit sup{
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* ---- methodology ---- */
.methodology{
  max-width: 1180px;
  margin: 40px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.methodology h2{
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}
.methodology .method-intro{
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 72ch;
}
.method-item{
  margin-bottom: 18px;
  max-width: 82ch;
}
.method-item:last-child{ margin-bottom: 0; }
.method-term{
  display: block;
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}
.method-term .u{ font-size: 0.85em; color: var(--text-low); }
.method-term .u sup{ font-size: 0.7em; vertical-align: super; line-height: 0; }
.method-desc{
  margin: 0;
  color: var(--text-mid);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ================= SHARED: dropdown component ================= */
/* Markup comes from js/components/dropdown.js. Per-tab tweaks (panel
   alignment, spacing) stay in each tab's section below. */
.controls{max-width:1180px; margin:0 auto 22px; display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;}
.compare-slot{margin-left:auto;}
.dropdown{position:relative;}
.dropdown-btn{background:var(--bg-void); color:var(--text-hi); border:1px solid var(--line);
  font-family:var(--font-display); font-size:15px; font-weight:600;
  padding:9px 12px; min-width:250px; cursor:pointer; outline:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;}
.dropdown-btn:hover{border-color:var(--accent);}
.dropdown.open .dropdown-btn{border-color:var(--accent);}
.dropdown-btn .caret{color:var(--text-low); font-size:12px;}
.dropdown.open .dropdown-btn .caret{color:var(--accent);}
.dropdown-panel{display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:50;
  background:var(--bg-panel); border:1px solid var(--line);
  min-width:250px; max-height:260px; overflow-y:auto; padding:4px 0;
  box-shadow:0 8px 24px rgba(0,0,0,0.55);}
.dropdown.open .dropdown-panel{display:block;}
.drop-item{display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer;
  font-family:var(--font-display); font-size:14px; color:var(--text-mid);}
.drop-item:hover{background:#141b25; color:var(--text-hi);}
.drop-item.selected{color:var(--text-hi);}
.drop-item .box{width:13px; height:13px; border:1px solid var(--text-low); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; line-height:1;}
.drop-item.selected .box{background:var(--accent); border-color:var(--accent); color:#000;}
.drop-item .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.drop-sep{height:1px; background:var(--line); margin:4px 0;}
.controls label{display:block; font-family:var(--font-data); font-size:10.5px; color:var(--text-low); letter-spacing:0.04em; margin-bottom:6px;}

/* ================= SHARED: charts, legends, tooltips, race ================= */
/* Identical in every tab that has them; grouped so specificity is unchanged. */
#view-boost .toggle, #view-turn .toggle{display:flex; border:1px solid var(--line);}
#view-boost .toggle button.active, #view-turn .toggle button.active{background:var(--accent); color:#000; font-weight:700;}
#view-boost .chart-card, #view-detailed .chart-card, #view-turn .chart-card{max-width:1180px; margin:0 auto 22px;
  background:linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line); padding:20px 22px 16px; position:relative;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);}
#view-boost .chart-card::before, #view-detailed .chart-card::before, #view-turn .chart-card::before{content:""; position:absolute; top:0; left:0; width:46px; height:2px; background:var(--accent); box-shadow:0 0 8px var(--accent-glow);}
#view-boost .legend span, #view-turn .legend span{display:inline-flex; align-items:center; gap:6px;}
#view-boost .legend i, #view-turn .legend i{width:14px; height:2px; display:inline-block;}
#view-boost .race-controls, #view-turn .race-controls{display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
#view-boost .race-btn, #view-turn .race-btn{background:var(--accent); color:#000; border:none;
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:0.03em;
  padding:8px 18px; cursor:pointer; min-width:110px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
#view-boost .race-btn:hover, #view-turn .race-btn:hover{filter:brightness(1.08);}
#view-boost .chart-host, #view-turn .chart-host{position:relative;}
#view-boost .hover-capture, #view-turn .hover-capture{cursor:crosshair;}
#view-boost .hover-line, #view-turn .hover-line{stroke:var(--text-mid); stroke-width:1; stroke-dasharray:3 3; opacity:0.75;}
#view-boost .chart-tip .tip-row, #view-turn .chart-tip .tip-row{display:flex; align-items:center; gap:7px; white-space:nowrap; line-height:1.55;}
#view-boost .chart-tip .tip-row i, #view-turn .chart-tip .tip-row i{width:9px; height:2px; flex-shrink:0;}
#view-boost .chart-tip .tip-name, #view-turn .chart-tip .tip-name{color:var(--text-mid); margin-right:auto;}
#view-boost .chart-tip .tip-val, #view-turn .chart-tip .tip-val{color:var(--text-hi);}
#view-boost .race-scrub, #view-turn .race-scrub{-webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer;
  margin:0 0 6px; display:block; outline:none;}
#view-boost .race-scrub::-webkit-slider-runnable-track, #view-turn .race-scrub::-webkit-slider-runnable-track{height:4px; background:var(--line); border-radius:0;}
#view-boost .race-scrub::-moz-range-track, #view-turn .race-scrub::-moz-range-track{height:4px; background:var(--line);}
#view-boost .race-scrub::-webkit-slider-thumb, #view-turn .race-scrub::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:12px; height:16px; margin-top:-6px;
  background:var(--accent); border:none; border-radius:1px;
  box-shadow:0 0 6px var(--accent-glow);}
#view-boost .race-scrub::-moz-range-thumb, #view-turn .race-scrub::-moz-range-thumb{width:12px; height:16px;
  background:var(--accent); border:none; border-radius:1px;
  box-shadow:0 0 6px var(--accent-glow);}
#view-boost svg, #view-turn svg{display:block; width:100%; height:auto;}
#view-boost .grid-line, #view-turn .grid-line{stroke:var(--line); stroke-width:1;}
#view-boost .cmp-wrap, #view-detailed .cmp-wrap, #view-turn .cmp-wrap{overflow-x:auto;}
#view-boost .cmp th:first-child, #view-detailed .cmp th:first-child, #view-turn .cmp th:first-child{text-align:left;}
#view-boost .cmp th .sw, #view-detailed .cmp th .sw, #view-turn .cmp th .sw{display:inline-block; width:10px; height:2px; vertical-align:middle; margin-right:6px;}
#view-boost .cmp td, #view-detailed .cmp td, #view-turn .cmp td{padding:7px 12px; text-align:right; border-bottom:1px solid rgba(28,36,46,0.6); white-space:nowrap; color:var(--text-mid);}
#view-boost .cmp td.win, #view-detailed .cmp td.win, #view-turn .cmp td.win{font-weight:700;}
#view-boost .cmp td .unit, #view-detailed .cmp td .unit, #view-turn .cmp td .unit{color:var(--text-low); font-size:0.85em; margin-left:2px;}
#view-boost .cmp td .unit sup, #view-detailed .cmp td .unit sup, #view-turn .cmp td .unit sup{font-size:0.7em; vertical-align:super; line-height:0;}

/* ================= COMPARE TAB (scoped) ================= */
#view-boost{ --red:#f8615a; --yellow:#f5c518; --ship-b:#48e0d1; --ship-b-glow:rgba(72,224,209,0.5); }

#view-boost #shipPanel{right:auto; left:0;}

#view-boost .toggle button{background:var(--bg-void); color:var(--text-mid); border:none; font-family:var(--font-data); font-size:11px; padding:8px 12px; cursor:pointer; min-width:74px; text-align:center; box-sizing:border-box;}

#view-boost .chart-title{font-size:19px; font-weight:700; margin:0 0 6px;}
#view-boost .legend{display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; font-family:var(--font-data); font-size:13.5px; color:var(--text-mid); margin:0 0 12px;}

#view-boost .race-clock{font-family:var(--font-data); font-size:19px; color:var(--text-hi); min-width:74px;}
#view-boost .race-gap{font-family:var(--font-data); font-size:14px; color:var(--text-mid);}
#view-boost .lane-name{fill:var(--text-mid); font-family:'Share Tech Mono',monospace; font-size:14px;}
#view-boost .lane-dist{font-family:'Share Tech Mono',monospace; font-size:14px;}
#view-boost .finish-label{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:13px;}

#view-boost .chart-tip{display:none; position:absolute; pointer-events:none; z-index:20;
  background:rgba(8,11,16,0.94); border:1px solid var(--line);
  padding:8px 10px; min-width:120px;
  font-family:var(--font-data); font-size:13.5px; color:var(--text-hi);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);}
#view-boost .chart-tip .tip-t{color:var(--accent); margin-bottom:5px; font-size:12.5px;}

#view-boost .axis-label{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:13.5px;}
#view-boost .axis-title{fill:var(--text-mid); font-family:'Share Tech Mono',monospace; font-size:13.5px;}
#view-boost .ref-label{font-family:'Share Tech Mono',monospace; font-size:13px;}

/* ================= DETAILED STATS TAB (scoped) ================= */
/* Side-by-Side card, moved here from the Compare tab, plus its own
   single-comparison ship picker (see below). */
#view-detailed .controls{margin-top:26px;}

#view-detailed #dShipPanel{right:auto; left:0;}

#view-detailed .chart-title{font-size:19px; font-weight:700; margin:0 0 6px;}

#view-detailed .cmp{width:100%; border-collapse:collapse; font-family:var(--font-data); font-size:16px; margin-top:4px;}
#view-detailed .cmp th{text-align:right; font-weight:600; color:var(--text-mid); font-size:14.5px;
  padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}

#view-detailed .cmp td:first-child{text-align:left; font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--text-mid);}
#view-detailed .cmp tr.sec td{color:var(--accent); font-family:var(--font-data); font-size:13px; letter-spacing:0.05em;
  padding-top:16px; border-bottom:1px solid var(--line); font-weight:400;}

#view-detailed .cmp td.diff{font-size:14.5px;}
#view-detailed .cmp-note{color:var(--text-mid); font-size:16.5px; line-height:1.6; margin:4px 0 2px;}
#view-detailed .cmp-foot{color:var(--text-mid); font-family:var(--font-data); font-size:13px; line-height:1.5; margin-top:12px;}

/* ================= METHODOLOGY TAB (scoped) ================= */
/* .methodology's own top border/margin assumed it sat below other
   content in the Detailed Stats tab; as its own tab it needs none. */
#view-methodology .methodology{margin-top:0; padding-top:0; border-top:none;}

/* ================= TURN SIM TAB (scoped) ================= */
#view-turn{ --red:#f8615a; --yellow:#f5c518; }

#view-turn #t-shipPanel{right:auto; left:0;}

#view-turn .toggle button{min-width:118px !important; background:var(--bg-void); color:var(--text-mid); border:none; font-family:var(--font-data); font-size:11px; padding:8px 12px; cursor:pointer; min-width:74px; text-align:center; box-sizing:border-box;}

#view-turn .chart-title{font-size:17px; font-weight:700; margin:0 0 6px;}
#view-turn .legend{display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; font-family:var(--font-data); font-size:12px; color:var(--text-mid); margin:0 0 12px;}

#view-turn .cornering-card{margin-top:34px;}

#view-turn .race-clock{font-family:var(--font-data); font-size:17px; color:var(--text-hi); min-width:74px;}
#view-turn .race-gap{font-family:var(--font-data); font-size:12px; color:var(--text-mid);}
#view-turn .lane-name{fill:var(--text-mid); font-family:'Share Tech Mono',monospace; font-size:12px;}
#view-turn .lane-dist{font-family:'Share Tech Mono',monospace; font-size:12px;}
#view-turn .finish-label{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:11px;}

#view-turn .chart-tip{display:none; position:absolute; pointer-events:none; z-index:20;
  background:rgba(8,11,16,0.94); border:1px solid var(--line);
  padding:8px 10px; min-width:120px;
  font-family:var(--font-data); font-size:11.5px; color:var(--text-hi);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);}
#view-turn .chart-tip .tip-t{color:var(--accent); margin-bottom:5px; font-size:11px;}

#view-turn .axis-label{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:11.5px;}
#view-turn .axis-title{fill:var(--text-mid); font-family:'Share Tech Mono',monospace; font-size:11.5px;}
#view-turn .ref-label{font-family:'Share Tech Mono',monospace; font-size:11px;}

#view-turn .cmp{width:100%; border-collapse:collapse; font-family:var(--font-data); font-size:13px; margin-top:4px;}
#view-turn .cmp th{text-align:right; font-weight:600; color:var(--text-mid); font-size:12px;
  padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}

#view-turn .cmp td:first-child{text-align:left; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--text-mid);}
#view-turn .cmp tr.sec td{color:var(--accent); font-family:var(--font-data); font-size:11px; letter-spacing:0.05em;
  padding-top:16px; border-bottom:1px solid var(--line); font-weight:400;}

#view-turn .cmp td.diff{font-size:12px;}
#view-turn .cmp-note{color:var(--text-mid); font-size:14px; line-height:1.6; margin:4px 0 2px;}
#view-turn .cmp-foot{color:var(--text-low); font-family:var(--font-data); font-size:11px; line-height:1.5; margin-top:12px;}
#view-turn .chart-title{font-size:19px;}
#view-turn .legend{font-size:13.5px;}
#view-turn .race-clock{font-size:19px;}
#view-turn .axis-label{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:13px;}
#view-turn .nose-ctl{display:flex; align-items:center; gap:12px;}
#view-turn .nose-ctl input[type=range]{width:220px;}
#view-turn .nose-val{font-family:var(--font-data); font-size:18px; color:var(--accent); min-width:52px;}
#view-turn .compass-lbl{fill:var(--text-mid); font-family:'Share Tech Mono',monospace; font-size:12px;}
#view-turn .start-lbl{fill:var(--text-low); font-family:'Share Tech Mono',monospace; font-size:12px;}
#view-turn .readout{width:100%; border-collapse:collapse; font-family:var(--font-data); font-size:15px; margin-top:14px;}
#view-turn .readout th{text-align:right; color:var(--text-mid); font-weight:600; font-size:13.5px; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
#view-turn .readout th:first-child{text-align:left;}
#view-turn .readout td{text-align:right; padding:8px 10px; border-bottom:1px solid rgba(28,36,46,0.6); color:var(--text-hi); white-space:nowrap;}
#view-turn .readout td:first-child{text-align:left; font-family:var(--font-display); font-weight:600; font-size:15.5px;}
#view-turn .readout td:first-child i{display:inline-block; width:12px; height:2px; vertical-align:middle; margin-right:8px;}
#view-turn .readout .dim{color:var(--text-low);}
#view-turn .readout-wrap{overflow-x:auto;}
#view-turn .note{max-width:1180px; margin:10px auto 0; color:var(--text-mid); font-family:var(--font-data); font-size:12.5px; line-height:1.55;}
#view-turn .note + .note{margin-top:14px;}
#view-turn .nose-slider{-webkit-appearance:none; appearance:none; height:18px; background:transparent; cursor:pointer; outline:none;}
#view-turn .nose-slider::-webkit-slider-runnable-track{height:4px; background:var(--line);}
#view-turn .nose-slider::-moz-range-track{height:4px; background:var(--line);}
#view-turn .nose-slider::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:16px; margin-top:-6px; background:var(--accent); box-shadow:0 0 6px var(--accent-glow);}
#view-turn .nose-slider::-moz-range-thumb{width:12px; height:16px; border:none; background:var(--accent); box-shadow:0 0 6px var(--accent-glow);}
#view-turn .ctl-panel{max-width:1180px; margin:0 auto 22px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
#view-turn .ctl-group{background:linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line); padding:14px 16px 16px; position:relative;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  display:flex; flex-direction:column; gap:10px; min-width:0;}
#view-turn .ctl-ships{grid-column:1 / -1; clip-path:none; overflow:visible;}
#view-turn .ctl-title{font-family:var(--font-data); font-size:11px; color:var(--accent); letter-spacing:0.08em;}
#view-turn .ctl-head{display:flex; align-items:center; justify-content:space-between;}
#view-turn .ctl-reset{background:none; border:1px solid var(--line); color:var(--text-mid); font-family:var(--font-data); font-size:10.5px; padding:3px 10px; cursor:pointer; letter-spacing:0.04em;}
#view-turn .ctl-reset:hover{border-color:var(--accent); color:var(--text-hi);}
#view-turn .ctl-sub{font-family:var(--font-data); font-size:11.5px; color:var(--text-low);}
#view-turn .ctl-row{display:flex; gap:14px; flex-wrap:wrap;}
#view-turn .ctl-slot{flex:1 1 240px; min-width:0;}
#view-turn .ctl-slot label{display:block; font-family:var(--font-data); font-size:10.5px; color:var(--text-low); letter-spacing:0.04em; margin-bottom:6px;}
#view-turn .ctl-panel .dropdown-btn{width:100%; min-width:0;}
#view-turn .ctl-panel .dropdown-panel{left:0; right:auto; min-width:100%;}
#view-turn .ctl-group .toggle{display:flex; width:100%;}
#view-turn .ctl-group .toggle button{flex:1; min-width:0 !important;}
#view-turn .nose-ctl{display:flex; align-items:center; gap:12px;}
#view-turn .nose-ctl input[type=range]{flex:1; width:auto;}
#view-turn .entry-ctl{display:flex; align-items:center; gap:10px;}
#view-turn .entry-ctl input{width:120px; background:var(--bg-void); color:var(--text-hi); border:1px solid var(--line);
  font-family:var(--font-data); font-size:16px; padding:8px 10px; outline:none;}
#view-turn .entry-ctl input:focus{border-color:var(--accent);}
#view-turn .entry-ctl input:disabled{color:var(--text-low); opacity:0.55; cursor:not-allowed;}
#view-turn .entry-unit{font-family:var(--font-data); font-size:13px; color:var(--text-mid);}
@media (max-width: 900px){#view-turn .ctl-panel{grid-template-columns:1fr 1fr;} #view-turn .ctl-boost{grid-column:1 / -1;}}
@media (max-width: 640px){#view-turn .ctl-panel{grid-template-columns:1fr;}}

/* ================= TOUCH SCREENS: finger-sized slider thumbs ================= */
@media (pointer: coarse){
  #view-boost .race-scrub, #view-turn .race-scrub, #view-turn .nose-slider{height:28px;}
  #view-boost .race-scrub::-webkit-slider-thumb, #view-turn .race-scrub::-webkit-slider-thumb,
  #view-turn .nose-slider::-webkit-slider-thumb{width:20px; height:26px; margin-top:-11px;}
  #view-boost .race-scrub::-moz-range-thumb, #view-turn .race-scrub::-moz-range-thumb,
  #view-turn .nose-slider::-moz-range-thumb{width:20px; height:26px;}
}