/*
 * submarine-terminal.css
 * Prototype layer: submarine-console identity on top of the existing terminal UI.
 * Use after terminal.css or on submarine prototypes.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --sub-ocean-0: #02090d;
  --sub-ocean-1: #061820;
  --sub-ocean-2: #0b2632;
  --sub-ocean-3: #123847;
  --sub-hull: #e8e4dc;
  --sub-hull-dim: #c7c2b6;
  --sub-bio: #7fe8c2;
  --sub-bio-soft: #b4f4dc;
  --sub-amber: #d89050;
  --sub-amber-soft: #f0ba78;
  --sub-cyan: #6aa7b8;
  --sub-ink-dim: #8fa0ab;
  --sub-ink-faint: #4d6370;
  --sub-rule: rgba(232, 228, 220, 0.14);
  --sub-rule-strong: rgba(232, 228, 220, 0.28);
  --sub-console-bg: rgba(0, 11, 15, 0.42);
  --sub-font-ui: "Inter Tight", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --sub-font-display: "Inter Tight", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --sub-font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", ui-monospace, monospace;
}

/* Terminal-page retoken layer. Add class="submarine-terminal" when applying site-wide. */
body.submarine-terminal {
  --bg: var(--sub-ocean-0);
  --surface: rgba(11, 38, 50, 0.72);
  --border: rgba(232, 228, 220, 0.18);
  --text: var(--sub-hull);
  --dim: var(--sub-hull-dim);
  --muted: var(--sub-ink-faint);
  --orange: var(--sub-amber);
  --amber: var(--sub-amber-soft);
  --teal: var(--sub-bio);
  --green: #82ad95;
  --blue: var(--sub-cyan);
  --violet: #9f8bd6;
  --bar-bg: rgba(2, 9, 13, 0.94);
  --highlight: rgba(127, 232, 194, 0.08);
  --sel-bg: rgba(127, 232, 194, 0.16);
  --tree: rgba(143, 160, 171, 0.58);
  --pane-line: rgba(232, 228, 220, 0.13);
  background:
    radial-gradient(ellipse at 78% -10%, rgba(106, 167, 184, 0.16), transparent 40%),
    linear-gradient(180deg, var(--sub-ocean-1), var(--sub-ocean-0));
  font-family: var(--sub-font-ui);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0;
}

:root[data-theme="dark"] body.submarine-terminal,
:root[data-theme="light"] body.submarine-terminal {
  background-color: var(--sub-ocean-0);
  background-image:
    radial-gradient(ellipse at 72% -18%, rgba(106, 167, 184, 0.18), transparent 42%),
    linear-gradient(180deg, var(--sub-ocean-1), var(--sub-ocean-0));
  background-repeat: no-repeat;
}

body.submarine-terminal #topbar,
body.submarine-terminal #statusbar {
  background: rgba(2, 9, 13, 0.92);
  border-color: rgba(127, 232, 194, 0.16);
}

:root[data-theme="dark"] body.submarine-terminal #topbar,
:root[data-theme="light"] body.submarine-terminal #topbar {
  background-color: rgba(2, 9, 13, 0.94);
  background-image: none;
  border-bottom-color: rgba(127, 232, 194, 0.16);
}

body.submarine-terminal .tab {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sub-font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

body.submarine-terminal .tab.active {
  color: var(--sub-hull);
  background: rgba(127, 232, 194, 0.055);
  box-shadow: inset 0 -1px 0 var(--sub-bio);
}

body.submarine-terminal .tab .tab-idx,
body.submarine-terminal .mode-badge,
body.submarine-terminal .fkey,
body.submarine-terminal .sb-info,
body.submarine-terminal .sb-label {
  font-family: var(--sub-font-mono);
}

body.submarine-terminal .mode-badge {
  background: var(--sub-bio);
  color: var(--sub-ocean-0);
}

body.submarine-terminal .page-desc,
body.submarine-terminal .pane-desc {
  position: relative;
  color: rgba(232, 228, 220, 0.66);
  font-family: var(--sub-font-ui);
  font-size: 13px;
  line-height: 1.48;
  background:
    linear-gradient(90deg, rgba(127, 232, 194, 0.045), transparent 62%),
    rgba(2, 9, 13, 0.38);
}

body.submarine-terminal .page-desc strong,
body.submarine-terminal .pane-desc strong {
  color: var(--sub-hull);
}

body.submarine-terminal .page-desc::before,
body.submarine-terminal .pane-desc::before,
body.submarine-terminal.vessel-about .hero-attr::before {
  display: block;
  margin-bottom: 0.55ch;
  color: var(--sub-bio);
  font-family: var(--sub-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.submarine-terminal.vessel-library .page-desc::before {
  content: "archive / specimen index";
}

body.submarine-terminal.vessel-journal .pane-desc::before {
  content: "field log / dispatch queue";
}

body.submarine-terminal.vessel-stories .page-desc::before {
  content: "instrument gallery / public datasets";
}

body.submarine-terminal.vessel-engineering .page-desc::before {
  content: "systems bay / analytics infrastructure";
}

body.submarine-terminal.vessel-about .hero-attr::before {
  content: "operator file / principal";
}

body.submarine-terminal .tree-header,
body.submarine-terminal .pane-header,
body.submarine-terminal .preview-header,
body.submarine-terminal .search-bar,
body.submarine-terminal .year-divider {
  background: rgba(2, 9, 13, 0.78);
  border-color: rgba(127, 232, 194, 0.13);
  font-family: var(--sub-font-mono);
}

body.submarine-terminal .entry-row,
body.submarine-terminal .nav-node,
body.submarine-terminal .ft-row {
  font-family: var(--sub-font-ui);
}

body.submarine-terminal .nn-pre,
body.submarine-terminal .ft-pre,
body.submarine-terminal .nn-icon,
body.submarine-terminal .ft-icon,
body.submarine-terminal .nn-count,
body.submarine-terminal .ft-count,
body.submarine-terminal .ft-author,
body.submarine-terminal .ft-type,
body.submarine-terminal .e-date,
body.submarine-terminal .e-badge,
body.submarine-terminal .e-dataset,
body.submarine-terminal .preview-header .pvh-url,
body.submarine-terminal .search-bar input,
body.submarine-terminal .search-bar .sp,
body.submarine-terminal .search-bar .sc {
  font-family: var(--sub-font-mono);
}

body.submarine-terminal .e-title,
body.submarine-terminal .ft-name,
body.submarine-terminal .nn-name {
  font-weight: 550;
  letter-spacing: 0.005em;
}

body.submarine-terminal .ft-name.file-name,
body.submarine-terminal .nn-name {
  font-weight: 500;
}

body.submarine-terminal .e-sub,
body.submarine-terminal .e-note,
body.submarine-terminal .d-desc,
body.submarine-terminal .detail-content,
body.submarine-terminal .about-body {
  font-family: var(--sub-font-ui);
}

body.submarine-terminal .pane-tree::after,
body.submarine-terminal .pane-index::after,
body.submarine-terminal .pane-index {
  border-color: rgba(127, 232, 194, 0.13);
}

body.submarine-terminal .ft-row.influential,
body.submarine-terminal .entry-row.influential,
body.submarine-terminal .entry-row.pinned,
body.submarine-terminal .entry-row.selected {
  border-left-color: var(--sub-bio);
}

body.submarine-terminal .d-influence {
  background: rgba(127, 232, 194, 0.07);
}

body.submarine-terminal.vessel-about .ascii-hero {
  padding: 4.8ch 0 2ch;
}

body.submarine-terminal.vessel-about .ascii-art {
  display: none !important;
}

body.submarine-terminal.vessel-about .about-body-wrap {
  padding-left: 2ch;
  border-left: 1px solid rgba(127, 232, 194, 0.22);
}

body.submarine-terminal.vessel-about .hero-attr {
  color: rgba(232, 228, 220, 0.64);
  font-family: var(--sub-font-ui);
  margin-top: 0;
}

body.submarine-terminal.vessel-about .hero-attr::after {
  content: "data-centered";
  display: block;
  max-width: min-content;
  margin-top: 0.18em;
  color: var(--sub-amber-soft);
  font-family: var(--sub-font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.88),
    0 0 22px rgba(216, 144, 80, 0.16);
}

.sonar-divider,
.pressure-rule {
  display: flex;
  align-items: center;
  gap: 1ch;
  color: var(--sub-ink-faint);
  font-family: var(--sub-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sonar-divider::before,
.sonar-divider::after,
.pressure-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(127, 232, 194, 0.42), transparent);
}

.readout,
.vessel-status {
  font-family: var(--sub-font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-ink-dim);
}

/* Homepage console overlay prototype. */
body.console-home {
  background: #000;
  font-family: var(--sub-font-ui);
}

body.console-home .topbar,
body.console-home .brand,
body.console-home .tabs,
body.console-home .tab,
body.console-home .status {
  font-family: var(--sub-font-ui);
  letter-spacing: 0;
}

body.console-home .topbar {
  background: rgba(2, 9, 13, 0.86);
  border-bottom-color: rgba(127, 232, 194, 0.16);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

body.console-home .topbar .tab.active {
  border-bottom-color: var(--sub-bio);
}

body.console-home .brand-mark,
body.console-home .brand-ver,
body.console-home .tab-n,
body.console-home .status {
  font-family: var(--sub-font-mono);
}

body.console-home .headline {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(420px, 0.48fr) minmax(230px, 0.26fr);
  align-items: end;
  justify-content: start;
  gap: clamp(20px, 3.6vw, 58px);
  padding: clamp(72px, 8vw, 112px) clamp(28px, 5vw, 84px) clamp(72px, 7.5vw, 104px);
  max-width: none;
  transform: none;
}

body.console-home #abyss-canvas {
  z-index: 2;
}

.console-shell {
  width: min(740px, 100%);
  color: var(--sub-hull);
}

.console-path {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin-bottom: 18px;
  font-family: var(--sub-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-ink-dim);
}

.console-prompt {
  color: var(--sub-bio);
}

.console-cursor {
  width: 0.72ch;
  height: 1.05em;
  background: var(--sub-bio);
  box-shadow: 0 0 14px rgba(127, 232, 194, 0.34);
  animation: consoleCursor 1.1s step-end infinite;
}

@keyframes consoleCursor {
  50% { opacity: 0.16; }
}

.console-title {
  margin: 0;
  max-width: 16ch;
  color: var(--sub-hull);
  font-family: var(--sub-font-display);
  font-size: clamp(44px, 5.3vw, 78px);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: none;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.92),
    0 0 32px rgba(0, 0, 0, 0.74);
}

.console-title .title-sub {
  display: block;
  margin-top: 0.18em;
  color: var(--sub-amber-soft);
  font-family: var(--sub-font-ui);
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 400;
  line-height: 1.1;
}

.console-deck {
  max-width: 62ch;
  margin: 24px 0 0;
  color: rgba(232, 228, 220, 0.78);
  font-family: var(--sub-font-ui);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.88);
}

.console-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(590px, 100%);
  margin-top: 30px;
  border-top: 1px solid rgba(127, 232, 194, 0.34);
  border-bottom: 1px solid rgba(232, 228, 220, 0.14);
  background: transparent;
}

.console-nav a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 54px;
  align-items: center;
  padding: 12px 0;
  background: transparent;
  color: var(--sub-hull);
  font-family: var(--sub-font-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  border-top: 1px solid rgba(232, 228, 220, 0.10);
  transition: color 0.18s, border-color 0.18s, transform 0.18s;
}

.console-nav a:first-child {
  border-top: 0;
}

.console-nav a:hover {
  border-top-color: rgba(240, 168, 102, 0.42);
  transform: translateX(3px);
}

.console-nav a::after {
  content: "open";
  color: rgba(232, 228, 220, 0.38);
  font-family: var(--sub-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.console-nav .nav-n {
  color: var(--sub-bio);
  font-family: var(--sub-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.console-nav .nav-label {
  color: rgba(232, 228, 220, 0.84);
  font-size: clamp(17px, 1.35vw, 21px);
  letter-spacing: 0.01em;
}

.console-nav .nav-copy {
  display: block;
  margin-top: 4px;
  color: rgba(232, 228, 220, 0.50);
  font-family: var(--sub-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.console-signal {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 18px;
  width: min(590px, 100%);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 228, 220, 0.13);
  font-family: var(--sub-font-mono);
  text-transform: uppercase;
}

.console-signal .signal-k {
  color: var(--sub-amber);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.console-signal .signal-v {
  color: rgba(232, 228, 220, 0.68);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.console-readout {
  align-self: end;
  width: min(360px, 100%);
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(127, 232, 194, 0.30);
  font-family: var(--sub-font-mono);
  color: var(--sub-ink-dim);
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.88);
}

.console-readout .readout-label {
  color: var(--sub-bio);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.readout-row {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(232, 228, 220, 0.12);
}

.readout-row:last-child {
  border-bottom: 1px solid rgba(232, 228, 220, 0.12);
}

.readout-k {
  color: var(--sub-amber);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.readout-v {
  color: rgba(232, 228, 220, 0.70);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

body.console-home .hero-foot {
  display: flex;
}

body.console-home .dir-pill {
  color: var(--sub-ink-dim);
}

body.console-home #debug-panel {
  max-width: calc(100vw - 48px);
}

body.console-home .abyss-content {
  padding-top: 86px;
}

body.console-home .mission-kicker {
  margin-bottom: 14px;
}

body.console-home .mission-title {
  max-width: 56ch;
  font-family: var(--sub-font-display);
  font-size: 30px;
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.console-home .mission-copy {
  font-family: var(--sub-font-ui);
  font-size: 15px;
}

@media (max-width: 1180px) {
  .console-title {
    font-size: 56px;
  }
}

@media (max-width: 960px) {
  body.console-home .headline {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
  }

  .console-readout {
    display: none;
  }
}

@media (max-width: 640px) {
  body.console-home .headline {
    position: relative;
    inset: auto;
    padding: 62px 18px 88px;
    align-content: start;
  }

  .console-title {
    max-width: 11ch;
    font-size: 45px;
  }

  .console-deck {
    font-size: 14px;
  }

  .console-nav {
    grid-template-columns: 1fr 1fr;
  }

  .console-nav a {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 62px;
    padding: 12px;
  }

  .console-nav a::after {
    content: none;
  }

  .console-signal {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body.console-home .hero-foot {
    display: none;
  }

  body.console-home #debug-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }

  body.console-home .abyss-content {
    padding-top: 58px;
  }

  body.console-home .mission-title {
    font-size: 19px;
  }
}

@media (max-width: 720px) {
  body.submarine-terminal #topbar {
    max-width: 100vw;
  }

  body.submarine-terminal #topbar .left {
    max-width: 100vw;
  }

  body.submarine-terminal .tab,
  body.submarine-terminal .tab-dd > .tab {
    padding-left: 1.1ch;
    padding-right: 1.1ch;
  }

  body.submarine-terminal #statusbar {
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
  }

  body.submarine-terminal #statusbar .sb-left {
    min-width: 0;
    overflow: hidden;
  }

  body.submarine-terminal .sb-info {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.submarine-terminal #statusbar .sb-right {
    display: none;
  }

  body.submarine-terminal.vessel-about .ascii-hero {
    padding-top: 3.4ch;
  }

  body.submarine-terminal.vessel-about .hero-attr::after {
    font-size: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-cursor {
    animation: none;
  }
}