/* ═══ restoration.css — THE WORLD RESTORATION DOSSIER ═══
   The deep-page hero carries the voice row; the volume bars swap the
   four documents rendered pages-inside-the-page. All tokens base.css. */

.restoration-voice-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-top: var(--phi-space-lg);
}
.restoration-voice-row .doc-tts-btn {
  background: rgba(10, 10, 20, 0.85); color: var(--phi-gold-bright);
  border: 1px solid var(--phi-stroke-glow); border-radius: 999px;
  padding: 10px 22px; font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer; transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.restoration-voice-row .doc-tts-btn:hover {
  border-color: var(--phi-gold); box-shadow: 0 0 18px var(--phi-gold-glow);
}
.restoration-voice-note {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--phi-text-dim);
  letter-spacing: 0.08em;
}

/* the volume bars */
.restoration-bars {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 1500px; margin: 0 auto var(--phi-space-xl); padding: 0 16px;
  position: relative; z-index: 2;
}
.restoration-tab {
  background: rgba(10, 10, 20, 0.82); color: var(--phi-text);
  border: 1px solid var(--phi-stroke-glow); border-radius: 999px;
  padding: 10px 20px; font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.restoration-tab:hover { border-color: var(--phi-gold); color: var(--phi-gold); }
.restoration-tab[aria-selected="true"] {
  border-color: var(--phi-gold-bright); color: var(--phi-gold-bright);
  box-shadow: 0 0 18px var(--phi-gold-glow);
}

/* the document panes */
#restoration-main { position: relative; z-index: 2; padding: 0 16px var(--phi-space-3xl); }
.restoration-pane {
  max-width: 1100px; margin: 0 auto; background: rgba(10, 10, 20, 0.82);
  border: 1px solid var(--phi-stroke-glow); border-radius: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 26px 30px 30px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.restoration-doc-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.restoration-doc-head h2, .restoration-title { color: var(--phi-gold-bright); font-size: var(--phi-h2); margin: 0; }
.restoration-body { font-family: var(--font-body); color: var(--phi-text); line-height: 1.75; }
.restoration-body h1 { color: var(--phi-gold-bright); font-size: var(--phi-h2); }
.restoration-body h1, .restoration-body h2 {
  color: var(--phi-gold); border-bottom: 1px solid var(--phi-stroke); padding-bottom: 6px; margin-top: var(--phi-space-xl);
}
.restoration-body h3 { color: var(--phi-gold); margin-top: var(--phi-space-lg); }
.restoration-body a { color: var(--phi-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.restoration-body a:hover { text-shadow: 0 0 10px var(--phi-gold-glow); }
.restoration-body blockquote {
  border-left: 3px solid var(--phi-gold); padding: 10px 18px; margin: var(--phi-space-lg) 0;
  background: rgba(212, 168, 67, 0.06); border-radius: 8px; color: var(--phi-text);
}
.restoration-body table {
  width: 100%; border-collapse: collapse; margin: var(--phi-space-lg) 0;
  font-family: var(--font-mono); font-size: 0.82rem;
}
.restoration-body th {
  color: var(--phi-gold); text-align: left; border-bottom: 1px solid var(--phi-gold-dim);
  padding: 8px 10px; letter-spacing: 0.06em;
}
.restoration-body td { border-bottom: 1px solid var(--phi-stroke); padding: 7px 10px; color: var(--phi-text); }
.restoration-body strong { color: var(--phi-gold-bright); }
.restoration-body hr { border: none; border-top: 1px solid var(--phi-stroke); margin: var(--phi-space-xl) 0; }
.restoration-loading { color: var(--phi-text-dim); font-style: italic; font-family: var(--font-mono); }

/* the canon grid */
.restoration-canon { max-width: 1100px; margin: var(--phi-space-3xl) auto 0; }
.restoration-canon-note { color: var(--phi-text-dim); font-size: 0.9rem; margin-bottom: var(--phi-space-lg); }
.restoration-canon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 14px;
}
/* the canon doors: self-contained pill style (the .vdoc-file-link class
   comes from vehicle-doc.css, which this page does not load) */
.restoration-canon-grid .vdoc-file-link {
  display: block; text-align: left; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--phi-gold); background: rgba(212, 168, 67, 0.05);
  border: 1px solid var(--phi-stroke-glow); border-radius: 8px;
  padding: 8px 12px; margin: 0;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.restoration-canon-grid .vdoc-file-link:hover {
  border-color: var(--phi-gold-bright); color: var(--phi-gold-bright);
  box-shadow: 0 0 14px var(--phi-gold-glow);
}

@media (max-width: 768px) {
  .restoration-pane { padding: 18px 14px 22px; }
  .restoration-tab { padding: 8px 14px; font-size: 0.68rem; }
  .restoration-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}