/* Ballista guides. Sits on top of styles.css (the landing): same graphite and amber, same type.
   Layout: one reading column (~44rem) with a sticky app panel beside it on wide screens. */
:root {
  --paper: var(--bg); --sheet: var(--surface); --ink: var(--fg); --rule: var(--line); --grid: #1c2421;
  --accent: var(--amber); --accent-ink: var(--amber);
  --s1: #ffb020; --s2: #6cb4cb; --s3: #8f9a95; --s4: #b996d4; --code: var(--raised);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 44rem;
}
.learn-body { font-size: 18px; line-height: 1.62; }
.learn-body p, .learn-body ul, .learn-body ol { margin: 0 0 1.1rem; }
.top nav a[aria-current] { color: var(--fg); }
.layout { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(28px, 5vw, 56px) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.article { max-width: var(--measure); min-width: 0; }
.article h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: .95; margin: 0 0 18px; }
.article .eyebrow a { color: var(--amber); text-decoration: none; }
.article .eyebrow { margin: 0 0 14px; color: var(--amber); }
.dek { font-size: 20px; line-height: 1.5; color: var(--fg2); margin: 0 0 22px; text-wrap: pretty; }
.byline { font: 600 12px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px 20px; flex-wrap: wrap;
  padding-block: 12px; border-block: 1px solid var(--line); margin-bottom: 30px; }
.article h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1; margin: 2.6rem 0 0.9rem; }
.article h3 { font-size: 24px; margin: 2rem 0 0.6rem; }
.article strong { color: var(--fg); font-weight: 650; }
.article li { margin-bottom: 0.45rem; }
.article a { color: var(--amber); }

/* sticky app panel */
.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
@media (max-width: 1000px) { .side { position: static; max-width: var(--measure); } }
.side .app { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.side .app img { width: 52px; height: 52px; border-radius: 12px; }
.side .app b { display: block; font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.side .app span { display: block; color: var(--fg2); font-size: 14px; margin-top: 3px; }
.side p { margin: 0; color: var(--fg2); font-size: 15px; line-height: 1.5; }
.side .badges { gap: 12px; }
.side .badge, .side .badge img { height: 44px; }
.side .badge-play { flex-wrap: wrap; height: auto; }
.side .more-link { font: 600 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.side .toc-mini { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; font-size: 14px; }
.side .toc-mini a { color: var(--fg2); text-decoration: none; }
.side .toc-mini a:hover { color: var(--fg); }
.side .toc-mini b { font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.formula { border-radius: 0 10px 10px 0; font: 500 1rem/1.5 var(--mono); background: var(--code); padding: 0.9rem 1.1rem; border-left: 3px solid var(--accent-ink); overflow-x: auto; }

/* rifle spec card: reads like a line on a range card */
.rifle { border-radius: 14px; border: 1px solid var(--rule); background: var(--sheet); margin: 1.6rem 0 2rem; padding: 0.9rem 1.1rem 1rem; }
.rifle-title { font: 600 0.82rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem !important; }
.rifle dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem 1.4rem; margin: 0; }
.rifle dl div { min-width: 0; }
.rifle dt { font: 600 0.78rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rifle dd { margin: 0; font: 500 1rem/1.4 var(--body); font-variant-numeric: tabular-nums; }

/* tables */
.table-wrap { overflow-x: auto; margin: 1.6rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
caption { caption-side: top; text-align: left; font: 500 0.82rem/1.4 var(--mono); color: var(--muted); padding-bottom: 0.6rem; }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: bottom; }
thead th { font: 600 0.8rem/1.25 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 500; white-space: nowrap; }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
thead th.n { font-family: var(--display); white-space: normal; }

/* figures */
.fig { margin: 2rem 0 2.2rem; }
.fig.wide { margin-inline: 0; }
figcaption { font-size: 0.92rem; line-height: 1.5; color: var(--fg2); margin-top: 0.7rem; max-width: var(--measure); }
.fig.wide figcaption { margin-inline: auto; }
.chart { width: 100%; height: auto; display: block; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.chart text { font-family: var(--mono); }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--ink); stroke-width: 1; }
.chart .tickmark { stroke: var(--muted); }
.chart .tick { font-size: 12px; fill: var(--muted); }
.chart .axis-label { font: 600 13px var(--display); letter-spacing: 0.06em; fill: var(--muted); text-transform: uppercase; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.dash { stroke-dasharray: 7 5; }
.chart .end-label { font-size: 12.5px; font-weight: 500; }
.chart .note { font-size: 13px; fill: var(--muted); }
.chart .s1 { stroke: var(--s1); fill: var(--s1); } .chart .line.s1 { fill: none; }
.chart .s2 { stroke: var(--s2); fill: var(--s2); } .chart .line.s2 { fill: none; }
.chart .s3 { stroke: var(--s3); fill: var(--s3); } .chart .line.s3 { fill: none; }
.chart .s4 { stroke: var(--s4); fill: var(--s4); } .chart .line.s4 { fill: none; }
.chart text.s1, .chart text.s2, .chart text.s3, .chart text.s4 { stroke: none; }
.chart .bar-base { fill: var(--grid); }
.chart .bar { stroke: none; }
.chart .bar-label { font: 600 14px var(--display); fill: var(--ink); letter-spacing: 0.04em; }
.chart .bar-in { font-size: 12px; fill: var(--muted); }
.chart .bar-out { font-size: 13px; font-weight: 600; stroke: none; }
.diagram .ground { stroke: var(--ink); stroke-width: 1.5; }
.diagram .los { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.diagram .guide { stroke: var(--muted); stroke-dasharray: 3 4; }
.diagram .arc { fill: none; stroke: var(--muted); }
.diagram .gong { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.diagram .vec { stroke: var(--ink); stroke-width: 2; }
.diagram .vec.s1 { stroke: var(--s1); } .diagram .vec.s2 { stroke: var(--s2); }
.diagram .head { fill: var(--ink); } .diagram .head.s1 { fill: var(--s1); } .diagram .head.s2 { fill: var(--s2); }
.diagram .lbl { font-size: 13px; fill: var(--ink); stroke: none; }
.diagram .lbl.s1 { fill: var(--s1); } .diagram .lbl.s2 { fill: var(--s2); }

/* app screenshot beside the text on wide screens */
.shot { margin: 2rem 0; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.shot img { width: 100%; border-radius: 2rem; box-shadow: 0 1px 0 var(--rule), 0 18px 40px -22px rgba(0,0,0,.55); }
.shot figcaption { margin: 0; }
@media (max-width: 34rem) { .shot { grid-template-columns: minmax(0, 1fr); } .shot img { max-width: 16rem; justify-self: center; } }

/* sources, related, app note */
.sources { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); font-size: 0.95rem; }
.sources h3 { font: 600 0.9rem/1 var(--display) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem !important; }
.app-note { border-radius: 16px; margin: 2.6rem 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.2rem; align-items: center;
  padding: 1.1rem 1.2rem; background: var(--sheet); border: 1px solid var(--rule); }
.app-note img { width: 64px; height: 64px; border-radius: 14px; }
.app-note p { margin: 0 !important; font-size: 1rem; }
.app-note .links { margin-top: 0.4rem !important; font: 600 0.95rem/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.related { max-width: var(--measure); margin: 3rem auto 0; }
.related h2 { font: 600 0.9rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.related li a { display: block; padding: 0.8rem 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink);
  font: 600 1.2rem/1.25 var(--display); }
.related li a span { display: block; font: 400 0.95rem/1.45 var(--body); color: var(--fg2); margin-top: 0.2rem; }
.related li a:hover { color: var(--accent); }

/* guides index */
.learn-hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(36px,6vw,72px) var(--gutter) 2rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.learn-hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 0; }
.learn-hero p { margin: 0; color: var(--fg2); font-size: 1.15rem; }
.learn-hero .rule-card { font: 500 0.85rem/1.55 var(--mono); color: var(--muted); border-left: 3px solid var(--accent-ink); padding-left: 1rem; }
@media (max-width: 46rem) { .learn-hero { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }
.sections { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); display: grid; gap: 2.6rem; padding-bottom: 3rem; }
.sec { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1rem 2rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
@media (max-width: 46rem) { .sec { grid-template-columns: minmax(0, 1fr); } }
.sec h2 { font: 700 1.7rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.sec h2 small { display: block; font: 500 0.8rem/1.4 var(--mono); color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: 0.4rem; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a, .toc .planned { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.8rem; padding: 0.75rem 0; text-decoration: none; color: var(--ink); }
.toc .num { font: 500 0.85rem/1.6 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.toc .t { font: 600 1.2rem/1.25 var(--display); }
.toc .d { display: block; font: 400 0.95rem/1.45 var(--body); color: var(--fg2); margin-top: 0.15rem; }
.toc a:hover .t { color: var(--accent); }
.toc .planned { opacity: 0.55; }
.toc .planned .t::after { content: "In the works"; margin-left: 0.6rem; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.04em; border: 1px solid var(--rule); padding: 0.15rem 0.35rem; vertical-align: 0.2em; }

/* phones: keep chart text readable (a 720-wide chart would shrink to half) */
@media (max-width: 600px) {
  .fig:has(> .chart) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fig > .chart { min-width: 520px; }
}