/* Ranged view (ranged-view.js): the "Ranged" tab of the bottom window. Desktop only;
   survivability.css hides it together with the view switch on mobile.
   All text #fff and at least 1rem per the project style rules; colour only on accents. */

/* The view runs to within 11px of the window's right edge (owner, 2026-10-13: the margin
   beside the enemy panel down to about a fifth of the 54px it was). The negative margin takes
   back the section's 20px padding and most of the 14px column gap that follows this body
   (an empty mobile-only sibling sits after it). */
#ranged-section-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2px 0 0 0;
  margin-right: -23px;
  margin-bottom: -4px;   /* 12px under the distance slider, half of what it was (owner, 2026-10-13) */
}

/* ── Subtabs (Overview / Primary / Secondary): a second rail flush against the Ranged tab and
   exactly as tall as it, so it costs width and no height (owner, 2026-10-13). The Ranged tab
   is the first tab of the rail and, while open, 60% of its height. The labels are
   turned like the parent tabs'; each subtab is as tall as its label needs, plus an equal
   share of what is left. On a window too short for the three labels the rail grows past the
   Ranged tab instead of cutting one. ── */
.rv-subtabs {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: flex-start;
  height: calc((100% + 16px) * 0.6);
  min-height: min-content;
  margin-left: -14px;
  border: 1px solid var(--border);
  border-left: none;
  overflow: hidden;
}
.rv-subtabs button {
  flex: 1 0 auto;
  background: var(--surface2);
  color: #fff;
  border: none;
  border-top: 1px solid var(--border);
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.9rem;   /* a touch smaller than the parent tabs (owner, 2026-10-13) */
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.rv-subtabs button:first-child { border-top: none; }
.rv-subtabs button.on { background: var(--gold-dim); }
.rv-subtabs button:hover:not(.on) { background: var(--surface3); }

.rv-layout { display: flex; align-items: stretch; gap: 28px; height: 100%; }
.rv-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* the table scrolls sideways when an enemy has more hit areas than the window has room for */
.rv-dmg { min-width: 0; overflow-x: auto; }
/* ── Falloff chart, with the distance slider laid under its axis (the script sets the
   slider's left edge and width to the plot area) ── */
/* the chart takes the height the table leaves, so the largest loadout (five rows in two
   sections) still fits without scrolling; it only scrolls below its minimum. Dragging the
   bottom panel taller (panel-resize.js) lets it grow by as much again. */
.rv-range { position: relative; margin-top: 4px; max-width: 760px; flex: 1 1 0; max-height: calc(210px + var(--panel-raise, 0px)); display: flex; flex-direction: column; }
.rv-chart { position: relative; flex: 1 1 0; min-height: 90px; }
/* The distance slider. The script lays `#rv-dists` on the plot area, so a knob at x% sits
   under that distance on the axis. Knobs are drawn by hand: one round knob, or on a weapon
   subtab two triangles on the one bar, hipfire above it and the aimed stance below, each
   with its name and distance (owner's pick, 2026-10-13). A press above or below the bar
   brings that side's triangle there. */
.rv-dists { position: relative; margin: 2px 0 0; }
.rv-track { position: relative; height: 18px; cursor: pointer; touch-action: none; }
.rv-track::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--border-light, #5a5a7a); }
.rv-knob { position: absolute; top: 1px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--gold, #e8c558); cursor: ew-resize; touch-action: none; }
.rv-knob:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rv-track-tri { height: 40px; }
.rv-track-tri::before { top: 18px; }
.rv-knob.rv-tri { height: 12px; border-radius: 0; background: none; }
.rv-tri-hip { top: 5px; }
.rv-tri-aim { top: 23px; }
.rv-tri svg { display: block; width: 16px; height: 12px; }
.rv-tri path { fill: var(--gold, #e8c558); stroke: var(--gold, #e8c558); stroke-width: 2; stroke-linejoin: round; }
.rv-tag { position: absolute; left: 21px; top: -3px; white-space: nowrap; color: #fff; font-size: 1rem; line-height: 18px; }
.rv-flip > .rv-tag { left: auto; right: 21px; }
/* a fixed column: nothing in it may widen it, or the whole panel slides when a stance is picked */
.rv-enemy { flex: 0 0 388px; width: 388px; min-width: 0; align-self: flex-start; }
.rv-empty { margin: 6px 0; color: #fff; font-size: 1rem; }

/* ── Table: a Weapon and a Shot column, then a Damage / Shots to kill pair per column.
   Hit-area weapons and plasma weapons are two sections of ONE table, each with its own
   heading rows, so every column lines up between them. ── */
.rv-table { border-collapse: collapse; font-size: 1rem; color: #fff; }
.rv-table th,
.rv-table td {
  padding: 3px 7px;   /* 7, not 10: the widest table (Real Aim, a comparison, the anchored Biovore) fits a 1728 px window (owner, 2026-10-14) */
  text-align: right;
  white-space: nowrap;
  color: #fff;
  border-right: 1px solid #34344c;
}
.rv-table th { font-weight: 600; }
.rv-table .rv-end { border-right: 0; }
.rv-table .rv-w,
.rv-table .rv-n { text-align: left; }
.rv-table .rv-w { padding-left: 4px; vertical-align: top; font-weight: 600; }
/* a heavier line where one column pair ends and the next begins */
.rv-table th.rv-g,
.rv-table td.rv-g { border-left: 2px solid var(--border-light, #5a5a7a); }
.rv-table tr.rv-areas th { text-align: center; text-transform: uppercase; letter-spacing: .06em; padding-top: 1px; padding-bottom: 0; }
.rv-table tr.rv-areas th:first-child { border-right: 0; }
.rv-table tr.rv-sub th { border-bottom: 2px solid var(--border-light, #5a5a7a); padding-top: 0; }
.rv-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
/* an area's own value sits under its name (in white; the name keeps its colour swatch): the
   table can grow down, not across (owner, 2026-10-14: the anchored Biovore's three areas pushed
   it off the page) */
.rv-mult { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* a column's name picks the area whose STK, TTK, B-DPS and S-DPS show (owner, 2026-10-14);
   the picked one is underlined in gold */
.rv-table tr.rv-areas th.rv-area { cursor: pointer; }
.rv-table tr.rv-areas th.rv-area:hover { background: rgba(232, 197, 88, 0.12); }
.rv-table tr.rv-areas th.rv-area-on { box-shadow: inset 0 -2px 0 var(--gold, #e8c558); }
.rv-table td { border-bottom: 1px solid #2a2a3c; }
/* and where one weapon ends and the next begins */
.rv-table td.rv-w,
.rv-table tr.rv-last td { border-bottom: 1px solid var(--border-light, #5a5a7a); }
.rv-table td.rv-d { font-weight: 700; cursor: default; }
.rv-table td.rv-r { cursor: default; }
/* a long stance name or spread wraps onto a second line: the table may grow down, not across
   (owner, 2026-10-14). A spread breaks only before its shot number. */
.rv-table .rv-wrap { display: inline-block; max-width: 7em; white-space: normal; }
/* the first column (the shot, or the weapon on the Overview) a little narrower: "Common shot" */
.rv-table .rv-wrap-w { max-width: 5.5em; }
/* comparing: B-DPS and S-DPS sit left, and B's difference from A is green when it is more,
   red when it is less (owner, 2026-10-13; the combo builder's colours) */
.rv-table td.rv-l,
.rv-table th.rv-l { text-align: left; }
.rv-up { color: #4caf50; }
.rv-down { color: #e74c4c; }
/* the difference sits under its number, so a comparison grows down, not across (owner, 2026-10-14) */
.rv-table td .rv-up, .rv-table td .rv-down { display: block; }
/* Hold | Tap, in the table's empty top-left corner: small enough to add no height */
.rv-table tr.rv-areas th.rv-corner { text-align: left; padding: 0 4px 1px; text-transform: none; letter-spacing: 0; }
.rv-fire { display: inline-flex; vertical-align: bottom; }
.rv-fire .seg-btn.rv-stance { padding: 0 8px; line-height: 18px; border-color: var(--gold, #e8c558); }
.rv-fire .seg-btn.rv-stance.active { background: var(--gold, #e8c558); border-color: var(--gold, #e8c558); color: #12121c; }
/* Above the chart: on the left the picker of what a weapon subtab's chart draws, and the
   legend centred over the chart (owner, 2026-10-13). The empty third column balances the
   picker, so the legend stays centred and never runs under it. */
.rv-chart-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 12px; min-height: 22px; }
/* with the picker showing, both sides keep its width, so a long legend (a pinned setup doubles
   it) wraps in the middle instead of running under the picker */
.rv-chart-head.has-kind { grid-template-columns: minmax(205px, 1fr) minmax(0, auto) minmax(205px, 1fr); }
.rv-chart-head .rv-chart-kind { justify-self: start; padding: 0 4px; height: 22px; line-height: 20px; }
/* while comparing, stance buttons that do not fit on the picker's line sit on their own row
   under it, from its left edge (owner, 2026-10-13: a plasma weapon's four covered the picker) */
.rv-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rv-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; color: #fff; font-size: 1rem; line-height: 20px; }
/* a legend entry is a button: it hides and shows its line (struck through while hidden) */
.rv-key { white-space: nowrap; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.rv-key.off { text-decoration: line-through; }
.rv-key i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.rv-legend .rv-info { margin-left: 0; }
/* the info icon of a cell that has a tooltip (the tooltip is the whole cell's): every such cell
   has one (owner, 2026-10-14: "otherwise how do they know?") */
.rv-table .rv-mark { cursor: default; }
/* every info icon in the table is smaller than the 14 px one elsewhere (owner, 2026-10-14:
   "they are pretty big") */
.rv-table .cb-info { margin-left: 3px; }
.rv-table .cb-info svg { width: 11px; height: 11px; }
/* on Perfect Aim / Real Aim the icon takes the button's own colour (dark on the gold one) */
.rv-fire .cb-info { color: inherit; cursor: inherit; }
/* the unused columns of the narrower section, and the space between the two sections */
.rv-table .rv-pad,
.rv-table tr.rv-last td.rv-pad,
.rv-table tr.rv-sub .rv-pad { border: 0; }
.rv-table tr.rv-gap td { border: 0; padding: 0; height: 5px; }

/* ── Enemy: picker, stance, picture, overlay strength ── */
.rv-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rv-select {
  background: var(--surface2, #1c1c2c);
  color: #fff;
  border: 1px solid var(--border-light, #5a5a7a);
  border-radius: var(--radius, 4px);
  padding: 6px 8px;
  font: inherit;
  font-size: 1rem;
  min-width: 0;
}
/* The picker keeps one width whatever the enemy: the room beside it is for the stance
   buttons and stays empty when an enemy has none (owner, 2026-10-13). 212px + the widest pair
   of buttons (Standing / Anchored) fills the 388px panel. */
.rv-row .rv-select { flex: 0 0 212px; width: 212px; }
.seg-btn.rv-stance { font-size: 1rem; color: #fff; padding: 6px 9px; white-space: nowrap; }
/* each button keeps the width of its bold label, so picking a stance moves nothing */
.seg-btn.rv-stance::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.seg-btn.rv-stance.active { background: #fff; border-color: #fff; color: #12121c; font-weight: 700; }
.rv-pic {
  position: relative;
  width: 388px;
  height: 242px;
  overflow: hidden;
  background: #05050a;
  border: 1px solid var(--border, #3a3a52);
  border-radius: var(--radius, 4px);
}
.rv-layer { position: absolute; inset: 0; background: center / cover no-repeat; }
/* the enemy's health, tucked in the picture's bottom right corner (its name is in the picker) */
.rv-cap {
  position: absolute;
  right: 6px; bottom: 6px;
  padding: 2px 8px;
  background: rgba(5, 5, 10, .78);
  border-radius: var(--radius, 4px);
  color: #fff;
  font-size: 1rem;
}
/* what the selected stance does to each damage type, bottom left, opposite the health */
.rv-cap-sens { left: 6px; right: auto; max-width: 290px; line-height: 1.3; padding: 3px 8px; }
.rv-mix { margin: 8px 0 0; color: #fff; font-size: 1rem; }
.rv-mix input { flex: 1; accent-color: var(--gold, #e8c558); }
.rv-mix span { min-width: 44px; text-align: right; }

/* ── Head to head: the A and B slots under the enemy picture (owner, 2026-10-13). Like perk
   slots, but for weapons: an empty one reads "Compare A"; a filled one shows the weapon of
   the subtab on screen as the sidebar's weapon tabs do, picture, name, and the variant in its
   tier's colour. Its letter sits on its top edge in its chart colour (A blue, B orange); the
   slot on screen has its whole border in that colour. ── */
.rv-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
/* both empty: one short row, so the view needs no more height than before (906 px window) */
.rv-slots.rv-slots-empty { margin-top: 6px; }
.rv-slot-wrap { position: relative; display: flex; }
.rv-slot { position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 8px 8px 4px; background: rgb(20, 20, 30); border: 2px solid #3a3a54; border-radius: 10px; color: #fff; font: inherit; font-size: 1rem; line-height: 1.2; text-align: left; cursor: pointer; }
.rv-slot:hover { border-color: #5a5a7a; }
.rv-slot-wrap.editing .rv-slot { cursor: default; }
/* the ring round the slot being changed belongs to the wrap, not the slot: in Low CRT the wrap
   stays out of the filter with its kept name tag, so the ring keeps its blue or orange */
.rv-slot-wrap.editing::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid; border-radius: 10px; pointer-events: none; }
.rv-slot-a.editing::after { border-color: #4a90d9; }
.rv-slot-b.editing::after { border-color: #f28c28; }
.rv-slot-empty { flex-direction: row; align-items: center; gap: 8px; min-height: 32px; padding: 2px 8px; background: none; border-style: dashed; border-color: #5a5a7a; }
.rv-slot-empty:hover { border-color: var(--gold, #e8c558); }
.rv-slot-plus { font-size: 1.5rem; line-height: 1; color: var(--gold, #e8c558); }
/* the weapon picture, framed as on the sidebar tab, behind a fade that keeps the words clear */
.rv-slot-img { position: absolute; top: 0; bottom: 0; left: 65%; width: 177px; transform: translateX(-50%); background-repeat: no-repeat; }
.rv-slot.has-weapon-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgb(20, 20, 30) 0%, rgba(20, 20, 30, 0.75) 40%, rgba(20, 20, 30, 0.2) 75%, rgba(20, 20, 30, 0.6) 100%); }
.rv-slot-name, .rv-slot-var { position: relative; z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5); }
.rv-slot-name { font-weight: 600; }
.rv-slot-tag, .rv-slot-x { position: absolute; top: -11px; z-index: 3; height: 20px; padding: 0 6px; border-radius: 4px; color: #fff; font-size: 1rem; font-weight: 700; line-height: 20px; }
/* the tag holds the setup's name, typed straight in (a pencil says so, as on the build name) */
.rv-slot-tag { left: 10px; border: 0; outline: none; font-family: inherit; box-sizing: content-box; padding-right: 18px; text-align: left; cursor: text;
  background: no-repeat right 5px center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M12.15 1.85a1.5 1.5 0 0 1 2.12 2.12L5.7 12.54l-3.08.77.77-3.08z'/%3E%3C/svg%3E"); }
.rv-slot-tag::placeholder { color: #fff; opacity: 1; }
/* typing a name starts from an empty box, not from the letter (owner, 2026-10-14) */
.rv-slot-tag:focus::placeholder { color: transparent; }
/* the slot a dragged one would swap with */
.rv-slot-wrap.rv-drop .rv-slot { border-color: var(--gold, #e8c558); border-style: dashed; }
.rv-slot-tag:focus { box-shadow: 0 0 0 2px #fff; }
.rv-slot-a .rv-slot-tag { background-color: #4a90d9; }
.rv-slot-b .rv-slot-tag { background-color: #f28c28; }
.rv-slot-x { right: 10px; border: 1px solid #5a5a7a; background: rgb(20, 20, 30); line-height: 18px; cursor: pointer; }
.rv-slot-x:hover { border-color: var(--gold, #e8c558); }