/* ════════════════════════════════════════════════════════════════════
   Scapa — reusable UI primitives (polish layer).
   Loaded after the theme so it can use --volt-* tokens, before
   responsive.css so phones can still override. Additive, low-risk.
   ════════════════════════════════════════════════════════════════════ */

/* ── Keyboard focus: a single coherent focus-visible ring ─────────────
   Mouse clicks stay clean (no ring); keyboard tabbing shows a clear
   primary-coloured outline on every interactive element. */
a:focus-visible,
button:focus-visible,
.rz-button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.volt-sidebar-nav a:focus-visible,
.volt-theme-toggle:focus-visible,
.volt-notif-bell:focus-visible,
.scapa-help-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--volt-primary) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}
/* Don't double up the ring where we already draw an inner box-shadow. */
.rz-textbox:focus-visible,
.rz-numeric .rz-inputnumber-input:focus-visible { outline-offset: 0 !important; }

/* ── Skeleton loaders ─────────────────────────────────────────────────
   Premium perceived-performance: while data loads we render a greyed-out
   shape of the real layout that gently shimmers, instead of a bare bar. */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--volt-card-muted);
  border-radius: 8px;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--volt-card) 65%, transparent) 50%,
    transparent 100%
  );
  animation: sk-shimmer 1.25s ease-in-out infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

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

/* Building blocks ----------------------------------------------------- */
.sk-line   { height: 0.85rem; margin: 0.45rem 0; }
.sk-line.lg { height: 1.5rem; }
.sk-line.sm { height: 0.65rem; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-55 { width: 55%; }
.sk-line.w-70 { width: 70%; }
.sk-line.w-85 { width: 85%; }
.sk-circle { border-radius: 50%; width: 42px; height: 42px; flex: 0 0 auto; }
.sk-chip   { height: 1.6rem; width: 6rem; border-radius: 99px; }

/* Composite: a row of stat cards mirroring .volt-stats-row */
.sk-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
.sk-stat-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--volt-border);
  border-radius: 14px;
  background: var(--volt-card);
}
.sk-stat-card .sk-text { flex: 1 1 auto; }
@media (max-width: 820px) { .sk-stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sk-stats-row { grid-template-columns: 1fr; } }

/* Composite: a tall card block (hero / map / grid placeholder) */
.sk-block {
  border: 1px solid var(--volt-border);
  border-radius: 16px;
  background: var(--volt-card);
  padding: 1.5rem;
  margin-top: 1.25rem;
}
.sk-block.hero { min-height: 120px; }
.sk-block.grid { min-height: 240px; }

/* Composite: two chart-card placeholders side by side */
.sk-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.sk-charts-row .sk-block { margin-top: 0; }
.sk-chart {
  height: 200px;
  margin-top: 1rem;
  border-radius: 10px;
}
@media (max-width: 900px) { .sk-charts-row { grid-template-columns: 1fr; } }

/* Composite: a tab strip placeholder */
.sk-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--volt-border);
  padding-bottom: 0.75rem;
}

/* ── Achievements (client-side dive badges) ──────────────────────────── */
.scapa-ach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.scapa-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.scapa-ach {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--volt-border);
  border-radius: 14px;
  background: var(--volt-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scapa-ach.earned {
  border-color: color-mix(in srgb, var(--volt-primary) 45%, var(--volt-border));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--volt-primary) 8%, var(--volt-card)),
    var(--volt-card));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--volt-primary) 12%, transparent);
}
.scapa-ach.earned:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--volt-primary) 20%, transparent); }
.scapa-ach.locked { opacity: 0.72; }
.scapa-ach-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: grayscale(0);
}
.scapa-ach.locked .scapa-ach-icon { filter: grayscale(1); opacity: 0.6; }
.scapa-ach-body { flex: 1 1 auto; min-width: 0; }
.scapa-ach-name { font-weight: 700; font-size: 0.92rem; color: var(--volt-text); }
.scapa-ach-desc { font-size: 0.72rem; color: var(--volt-text-muted); margin-top: 0.1rem; }
.scapa-ach-bar {
  height: 5px;
  border-radius: 99px;
  background: var(--volt-card-muted);
  margin-top: 0.45rem;
  overflow: hidden;
}
.scapa-ach-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--volt-primary);
  transition: width 0.4s ease;
}
.scapa-ach-prog { font-size: 0.66rem; color: var(--volt-text-muted); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.scapa-ach-check {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--volt-primary);
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ── Knowledge base ───────────────────────────────────────────────────── */
.scapa-kb-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.scapa-kb-cat {
  padding: 0.5rem 0.9rem; border: 1.5px solid var(--volt-border); border-radius: 99px;
  background: var(--volt-card); color: var(--volt-text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.12s ease;
}
.scapa-kb-cat:hover { border-color: var(--volt-primary); }
.scapa-kb-cat.active { background: var(--volt-primary); border-color: var(--volt-primary); color: #fff; }

.scapa-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.scapa-kb-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  border: 1px solid var(--volt-border); border-radius: 16px; background: var(--volt-card); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scapa-kb-card:hover { transform: translateY(-3px); box-shadow: var(--volt-shadow); }
.scapa-kb-thumb { height: 140px; background-size: cover; background-position: center; background-color: var(--volt-card-muted); }
.scapa-kb-thumb--ph { display: grid; place-items: center; font-size: 2.6rem; }
.scapa-kb-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.scapa-kb-card-body h3 { margin: 0.2rem 0 0; font-size: 1.05rem; color: var(--volt-text); }
.scapa-kb-card-body p { margin: 0; font-size: 0.83rem; color: var(--volt-text-muted); line-height: 1.5; }

.scapa-kb-article { max-width: 760px; margin: 0 auto; }
.scapa-kb-art-head { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0 0.5rem; }
.scapa-kb-art-img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.scapa-kb-art-head h2 { margin: 0.4rem 0 0; }
.scapa-kb-art-body { font-size: 0.98rem; line-height: 1.7; color: var(--volt-text-2); white-space: pre-line; }
.scapa-kb-source { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--volt-border); font-size: 0.78rem; color: var(--volt-text-muted); }
.scapa-kb-source a { color: var(--volt-primary); }

/* ── Eco-Scanner (hidden objects) ─────────────────────────────────────── */
.scapa-eco-wrap { max-width: 860px; margin: 0 auto; }
.scapa-eco-scene {
  position: relative; height: 480px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--volt-border);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(94,234,212,0.18), transparent 55%),
    linear-gradient(180deg, #0b5a7a 0%, #073e57 45%, #062b3e 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  transition: box-shadow 0.15s ease;
}
@media (max-width: 640px) { .scapa-eco-scene { height: 420px; } }
.scapa-eco-scene.flash-good { box-shadow: 0 18px 50px rgba(0,0,0,0.35), inset 0 0 0 4px rgba(46,204,113,0.6); }
.scapa-eco-scene.flash-bad { box-shadow: 0 18px 50px rgba(0,0,0,0.35), inset 0 0 0 4px rgba(245,76,92,0.7); }

.scapa-eco-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; gap: 0.5rem; justify-content: center; padding: 0.7rem; pointer-events: none; }
.scapa-eco-obj {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 2rem; line-height: 1; border: none; background: transparent; cursor: pointer; padding: 0.25rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: transform 0.12s ease;
  animation: scapa-eco-bob 3s ease-in-out infinite;
}
.scapa-eco-obj:hover { transform: translate(-50%, -50%) scale(1.25); }
.scapa-eco-obj.got { animation: scapa-eco-got 0.22s ease forwards; }
.scapa-eco-obj.sting { animation: scapa-eco-sting 0.3s ease; }
@keyframes scapa-eco-bob { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes scapa-eco-got { to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@keyframes scapa-eco-sting { 0%,100% { transform: translate(-50%,-50%); } 25% { transform: translate(-58%,-50%) rotate(-12deg); } 75% { transform: translate(-42%,-50%) rotate(12deg); } }

.scapa-eco-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(4,18,30,0.45); backdrop-filter: blur(1px); }
.scapa-eco-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 0.5rem 0 1.1rem; font-size: 0.82rem; color: var(--volt-text-2); }

/* ── Underwater Signals ───────────────────────────────────────────────── */
.scapa-sg { max-width: 640px; margin: 0 auto; }
.scapa-sg-scenario { text-align: center; margin: 0.4rem 0 1.1rem; }
.scapa-sg-quote { display: block; font-size: 1.35rem; font-weight: 700; color: var(--volt-text); line-height: 1.35; }
.scapa-sg-ask { display: block; margin-top: 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--volt-text-muted); }
.scapa-sg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (min-width: 560px) { .scapa-sg-grid { grid-template-columns: repeat(4, 1fr); } }
.scapa-sg-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1rem 0.5rem; border: 1.5px solid var(--volt-border); border-radius: 14px;
  background: var(--volt-card); cursor: pointer; transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}
.scapa-sg-card:not(:disabled):hover { border-color: var(--volt-primary); transform: translateY(-2px); }
.scapa-sg-emoji { font-size: 2.2rem; line-height: 1; }
.scapa-sg-label { font-size: 0.78rem; font-weight: 600; color: var(--volt-text); text-align: center; }
.scapa-sg-card.correct { border-color: var(--volt-success,#16a34a); background: color-mix(in srgb, var(--volt-success,#16a34a) 14%, var(--volt-card)); }
.scapa-sg-card.wrong { border-color: var(--volt-danger,#e11d48); background: color-mix(in srgb, var(--volt-danger,#e11d48) 14%, var(--volt-card)); }
.scapa-sg-card.dimmed { opacity: 0.5; }

/* ── Nitrogen Hunter ──────────────────────────────────────────────────── */
.scapa-ng { max-width: 640px; margin: 0 auto; }
.scapa-ng-timer-txt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--volt-text-muted); }
.scapa-ng-timer-txt.danger { color: var(--volt-danger, #e11d48); }
.scapa-ng-timerbar { height: 6px; border-radius: 99px; background: var(--volt-card-muted); overflow: hidden; margin: 0.5rem 0 1rem; }
.scapa-ng-timerbar > span { display: block; height: 100%; background: var(--scapa-teal, #14b8a6); border-radius: 99px; transition: width 0.1s linear; }
.scapa-ng-timerbar > span.danger { background: var(--volt-danger, #e11d48); }
.scapa-ng-profile {
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--volt-border); border-radius: 12px; background: var(--volt-card-muted);
}
.scapa-ng-svg { width: 60%; height: 70px; }
.scapa-ng-profile-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 1.05rem; color: var(--volt-text); }
.scapa-ng-profile-meta strong { color: var(--volt-primary); font-size: 1.3rem; }

/* ── Buoyancy Guardian (three.js) ─────────────────────────────────────── */
.scapa-bg-layout { max-width: 820px; margin: 0 auto; }
.scapa-bg-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--volt-border);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  background: #07314f;
}
.scapa-bg-canvas { width: 100%; height: 460px; display: block; }
@media (max-width: 640px) { .scapa-bg-canvas { height: 360px; } }

.scapa-bg-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(4,18,30,0.55); backdrop-filter: blur(2px); padding: 1rem;
}
.scapa-bg-card {
  max-width: 460px; text-align: center; padding: 1.6rem 1.5rem;
  background: var(--volt-card); border: 1px solid var(--volt-border); border-radius: 16px;
  box-shadow: var(--volt-shadow);
}
.scapa-bg-card h2 { margin: 0.3rem 0 0.5rem; }
.scapa-bg-card p { color: var(--volt-text-2); line-height: 1.55; margin: 0 0 1.1rem; }
.scapa-bg-card.good { border-color: color-mix(in srgb, var(--volt-success,#16a34a) 50%, var(--volt-border)); }
.scapa-bg-card.bad { border-color: color-mix(in srgb, var(--volt-danger,#e11d48) 50%, var(--volt-border)); }

.scapa-bg-hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 0.9rem 1rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,18,30,0.55), transparent);
  font-family: var(--volt-font-mono, ui-monospace, monospace); color: #eafcff;
}
.scapa-bg-readout { display: flex; flex-direction: column; gap: 0.1rem; }
.scapa-bg-depth { font-size: 2.2rem; font-weight: 800; line-height: 1; text-shadow: 0 0 16px rgba(94,234,212,0.4); }
.scapa-bg-depth small { font-size: 1rem; opacity: 0.7; margin-left: 0.15rem; }
.scapa-bg-depth.ok { color: #5eead4; }
.scapa-bg-depth.warn { color: #ffd166; }
.scapa-bg-target { font-size: 0.72rem; color: #9bd0e8; }
.scapa-bg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }

.scapa-bg-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.9rem; }
.scapa-bg-btn {
  padding: 1.1rem; border-radius: 14px; border: 1.5px solid var(--volt-border);
  font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: transform 0.08s ease, filter 0.12s ease;
  color: #fff; user-select: none;
}
.scapa-bg-btn:active { transform: scale(0.97); }
.scapa-bg-btn.puff { background: linear-gradient(135deg,#2563eb,#22d3ee); }
.scapa-bg-btn.exhale { background: linear-gradient(135deg,#475569,#1e293b); }
.scapa-bg-hint { text-align: center; color: var(--volt-text-muted); font-size: 0.8rem; margin: 0.6rem 0 0; }

/* ── Mini-games ───────────────────────────────────────────────────────── */
.scapa-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.scapa-game-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  width: 100%;
  padding: 1.4rem;
  border: 1px solid var(--volt-border);
  border-radius: 16px;
  background: var(--volt-card);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.scapa-game-card:not(.is-soon):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--volt-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--volt-primary) 45%, var(--volt-border));
}
.scapa-game-card.is-soon { opacity: 0.65; cursor: default; }
.scapa-game-icon { font-size: 2.6rem; line-height: 1; flex: 0 0 auto; }
.scapa-game-body { flex: 1 1 auto; }
.scapa-game-body h3 { margin: 0 0 0.2rem; font-size: 1.1rem; color: var(--volt-text); }
.scapa-game-body p { margin: 0; font-size: 0.85rem; color: var(--volt-text-muted); }
.scapa-game-go { font-weight: 700; color: var(--volt-primary); flex: 0 0 auto; }
.scapa-soon-pill {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem; border-radius: 99px; margin-left: 0.4rem;
  background: var(--volt-card-muted); color: var(--volt-text-muted); vertical-align: middle;
}

/* Quiz */
.scapa-quiz { max-width: 720px; margin: 0 auto; }
.scapa-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.scapa-quiz-progress { font-size: 0.78rem; color: var(--volt-text-muted); font-variant-numeric: tabular-nums; }
.scapa-quiz-bar { height: 6px; border-radius: 99px; background: var(--volt-card-muted); overflow: hidden; margin-bottom: 1.2rem; }
.scapa-quiz-bar > span { display: block; height: 100%; background: var(--volt-primary); border-radius: 99px; transition: width 0.3s ease; }
.scapa-quiz-q { font-size: 1.25rem; line-height: 1.35; margin: 0 0 1.1rem; color: var(--volt-text); }
.scapa-quiz-options { display: flex; flex-direction: column; gap: 0.6rem; }
.scapa-quiz-option {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  padding: 0.85rem 1rem; border: 1.5px solid var(--volt-border); border-radius: 12px;
  background: var(--volt-card); color: var(--volt-text); font-size: 0.95rem; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.scapa-quiz-option:not(:disabled):hover { border-color: var(--volt-primary); background: var(--volt-card-muted); }
.scapa-quiz-letter {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--volt-card-muted); color: var(--volt-text-muted); font-weight: 700; font-size: 0.8rem;
}
.scapa-quiz-option.correct { border-color: var(--volt-success, #16a34a); background: color-mix(in srgb, var(--volt-success, #16a34a) 12%, var(--volt-card)); }
.scapa-quiz-option.correct .scapa-quiz-letter { background: var(--volt-success, #16a34a); color: #fff; }
.scapa-quiz-option.wrong { border-color: var(--volt-danger, #e11d48); background: color-mix(in srgb, var(--volt-danger, #e11d48) 12%, var(--volt-card)); }
.scapa-quiz-option.wrong .scapa-quiz-letter { background: var(--volt-danger, #e11d48); color: #fff; }
.scapa-quiz-option.dimmed { opacity: 0.55; }
.scapa-quiz-feedback {
  display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1rem; padding: 0.85rem 1rem;
  border-radius: 12px; font-size: 0.88rem; line-height: 1.45;
  border-left: 4px solid var(--volt-border);
}
.scapa-quiz-feedback.good { background: color-mix(in srgb, var(--volt-success, #16a34a) 10%, var(--volt-card)); border-left-color: var(--volt-success, #16a34a); }
.scapa-quiz-feedback.bad { background: color-mix(in srgb, var(--volt-danger, #e11d48) 10%, var(--volt-card)); border-left-color: var(--volt-danger, #e11d48); }
.scapa-quiz-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.1rem; }
.scapa-quiz-result { max-width: 480px; margin: 1rem auto; text-align: center; }
.scapa-result-emoji { font-size: 3.5rem; }
.scapa-quiz-result h2 { font-size: 2.4rem; margin: 0.3rem 0 0; color: var(--volt-text); }
.scapa-result-grade { color: var(--volt-text-muted); margin: 0.3rem 0 1.2rem; }
.scapa-quiz-result .scapa-quiz-actions { justify-content: center; }

/* ── Dive Simulator: level map (Mario-world style) ────────────────────── */
.scapa-levelmap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 1.5rem 0.5rem;
  background:
    radial-gradient(140% 120% at 50% -10%, color-mix(in srgb, var(--scapa-teal,#14b8a6) 14%, transparent), transparent 60%),
    var(--volt-card);
  border: 1px solid var(--volt-border);
  border-radius: 18px;
}
.scapa-lvl-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 120px;
}
.scapa-lvl-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(100% + 0.25rem);
  width: 2rem;
  border-top: 3px dotted var(--volt-border-strong);
}
.scapa-lvl-dot {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 800;
  border: 3px solid var(--volt-border-strong);
  background: var(--volt-card-muted);
  color: var(--volt-text-muted);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scapa-lvl-node.done .scapa-lvl-dot { background: var(--volt-success,#16a34a); border-color: var(--volt-success,#16a34a); color: #fff; }
.scapa-lvl-node.current .scapa-lvl-dot {
  background: var(--volt-primary); border-color: var(--volt-primary); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--volt-primary) 22%, transparent);
  animation: scapa-lvl-pulse 1.6s ease-in-out infinite;
}
@keyframes scapa-lvl-pulse { 0%,100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--volt-primary) 22%, transparent); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--volt-primary) 0%, transparent); } }
.scapa-lvl-node:not(.locked) .scapa-lvl-dot:hover { transform: translateY(-3px); }
.scapa-lvl-node.locked .scapa-lvl-dot { cursor: not-allowed; opacity: 0.7; }
.scapa-lvl-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; }
.scapa-lvl-spot { font-weight: 700; font-size: 0.82rem; color: var(--volt-text); line-height: 1.2; }
.scapa-lvl-meta { font-size: 0.68rem; color: var(--volt-text-muted); }
.scapa-lvl-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.12rem 0.45rem; border-radius: 99px; background: var(--volt-primary-soft); color: var(--volt-primary); vertical-align: middle; margin-left: 0.4rem; }

.scapa-brief-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.6rem; }
.scapa-brief-flag { font-size: 2.2rem; line-height: 1; }
.scapa-brief-head h2 { margin: 0; }
.scapa-brief-loc { margin: 0.1rem 0 0; color: var(--volt-text-muted); font-size: 0.85rem; }
.scapa-brief-hazard { font-style: italic; color: var(--volt-text-2); margin: 0 0 0.9rem; }

/* ── Dive Simulator game ──────────────────────────────────────────────── */
.scapa-sim-brief h2 { margin: 0 0 0.75rem; }
.scapa-sim-brief ul { margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.7; color: var(--volt-text-2); }
.scapa-sim-gases { margin: 0 0 1.1rem; color: var(--volt-text-muted); font-size: 0.85rem; }
.scapa-gas-chip { display: inline-block; padding: 0.15rem 0.55rem; margin: 0 0.2rem; border-radius: 99px;
  background: var(--volt-card-muted); font-family: var(--volt-font-mono); font-size: 0.78rem; }

.scapa-sim-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .scapa-sim-layout { grid-template-columns: 1fr; } }

/* The dive computer "device" */
.scapa-dc {
  border-radius: 22px;
  padding: 1.25rem 1.4rem 1.5rem;
  background: radial-gradient(120% 100% at 50% 0%, #16324a 0%, #0a1622 60%, #060d16 100%);
  border: 1px solid rgba(120,170,210,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  color: #dbe7f2;
  font-family: var(--volt-font-mono, ui-monospace, monospace);
  position: relative;
  overflow: hidden;
}
.scapa-dc.is-alert { animation: scapa-dc-alert 0.9s ease-in-out infinite; }
@keyframes scapa-dc-alert { 0%,100% { box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(245,158,11,0.0); }
  50% { box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(245,158,11,0.55); } }
.scapa-dc.is-dead { filter: grayscale(0.5) brightness(0.8); }
.scapa-dc-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.08em; color: #7fa6c4; }
.scapa-dc-gas { padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(20,184,166,0.18); color: #5eead4; font-weight: 700; }
.scapa-dc-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin: 0.5rem 0 0.9rem; }
.scapa-dc-depth { display: flex; align-items: baseline; gap: 0.3rem; }
.scapa-dc-num { font-size: 3.6rem; font-weight: 800; line-height: 1; color: #eafcff; text-shadow: 0 0 18px rgba(94,234,212,0.35); font-variant-numeric: tabular-nums; }
.scapa-dc-unit { font-size: 1.1rem; color: #7fa6c4; }
.scapa-dc-sub { text-align: right; display: flex; flex-direction: column; gap: 0.35rem; }
.scapa-dc-sub > div { display: flex; flex-direction: column; }
.scapa-dc-lbl { font-size: 0.6rem; letter-spacing: 0.1em; color: #6f93b0; }
.scapa-dc-val { font-size: 1.05rem; font-weight: 700; color: #dbe7f2; font-variant-numeric: tabular-nums; }
.scapa-dc-val.ok { color: #5eead4; }
.scapa-dc-val.warn { color: #fbbf24; }
.scapa-dc-val.bad { color: #fb7185; }
.scapa-dc-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding-top: 0.85rem; border-top: 1px solid rgba(120,170,210,0.14); }
.scapa-dc-gauge { display: flex; flex-direction: column; gap: 0.15rem; }
.scapa-dc-tank { height: 7px; border-radius: 99px; background: rgba(120,170,210,0.16); margin-top: 0.9rem; overflow: hidden; }
.scapa-dc-tank > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#fb7185,#fbbf24 40%,#5eead4 70%); transition: width 0.3s ease; }
.scapa-dc-obj { margin-top: 0.7rem; font-size: 0.74rem; color: #9bb8d0; text-align: center; }
.scapa-dc-warn { margin-top: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(245,158,11,0.16);
  color: #fcd34d; font-size: 0.78rem; text-align: center; }

.scapa-sim-side { display: flex; flex-direction: column; gap: 1rem; }
.scapa-sim-profile { padding: 0.75rem 0.75rem 0.5rem; }
.scapa-sim-profile svg { width: 100%; height: 160px; display: block; background: var(--volt-card-muted); border-radius: 10px; }
.scapa-sim-profile-lbl { font-size: 0.7rem; color: var(--volt-text-muted); text-align: center; margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; }

.scapa-sim-controls { display: flex; flex-direction: column; gap: 0.75rem; }
.scapa-sim-move { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.scapa-sim-btn {
  padding: 0.9rem 0.5rem; border: 1.5px solid var(--volt-border); border-radius: 12px; background: var(--volt-card);
  color: var(--volt-text); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.12s ease;
}
.scapa-sim-btn:hover { border-color: var(--volt-primary); }
.scapa-sim-btn.active { background: var(--volt-primary); border-color: var(--volt-primary); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--volt-primary) 35%, transparent); }
.scapa-sim-gasrow { display: flex; gap: 0.5rem; }
.scapa-sim-gasbtn { flex: 1; padding: 0.6rem 0.4rem; border: 1.5px solid var(--volt-border); border-radius: 10px;
  background: var(--volt-card); color: var(--volt-text); font-family: var(--volt-font-mono); font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.scapa-sim-gasbtn.active { background: color-mix(in srgb, var(--scapa-teal,#14b8a6) 18%, var(--volt-card)); border-color: var(--scapa-teal,#14b8a6); color: var(--scapa-teal,#14b8a6); }

.scapa-sim-result { max-width: 520px; margin: 1.25rem auto 0; text-align: center; }
.scapa-sim-result.good { border-color: color-mix(in srgb, var(--volt-success,#16a34a) 45%, var(--volt-border)); }
.scapa-sim-result.bad { border-color: color-mix(in srgb, var(--volt-danger,#e11d48) 45%, var(--volt-border)); }
.scapa-sim-result h2 { margin: 0.2rem 0; }
.scapa-sim-score { font-size: 1.4rem; font-weight: 800; color: var(--volt-primary); margin: 0.3rem 0 1rem; }

/* ── Language switcher (header) ───────────────────────────────────────── */
.scapa-lang-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  width: auto !important;
  padding: 0 0.55rem !important;
  font-size: 0.78rem;
  font-weight: 700;
}
.scapa-lang-flag { font-size: 1rem; line-height: 1; }
.scapa-lang-code { letter-spacing: 0.03em; }
.scapa-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  min-width: 168px;
  padding: 0.35rem;
  background: var(--volt-card);
  border: 1px solid var(--volt-border);
  border-radius: 12px;
  box-shadow: var(--volt-shadow, 0 .5rem 1.5rem rgba(0,0,0,.18));
}
.scapa-lang-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--volt-text);
  cursor: pointer;
  text-align: left;
}
.scapa-lang-item:hover { background: var(--volt-card-muted); }
.scapa-lang-item.active { color: var(--volt-primary); font-weight: 700; }
.scapa-lang-check { font-size: 1rem; margin-left: auto; color: var(--volt-primary); }

/* ── App-wide safety disclaimer (footer) ─────────────────────────────── */
.volt-app-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 2.5rem auto 0.5rem;
  max-width: 1100px;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--volt-border);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--volt-text-muted);
}
.volt-app-disclaimer .material-icons {
  font-size: 1rem;
  flex: 0 0 auto;
  margin-top: 0.05rem;
  color: var(--volt-warning, #f59e0b);
}
.volt-app-disclaimer strong { color: var(--volt-text-2, var(--volt-text)); }
@media print { .volt-app-disclaimer { display: none !important; } }

/* ── Dashboard "this year" band ──────────────────────────────────────── */
.volt-yearband {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--volt-primary) 10%, var(--volt-card)),
    var(--volt-card) 65%);
  border: 1px solid color-mix(in srgb, var(--volt-primary) 30%, var(--volt-border));
}
.volt-yearband-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.volt-yearband-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.volt-yearband-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.9rem;
  border-left: 3px solid color-mix(in srgb, var(--volt-primary) 55%, transparent);
}
.volt-yearband-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--volt-text);
  font-variant-numeric: tabular-nums;
}
.volt-yearband-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--volt-text-muted);
}
@media (max-width: 560px) {
  .volt-yearband-metrics { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ── Toasts: consistent on-brand notification styling ────────────────
   All toasts go through ToastExtensions, so styling them once here keeps
   every success/error/info/warning visually consistent. */
.rz-notification .rz-notification-item,
.rz-notification-item {
  border-radius: 12px !important;
  box-shadow: var(--volt-shadow, 0 .5rem 1.5rem rgba(0,0,0,.18)) !important;
  border-left: 4px solid var(--volt-border) !important;
}
.rz-notification-item.rz-notification-success { border-left-color: var(--volt-success, #16a34a) !important; }
.rz-notification-item.rz-notification-error   { border-left-color: var(--volt-danger, #e11d48) !important; }
.rz-notification-item.rz-notification-info     { border-left-color: var(--volt-info, #2563eb) !important; }
.rz-notification-item.rz-notification-warning  { border-left-color: var(--volt-warning, #f59e0b) !important; }

/* ── Print: clean dive-log sheet ─────────────────────────────────────
   The print-only header is hidden on screen and revealed when printing. */
.dive-print-head { display: none; }

@media print {
  /* Force a light palette on paper even if the user is in dark mode.
     Re-declaring the tokens (beating the [data-theme="dark"] block) flips
     every token-based component — cards, pills, tissue bars, text — to light. */
  :root,
  :root[data-theme="dark"] {
    --volt-bg: #fff;
    --volt-bg-2: #fff;
    --volt-card: #fff;
    --volt-card-muted: #f1f2f4;
    --volt-border: #cccccc;
    --volt-border-strong: #bbbbbb;
    --volt-text: #111111;
    --volt-text-2: #333333;
    --volt-text-muted: #555555;
    --scapa-surface: #f1f2f4;
    --scapa-input-bg: #ffffff;
    --rz-text-color: #111111;
    --rz-text-secondary-color: #333333;
    --rz-text-tertiary-color: #555555;
    --rz-base-background-color: #ffffff;
    --rz-body-background-color: #ffffff;
    --rz-content-background-color: #ffffff;
  }

  /* Belt-and-braces: headings/values that might carry a near-white colour
     print dark. Semantic pills (Deco/Ceiling) keep their own colour via tokens. */
  .volt-stat-value,
  .volt-card-title,
  .scapa-card-title,
  .volt-detail-row strong { color: #111 !important; }

  /* Strip the app chrome — only the dive content prints. */
  .volt-sidebar,
  .volt-sidebar-scrim,
  .volt-header,
  .scapa-help-btn,
  .volt-notif-panel,
  .volt-modal-overlay,
  .driver-popover,
  .scapa-welcome,
  .volt-page-header,
  .volt-media-upload,
  .volt-upload-btn,
  .volt-media-del,
  .scapa-tissue-speed,
  .scapa-tissue-controls { display: none !important; }

  /* Hide interactive controls — the sheet is read-only. */
  .volt-content .rz-button,
  .volt-content button,
  .volt-content input[type="range"] { display: none !important; }

  /* Flatten the layout to a single full-width column on white paper. */
  html, body,
  .volt-app-shell,
  .volt-main,
  .volt-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }
  .volt-content { padding: 0 8mm !important; }

  /* Print header with the Scapa mark. */
  .dive-print-head {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #111;
  }
  .dive-print-logo { width: 34px; height: 34px; }
  .dive-print-title { font-size: 1.25rem; font-weight: 800; color: #111; }
  .dive-print-sub { font-size: 0.8rem; color: #555; }

  /* Cards become bordered blocks that don't split across pages. */
  .volt-card,
  .scapa-card,
  .volt-stat-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #111 !important;
  }

  /* Keep the stats row tidy across the page. */
  .volt-stats-row { display: flex !important; flex-wrap: wrap; gap: 0.5rem; }
  .volt-stat-card { flex: 1 1 22%; }

  @page { margin: 12mm; }
}