/**
 * Frontier HeatSense - Stylesheet
 *
 * This stylesheet contains all the CSS for the HeatSense web application.
 * It uses CSS custom properties (variables) for theming and responsive design.
 *
 * Architecture:
 * - CSS Variables for colors, spacing, and animations
 * - Mobile-first responsive design with media queries
 * - BEM-like class naming where appropriate
 * - Dark theme optimized for accessibility
 *
 * Key components:
 * - Layout: .container, .search-section, .result
 * - Forms: .input-group, .btn, .ship-selector-compact
 * - Data display: .route-table, .heat-display, .status-badge
 * - Accessibility: .skip-link, .sr-only, focus styles
 * - Animations: .dangerPulse, .trapPulse, fadeIn
 *
 * @author HeatSense Team
 * @version 2.0
 */

* {margin:0;padding:0;box-sizing:border-box}
:root {
  color-scheme: dark;
  --ui-scale: 0.8;
  --bg: #120808;
  --bg-2: #1a0a0a;
  --panel: rgba(25,12,10,0.85);
  --accent: #ff8844;
  --accent-2: #ffaa77;
  --info: #6cf;
  --text: #fff;
  --muted: #aa8866;
  --border: rgba(255,100,50,0.35);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 14px;
  --focus: 0 0 0 3px rgba(255,120,60,0.4);
  --terminal-line: rgba(255, 160, 100, 0.08);
  --terminal-glow: rgba(255, 136, 68, 0.16);
  --mono: Consolas, 'Cascadia Code', 'SFMono-Regular', 'Liberation Mono', monospace;
}
html {
  zoom: var(--ui-scale);
}

@supports not (zoom: 1) {
  html {
    font-size: calc(16px * var(--ui-scale));
  }
}

body {
  font-family:var(--mono);
  background:linear-gradient(135deg,var(--bg) 0%,var(--bg-2) 50%,#0f0505 100%);
  min-height:100vh;color:var(--text);padding:20px;
  position:relative;
  letter-spacing:0.01em
}
button, input, select, textarea, table, th, td {
  font-family: var(--mono);
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.015), rgba(255,255,255,0.015)),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      var(--terminal-line) 27px,
      var(--terminal-line) 28px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 47px,
      rgba(255, 120, 60, 0.035) 47px,
      rgba(255, 120, 60, 0.035) 48px
    );
  opacity:0.55;
}
.skip-link {
  position:absolute;left:-999px;top:10px;background:#000;color:#fff;
  padding:10px 14px;border-radius:8px;z-index:1000
}
.skip-link:focus {left:10px;box-shadow:var(--focus)}
.container {
  max-width:1100px;margin:0 auto;padding:40px 20px;
  border:1px solid rgba(255,136,68,0.14);
  background:linear-gradient(180deg, rgba(18,8,8,0.84), rgba(14,6,6,0.92));
  box-shadow:0 0 0 1px rgba(255,136,68,0.06), 0 18px 45px rgba(0,0,0,0.4);
  position:relative;
}
header {
  text-align:left;margin-bottom:32px;padding:0 0 18px 18px;
  border-left:3px solid rgba(255,136,68,0.5);
  border-bottom:1px dashed rgba(255,136,68,0.22);
}
header::before {
  content:'SESSION // THERMAL CONSOLE';
  display:block;
  color:var(--info);
  font-size:0.78rem;
  letter-spacing:0.18em;
  margin-bottom:12px;
  opacity:0.88;
}
h1 {
  font-size:2.35em;color:#ffaa77;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:0.08em;
  text-shadow:0 0 18px rgba(255,136,68,0.18);
}
.subtitle {
  color:#aa8866;font-size:0.98em;text-transform:uppercase;
  letter-spacing:0.22em
}
.version {color:#666;font-size:0.9em;margin-top:5px}
.model-badge {
  background:rgba(100,200,255,0.15);border:2px solid rgba(100,200,255,0.4);
  padding:10px 20px;border-radius:10px;display:inline-block;margin-top:10px;
  font-size:0.9em;color:#6cf
}
.model-badge a {color:inherit;text-decoration:none}
.model-badge a:hover {text-decoration:underline}
.danger-link-box {
  display:block;margin:20px auto 40px;max-width:600px;
  background:rgba(255,100,50,0.08);border:1px solid rgba(255,100,50,0.35);
  border-radius:6px;text-align:left;text-decoration:none;
  color:#ff8844;font-size:1em;font-weight:600;padding:18px 20px;
  box-shadow:0 0 20px rgba(255,100,50,0.3);
  animation:dangerPulse 3s ease-in-out infinite;
  transition:all 0.3s;cursor:pointer;clear:both;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.08em
}
.danger-link-box:hover {
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(255,100,50,0.6);
  border-color:rgba(255,100,50,0.5)
}
@keyframes dangerPulse {
  0%,100%{box-shadow:0 0 20px rgba(255,100,50,0.3);border-color:rgba(255,100,50,0.3)}
  50%{box-shadow:0 0 30px rgba(255,50,0,0.6);border-color:rgba(255,50,0,0.5)}
}
.search-section {
  background:
    linear-gradient(180deg, rgba(34,16,12,0.92), rgba(17,8,7,0.96));
  border:1px solid rgba(255,136,68,0.35);
  border-radius:6px;padding:30px;margin-bottom:30px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), var(--shadow);
  position:relative;
}
.search-section::before {
  content:'INPUT_BUFFER';
  display:block;
  margin:-30px -30px 24px;
  padding:10px 14px;
  background:rgba(255,136,68,0.12);
  border-bottom:1px solid rgba(255,136,68,0.28);
  color:var(--info);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase
}
.input-group {margin-bottom:20px}
label {
  display:block;margin-bottom:8px;color:#ffaa77;font-weight:600;
  text-transform:uppercase;letter-spacing:0.12em;font-size:0.78rem
}
textarea {
  width:100%;padding:15px;font-size:1.05em;border:2px solid rgba(255,100,50,0.3);
  border-radius:4px;background:rgba(8,4,3,0.88);color:#ffddcc;transition:all 0.2s;
  font-family:var(--mono);resize:vertical;line-height:1.55;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02), inset 0 0 24px rgba(255,136,68,0.03)
}
.input-hint {margin-top:8px;font-size:0.85em;color:var(--muted)}
.input-hint a {color:var(--info);text-decoration:none}
.input-hint a:hover {text-decoration:underline}
.field-row {display:flex;gap:16px;flex-wrap:wrap}
.field-row > * {flex:1 1 260px}
.card {
  background:rgba(15,8,6,0.6);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:16px
}
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0
}
.btn {
  width:100%;padding:15px;font-size:1.15em;font-weight:700;
  background:linear-gradient(180deg,#7b3017 0%,#52190f 100%);
  color:#fff;border:none;
  border-radius:4px;cursor:pointer;transition:transform 0.18s,box-shadow 0.18s,opacity 0.18s;
  box-shadow:inset 0 0 0 1px rgba(255,190,150,0.08), 0 4px 18px rgba(0,0,0,0.45);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.12em
}
.btn-secondary {
  width:auto;margin-left:12px;
  background:linear-gradient(180deg,#4e1d1d 0%,#311010 100%);
  font-size:1em;padding:12px 18px;
  border:1px solid rgba(255,136,68,0.3);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:transform 0.18s,box-shadow 0.18s,background 0.18s;
}
.btn-secondary:hover:not(:disabled) {
  background:linear-gradient(180deg,#62261b 0%,#42160f 100%);
  border-color:rgba(255,136,68,0.5);
  box-shadow:0 6px 20px rgba(255,136,68,0.18);
  transform:translateY(-1px);
}
.btn:hover:not(:disabled) {transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.55);opacity:0.98}
.btn:disabled {opacity:0.45;cursor:not-allowed}
.btn:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline:none;box-shadow:var(--focus)
}
.button-group {
  display:flex;gap:12px;flex-wrap:wrap;margin-top:2px;
}
.button-group .btn {
  width:auto;flex:1 1 auto;min-width:140px;
}
.button-group .btn-secondary {
  margin-left:0;flex:0 1 auto;
}
@media (max-width:600px) {
  .button-group {
    flex-direction:column;gap:10px;
  }
  .button-group .btn {
    width:100%;min-width:unset;
  }
  .button-group .btn-secondary {
    width:100%;
  }
}
.result {
  background:rgba(14,7,6,0.68);border:1px solid rgba(255,136,68,0.22);
  border-radius:6px;padding:20px;display:none;animation:fadeIn 0.5s;
  overflow:visible;
  position:relative
}
.result::before {
  content:'OUTPUT_BUFFER';
  display:block;
  margin:-20px -20px 18px;
  padding:10px 14px;
  background:rgba(108,204,255,0.1);
  border-bottom:1px solid rgba(108,204,255,0.22);
  color:var(--info);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase
}
.route-summary {
  display:grid;
  gap:8px;
  margin:4px 0 16px;
  padding:12px 14px;
  background:rgba(8,4,3,0.72);
  border:1px solid rgba(255,136,68,0.16);
  border-radius:6px
}
.route-summary-row {
  display:grid;
  grid-template-columns:minmax(128px, auto) 1fr;
  gap:12px;
  align-items:start
}
.route-summary-label {
  color:#aa8866;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase
}
.route-summary-label::after {
  content:':';
  margin-left:0.35em
}
.route-summary-value {
  color:#ffaa77;
  font-size:0.92rem;
  line-height:1.35
}
.route-summary-alert {
  color:#ff7f7f
}
.route-summary-clear {
  color:#7cffc4
}
.route-summary-travel {
  color:#ffd29a
}
.route-table-wrap {
  position:relative;
  margin:20px 0
}
.route-table {
  width:100%;border-collapse:separate;border-spacing:0;margin:0;
  table-layout:fixed;
  font-size:clamp(0.7rem, 1.5vw, 0.95em);
  background:rgba(10,5,4,0.85);
  border-radius:6px;
  box-shadow:var(--shadow);
  font-family:var(--mono)
}
.route-table th {
  background:#2c130d;padding:12px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.1);color:var(--accent-2);font-weight:600;
  position:sticky;top:0;z-index:10;
  text-transform:uppercase;letter-spacing:0.1em;font-size:0.74rem
}
.route-table thead th {
  box-shadow:0 1px 0 rgba(255,255,255,0.08), 0 10px 18px rgba(0,0,0,0.28)
}
.route-table thead th:first-child {
  border-top-left-radius:6px
}
.route-table thead th:last-child {
  border-top-right-radius:6px
}
.route-table td {
  padding:12px;border-bottom:1px solid rgba(255,255,255,0.08)
}
.route-table th,
.route-table td {
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.route-table td[data-label="Jump"] {
  overflow:visible;text-overflow:clip
}
@media (max-width: 1100px) {
  .route-table {
    font-size:0.85em
  }
  .route-table th,
  .route-table td {
    padding:8px
  }
  .result {
    padding:20px
  }

  .route-summary-row {
    grid-template-columns:1fr;
    gap:4px
  }

  .route-table thead {
    display:none
  }

  .route-table,
  .route-table tbody,
  .route-table tr,
  .route-table td {
    display:block;
    width:100%
  }

  .route-table tr {
    margin-bottom:12px;
    background:rgba(15,8,5,0.7);
    border:1px solid rgba(255,100,50,0.2);
    border-radius:10px;
    padding:8px
  }

  .route-table td {
    display:flex;
    justify-content:space-between;
    gap:12px;
    white-space:normal
  }

  .route-table td::before {
    content:attr(data-label);
    color:#aa8866;
    font-weight:600
  }
}
.route-table tr:hover {
  background:rgba(255,100,50,0.05)
}
.heat-cell {
  font-weight:bold;font-size:1.1em
}
.trap-indicator {
  display:block;padding:6px 10px;border-radius:6px;
  font-size:0.95em;margin-top:0;margin-left:0;white-space:nowrap;
  width:fit-content;font-weight:600
}
.trap-yes {
  background:rgba(255,0,0,0.3);border:1px solid #f00;color:#ff6666
}
.trap-no {
  background:rgba(50,150,50,0.3);border:1px solid #5f5;color:#aaffaa
}
@keyframes fadeIn {from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.system-name {text-align:center;font-size:1.8em;color:#6cf;margin-bottom:20px;font-weight:600}
.heat-display {text-align:center;margin:30px 0}
.heat-value {
  font-size:4em;font-weight:bold;color:#ff8844;
  text-shadow:0 0 20px rgba(255,100,0,0.6)
}
.heat-label {font-size:0.9em;color:#aaa;margin-top:5px}
.status-badge {
  text-align:center;font-size:1.5em;padding:15px;border-radius:10px;
  margin:20px 0;font-weight:bold
}
.status-safe {
  background:rgba(50,150,50,0.3);border:2px solid #5f5;color:#aaffaa
}
.status-moderate {
  background:rgba(200,150,0,0.3);border:2px solid #fc0;color:#ffffaa
}
.status-dangerous {
  background:rgba(255,100,0,0.3);border:2px solid #f60;color:#ffccaa
}
.status-critical {
  background:rgba(255,0,0,0.4);border:2px solid red;color:#ffaaaa;
  animation:pulse 2s infinite
}
@keyframes pulse {
  0%,100%{box-shadow:0 0 25px rgba(255,0,0,0.6)}
  50%{box-shadow:0 0 40px rgba(255,0,0,0.9)}
}
.details {
  background:rgba(0,0,0,0.35);padding:20px;border-radius:6px;margin-top:20px;
  border:1px solid rgba(255,136,68,0.16)
}
.detail-row {
  display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.1)
}
.detail-row:last-child {border-bottom:none}
.detail-label {color:#aaa;font-weight:600}
.detail-value {color:#fff}
.error {
  background:rgba(255,50,50,0.2);border:2px solid #f33;padding:20px;
  border-radius:6px;color:#ffaaaa;display:none;
  font-family:var(--mono)
}
.loading {text-align:center;padding:20px;color:#ffaa77;font-size:1.1em}
.info-box {
  background:rgba(100,200,255,0.1);border:1px solid rgba(100,200,255,0.3);
  padding:15px;border-radius:10px;margin-top:20px;font-size:0.9em;
  color:#ccddff;line-height:1.6
}
.trap-warning {
  background:rgba(255,0,0,0.2);border:3px solid #f00;padding:20px;
  border-radius:15px;margin-top:20px;text-align:center;animation:trapPulse 2s infinite
}
.trap-warning .trap-title {
  font-size:2em;font-weight:bold;color:#ff6666;margin-bottom:10px;
  text-shadow:0 0 10px rgba(255,0,0,0.8)
}
.trap-warning .trap-message {
  font-size:1.1em;color:#ffaaaa;line-height:1.6
}
@keyframes trapPulse {
  0%,100%{border-color:#f00;box-shadow:0 0 20px rgba(255,0,0,0.6)}
  50%{border-color:#f66;box-shadow:0 0 40px rgba(255,0,0,0.9)}
}
footer {
  text-align:center;margin-top:50px;padding-top:20px;
  border-top:1px dashed rgba(255,136,68,0.2);color:#8d6c57;font-size:0.84em;
  letter-spacing:0.08em;text-transform:uppercase
}
footer a {color:#6cf;text-decoration:none}
footer a:hover {text-decoration:underline}

/* === COMPACT SHIP SELECTOR === */
.ship-selector-compact {
  margin-bottom: 15px;
}

.ship-selector-compact label {
  font-size: 0.9em;
  margin-bottom: 6px;
}

.ship-selector-compact select,
.ship-selector-compact input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95em;
  border: 2px solid rgba(255,100,50,0.3);
  border-radius: 4px;
  background-color: rgba(8,4,3,0.88);
  color: #ffddcc;
  font-family: var(--mono);
  transition: all 0.2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.ship-selector-compact select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-position: right 12px center;
  background-repeat: no-repeat;
}

.ship-selector-compact select:hover,
.ship-selector-compact input[type="number"]:hover {
  border-color: rgba(255,100,50,0.5);
}

.ship-selector-compact select:focus,
.ship-selector-compact input[type="number"]:focus {
  outline: none;
  border-color: rgba(255,140,60,0.8);
  box-shadow: 0 6px 24px rgba(255,120,60,0.12), var(--focus);
}

/* remove default dropdown arrow on some browsers (keeps native on others) */
.ship-selector-compact select::-ms-expand { display: none; }

/* Style native option list where supported (keeps accessibility + native keyboard) */
.ship-selector-compact option,
.ship-selector-compact select option {
  background-color: rgba(20,12,10,0.95);
  color: #ffddcc;
}

.ship-selector-compact option:hover,
.ship-selector-compact select option:hover {
  background-color: rgba(255,136,0,0.12);
  color: #fff;
}

/* Improve closed select appearance and ensure contrast for placeholder */
.ship-selector-compact select {
  color: #ffddcc;
}
.ship-selector-compact select option[hidden] {
  color: #d9b7a0;
}

.ship-selector-compact input[type="range"] {
  width: 100%;
  margin-top: 8px;
}

/* Themed range slider for the skill control */
#skillSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, rgba(255,136,68,0.12), rgba(255,80,80,0.06));
  border-radius: 8px;
  outline: none;
  transition: box-shadow 0.15s ease;
  margin-top: 8px;
}
#skillSlider:focus { box-shadow: var(--focus); }

/* WebKit track/thumb */
#skillSlider::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(90deg,#3b241b,#23120f);
  border-radius: 8px;
}
#skillSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(30,15,10,0.6);
  box-shadow: 0 2px 8px rgba(255,136,68,0.25);
}

/* Firefox */
#skillSlider::-moz-range-track {
  height: 10px;
  background: linear-gradient(90deg,#3b241b,#23120f);
  border-radius: 8px;
}
#skillSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(30,15,10,0.6);
  box-shadow: 0 2px 8px rgba(255,136,68,0.25);
}

.ship-details-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.ship-detail-item label {
  font-size: 0.85em;
  color: #aa8866;
}

.ship-detail-value {
  font-size: 0.9em;
  color: #ffddcc;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  margin-top: 4px;
}

/* Mobile adjustments: reduce heavy shadows and increase touch targets */
@media (pointer: coarse) and (max-width: 800px) {
  .danger-link-box { box-shadow: 0 0 8px rgba(255,100,50,0.25); }

  .btn, button, .link-button { padding: 14px 18px; min-height: 44px; }

  .route-table td, .route-table th { padding: 12px 10px; }

  .control-label, .ship-selector-compact { font-size: 1.05rem; }
}