/*
 * Shared layout primitives for Space Health Desk public pages.
 * Depends on tokens.css. Keep page-specific CSS in each HTML file.
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* Shared interior page title block (articles, vlogs, search, contribute) */
.page-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-12) var(--gutter) var(--sp-8);
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--text-title-lg);
  font-weight: var(--fw-header);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  color: var(--log-ink);
}
.page-head p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-2);
  max-width: 40rem;
  line-height: 1.6;
}
.page-search {
  margin-top: var(--sp-5);
  max-width: 28rem;
}
.page-search-input {
  width: 100%;
  background: var(--bone-white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-control);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-body-sm);
  color: var(--log-ink);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.page-search-input::placeholder { color: var(--rule-gray); }
.page-search-input:focus { border-color: var(--annotation-red); }
.page-body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-16);
}

/* Chart Strip — quiet instrument band (signature, not wallpaper) */
.chart-strip {
  background: var(--bone-white);
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--log-ink);
}
.chart-strip-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}
.strip-field { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.strip-sep { color: var(--rule-gray); user-select: none; }
.strip-unit { color: var(--instrument-teal); }
.strip-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--annotation-red); flex-shrink: 0;
  animation: pip-breathe 1.2s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .strip-pip { animation: none; }
}

/* Index lists */
.index-hd {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: var(--fw-button);
  margin: 0 0 var(--sp-6);
  color: var(--log-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.index-hd a {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--annotation-red);
}
.index-hd a:hover { color: var(--log-ink); }
.index-cue {
  font-size: var(--text-body-sm);
  color: var(--ink-3);
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-6);
  line-height: 1.5;
}
.read-cue {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--annotation-red);
}

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.topic-row { gap: var(--sp-2) var(--sp-4); }
.topic-btn {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #666;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.topic-btn:hover { color: #010101; }
.topic-btn.active {
  color: var(--accent);
  font-weight: var(--fw-header);
  border-bottom-color: var(--accent);
}

.article-list, .exp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-list li, .exp-list li {
  border-top: 1px solid var(--rule-soft);
}
.article-list li:last-child, .exp-list li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}
.article-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-2);
  color: inherit;
  transition: background-color var(--t-fast) var(--ease);
}
.article-list a:hover { background: var(--bone-white); }
.article-list .atitle {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-button);
  line-height: 1.35;
}
.article-list .ameta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--instrument-teal);
  white-space: nowrap;
}

.exp-list li a.exp-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--text-body-sm);
  color: inherit;
  transition: background-color var(--t-fast) var(--ease);
}
.exp-list li a.exp-row:hover { background: var(--bone-white); }
.exp-list li a.exp-row:hover .etitle { color: var(--annotation-red); }
.exp-list .ecode {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--instrument-teal);
  letter-spacing: 0.02em;
}
.exp-list .etitle {
  font-family: var(--font-body);
  font-weight: var(--fw-button);
  color: var(--log-ink);
  line-height: 1.35;
}
.exp-list .estack {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--ink-3);
  grid-column: 2;
}
.exp-list .estatus {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  justify-self: end;
}

.empty-note {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--ink-3);
  padding: var(--sp-4) 0;
}

/* Community intro */
.community {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-12);
}
.community-panel {
  background: var(--bone-white);
  border: 1px solid var(--border-1);
  border-radius: var(--r-panel);
  padding: var(--sp-8);
  max-width: 44rem;
}
.community-panel h2 {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: var(--fw-button);
  margin: 0 0 var(--sp-3);
  color: var(--log-ink);
}
.community-panel p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--ink-2);
}
.community-panel p:last-child { margin-bottom: 0; }
.community-panel a:not(.btn-primary) { color: var(--annotation-red); text-decoration: underline; text-underline-offset: 0.15em; }
.community-panel a:not(.btn-primary):hover { color: var(--log-ink); }

/* Ruled figure (replaces blank / placeholder images) */
.figure-frame {
  margin: var(--sp-8) 0;
  background: var(--chart-paper);
  border: 1px solid #e0e0e0;
}
.figure-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bone-white);
}
.figure-frame figcaption,
.figure-missing {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  border-top: 1px solid color-mix(in srgb, var(--rule-gray) 50%, transparent);
}
.figure-missing {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--bone-white);
  border-top: none;
}
.figure-missing .fig-id { color: var(--instrument-teal); font-weight: 500; }

/* ── Instrument grammar (DESIGN.md §12) ────────────────────────── */

/* Limit arrows after out-of-range values */
.limit-hi::after { content: " ▲"; color: var(--caution-amber); }
.limit-lo::after { content: " ▼"; color: var(--caution-amber); }
.limit-crit-hi::after { content: " ▲"; color: var(--annotation-red); }
.limit-crit-lo::after { content: " ▼"; color: var(--annotation-red); }

/* Annunciator panel — topic/status board */
.annunciator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
}
a.annunciator { text-decoration: none; }
.annunciator {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-tick);
  background: var(--bone-white);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  min-height: 52px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.annunciator .ann-code {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--log-ink);
}
.annunciator .ann-val {
  font-size: 11px;
  color: var(--ink-3);
}
.annunciator.nominal .ann-val { color: var(--instrument-teal); }
.annunciator.caution .ann-code, .annunciator.caution .ann-val { color: var(--caution-amber); }
.annunciator.warning .ann-code, .annunciator.warning .ann-val { color: var(--annotation-red); }
a.annunciator:hover { border-color: var(--annotation-red); background: #fff; }

/* Vital stat module — trace left, numeral right */
.vital-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-2);
}
.vital {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-tick);
  background: var(--bone-white);
  padding: var(--sp-3);
}
.vital .v-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.vital .v-trace { color: var(--instrument-teal); }
.vital .v-trace svg { display: block; width: 100%; height: 28px; }
.vital .v-num {
  font-family: var(--font-mono);
  font-size: var(--text-title-sm);
  font-weight: 500;
  color: var(--log-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vital .v-num .v-unit {
  font-size: var(--text-caption);
  color: var(--instrument-teal);
  font-weight: 400;
}

/* Document furniture — heavy rule + light rule pair */
.doc-furniture {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.5;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: var(--sp-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}
.doc-furniture .df-field b { color: var(--log-ink); font-weight: 500; }
.doc-furniture .df-unit { color: var(--instrument-teal); }

/* Flight-note sidenote */
.flight-note {
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--ink-3);
}
.flight-note .fn-id {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--instrument-teal);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: var(--sp-1);
}
.flight-note.critical .fn-id { color: var(--annotation-red); }

/* Hazard callout — sole sanctioned edge-stripe exception (DESIGN.md §12.3) */
.hazard {
  margin: var(--sp-8) 0;
  background: var(--bone-white);
  border: 1px solid var(--rule-soft);
  border-top: none;
}
.hazard::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--log-ink) 0 8px,
    var(--caution-amber) 8px 16px
  );
}
.hazard-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--caution-amber);
  padding: var(--sp-3) var(--sp-4) 0;
}
.hazard-body {
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Debrief log entries — comments as log lines */
.debrief-list { margin: 0; padding: 0; list-style: none; }
.debrief-entry {
  border-top: 1px solid var(--rule-soft);
  padding: var(--sp-4) 0;
}
.debrief-entry:last-child { border-bottom: 1px solid var(--rule-soft); }
.debrief-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.debrief-who .d-name { font-weight: var(--fw-button); font-size: var(--text-body-sm); color: var(--log-ink); }
.debrief-who .d-stamp {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.debrief-body {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 66ch;
}

@media (max-width: 800px) {
  .shell, .chart-strip-inner, .community { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .article-list a { grid-template-columns: 1fr; gap: var(--sp-1); }
  .exp-list li { grid-template-columns: 4rem 1fr; }
  .exp-list .estatus { grid-column: 2; justify-self: start; }
  .nav { height: auto; padding: 6px var(--sp-4); }
  .nav-inner-cap { flex-wrap: wrap; row-gap: 0; }
  .nav-links {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    gap: var(--sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-link {
    min-height: 38px;
    font-size: 14px;
    padding: 0 var(--sp-2);
    white-space: nowrap;
  }
}