/* ── Dev tab (DCOSMOS-EXOTICS) + fx toggle (DCOSMOS-BLOOM) ─────── */

/* The options toggle mirrors the sound toggle, one seat to its left
   (DCOSMOS-TARGETRINGS: it opens the options sheet, which holds the
   bloom toggle along with the other settings). */
#optionsToggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0.6;
}
#optionsToggle:hover { opacity: 1; border-color: var(--accent); }
#optionsToggle.open { opacity: 1; border-color: var(--accent); color: var(--accent); }

.options-sheet {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 210;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
.options-sheet[hidden] { display: none; }
.options-title {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.options-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.options-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}
.options-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.vol-row span { min-width: 54px; }
.options-row select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: auto;
}

/* Profile (DCOSMOS-PROFILE) — an instrument panel: tight spacing, small
   clear headers, dense multi-column stats, no oversized cards or dead
   vertical space. Every control still meets the 40px touch-target floor. */
.profile-header-card {
  text-align: center;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar {
  width: 44px; height: 44px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  color: var(--bg-deep);
}
.profile-identity {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.profile-identity h2 { margin: 0; font-size: 16px; color: var(--text-primary); }
.profile-rename-btn {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 15px;
  width: 40px; height: 40px; margin: -12px -8px;
  display: flex; align-items: center; justify-content: center;
}
.profile-rename-btn:hover { color: var(--accent); }
.profile-subtitle {
  color: var(--text-secondary); font-size: 12px; margin-top: 2px;
}
/* DCOSMOS-STATCHIPS: compact copy of the atlas list's count chips. The chip
   internals reuse .stat-box from cosmos-atlas.css; this row only lays them
   out tighter and shrinks the numbers and icons. This one row now carries
   the whole top-line summary — the old separate stats grid was a straight
   duplicate of the same four numbers and is gone; the fifth number (class
   count) moved into the subtitle line above instead of its own card. */
.profile-stat-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
}
.profile-stat-row .stat-box { padding: 4px 9px; gap: 5px; }
.profile-stat-row .stat-box .stat-value { font-size: 14px; }
.profile-stat-row .stat-box .stat-icon svg { width: 14px; height: 14px; }
/* DCOSMOS-SHIPTILE: ship picture + portrait placeholder tiles */
.profile-tiles {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 8px 16px;
}
.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.profile-tile-box {
  width: 56px;
  height: 56px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-tile-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-tile-empty svg {
  width: 28px;
  height: 28px;
  color: var(--text-dim);
  opacity: 0.6;
}
.profile-portrait-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px dashed var(--border-light);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--text-dim);
}
.profile-tile-caption {
  font-size: 10px;
  font-family: var(--font-data);
  color: var(--text-secondary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.profile-section { padding: 10px 14px; }
.profile-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  min-height: 20px;
}
.profile-section-header h3 {
  margin: 0; font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Codex "show all" toggle, sitting in the Collection Codex header. Padding
   pads the tap target out to 40px tall without widening the header row's
   visible text, since the row's own height only grows to match. */
.codex-toggle-label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 12px; color: var(--text-dim);
  min-height: 40px; padding: 4px 0;
}
.codex-toggle-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px; height: 18px;
}
.profile-log-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  font-size: 15px; border-radius: 6px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.profile-log-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.profile-empty {
  color: var(--text-dim); font-size: 12px;
  text-align: center; padding: 10px 0;
}
.profile-discovery-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.profile-discovery-item:last-child { border-bottom: none; }
.profile-disc-star {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.profile-disc-name {
  font-size: 13px; color: var(--text-primary); flex: 1;
}
.profile-disc-meta {
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-data);
}
/* Achievements and Collection Codex live in shared grid classes owned by
   other files (cosmos-fx.css, cosmos-controls.css); scoped to #profile so
   only this screen gets the denser layout — nothing else uses them. */
#profile .achieve-grid {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
}
#profile .achieve-badge { padding: 4px 2px 3px; gap: 2px; }
#profile .achieve-icon { width: 22px; height: 22px; font-size: 11px; }
#profile .achieve-name { font-size: 8px; }
#profile .codex-grid { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 5px; }
#profile .codex-grid-wide { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
#profile .codex-cell { padding: 6px 4px 5px; gap: 2px; }
#profile .codex-progress-bar { margin-bottom: 6px; }
#profile .codex-completion { margin-top: 8px; padding: 6px; }
/* Account (danger zone) rows live in cosmos-ship.css; scoped override keeps
   the reset buttons at a real 40px tap target while the row tightens. */
#profile .profile-danger .danger-row { padding: 8px 0; }
#profile .btn-reset-intro, #profile .btn-reset-account { min-height: 40px; }

/* Scan Log (DCOSMOS-SCANHISTORY) */
.profile-scan-log {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.profile-scan-log.expanded {
  max-height: 2000px;
  overflow-y: auto;
}
.scan-log-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.scan-log-item:last-of-type { border-bottom: none; }
.scan-log-name {
  font-size: 14px; color: var(--text-primary); flex: 1;
  min-width: 96px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.scan-log-detail {
  display: flex; gap: 12px; align-items: baseline;
}
.scan-log-date {
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-data);
  white-space: nowrap;
}
.scan-log-meta {
  font-size: 11px; color: var(--text-secondary);
  font-family: var(--font-data);
  white-space: nowrap;
}
.scan-log-clear {
  display: block;
  margin: 8px auto 2px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 6px;
}
.scan-log-clear:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* DCOSMOS-STATSPAGE: spectral class breakdown */
.stats-spectral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
}
.stats-spectral-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.stats-spectral-letter {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-data);
  line-height: 1;
}
.stats-spectral-count {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-data);
  margin-top: 2px;
}
.stats-spectral-bar {
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.stats-spectral-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* DCOSMOS-STATSPAGE: planet type breakdown */
.stats-planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 5px;
}
.stats-planet-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.stats-planet-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-planet-label {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-planet-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-data);
}

/* DCOSMOS-STATSPAGE: discovery feed */
.stats-discovery-feed {
  max-height: 240px;
  overflow-y: auto;
}
.stats-feed-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.stats-feed-item:last-child { border-bottom: none; }
.stats-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.stats-feed-name {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-feed-detail {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.stats-feed-time {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-data);
  white-space: nowrap;
}
.stats-feed-meta {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-data);
  white-space: nowrap;
}

/* DCOSMOS-TIMELINE: vertical discovery timeline */
.profile-timeline {
  position: relative;
  padding-left: 22px;
  max-height: 320px;
  overflow-y: auto;
}
.profile-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}
.timeline-date-group {
  margin-bottom: 2px;
}
.timeline-date-label {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-data);
  padding: 8px 0 4px;
  font-weight: 600;
  position: relative;
}
.timeline-date-label::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 6px var(--accent-glow);
}
.timeline-entry {
  position: relative;
  padding: 5px 0 6px;
  border-bottom: 1px solid var(--border);
}
.timeline-entry:last-child {
  border-bottom: none;
}
.timeline-entry-dot {
  position: absolute;
  left: -19px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  border: 2px solid var(--bg-panel);
  z-index: 1;
}
.timeline-entry-content {
  min-width: 0;
}
.timeline-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.timeline-sys-name {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.timeline-time {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-data);
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-data);
  margin-top: 3px;
}
.timeline-credit {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px;
}