/* ─────────────────────────────────────────────────────────────────────────
   Design tokens
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --accent:        #4f46e5;
  --accent-light:  #eef2ff;
  --bg-primary:    #f7f6f2;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #ffffff;
  --bg-quaternary: #f2f1ed;
  --text-primary:  #1c1c28;
  --text-secondary:#44445a;
  --text-muted:    #888898;
  --border-color:  rgba(0, 0, 0, 0.07);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-color:  rgba(0, 0, 0, 0.07);
  --chart-grid:    rgba(0, 0, 0, 0.07);
  --chart-text:    #1c1c28;
  --radius:        12px;
  --radius-sm:     7px;
}

/* ── Amber — warm dark brown ── */
[data-theme="amber"] {
  --accent:        #e0692a;
  --accent-light:  rgba(224, 105, 42, 0.16);
  --bg-primary:    #1a0d06;
  --bg-secondary:  #241208;
  --bg-tertiary:   #241208;
  --bg-quaternary: #301a0a;
  --text-primary:  #f0dfc0;
  --text-secondary:#c09868;
  --text-muted:    #7a5030;
  --border-color:  rgba(255, 255, 255, 0.07);
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-color:  rgba(0, 0, 0, 0.55);
  --chart-grid:    rgba(255, 255, 255, 0.07);
  --chart-text:    #f0dfc0;
}

/* ── Marine — deep navy + burned orange + teal (classic vessel colors) ── */
[data-theme="marine"] {
  --accent:        #e0752a;
  --accent-light:  rgba(224, 117, 42, 0.16);
  --bg-primary:    #0c1520;
  --bg-secondary:  #121e2c;
  --bg-tertiary:   #121e2c;
  --bg-quaternary: #192638;
  --text-primary:  #f0e8d8;
  --text-secondary:#b8a888;
  --text-muted:    #607080;
  --border-color:  rgba(255, 255, 255, 0.07);
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-color:  rgba(0, 0, 0, 0.55);
  --chart-grid:    rgba(255, 255, 255, 0.07);
  --chart-text:    #f0e8d8;
}

/* ── Bright — clean white with vivid ocean-blue accent ── */
[data-theme="bright"] {
  --accent:        #0ea5e9;
  --accent-light:  rgba(14, 165, 233, 0.12);
  --bg-primary:    #f0f9ff;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #ffffff;
  --bg-quaternary: #e0f2fe;
  --text-primary:  #0c1a2e;
  --text-secondary:#1e4060;
  --text-muted:    #5a80a0;
  --border-color:  rgba(0, 0, 0, 0.07);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-color:  rgba(0, 0, 0, 0.07);
  --chart-grid:    rgba(0, 0, 0, 0.07);
  --chart-text:    #0c1a2e;
  --radius:        12px;
  --radius-sm:     7px;
}

/* ── Night — red only, for the helm and the nav station after dark.
   Nothing here has a green or blue channel above the floor, so it does not
   cost night vision. Tags differ by border style instead of hue. ── */
[data-theme="night"] {
  --accent:        #ff2020;
  --accent-light:  rgba(255, 32, 32, 0.14);
  --bg-primary:    #080000;
  --bg-secondary:  #100000;
  --bg-tertiary:   #100000;
  --bg-quaternary: #1c0303;
  --text-primary:  #ff2020;
  --text-secondary:#e02020;
  --text-muted:    #b01818;
  --border-color:  rgba(255, 32, 32, 0.25);
  --shadow-sm:     none;
  --shadow-md:     none;
  --shadow-color:  transparent;
  --chart-grid:    rgba(255, 32, 32, 0.25);
  --chart-text:    #ff2020;
  color-scheme:    dark;
}

/* ─────────────────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 20px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────
   Page container
   ───────────────────────────────────────────────────────────────────────── */
.container {
  max-width: 1400px;
  margin: 0 auto;
  background-color: var(--bg-secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), 0 20px 60px var(--shadow-color);
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   Status hero
   ───────────────────────────────────────────────────────────────────────── */
#status-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  background: #b85010;
  color: #ffffff;
}


.status-hero__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  /* The tracker's hero holds a 96px logo here (76px on phones). There is no
     logo in this reader, but the slot keeps the bar the same height so
     moving between the two sites does not shift the page. */
  min-height: 96px;
}

.status-hero__logo {
  height: 96px;
  width: auto;
  object-fit: contain;
  display: block;
}

#status-vessel {
  font-weight: 700;
  font-size: 1.3em;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.status-hero__right {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#status-sentence {
  font-size: 1.05em;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

#status-age {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  letter-spacing: 0.01em;
}

[data-theme="night"] #status-hero { background: var(--bg-quaternary); border-bottom-color: var(--border-color); color: var(--text-primary); }
[data-theme="night"] #status-vessel,
[data-theme="night"] #status-sentence { color: var(--text-primary); }
[data-theme="night"] #status-age { color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────────────────
/* ─────────────────────────────────────────────────────────────────────────
   Dark mode toggle (floating tab)
   ───────────────────────────────────────────────────────────────────────── */
.floating-dark-mode-btn {
  position: fixed;
  left: 0;
  top: 100px;
  z-index: 1000;
  padding: 14px 7px;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--text-secondary);
  color: var(--bg-primary);
  cursor: pointer;
  font-size: 0.7em;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease, background 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}

.floating-dark-mode-btn:hover { opacity: 1; }
.floating-dark-mode-btn:active { opacity: 0.7; }


/* ─────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 32px 16px 20px;
  font-size: 0.75em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  transition: color 0.3s ease;
}

.footer-logo {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 12px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.footer-logo:hover {
  opacity: 0.85;
}

.footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
/* ─────────────────────────────────────────────────────────────────────────
   Ship's Docs
   ───────────────────────────────────────────────────────────────────────── */
.docs-back-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  font-size: 0.9em;
}

.docs-back-link:hover { text-decoration: underline; opacity: 1; }

.docs-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}

/* ── Sidebar ── */
.docs-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px 16px 28px;
  border-right: 1px solid var(--border-color);
  background: var(--bg-quaternary);
}

.docs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

.docs-search__icon {
  color: var(--text-muted);
  font-size: 1.05em;
  line-height: 1;
}

.docs-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85em;
}

.docs-search input::placeholder { color: var(--text-muted); }

.docs-nav__group { margin-bottom: 18px; }

.docs-nav__category {
  font-weight: 600;
  font-size: 0.62em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 8px 6px;
}

.docs-nav__item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.86em;
  line-height: 1.35;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .docs-nav__item:hover {
    background: var(--accent-light);
    color: var(--text-primary);
  }
}

.docs-nav__item.is-active {
  background: var(--accent-light);
  border-left-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}

.docs-nav__toc {
  margin: 2px 0 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}

.docs-nav__toc-item {
  display: block;
  padding: 4px 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.78em;
  line-height: 1.3;
}

.docs-nav__toc-item--parent {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.docs-nav__toc-caret {
  flex: none;
  width: 8px;
  font-size: 0.85em;
  transition: transform 0.15s ease;
}

.docs-nav__toc-caret::before { content: '\25b8'; } /* ▸ */

.docs-nav__toc-item--parent[aria-expanded="true"] .docs-nav__toc-caret { transform: rotate(90deg); }

.docs-nav__toc-children { display: flex; flex-direction: column; }
.docs-nav__toc-children[hidden] { display: none; }

.docs-nav__toc-children .docs-nav__toc-item,
.docs-nav__toc-item--h3 { padding-left: 20px; font-size: 0.74em; }

@media (hover: hover) {
  .docs-nav__toc-item:hover { color: var(--accent); }
}

.docs-nav__empty {
  padding: 12px 10px;
  color: var(--text-muted);
  font-size: 0.82em;
}

/* ── Reading pane ── */
.docs-main {
  padding: 28px 36px 48px;
  min-width: 0;
}

.docs-doc-header {
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.docs-doc-header h1 {
  margin: 0 0 10px;
  font-size: 1.9em;
  line-height: 1.2;
  color: var(--text-primary);
}

.docs-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 0.72em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.docs-doc-meta__item { white-space: nowrap; }

.docs-edit-link {
  color: var(--accent);
  text-decoration: none;
}

.docs-edit-link:hover { text-decoration: underline; }

.docs-checklist-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.docs-reset-btn {
  padding: 3px 9px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-quaternary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1em;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.docs-reset-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.docs-placeholder,
.docs-error {
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.6;
}

.docs-error { color: var(--text-secondary); }

.docs-error__hint { color: var(--text-muted); font-size: 0.9em; }

/* The page with nothing on it yet: instructions, not an apology. Styled as
   prose rather than as a gray note, because it is the first thing a new site
   shows and it is asking the reader to do something. */
.docs-empty { max-width: 68ch; }
.docs-empty h2 { margin-top: 0; }
.docs-empty__example {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Rendered Markdown
   ───────────────────────────────────────────────────────────────────────── */
.markdown-body {
  max-width: 78ch;
  color: var(--text-primary);
  font-size: 0.95em;
  line-height: 1.7;
}

.markdown-body > *:first-child { margin-top: 0; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--text-primary);
  line-height: 1.25;
  /* Anchor jumps from the sidebar must not tuck the heading under the top. */
  scroll-margin-top: 16px;
}

.markdown-body h1 { font-size: 1.65em; margin: 1.6em 0 0.6em; }

.markdown-body h2 {
  font-size: 1.25em;
  margin: 1.9em 0 0.7em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.markdown-body h3 { font-size: 1.05em; margin: 1.5em 0 0.5em; }
.markdown-body h4 { font-size: 0.95em; margin: 1.3em 0 0.4em; color: var(--text-secondary); }

.markdown-body p { margin: 0 0 1.1em; }

.markdown-body a { color: var(--accent); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }

.markdown-body ul,
.markdown-body ol { margin: 0 0 1.1em; padding-left: 1.5em; }

.markdown-body li { margin-bottom: 0.35em; }

.markdown-body li > ul,
.markdown-body li > ol { margin-top: 0.35em; margin-bottom: 0.35em; }

.markdown-body blockquote {
  margin: 0 0 1.1em;
  padding: 2px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg-quaternary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
}

/* ── Status tags ── inline badges marking the state of a known issue or
   task, used throughout Systems Overview, Scheduled Maintenance and
   Planned Projects. See the legend on the Planned Projects page. */
.doc-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  margin: 0 2px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.7;
}

.doc-tag--issue       { color: #b62323; border-color: rgba(182, 35, 35, 0.35);  background: rgba(182, 35, 35, 0.08); }
.doc-tag--partial     { color: #b66b00; border-color: rgba(182, 107, 0, 0.35);  background: rgba(182, 107, 0, 0.08); }
.doc-tag--planned     { color: #2f5fc4; border-color: rgba(47, 95, 196, 0.35);  background: rgba(47, 95, 196, 0.08); }
.doc-tag--maintenance { color: #1e8f58; border-color: rgba(30, 143, 88, 0.35);  background: rgba(30, 143, 88, 0.08); }

[data-theme="marine"] .doc-tag--issue,
[data-theme="amber"] .doc-tag--issue       { color: #e08f8f; border-color: rgba(224, 143, 143, 0.4); background: rgba(224, 143, 143, 0.12); }
[data-theme="marine"] .doc-tag--partial,
[data-theme="amber"] .doc-tag--partial     { color: #d9ac6a; border-color: rgba(217, 172, 106, 0.4); background: rgba(217, 172, 106, 0.12); }
[data-theme="marine"] .doc-tag--planned,
[data-theme="amber"] .doc-tag--planned     { color: #8fb0f0; border-color: rgba(143, 176, 240, 0.4); background: rgba(143, 176, 240, 0.12); }
[data-theme="marine"] .doc-tag--maintenance,
[data-theme="amber"] .doc-tag--maintenance { color: #7dd0a0; border-color: rgba(125, 208, 160, 0.4); background: rgba(125, 208, 160, 0.12); }

[data-theme="night"] .doc-tag { color: #ff2020; background: transparent; border-color: #ff2020; }
[data-theme="night"] .doc-tag--issue       { border-style: solid; }
[data-theme="night"] .doc-tag--partial     { border-style: dashed; }
[data-theme="night"] .doc-tag--planned     { border-style: dotted; border-width: 2px; }
[data-theme="night"] .doc-tag--maintenance { border-style: double; border-width: 3px; }

.markdown-body hr {
  height: 1px;
  margin: 2em 0;
  border: none;
  background: var(--border-color);
}

.markdown-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.markdown-body code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-quaternary);
  font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.88em;
}

.markdown-body pre {
  margin: 0 0 1.2em;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-quaternary);
}

.markdown-body pre code {
  padding: 0;
  background: none;
  font-size: 0.85em;
  line-height: 1.6;
}

/* Tables are frequently wider than a phone; scroll them, not the page. */
.docs-table-wrap {
  margin: 0 0 1.3em;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.markdown-body th,
.markdown-body td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.markdown-body th {
  background: var(--bg-quaternary);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.markdown-body tr:last-child td { border-bottom: none; }

/* ── Task lists ── */
.markdown-body li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.35em;
  padding-left: 0.1em;
}

.markdown-body input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Search hits ── */
.markdown-body mark.search-hit {
  background: var(--accent);
  color: var(--bg-primary);
  border-radius: 2px;
  padding: 0 1px;
}

/* Native checkboxes draw a white box; the red theme draws its own. */
[data-theme="night"] .markdown-body input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: transparent;
}
[data-theme="night"] .markdown-body input[type="checkbox"]:checked {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg-primary);
}

.markdown-body li.is-checked {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ship's Docs — responsive
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }

  .docs-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .docs-main { padding: 22px 20px 40px; }
}

@media (max-width: 600px) {
  .docs-main { padding: 18px 16px 32px; }
  .docs-doc-header h1 { font-size: 1.45em; }
  .markdown-body { font-size: 0.92em; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Ship's Docs — print (a checklist is more useful on paper at the helm)
   ───────────────────────────────────────────────────────────────────────── */
@page { margin: 0.5in; }

@media print {
  /* Ink, not backgrounds: code chips and status tags read as outlines. */
  .markdown-body code,
  .markdown-body pre { background: none !important; color: #000 !important; border: 1px solid #999; }
  .markdown-body pre code { border: none; }
  .doc-tag { color: #000 !important; background: none !important; border-color: #000 !important; }
  .docs-sidebar,
  .floating-dark-mode-btn,
  .docs-doc-meta,
  #status-hero,
  .footer { display: none !important; }

  body { padding: 0; background: #fff; color: #000; }

  .container { box-shadow: none; border-radius: 0; background: #fff; }

  .docs-layout { display: block; }

  .docs-main { padding: 0; }

  .markdown-body { max-width: none; color: #000; }

  .markdown-body a { color: #000; text-decoration: underline; }

  .markdown-body h2, .markdown-body h3 { page-break-after: avoid; }

  .docs-table-wrap, .markdown-body pre, .markdown-body li { page-break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Page — phone width
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  body { padding: 0; }
  .container { border-radius: 0; box-shadow: none; }
}

@media (max-width: 600px) {
  #status-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .status-hero__left { min-height: 76px; }
  #status-sentence { white-space: normal; }
  .floating-dark-mode-btn { padding: 10px 5px; min-height: 90px; }
}