/* ================================================================
   Station page — presentation polish.
   Shared foundation lives in css/styles.css; this file only refines
   how a single station renders: a reading-progress bar, cleaner
   Trail-marker cards, and concept cards with clear pros/cons columns.
   Everything reuses the existing palette vars and stays theme-aware.
   ================================================================ */

/* ---- Reading-progress bar (injected by js/pages/station.js) ----
   A thin quest-trail line across the very top that fills as you read. */
.cq .reading-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:60;                 /* above the sticky topbar (z-index:40) */
  background:transparent;
  pointer-events:none;
}
.cq .reading-progress > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:0 2px 2px 0;
  background:linear-gradient(90deg, var(--sky), var(--amber), var(--rust));
  box-shadow:0 0 8px -1px var(--amber-glow);
  transition:width .12s linear;
}
@media (prefers-reduced-motion: reduce){
  .cq .reading-progress > i{ transition:none; }
}

/* ---- Station shell: a touch more breathing room + a top accent ---- */
.cq .station-page .station{
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--sky), var(--amber)) 1;
}
.cq .station-page .station-head{ align-items:center; }

/* ---- Trail markers: turn the plain grid into tidy marker chips ---- */
.cq .station .keypoints{
  gap:10px 14px;
}
.cq .station .keypoints li{
  padding:11px 14px 11px 36px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--radius);
  font-size:.92rem;
  line-height:1.45;
  box-shadow:var(--shadow);
  transition:transform .14s ease, border-color .18s ease;
}
.cq .station .keypoints li:hover{
  transform:translateY(-2px);
  border-color:var(--amber);
}
.cq .station .keypoints li::before{
  left:13px;
  top:1.05em;
}

/* ---- Concept cards ---- */
.cq .station .concepts{ gap:16px; }
.cq .station .concept{
  border-top:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .14s ease, border-left-color .18s ease, box-shadow .2s ease;
}
.cq .station .concept:hover{
  transform:translateY(-3px);
  border-left-color:var(--amber);
  box-shadow:var(--shadow-lg);
}
.cq .station .concept h4{
  display:flex;
  align-items:baseline;
  gap:8px;
}

/* Pros / cons rendered as two clearly-labelled columns. */
.cq .station .concept .procon{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line-2);
}
@media (max-width:460px){
  .cq .station .concept .procon{ grid-template-columns:1fr; }
}
.cq .station .concept .pc{
  border-radius:var(--radius);
  padding:9px 11px;
}
.cq .station .concept .pc--pro{
  background:color-mix(in srgb, var(--moss) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--moss) 30%, var(--line));
}
.cq .station .concept .pc--con{
  background:color-mix(in srgb, var(--clay) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--clay) 28%, var(--line));
}
.cq .station .concept .pc h6{
  margin:0 0 5px;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.58rem;
}
.cq .station .concept .pc--pro h6{ color:var(--moss); }
.cq .station .concept .pc--con h6{ color:var(--clay); }
.cq .station .concept .pc ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:.82rem;
  line-height:1.4;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cq .station .concept .pc.pc--pro li::before{ content:"+ "; color:var(--good); font-weight:700; }
.cq .station .concept .pc.pc--con li::before{ content:"– "; color:var(--clay); font-weight:700; }

/* ---- Aside callouts: a hair more polish on the page ---- */
.cq .station-page .aside{ box-shadow:var(--shadow); }