/* Price gaps (round 3, 2026-11-03): the gap ruler. Every band shares one scale around the registry price (App\Support\Gaps::x:
   linear to 0.1%, logarithmic out to 30%), so the rows line up into one instrument and the spans narrow down the list. Positions
   are SVG attributes in the view; this file only styles them. Cheapest is magenta on the left, dearest cyan on the right. */

/* ---- head: the intro, and the median instrument with its histogram */
.gp-head{align-items:stretch;gap:24px 40px}
.gp-intro{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.gp-median{flex:0 1 400px;min-width:0}
.gp-median .instrument-body{min-height:178px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px}
.gp-hist{display:block;width:100%;height:auto;overflow:visible}
.gp-hist .b{fill:var(--cyan);fill-opacity:.6}
.gp-hist .base{stroke:var(--line-3);stroke-width:1}
.gp-hist text{font-family:var(--mono);text-anchor:middle;font-variant-numeric:tabular-nums}
.gp-hist .n{font-size:10.5px;fill:var(--text-2)}
.gp-hist .l{font-size:9px;fill:var(--faint)}
/* stacked under the intro on tablets: the figure and the histogram side by side, the histogram kept to its own size */
@media (max-width:900px){.gp-median{flex:1 1 100%}.gp-median .instrument-body{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:16px 40px}.gp-hist{flex:1 1 300px;max-width:400px}}
@media (max-width:640px){.gp-median .instrument-body{flex-direction:column;align-items:stretch}.gp-hist{max-width:none}}

/* ---- the warning and the filters, at the foot of the intro (they narrow the median beside them and the list below) */
.gp-warn{margin:0;max-width:none;line-height:1.55}
.gp-warn b{color:var(--text);font-weight:600}
.gp-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;margin:0}
.gp-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.gp-filter .label{margin-right:8px}
@media (max-width:640px){.gp-filter .chip{display:inline-flex;align-items:center;min-height:44px}.gp-filter .label{flex:1 0 100%}}

/* ---- the list: a legend, then one plate with a sticky scale and a row per coin */
.gp-list{margin-top:44px}
.gp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.gp-legend>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.gp-key{display:inline-block;width:3px;height:12px;border-radius:1px}
.gp-key.c{width:2px;background:var(--chrome)}
.gp-key.t{width:2px;background:var(--lavender);opacity:.6}
.gp-key.lo{background:var(--magenta)}
.gp-key.hi{background:var(--cyan)}
.gp-plate{padding:0;--gp-cols:minmax(150px,230px) 76px 150px minmax(0,1fr) 150px 104px}
.gp-shared{position:absolute;width:0;height:0;overflow:hidden}
.gp-rows{list-style:none;margin:0;padding:0}
.gp-row{position:relative;display:grid;grid-template-columns:var(--gp-cols);column-gap:14px;align-items:center;padding:0 18px;border-top:1px solid var(--line)}
.gp-rows>.gp-row:first-child{border-top:0}
.gp-top,.gp-mid{display:contents}
.gp-band{display:block;width:100%;height:56px;overflow:visible}
.gp-band .gp-g{stroke:rgba(201,184,255,.1);stroke-width:1}
.gp-band .gp-c{stroke:var(--chrome);stroke-width:2;stroke-opacity:.8}
.gp-band .gp-t{stroke:var(--lavender);stroke-width:2;stroke-linecap:round;stroke-opacity:.55}
.gp-band .gp-t.lo{stroke:var(--magenta);stroke-width:3;stroke-opacity:1}
.gp-band .gp-t.hi{stroke:var(--cyan);stroke-width:3;stroke-opacity:1}
.gp-band .gp-t.on{stroke:#fff;stroke-opacity:1}

/* the scale: column names over the cells, graduations over the bands, stuck under the site header while the list scrolls */
.gp-ruler{position:sticky;top:var(--gp-top,65px);z-index:3;border-top:0;border-bottom:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0;background:var(--panel-2)}
.gp-ruler .gp-band{height:44px}
.gp-h{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,184,255,.7);white-space:nowrap}
.gp-h-gap,.gp-h-lo{text-align:right}
.gp-scale text{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle;font-variant-numeric:tabular-nums}
.gp-scale text.c{fill:var(--chrome);letter-spacing:.14em;text-transform:uppercase}
.gp-scale line{stroke:var(--line-3);stroke-width:1}
.gp-scale line.c{stroke:var(--chrome);stroke-width:2;stroke-opacity:.8}

/* a row's cells */
.gp-id{min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 0}
.gp-coin{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);font-weight:600}
.gp-coin:hover{text-decoration:none;color:var(--cyan)}
.gp-coin .coin-logo{flex:none;width:20px;height:20px}
.gp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-sym{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--faint)}
.gp-reg{padding-left:28px;font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.gp-gap{margin:0;text-align:right;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-end{margin:0;display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3;font-size:13px;color:var(--text-2)}
.gp-lo{align-items:flex-end;text-align:right}
.gp-hi{align-items:flex-start}
.gp-vn{white-space:nowrap}
.gp-vp{font-family:var(--mono);font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-lo .gp-vn::after,.gp-hi .gp-vn::before{content:'';display:inline-block;width:3px;height:10px;border-radius:1px;vertical-align:-1px}
.gp-lo .gp-vn::after{margin-left:7px;background:var(--magenta)}
.gp-hi .gp-vn::before{margin-right:7px;background:var(--cyan)}

/* every venue: a disclosure whose button sits at the row's right end and whose table opens under the row */
.gp-more{grid-column:1/-1}
.gp-more>summary{position:absolute;top:12px;right:18px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none;white-space:nowrap}
.gp-more>summary::-webkit-details-marker{display:none}
.gp-more>summary::after{content:'';width:5px;height:5px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.gp-more[open]>summary::after{margin-top:3px;transform:rotate(-135deg)}
.gp-more>summary:hover{color:var(--text);border-color:var(--cyan)}
.gp-more[open]>summary{color:var(--cyan);border-color:var(--cyan-line)}
.gp-table{padding:0 0 16px}
.gp-vt td,.gp-vt th{white-space:nowrap}
.table.gp-vt th{font-size:10px}
.gp-vt td.v{width:30%}
.gp-vt small{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gp-vt small::before{content:'';display:inline-block;width:3px;height:9px;margin-right:5px;border-radius:1px;vertical-align:-1px}
.gp-vt small.lo::before{background:var(--magenta)}
.gp-vt small.hi::before{background:var(--cyan)}
.gp-vt .k{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.gp-table-foot{margin:10px 0 0;font-size:13px}

/* what was left out, and the venues outside this read */
.gp-notes{margin:14px 0 0;font-size:13px;color:var(--muted)}
.gp-notes p{margin:0 0 6px;max-width:92ch}
.gp-empty{padding:var(--pad-panel)}
.gp-empty p{margin:0}

/* the readout gaps.js shows for the tick nearest the pointer */
.gp-tip{position:absolute;z-index:6;pointer-events:none;min-width:150px;padding:8px 10px;border:1px solid var(--cyan-line);border-radius:var(--r);background:rgba(10,10,18,.96);box-shadow:var(--shadow);font-size:12px;line-height:1.45;color:var(--text-2)}
.gp-tip b{display:block;color:var(--text);font-weight:600}
.gp-tip span{display:block;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.gp-tip[hidden]{display:none}

/* ---- by exchange: how often each venue is the cheapest (left, magenta) and the dearest (right, cyan) */
.gp-by-plate{padding:4px 18px 8px}
.gp-by-rows{list-style:none;margin:0;padding:0}
.gp-by-row{display:grid;grid-template-columns:minmax(90px,160px) 56px 36px minmax(120px,1fr) 36px 60px;column-gap:12px;align-items:center;min-height:40px;border-top:1px solid var(--line)}
.gp-by-head{min-height:34px;border-top:0;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,184,255,.7)}
.gp-by-rows>.gp-by-row:first-child{border-top:0}
.gp-by-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600;font-size:14px}
.gp-by-q{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.gp-by-row .n{font-family:var(--mono);font-size:13px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-by-row .n.hi{text-align:left}
.gp-by-row .n.of{font-size:12px;color:var(--faint)}
.gp-by-head .n{font-size:10px;color:inherit}
.gp-by-bar{display:block;width:100%;height:14px;overflow:visible}
.gp-by-bar .lo{fill:var(--magenta);fill-opacity:.85}
.gp-by-bar .hi{fill:var(--cyan);fill-opacity:.85}
.gp-by-bar line{stroke:var(--chrome);stroke-width:1.5;stroke-opacity:.7}
.gp-by-note{margin:12px 0 0;max-width:80ch;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ---- method */
.gp-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin:0}
.gp-defs>div{min-width:0;padding-top:12px;border-top:1px solid var(--line-2)}
.gp-defs dt{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.gp-defs dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.gp-foot{margin:24px 0 0;font-size:13px;color:var(--muted)}

/* ---- tablets: each row on two lines, the coin and its gap over the band with the cheapest and dearest at its ends */
@media (max-width:1100px){
  .gp-row{display:block;padding:10px 16px 12px}
  .gp-top{display:flex;align-items:center;gap:14px;min-height:40px;padding-right:112px}
  .gp-id{flex:1 1 auto;padding:0}
  .gp-mid{display:grid;grid-template-columns:132px minmax(0,1fr) 132px;column-gap:12px;align-items:center;margin-top:4px}
  .gp-band{height:40px}
  .gp-more>summary{top:14px;right:16px}
  .gp-ruler{padding:0 16px}
  .gp-ruler .gp-top{display:none}
  .gp-ruler .gp-mid{margin:0}
  .gp-ruler .gp-band{height:44px}
  .gp-defs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- phones: the band takes the full width, the cheapest under its left end and the dearest under its right */
@media (max-width:640px){
  .gp-row{padding:10px 12px 12px}
  .gp-ruler{padding:0 12px;top:var(--gp-top,111px)}
  .gp-top{min-height:44px;padding-right:100px}
  .gp-mid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'band band' 'lo hi';row-gap:6px}
  .gp-mid>.gp-band{grid-area:band;height:34px}
  .gp-mid>.gp-lo{grid-area:lo;align-items:flex-start;text-align:left}
  .gp-mid>.gp-hi{grid-area:hi;align-items:flex-end;text-align:right}
  .gp-lo .gp-vn::after,.gp-hi .gp-vn::before{display:none}
  .gp-lo .gp-vn::before,.gp-hi .gp-vn::after{content:'';display:inline-block;width:3px;height:10px;border-radius:1px;vertical-align:-1px}
  .gp-lo .gp-vn::before{margin-right:7px;background:var(--magenta)}
  .gp-hi .gp-vn::after{margin-left:7px;background:var(--cyan)}
  .gp-h-lo,.gp-h-hi{display:none}
  .gp-ruler .gp-mid{display:block}
  .gp-scale text.m{display:none}
  .gp-more>summary{top:10px;right:12px;height:44px}
  /* thumb-sized targets: the coin link reaches past its one line of text; the table's links get the height outright */
  .gp-coin{position:relative}
  .gp-coin::after{content:'';position:absolute;inset:-12px -4px}
  .gp-vt td.v{width:auto}
  .gp-vt .v a,.gp-table-foot a{display:inline-flex;align-items:center;min-height:44px}
  .gp-vt .k{display:block;margin:-8px 0 4px}
  .gp-by-row{grid-template-columns:30px minmax(0,1fr) 30px 52px;grid-template-areas:'name name q q' 'nlo bar nhi of';row-gap:2px;column-gap:8px;padding:6px 0 10px}
  .gp-by-head{display:flex;justify-content:space-between;min-height:30px;padding:0}
  .gp-by-head .x{display:none}
  .gp-by-name{grid-area:name;display:flex;align-items:center;min-height:44px}
  .gp-by-q{grid-area:q;text-align:right}
  .gp-by-row .n.lo{grid-area:nlo}
  .gp-by-bar{grid-area:bar}
  .gp-by-row .n.hi{grid-area:nhi}
  .gp-by-row .n.of{grid-area:of}
  .gp-defs{grid-template-columns:minmax(0,1fr)}
}