/* =============================================================
   ps_docs.css  --  Shared styles for DSP reference/education pages
   Used by: power_stations_terms_and_specs_explained.html
            basic_electricity_for_solar.html
            power_stations_power_shaving.html
            power_stations_solar_home_strategies.html
   Companion to ../css/dsp_site.css
   ============================================================= */

:root {
  --amber:     #b86215;
  --amber-bg:  #fef0e0;
  --amber-bdr: #f5c89a;
  --navy-bg:   #dce8f0;
  --navy-bdr:  #8aaabb;
  --surface:   #ffffff;
  --border:    #b8cedd;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --r:         10px;
}

/* --- Layout ----------------------------------------------- */
.docs-body { max-width:900px; margin:0 auto; padding:28px 24px 72px; }

/* --- Back nav --------------------------------------------- */
.back-nav {
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:500;
  color:#1e6fa8; text-decoration:none;
  background:#e8f2fc; border:1px solid #9cc4e8;
  border-radius:20px; padding:5px 14px;
  margin-bottom:28px; transition:background .15s;
}
.back-nav:hover { background:#d0e8f8; text-decoration:none; }

/* --- Hero ------------------------------------------------- */
.docs-eyebrow {
  font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:#b86215; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px;
}
.docs-h1 {
  font-family:"Syne",sans-serif; font-size:32px; font-weight:800;
  color:#1a2c3d; margin:0 0 12px; line-height:1.1;
}
.docs-tagline {
  font-family:"IBM Plex Sans",sans-serif; font-size:15.5px;
  color:#5a7a96; line-height:1.65; margin-bottom:32px;
  max-width:720px;
}

/* --- Section chrome --------------------------------------- */
.docs-section { margin-bottom:52px; }
.section-heading {
  font-family:"Syne",sans-serif; font-size:20px; font-weight:800;
  color:#1a2c3d; margin:0 0 16px; padding-bottom:12px;
  border-bottom:3px solid #ffc107;
  display:flex; align-items:center; gap:10px;
}
.section-accent {
  display:inline-block; width:4px; height:20px;
  background:#ffc107; border-radius:2px; flex-shrink:0;
}
.section-sub {
  font-family:"Syne",sans-serif; font-size:16px; font-weight:700;
  color:#1a2c3d; margin:28px 0 10px;
}
.docs-p {
  font-family:"IBM Plex Sans",sans-serif; font-size:14.5px;
  line-height:1.8; color:#2c4558; margin-bottom:14px;
}
.docs-p-sm {
  font-family:"IBM Plex Sans",sans-serif; font-size:13.5px;
  line-height:1.75; color:#3d5a70; margin-bottom:12px;
}
.text-link { color:#1e6fa8; font-weight:600; text-decoration:none; }
.text-link:hover { text-decoration:underline; }

/* --- Definition cards (terms & specs page) ---------------- */
.def-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px; margin-top:18px;
}
.def-card {
  background:#fff; border:1px solid #c4d8e8; border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.def-card-section {
  border-left:4px solid #ffc107;
}
.def-term {
  font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:700;
  color:#1a2c3d; margin-bottom:4px;
}
.def-label {
  font-family:"Syne",sans-serif; font-size:14px; font-weight:700;
  color:#1a2c3d; margin-bottom:6px;
}
.def-body {
  font-family:"IBM Plex Sans",sans-serif; font-size:13px;
  line-height:1.65; color:#3d5a70; margin-bottom:8px;
}
.def-why {
  font-family:"IBM Plex Sans",sans-serif; font-size:12px;
  line-height:1.6; color:#5a7a96;
  border-top:1px solid #e0eaf2; padding-top:8px; margin-top:4px;
}
.def-why strong { color:#1a2c3d; }
.def-tag {
  display:inline-block; font-family:"IBM Plex Mono",monospace;
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; padding:1px 7px; border-radius:3px;
  margin-bottom:8px;
}
.tag-power  { background:#e6f2fc; color:#1260a0; }
.tag-batt   { background:#edf6ee; color:#1f7030; }
.tag-solar  { background:#fdf6e0; color:#906800; }
.tag-home   { background:#fdecea; color:#a02020; }
.tag-conn   { background:#f0f0fe; color:#4040b0; }
.tag-phys   { background:#f0f0f0; color:#505050; }
.tag-price  { background:#fdf0e0; color:#805000; }

/* --- Callout boxes ---------------------------------------- */
.callout-box { display:flex; gap:18px; border-radius:12px; padding:20px 22px; margin:20px 0; }
.callout-warn  { background:#fffbee; border:1.5px solid #f0d060; border-left:5px solid #ffc107; }
.callout-alert { background:#fef4f4; border:1.5px solid #f0a0a0; border-left:5px solid #c0392b; }
.callout-tip   { background:#eef8ee; border:1.5px solid #90d090; border-left:5px solid #2a8a4a; }
.callout-info  { background:#eef4fc; border:1.5px solid #90b8e0; border-left:5px solid #1e6fa8; }
.callout-icon  { font-size:26px; flex-shrink:0; padding-top:2px; }
.callout-body  { flex:1; font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; line-height:1.7; color:#2c4558; }
.callout-body strong { color:#1a2c3d; }
.callout-title { font-family:"Syne",sans-serif; font-size:14px; font-weight:800; color:#1a2c3d; margin-bottom:6px; }

/* --- Level cards (strategies page) ------------------------ */
.level-list { display:flex; flex-direction:column; gap:20px; margin-top:20px; }
.level-card {
  background:#fff; border:1px solid #c4d8e8; border-radius:var(--r);
  padding:22px 24px; box-shadow:var(--shadow-sm);
  display:flex; gap:20px; align-items:flex-start;
}
.level-card:hover { box-shadow:var(--shadow-md); }
.level-num {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:#1a2c3d;
}
.level-content { flex:1; }
.level-title {
  font-family:"Syne",sans-serif; font-size:16px; font-weight:800;
  color:#1a2c3d; margin-bottom:6px; line-height:1.2;
}
.level-badge {
  display:inline-block; font-family:"IBM Plex Mono",monospace;
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; padding:2px 8px; border-radius:3px;
  margin-bottom:8px;
}
.badge-easy   { background:#edf6ee; color:#1f7030; }
.badge-medium { background:#fdf6e0; color:#906800; }
.badge-adv    { background:#fdecea; color:#a02020; }
.level-desc { font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; line-height:1.7; color:#3d5a70; }
.level-desc ul { margin:8px 0 0 18px; padding:0; }
.level-desc li { margin-bottom:4px; }
.level-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.level-tag {
  font-family:"IBM Plex Sans",sans-serif; font-size:11.5px;
  background:#f0f5fa; color:#2c4558; border:1px solid #c0d4e4;
  border-radius:4px; padding:2px 9px;
}

/* --- Analogy blocks (electricity basics page) ------------- */
.analogy-block {
  background:#f4f8fc; border:1px solid #b8cedd; border-radius:var(--r);
  padding:20px 22px; margin:16px 0;
}
.analogy-label {
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:#1e6fa8;
  margin-bottom:8px;
}
.analogy-body {
  font-family:"IBM Plex Sans",sans-serif; font-size:14px;
  line-height:1.75; color:#2c4558;
}
.analogy-body strong { color:#1a2c3d; }

/* --- Diagram wrapper -------------------------------------- */
.diagram-wrap { margin:24px 0; text-align:center; }
.diagram-wrap svg { max-width:100%; height:auto; }
.diagram-caption {
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  color:#7a9ab0; margin-top:8px; text-align:center;
}

/* --- CTA button ------------------------------------------- */
.docs-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; background:#1a2c3d; color:#ffc107;
  border-radius:8px; font-family:"Syne",sans-serif; font-size:13px;
  font-weight:700; text-decoration:none; transition:background .15s;
  margin-top:16px;
}
.docs-cta:hover { background:#1e6fa8; color:#fff; text-decoration:none; }

/* --- Table (comparison table variant) --------------------- */
.docs-table-wrap { overflow-x:auto; margin:16px 0; }
.docs-table {
  width:100%; border-collapse:collapse;
  font-family:"IBM Plex Sans",sans-serif; font-size:13.5px;
}
.docs-table th {
  font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:#7a9ab0; text-transform:uppercase; letter-spacing:.06em;
  text-align:left; padding:9px 14px;
  border-bottom:1px solid var(--border); background:#f0f5fa;
}
.docs-table td { padding:9px 14px; border-bottom:1px solid #e4edf4; color:#3d5a70; vertical-align:top; }
.docs-table tr:last-child td { border-bottom:none; }
.docs-table tr:hover td { background:#fafcfd; }
.td-term { font-family:"IBM Plex Mono",monospace; font-weight:700; color:#1a2c3d; white-space:nowrap; }

/* --- Responsive ------------------------------------------- */
@media(max-width:640px){
  .docs-body { padding:20px 16px 60px; }
  .docs-h1   { font-size:26px; }
  .def-grid  { grid-template-columns:1fr; }
  .level-card { flex-direction:column; gap:12px; }
  .callout-box { flex-direction:column; gap:10px; }
}