/* SkyScope Mini and Satellite pages (tools/make_skyscope_companions.py) */
.cp-hero { max-width: 900px; margin: 0 auto; padding: 130px 16px 20px; text-align: center; }
.cp-crumbs { margin-bottom: 26px; font-size: 0.9rem; color: var(--p-dim); }
.cp-crumbs a { color: var(--p-accent); text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }
.cp-title { margin: 0; font: 900 clamp(2rem, 7vw, 4.2rem)/1.05 var(--display); letter-spacing: 0.08em; color: var(--p-accent);
  text-shadow: 0 0 10px rgba(57, 255, 136, 0.8), 0 0 36px rgba(57, 255, 136, 0.35); }
.cp-line { margin: 14px 0 0; font: 600 clamp(1.05rem, 2.6vw, 1.35rem) var(--display); letter-spacing: 0.06em; color: var(--p-accent2); }

/* the demo, in a radar-console frame */
.console { max-width: 880px; margin: 0 auto; }
.console-bezel { position: relative; padding: clamp(10px, 2.4vw, 22px); border-radius: 26px 26px 10px 10px;
  background: linear-gradient(165deg, #2a3b31, #0f1913 60%); box-shadow: inset 0 0 0 1px rgba(57, 255, 136, 0.18), 0 24px 60px rgba(0, 0, 0, 0.55); }
.console-bezel video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; border-radius: 6px; background: #000;
  box-shadow: 0 0 0 2px #050806, 0 0 30px rgba(57, 255, 136, 0.12); }
.demo-toggle { position: absolute; right: clamp(18px, 3.4vw, 34px); bottom: clamp(18px, 3.4vw, 34px); width: 40px; height: 40px;
  border: 1px solid var(--p-edge); border-radius: 50%; background: rgba(2, 11, 6, 0.75); color: var(--p-accent); font-size: 0.8rem; cursor: pointer; }
.demo-toggle:hover, .demo-toggle:focus-visible { background: rgba(16, 48, 28, 0.95); outline: none; box-shadow: 0 0 0 2px var(--p-accent); }
.console-ledge { margin: 0 auto; width: 92%; padding: 10px 0 9px; border-radius: 0 0 16px 16px; text-align: center;
  background: linear-gradient(#1a2820, #0b120e); font: 700 0.72rem var(--display); letter-spacing: 0.3em; color: var(--p-dim); }

/* the screen, numbered */
.anatomy { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.an-pic { margin: 0; padding: 8px 42px 40px 8px; border-radius: 14px; background: #0b130e; border: 1px solid var(--p-edge); }
.an-img { position: relative; display: block; }
.an-pic img { display: block; width: 100%; height: auto; border-radius: 6px; }
.an-mark, .an-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 0.85rem var(--display);
  color: #021006; background: var(--p-accent2); box-shadow: 0 0 0 3px rgba(2, 11, 6, 0.85), 0 0 16px rgba(255, 210, 63, 0.6); }
.an-mark { position: absolute; transform: translate(-50%, -50%); }
.an-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.an-list li { display: flex; gap: 14px; align-items: flex-start; }
.an-num { flex: none; }
.an-list b { display: block; font: 700 1rem var(--p-head); color: var(--p-accent); }
.an-list p { margin: 4px 0 0; color: var(--p-dim); }

/* how it works */
.flow-box { padding: 20px; border: 1px solid var(--p-edge); border-radius: 16px; background: var(--p-panel); overflow-x: auto; }
.flow { display: block; width: 100%; height: auto; }
.flow-tall { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 640px) { .flow-wide { display: none; } .flow-tall { display: block; } .flow-box { padding: 14px 8px; } }
.fl-node rect { fill: #06140b; stroke: rgba(57, 255, 136, 0.45); stroke-width: 1.5; }
.fl-hero rect { fill: #0c2a17; stroke: var(--p-accent); stroke-width: 2.5; }
.fl-t { fill: var(--p-ink); font: 700 17px var(--display); text-anchor: middle; }
.fl-hero .fl-t { fill: var(--p-accent); }
.fl-s { fill: var(--p-dim); font: 500 12.5px var(--body); text-anchor: middle; }
.fl-l { fill: var(--p-accent2); font: 600 12px var(--body); text-anchor: middle; }
.fl-link { fill: none; stroke: rgba(57, 255, 136, 0.35); stroke-width: 2; stroke-dasharray: 5 6; }
.fl-dot { fill: var(--p-accent); filter: drop-shadow(0 0 4px var(--p-accent)); }

/* what you need */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.need { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--p-edge); border-radius: 16px; background: var(--p-panel); }
.need svg { flex: none; width: 42px; height: 42px; fill: none; stroke: var(--p-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.need b { display: block; font: 700 1rem var(--p-head); color: var(--p-accent); }
.need p { margin: 4px 0 0; color: var(--p-dim); }

/* set it up */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: none; }
.step { position: relative; padding: 22px 20px 20px; border: 1px solid var(--p-edge); border-radius: 16px; background: var(--p-panel); }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; border: 2px solid var(--p-accent);
  font: 800 1rem var(--display); color: var(--p-accent); box-shadow: 0 0 14px rgba(57, 255, 136, 0.35); }
.step b { display: block; font: 700 1.02rem var(--p-head); color: var(--p-ink); }
.step p { margin: 6px 0 0; color: var(--p-dim); }

/* the case */
.case-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.case-pic { margin: 0; padding: 8px; border-radius: 14px; background: #e9ecee; }
.case-pic img { display: block; width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; }
.case-pic figcaption { padding: 8px 4px 2px; text-align: center; font-size: 0.9rem; color: #33413a; }

.cp-files { margin: 18px 0 0; }

/* Mini or Satellite */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--p-edge); border-radius: 16px; background: var(--p-panel); }
.cmp { width: 100%; min-width: 520px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(57, 255, 136, 0.12); vertical-align: top; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 700 0.95rem var(--p-head); color: var(--p-ink); }
.cmp tbody th { font-weight: 600; color: var(--p-dim); width: 26%; }
.cmp .me { color: var(--p-accent); background: rgba(57, 255, 136, 0.06); }
.p-note a, .p-lead a { color: var(--p-accent); }

/* the main SkyScope page's companion cards */
.p-card .cp-more { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--p-accent); text-decoration: none; }
.p-card .cp-more:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .needs { grid-template-columns: 1fr; }
  .anatomy { grid-template-columns: 1fr; }
  .an-mark { width: 22px; height: 22px; font-size: 0.72rem; }
}