/* Recoil Lab (#/info/recoil, recoil.js): one card (weapon, controls, the wall), then the data sections. Builds on
   style.css + info.css tokens and components; everything new is rl- prefixed. Gold = your loadout / selected / Fire. */

/* ---- card: header + controls ---- */
/* clip, not hidden: hidden makes the card a scroll container, and the sticky wall (>= 1200 px) would stick to nothing.
   --wall-max caps the wall's height; the wall then keeps its aspect and centres */
.rl-card { overflow: clip; --wall-max: min(78vh, 860px); }
.rl-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px 12px; }
.rl-art { flex: 0 0 auto; }
.rl-art .ii { width: 150px; height: 72px; }
.rl-hd { min-width: 0; }
.rl-wn { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: 0; }
.rl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.rl-links { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* the grid sizes to its own width (two columns only where a select fits "Compensator · V −15% · H −10%"), and packs its
   rows at the top when the sticky wall beside it (>= 1200 px) stretches it taller */
.rl-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 16px; padding: 14px 20px 16px; border-top: 1px solid var(--line); align-items: start; align-content: start; }
.rl-ctl .rl-c2 { grid-column: 1 / -1; }
.rl-ctl .fld > label { color: var(--text3); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.rl-ctl .seg { align-self: start; max-width: 100%; }
.rl-ctl .seg button { padding: 6px 10px; }
.rl-sub { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; line-height: 1.35; color: var(--text3); font-weight: 400; }
/* definition popovers (S4L.defTip) inside the lab: never inherit a cell's nowrap / right alignment; in a value or
   source cell they open leftwards, over the field name */
.rl .def { vertical-align: middle; }
.rl .rl-hint summary { display: inline; width: auto; height: auto; border-radius: 0; font-size: inherit; color: var(--knock); border-bottom: 1px dotted currentColor; }
.rl .rl-hint[open] summary, .rl .rl-hint summary:hover { color: var(--accent); }
.rl .def-pop { white-space: normal; text-align: left; text-transform: none; letter-spacing: 0; }
@media (min-width: 721px) { .rl-kv td .def-pop { left: auto; right: -12px; } }  /* phones: style.css's bottom sheet */
.rl-zero { margin: 0; min-height: 40px; display: flex; align-items: center; color: var(--text2); font-size: 13px; line-height: 1.35; }
.rl-rec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--text2); }

/* ---- the wall: dark concrete (noise rendered once as a CSS background, never re-filtered while holes animate) ---- */
.rl-stage { padding: 0 20px 16px; }
.rl-wallwrap {
  /* --ar = the frame's width / height (recoil.js): as wide as the column, unless that would pass --wall-max in height */
  aspect-ratio: var(--ar, 1.6); width: min(100%, calc(var(--wall-max) * var(--ar, 1.6))); margin: 0 auto;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background-color: #18212B;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .80 0 0 0 0 .85 0 0 0 0 .90 0 0 0 .42 -.13'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .04 0 0 0 0 .06 1.1 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 95% at 50% 30%, #222E3B 0%, #18212B 62%, #121A22 100%);
  background-size: 220px 220px, 640px 640px, 100% 100%;
}
.rl-wall { display: block; width: 100%; height: 100%; }
/* --u = viewBox units per CSS pixel (recoil.js ResizeObserver): text, holes and strokes keep their screen size at any wall width */
.rl-wall text { font: 600 calc(12px * var(--u, 1))/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--text2); paint-order: stroke; stroke: #0B1016; stroke-width: calc(3px * var(--u, 1)); stroke-linejoin: round; }
.rl-seams line { stroke: #0A0F15; stroke-opacity: .5; stroke-width: 2; }
.rl-sil { fill: #A9B7C5; opacity: .26; }
.rl-aim { transform: scale(var(--u, 1)); }  /* about the aim point (transform-origin set inline) */
.rl-aim line { stroke: var(--text); stroke-opacity: .8; stroke-width: 1.5; }
.rl-drop line { stroke: var(--text3); stroke-width: calc(1.2px * var(--u, 1)); stroke-dasharray: calc(4px * var(--u, 1)) calc(3px * var(--u, 1)); }
.rl-drop text { fill: var(--text3); }
.rl-scale path { fill: none; stroke: var(--text2); stroke-width: calc(1.5px * var(--u, 1)); }
.rl-scale text { fill: var(--text2); }
.rl-wall circle.c, .rl-wall circle.b { r: calc(4.5px * var(--u, 1)); }
.rl-wall .c { fill: #05080B; stroke: var(--accent); stroke-width: calc(1.6px * var(--u, 1)); }
.rl-wall .b { fill: #05080B; fill-opacity: .5; stroke: #C4CFDA; stroke-width: calc(1.2px * var(--u, 1)); }  /* >= 3:1 on the wall and the target */
.rl-wall .c.x { opacity: .5; }
.rl-wall .b.x { opacity: .7; }
.rl-wall:not(.no-hm) .x { opacity: .12; }  /* heatmap on: the extra sprays step back so the density reads */
.rl-line polyline { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-width: calc(1.2px * var(--u, 1)); stroke-linejoin: round; }
/* shot numbers sit beside their hole, offset in screen pixels; .l = left of the hole (for holes right of the aim point) */
.rl-nums text { font-size: calc(11px * var(--u, 1)); font-weight: 500; fill: var(--text3); stroke-width: calc(2.5px * var(--u, 1)); transform: translate(calc(9px * var(--u, 1)), calc(4px * var(--u, 1))); }
.rl-nums text.l { text-anchor: end; transform: translate(calc(-9px * var(--u, 1)), calc(4px * var(--u, 1))); }
.rl-wall [data-g="heat"] rect { fill: var(--accent); }
.rl-out { fill: var(--knock); }
.rl-wall.no-tg .rl-sil, .rl-wall.no-tg .rl-scale, .rl-wall.no-nums .rl-nums, .rl-wall.no-ol .rl-line,
.rl-wall.no-cmp [data-g="base"], .rl-wall.no-hm [data-g="heat"] { display: none; }
.rl-notice { margin: 12px 0 0; font-size: 13px; color: var(--text2); max-width: 70ch; }  /* below the wall: never over its impact */
.rl-drop text.sc { transform: translateY(calc(-16px * var(--u, 1))); }  /* a short drop tick's text: the line above the scale bar */
.rl-out.l2 { transform: translateY(calc(16px * var(--u, 1))); }

.rl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: center; margin-top: 12px; }
.rl-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-acts .btn.primary { min-width: 96px; }
.rl-seed { color: var(--text3); font-variant-numeric: tabular-nums; font-weight: 500; }
.rl-tgl { display: flex; flex-wrap: wrap; gap: 0 16px; }
.rl-tgl .chk { padding: 4px 0; font-size: 13px; color: var(--text2); min-height: 32px; }
.rl-cap { margin: 8px 0 0; font-size: 13px; color: var(--text3); max-width: 110ch; }

/* ---- tables under the wall ---- */
.rl-sum th small, .rl-kv th small { display: block; font-weight: 400; color: var(--text3); font-size: 12px; letter-spacing: 0; text-transform: none; }
.rl-sum th[scope="row"] { color: var(--text2); font-size: 14px; letter-spacing: 0; font-weight: 600; vertical-align: top; }
.rl-sum td { vertical-align: top; white-space: nowrap; }
.rl-sum .rl-cur { color: var(--accent); }
.rl-sum td small { color: var(--text3); }
.rl-sep th { background: var(--raised); color: var(--text2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.rl-kv td.num { white-space: nowrap; text-align: right; }
.rl-nw { white-space: nowrap; }
.rl-kv td.rl-srcc { width: 1%; white-space: nowrap; text-align: right; }
.rl-adj { color: var(--accent); font-weight: 600; }
.rl-arrow { color: var(--text3); }
.rl-ns { margin: -2px 0 8px; }
.rl-src { display: inline-block; font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--text3); white-space: nowrap; cursor: help; font-style: normal; }
.rl-src-def, .rl-src-est { cursor: default; }  /* their reason is in the popover beside them */
.rl-src-pi { color: #7FB7F5; border-color: #2A4560; }
.rl-src-tip { color: var(--text2); }
.rl-src-def, .rl-src-est { color: var(--knock); border-style: dashed; border-color: #5A4220; }
.rl-curves .key { stroke: var(--bg); stroke-width: 1; }
.rl-curves .sh { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
.rl-curves .sh2 { fill: var(--surface); stroke: var(--accent); stroke-width: 1.3; }
.rl-curves .legend { margin: 8px 0 0; }
.rl-shots td, .rl-shots th { white-space: nowrap; }
.rl-shots { font-size: 13px; }
.rl-distg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.rl-dmg td small { white-space: nowrap; }
.rl-dmg th:first-child { text-transform: none; }
/* current distance: an opaque tint, so the sticky first column of .tablewrap tables gets it too */
tr.rl-on > td, tr.rl-on > th, td.rl-on, th.rl-on { background-color: #262828; }
tr.rl-on > td, td.rl-on, th.rl-on { color: var(--accent); }
.rl-drop-t td, .rl-drop-t th { white-space: nowrap; }

/* ---- scope view ---- */
.rl-scopebox { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rl-scopecap { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; color: var(--text2); }
.rl-rv { align-items: center; }
.rl-rv .rl-sub { justify-content: center; }
.rl-eye { width: 100%; max-width: 380px; height: auto; display: block; overflow: visible; }  /* the ring's stroke straddles the viewBox edge */
.rl-eye .eye { fill: #0E151D; }
.rl-eye .ring { fill: none; stroke: #2D3B4A; stroke-width: 6px; vector-effect: non-scaling-stroke; }
.rl-eye .sil { fill: #A9B7C5; opacity: .3; }
.rl-eye line, .rl-eye path, .rl-eye polyline, .rl-eye circle.rr { vector-effect: non-scaling-stroke; fill: none; stroke-width: 1.4px; stroke-linecap: round; }
.rl-eye .rk { stroke: #C4CFDA; }
.rl-eye .rr { stroke: var(--danger); stroke-width: 2px; }
.rl-eye .rr.thick { stroke-width: 3.5px; }
.rl-eye .post { stroke: #C4CFDA; stroke-width: 5px; stroke-linecap: butt; }
.rl-eye .fk { fill: #C4CFDA; }
.rl-eye .fr { fill: var(--danger); }
.rl-eye text { fill: #C4CFDA; font-weight: 700; font-family: system-ui, sans-serif; }
.rl-eye .imp { fill: var(--accent); stroke: #0B1016; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rl-hold { margin: 0; font-weight: 650; color: var(--text); }
.rl-hold-t td, .rl-hold-t th { white-space: nowrap; }

/* ---- how it works ---- */
.rl-steps { margin: 0 0 12px; padding-left: 20px; color: var(--text2); max-width: 90ch; }
.rl-steps li + li { margin-top: 4px; }
.rl-modes { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 4px 0 8px; }
.rl-list { margin: 0; padding-left: 18px; color: var(--text2); max-width: 100ch; font-size: 14px; }
.rl-list li + li { margin-top: 6px; }
.rl-list code { font-size: 12px; color: var(--text3); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 4px; }

/* each two-table section stacks as soon as a column would be narrower than its table */
.rl .grid2.even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
/* wide screens: weapon + controls in a left column, the wall (the hero) on the right, starting at the card's top. It
   stays in view (sticky, under the 60 px top bar) while the controls scroll; its height leaves room for Fire below it */
@media (min-width: 1200px) {
  .rl-card { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto 1fr; --wall-max: min(860px, max(340px, 100vh - 370px)); }
  .rl-head { grid-area: 1 / 1; padding: 14px 16px 10px; gap: 12px; }
  .rl-ctl { grid-area: 2 / 1; padding: 12px 16px 16px; }
  .rl-head, .rl-ctl { border-right: 1px solid var(--line); }
  .rl-art .ii { width: 112px; height: 54px; }
  .rl-wn { font-size: 20px; }
  .rl-stage { grid-area: 1 / 2 / 3; align-self: start; position: sticky; top: 72px; padding: 16px 20px; }
}
/* narrower: the controls grow tall, so the wall comes first, right under the weapon header */
@media (max-width: 1199px) {
  .rl-card { display: flex; flex-direction: column; }
  .rl-stage { order: 1; padding-top: 14px; }
  .rl-ctl { order: 2; }
}
@media (max-width: 900px) { .rl-distg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .rl-card { --wall-max: 70vh; }
  .rl-head { padding: 12px 14px 10px; gap: 12px; }
  .rl-art .ii { width: 96px; height: 52px; }
  .rl-wn { font-size: 19px; }
  .rl-ctl { padding: 12px 14px 14px; gap: 12px; }
  .rl-stage { padding: 4px 0 14px; }
  .rl-wallwrap { border-radius: 0; border-left: 0; border-right: 0; }
  .rl-bar, .rl-cap, .rl-notice { padding: 0 14px; }
  .rl-acts .btn { flex: 1 1 auto; }
  .rl-acts .rl-seed { flex: 0 0 auto; }
  .rl-kv th { width: auto; }
  .rl-kv td.num { white-space: normal; }
  .rl-kv td.rl-srcc { padding-left: 4px; white-space: normal; }  /* two chips + a popover stack instead of widening the table */
}
.rl-curves .rl-past { fill: var(--accent); font-weight: 600; }
.rl-dmg th small { display: block; font-weight: 400; color: var(--text3); letter-spacing: 0; }
.rl-rec.rl-c2 { align-self: end; min-height: 40px; }