/* Controller tests (/gamepad-test and the PS5, PS4, Xbox and Switch Pro
   pages): the test panel laid out by tools/gamepad-core.js and the
   controller drawing in each page's template. Everything is scoped under
   .gp and uses the site.css tokens, so dark mode follows. */

.gp h2 { font-size: 19px; }
.gp h3 { font-size: 16px; }
.gp p { margin: 0; }
.gp.is-off .gp-main, .gp.is-off .gp-block { opacity: .45; pointer-events: none; }

/* Connection line */
.gp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.gp-conn { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; font-weight: 600; font-size: 17px; }
.gp-conn .led { margin-inline: 4px; }
.gp-pick button { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-hint { color: var(--muted); font-size: 15px; }
.gp-family { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 15px; }
.gp-help { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--sunk); font-size: 15px; }
.gp-help ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Drawing and facts */
.gp-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
@media (max-width: 860px) { .gp-main { grid-template-columns: minmax(0, 1fr); } }
.gp-fig { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--sunk); }
.gp-fig figcaption { color: var(--muted); font-size: 14px; }
.gp-pad { display: block; width: 100%; height: auto; max-height: 380px; overflow: visible; }
.gp-fig.is-raw .gp-pad { opacity: .3; }
.gp-info th { width: 38%; }

/* The drawing. Shapes: .body the shell, .well a stick's socket, .k a
   button's key shape, .g a glyph, .lvl a trigger's fill, .deco parts that
   aren't buttons (lights), .nr buttons browsers don't report. */
.gp-pad .body { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; }
.gp-pad .well { fill: var(--sunk); stroke: var(--line-strong); stroke-width: 1.5; }
.gp-pad .k { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; }
.gp-pad .g { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-pad .gf { fill: var(--ink); stroke: none; }
.gp-pad text { fill: var(--ink); font: 600 12px var(--f-body); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.gp-pad text.sm { font-size: 10px; font-weight: 500; }
.gp-pad .lbl { fill: var(--muted); font-size: 10px; font-weight: 500; }
.gp-pad .lvl { fill: var(--accent); opacity: .9; }
.gp-pad .deco { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.gp-pad .nr { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.gp-pad .is-tested > .k { fill: var(--accent-soft); stroke: var(--accent); }
.gp-pad .is-down > .k { fill: var(--accent); stroke: var(--accent); }
.gp-pad .is-down > .g { stroke: var(--accent-ink); }
.gp-pad .is-down > .gf, .gp-pad .is-down > text { fill: var(--accent-ink); }
.gp-pad [data-analog].is-down > .k { fill: var(--accent-soft); stroke: var(--accent); }
.gp-pad [data-analog].is-down > text { fill: var(--ink); }
.gp-pad .is-absent > .k { fill: none; stroke-dasharray: 3 3; }
.gp-pad .thumb .k { stroke-width: 2.5; }

/* Blocks inside the panel: a hairline above each, no borders of their own.
   A .gp-pair puts two blocks side by side on wide screens. */
.gp-block { display: grid; gap: 12px; align-content: start; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.gp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
@media (max-width: 860px) { .gp-pair { grid-template-columns: minmax(0, 1fr); } }
.gp-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gp-bhead h2 { margin-right: auto; }
.gp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 520px) { .gp-two.gp-wide { grid-template-columns: minmax(0, 1fr); } }
.gp-cell { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; }
.gp-cell figcaption, .gp-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-weight: 600; font-size: 15px; }
.gp-cell .mono { font-weight: 400; font-size: 13px; color: var(--muted); white-space: pre; }
.gp canvas { display: block; width: 100%; border-radius: var(--radius-sm); background: var(--sunk); }
.gp-sq { aspect-ratio: 1; max-width: 260px; }
.gp-wide-c { aspect-ratio: 2 / 1; }

/* Buttons */
.gp-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-keys .keycap { font-size: 13px; }

/* Drift */
.gp-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gp-run .meter { flex: 1 1 200px; }
.gp-dcard { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px 16px; align-items: start; padding: 12px; border-radius: var(--radius-sm); background: var(--sunk); }
.gp-dcard canvas { background: var(--panel); }
.gp-dcard h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.gp-dcard .kv th { width: 52%; font-size: 14px; padding: 5px 8px 5px 0; }
.gp-dcard .kv td { padding: 5px 0; font-size: 13px; }
@media (max-width: 420px) { .gp-dcard { grid-template-columns: minmax(0, 1fr); } .gp-dcard canvas { max-width: 220px; } }
.gp-axes th { width: 22%; }

/* Triggers */
.gp-trigs.is-off { opacity: .45; }
.gp-trigs.is-off canvas { visibility: hidden; }
.gp-trig-v { font-family: var(--f-mono); font-weight: 400; color: var(--muted); }

/* Rumble */
.gp-rumble .status-row { align-items: flex-start; gap: 6px 10px; }
.gp-rumble .led { margin-top: 7px; }
.gp-rumble .gp-play, .gp-rumble .gp-ask, .gp-rumble .gp-rstate { align-self: center; }
.gp-ask { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.gp-rstate { min-width: 5em; font-size: 14px; font-weight: 600; }

/* Polling rate */
.gp-pollrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.gp-pollrow .readout { min-width: 200px; }

/* Raw values */
.gp-raw { border-top: 1px solid var(--line); padding-top: 14px; }
.gp-raw > summary { cursor: pointer; font-weight: 600; }
.gp-rawgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 28px; margin-top: 12px; }
.gp-rawgrid ol { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.gp-rawgrid li { display: grid; grid-template-columns: 2em minmax(0, 1fr) 80px 7.5em; align-items: center; gap: 8px; }
.gp-ri { color: var(--muted); font-family: var(--f-mono); font-size: 13px; text-align: right; }
.gp-rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-rv { font-size: 13px; }
.gp-rawgrid .meter { height: 10px; }
.gp-axis { position: relative; height: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); }
.gp-axis::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.gp-axis > i { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); left: calc((var(--v, 0) + 1) * 50%); }

/* Tables of buttons on the page (the mapping reference), outside the panel. */
.gp-map { width: 100%; border-collapse: collapse; font-size: 15px; }
.gp-map th, .gp-map td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gp-map thead th { color: var(--muted); font-weight: 500; font-size: 14px; }
.gp-map td:first-child { font-family: var(--f-mono); font-size: 14px; white-space: nowrap; }
.gp-note { color: var(--muted); font-size: 14px; }