/* ==========================================================
   FleetFixer  -  Learning Guide pages (Pine & Citrus skin)
   Shared stylesheet for the 18 guide pages (boat-parts, buoyage,
   five-essentials, nav-lights, points-of-sail, weather, and peers).

   This file is a superset of the inline <style> blocks those pages
   used to carry. A page can delete its inline styles and link this
   file with nothing lost.

   Colour tokens come from /shared/marketing-tokens.css
   (--accent #15614A, --bg #F1F5EF, --stroke #E1E9DD, --text #14201B,
    --muted #5A6B61, --radius 16px, gradients). We do NOT redeclare
   those here. The block below adds only the supplementary tokens
   marketing-tokens lacks, plus runtime themable defaults that the
   old inline :root used to supply (theme.js overrides these per user).
   ========================================================== */

:root{
  /* Supplementary brand tokens (not in marketing-tokens) */
  --text-strong:#0A1410;
  --stroke-strong:#CDD8C6;
  --surface-2:#E8F0E6;
  --success:#1FA971;
  --success-50:#E7F5EE;
  --danger:#E5544B;
  --danger-50:#FBEAE9;
  --warning:#E8A33D;
  --warning-50:#FBF3E2;
  --shadow-xs:0 1px 2px rgba(20,32,27,.06);
  --shadow-sm:0 1px 3px rgba(20,32,27,.08),0 1px 2px rgba(20,32,27,.04);
  --chrome-bg:#0E1714;
  --chrome-text:#EAF3EC;
  --chrome-text-muted:#9DB0A6;
  --chrome-border:rgba(180,212,196,.14);
  --chrome-active-text:#6FD0A8;
  --radius-sm:6px;
  --radius-lg:12px;
  --focus-ring:0 0 0 3px rgba(46,155,121,.34);

  /* Accent helpers used by buttons and the key-fact panel.
     marketing-tokens does not define these, so we provide brand
     fallbacks. theme.js may override --accent at runtime; these
     stay sensible against the default pine. */
  --accent-strong:#0F4D3A;
  --accent-weak:#EDF8F2;

  /* Runtime-themable defaults that the old inline :root supplied.
     KEEP THESE NAMES EXACTLY: theme.js sets them via
     documentElement.style.setProperty for per-user theming.
     marketing-tokens already covers --accent, --accent-2,
     --accent-light, --bg, --panel, --stroke, --text, --muted,
     --radius and --brand-gradient, so only the game tokens and
     the status game tokens are defaulted here, mapped to the
     brand status palette. */
  --game-correct:var(--success);
  --game-wrong:var(--danger);
  --game-accent:var(--accent);
  --game-accent-2:var(--accent-2);
  --game-bg:var(--bg);
  --game-gradient:var(--brand-gradient);
}

/* ── Reset (mirrors the old inline reset; marketing-tokens also
   resets, this is a harmless idempotent restatement) ── */
*{box-sizing:border-box;margin:0;padding:0}

/* ── Page shell ── */
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ── Top chrome: premium dark pine shell ── */
.topbar{
  background:var(--chrome-bg);
  color:var(--chrome-text);
  border-bottom:1px solid var(--chrome-border);
  padding:0 20px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-logo{height:32px}
.topbar-title{font-size:14px;font-weight:700;color:var(--chrome-text)}
.topbar-btn{
  font-size:12px;
  font-weight:600;
  color:var(--chrome-text-muted);
  text-decoration:none;
  padding:7px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--chrome-border);
  background:transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.topbar-btn:hover{
  background:rgba(255,255,255,.06);
  color:var(--chrome-text);
}

/* ── Layout container ── */
.container{max-width:700px;margin:0 auto;padding:24px}

/* ── Page header ── */
.page-header{text-align:center;margin-bottom:24px}
.page-header h1{
  font-size:clamp(26px,4vw,32px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text-strong);
  margin-bottom:4px;
}
/* weather.html h1-with-icon variant */
.page-header h1 i{color:var(--accent);margin-right:6px}
.page-header p{font-size:14px;color:var(--muted)}

/* ── Progress summary line ── */
.progress-summary{
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  margin-bottom:20px;
}

/* ── Guide section / card ── */
.guide-section,
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  margin-bottom:12px;
  overflow:hidden;
}
.guide-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  user-select:none;
  transition:background .15s;
}
.guide-section-header:hover{background:var(--surface-2)}
.guide-section-header .chevron{
  transition:transform .25s;
  font-size:12px;
  color:var(--muted);
}
.guide-section-header.open .chevron{transform:rotate(90deg)}

/* Accordion mechanics: preserved exactly */
.guide-section-content{max-height:0;overflow:hidden;transition:max-height .35s ease}
.guide-section-content.open{max-height:8000px}

/* ── Guide section body prose ── */
.guide-section-body{padding:0 20px 20px}
.guide-section-body p{font-size:14px;line-height:1.7;margin-bottom:10px}
.guide-section-body ul,
.guide-section-body ol{font-size:14px;line-height:1.7;margin:0 0 10px 18px}
.guide-section-body li{margin-bottom:4px}
.guide-section-body strong{font-weight:700}
.guide-section-body table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.guide-section-body th{
  background:var(--surface-2);
  font-weight:700;
  text-align:left;
  padding:8px 10px;
  border:1px solid var(--stroke);
}
.guide-section-body td{padding:8px 10px;border:1px solid var(--stroke)}

/* ── Key fact callout: calm surface + accent left bar ── */
.key-fact{
  background:var(--accent-weak);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 16px;
  margin:12px 0;
  font-size:14px;
  font-weight:600;
  line-height:1.6;
}
.key-fact i{color:var(--accent);margin-right:6px}

/* ── Game link button: flat accent fill ── */
.game-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  margin-top:16px;
  transition:background .15s;
}
.game-link:hover{background:var(--accent-strong)}

/* ── Diagram wrappers (one per page variant) ── */
.buoy-svg{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:16px 0}
.buoy-svg svg{width:60px;height:auto}
.buoy-svg .buoy-label{font-size:11px;font-weight:700;text-align:center;margin-top:4px}

.essentials-diagram{display:block;max-width:420px;margin:16px auto}

.light-diagram{display:flex;justify-content:center;margin:16px 0}
.light-diagram svg{max-width:100%;height:auto}

.pos-diagram{display:block;max-width:420px;margin:16px auto}

/* ── Focus visibility ── */
*:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}