/* La finestra di RawLine Selects ricostruita in HTML (tour-selects.js): scura come l'app, con i grigi veri
   (fondo 0x1E, banda 0.12, schede 0.10, barra in basso 0.13, inspector 0.11). Va dopo tour.css, che dà la base
   (.app: proporzioni 16:10, misure in cqw, punti numerati); qui il viola dei punti e tutto il resto. */

.app.sel { --spot: #7B12C6; --spot-ring: rgba(190, 120, 255, .38); --spot-ring-on: rgba(190, 120, 255, .5); --spot-focus: #fff; --zone-dim: rgba(20, 4, 34, .5);
  --w0: #1E1E1E; --w-band: #1F1F1F; --w-tabs: #1A1A1A; --w-bottom: #212121; --w-insp: #1C1C1C; --w-side: #262628; --w-title: #2A2A2B;
  --w-line: rgba(0, 0, 0, .45); --w-fg: #EDEDED; --w-soft: #A8A8A8; --w-faint: #6F6F6F; --w-chip: #333; --w-accent: #7B12C6; color: var(--w-fg); }
.app .swin { position: absolute; inset: 0; background: var(--w0); border-radius: 1.4cqw; overflow: hidden; display: grid;
  grid-template-columns: 17.5% 1fr 20%; font-size: 1cqw; line-height: 1.3;
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .4), 0 0 0 .08cqw rgba(255, 255, 255, .14); }

/* Barra laterale: luci, ricerca rapida, dischi, preferiti */
.app .sside { background: var(--w-side); border-right: .08cqw solid var(--w-line); padding: 1.2cqw .8cqw; display: flex; flex-direction: column; gap: .3cqw; overflow: hidden; }
.app .sside .lights { display: flex; gap: .6cqw; margin: 0 .3cqw 1.3cqw; }
.app .sside .lights i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #FF5F57; }
.app .sside .lights i:nth-child(2) { background: #FEBC2E; } .app .sside .lights i:nth-child(3) { background: #28C840; }
.app .search { background: #333335; border-radius: .6cqw; padding: .45cqw .7cqw; color: var(--w-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9cqw; }
.app .sside h6 { margin: 1cqw .4cqw .2cqw; font-size: .8cqw; font-weight: 600; color: var(--w-faint); }
.app .sside .it { display: flex; align-items: center; gap: .5cqw; padding: .32cqw .45cqw; border-radius: .5cqw; white-space: nowrap; color: var(--w-fg); }
.app .sside .it b { width: .8cqw; color: var(--w-faint); font-weight: 400; font-size: .8cqw; }
.app .sside .it:not(:has(b)) { padding-left: 1.75cqw; }
.app .sside .it.l1 { margin-left: 1cqw; } .app .sside .it.l2 { margin-left: 2cqw; }
.app .sside .it.on { background: rgba(123, 18, 198, .55); }
.app .sside i.dk, .app .sside i.fd, .app .sside i.sd { width: 1.05cqw; height: .85cqw; flex: none; border-radius: .2cqw; background: #8E8E93; }
.app .sside i.fd { background: #5AA9F0; border-radius: .12cqw .3cqw .2cqw .2cqw; }
.app .sside i.sd { width: .85cqw; height: 1.05cqw; border-radius: .15cqw .4cqw .15cqw .15cqw; }

/* Centro: barra del titolo col marchio, banda ordine+filtro, schede, griglia, barra in basso */
.app .sdetail { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.app .stitle { height: 5.4cqw; flex: none; display: grid; place-items: center; background: var(--w-title); border-bottom: .08cqw solid var(--w-line); }
.app .brand { display: inline-flex; align-items: center; gap: .6cqw; }
.app .brand b { font: 900 1.45cqw/1 Unbounded, "Arial Black", sans-serif; letter-spacing: -0.04em; }
.app .brand span { font: 600 .85cqw/1 "Geist Mono", ui-monospace, monospace; color: var(--w-soft); background: rgba(255, 255, 255, .08); padding: .2cqw .45cqw; border-radius: .35cqw; }
.app .brand em { font: 700 .7cqw/1 -apple-system, sans-serif; font-style: normal; letter-spacing: .1em; color: #FFD27A; background: rgba(255, 170, 40, .18); box-shadow: inset 0 0 0 .08cqw rgba(255, 170, 40, .6); padding: .22cqw .55cqw; border-radius: 99px; }
.app .sband { height: 3.3cqw; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 1cqw; background: var(--w-band); border-bottom: .08cqw solid var(--w-line); }
.app .sband .sort { color: var(--w-fg); font-size: .92cqw; white-space: nowrap; }
.app .filter { display: flex; align-items: center; gap: .2cqw; }
.app .cp { display: inline-grid; place-items: center; min-width: 1.8cqw; height: 1.6cqw; padding: 0 .4cqw; border-radius: .45cqw; background: var(--w-chip); color: var(--w-soft); font-size: .8cqw; white-space: nowrap; }
.app .cp i { width: .95cqw; height: .95cqw; border-radius: 50%; }
.app .filter .sep { width: .08cqw; height: 1.5cqw; background: #4A4A4A; margin: 0 .4cqw; }
.app .tabs { height: 3.3cqw; flex: none; display: flex; align-items: end; gap: .2cqw; padding: 0 .6cqw; background: var(--w-tabs); }
.app .tab { height: 2.7cqw; display: flex; align-items: center; gap: .6cqw; padding: 0 1.4cqw 0 2cqw; color: #9E9E9E; border-radius: .6cqw .6cqw 0 0; white-space: nowrap; }
.app .tab small { font-size: .78cqw; color: #7F7F7F; font-variant-numeric: tabular-nums; }
.app .tab.on { background: var(--w0); color: #F2F2F2; } .app .tab.on small { color: #B3B3B3; }
.app .plus { color: #9E9E9E; font-size: 1.4cqw; padding: 0 .8cqw .5cqw; }

.app .grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 1.1cqw .9cqw; padding: 1.3cqw 1.3cqw .8cqw; overflow: hidden; }
.app .cell { display: grid; gap: .3cqw; padding: .45cqw; border-radius: .6cqw; }
.app .cell.sel { background: rgba(123, 18, 198, .38); box-shadow: inset 0 0 0 .14cqw #A45CE8; }
.app .th { position: relative; aspect-ratio: 3 / 2; border-radius: .3cqw; background: linear-gradient(180deg, var(--a) 0 52%, var(--b) 52% 100%); }
.app .th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 34%; height: 22%; background: linear-gradient(170deg, transparent 50%, rgba(0, 0, 0, .28) 51%); }
.app .th.hdr { box-shadow: .35cqw -.35cqw 0 -.05cqw #4B4B4B, .7cqw -.7cqw 0 -.1cqw #3A3A3A; margin: .35cqw .7cqw 0 0; }
.app .th .tag { position: absolute; z-index: 1; left: .35cqw; bottom: .35cqw; font: 700 .7cqw/1 -apple-system, sans-serif; color: #fff; background: rgba(0, 0, 0, .62); padding: .22cqw .4cqw; border-radius: .3cqw; letter-spacing: .02em; }
.app .cell.out .th { opacity: .35; }
.app .th .x { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #FF6B61; font-size: 2.4cqw; font-weight: 700; }
.app .nm { font: 500 .78cqw/1.1 "SF Mono", "Geist Mono", ui-monospace, monospace; color: #BFBFBF; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .mk { height: 1cqw; display: flex; justify-content: center; align-items: center; gap: .35cqw; font-size: .78cqw; font-weight: 600; }
.app .mk .st { color: #EBEBEB; letter-spacing: .04em; }
.app .mk .dot { width: .7cqw; height: .7cqw; border-radius: 50%; }
.app .mk .fl { color: #F2F2F2; } .app .mk .rj { color: #FF6B61; }
.app .bottom { height: 3cqw; flex: none; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.2cqw; background: var(--w-bottom); color: var(--w-soft); font-size: .88cqw; white-space: nowrap; }
.app .bottom .size { margin-left: auto; display: flex; align-items: center; gap: .6cqw; }
.app .bottom .size i { border-radius: .12cqw; background: var(--w-soft); } .app .bottom .size i.s { width: .7cqw; height: .55cqw; } .app .bottom .size i.l { width: 1.1cqw; height: .85cqw; }
.app .slider { position: relative; display: block; width: 9cqw; height: .3cqw; border-radius: 99px; background: #4A4A4A; }
.app .slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; border-radius: 99px; background: var(--w-accent); }
.app .slider i::after { content: ""; position: absolute; right: -.55cqw; top: 50%; width: 1.1cqw; height: 1.1cqw; margin-top: -.55cqw; border-radius: 50%; background: #DADADA; }

/* Inspector: in alto i pulsanti Guida e inspector, sotto la foto attiva */
.app .sinsp { background: var(--w-insp); border-left: .08cqw solid var(--w-line); display: flex; flex-direction: column; overflow: hidden; }
.app .tools { height: 5.4cqw; flex: none; display: flex; justify-content: end; align-items: center; gap: .5cqw; padding: 0 1cqw; background: var(--w-title); border-bottom: .08cqw solid var(--w-line); }
.app .tb { display: grid; place-items: center; width: 2.4cqw; height: 2.2cqw; border-radius: .5cqw; color: var(--w-soft); font-weight: 700; font-size: 1.05cqw; box-shadow: inset 0 0 0 .08cqw #4A4A4A; }
.app .tb.ins i { width: 1.25cqw; height: .95cqw; border-radius: .18cqw; box-shadow: inset 0 0 0 .1cqw var(--w-soft); background: linear-gradient(90deg, transparent 62%, var(--w-soft) 62% 70%, transparent 70%); }
.app .ib { flex: 1; min-height: 0; padding: 1cqw 1.1cqw; display: flex; flex-direction: column; gap: .35cqw; overflow: hidden; }
.app .ib .head b { display: block; font: 600 1cqw "SF Mono", "Geist Mono", ui-monospace, monospace; }
.app .ib .head small { display: block; color: var(--w-soft); font-size: .78cqw; margin-top: .15cqw; }
.app .ib h6 { margin: .75cqw 0 .1cqw; font-size: .82cqw; font-weight: 600; color: var(--w-soft); }
.app .zoom { display: flex; align-items: center; gap: .45cqw; }
.app .zoom .btn { padding: .2cqw .55cqw; border-radius: .4cqw; background: var(--w-chip); font-size: .8cqw; }
.app .zoom .slider { flex: 1; width: auto; }
.app .histo { height: 5.6cqw; background: #141414; border-radius: .35cqw; overflow: hidden; }
.app .histo svg { width: 100%; height: 100%; display: block; }
.app .clip { display: flex; justify-content: space-between; color: var(--w-faint); font-size: .72cqw; }
.app .stars { color: #EBEBEB; font-size: 1.2cqw; letter-spacing: .12em; }
.app .labels { display: flex; gap: .45cqw; }
.app .labels i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; opacity: .45; }
.app .labels i.on { opacity: 1; box-shadow: 0 0 0 .14cqw var(--w-insp), 0 0 0 .26cqw #fff; }
.app .flags { display: flex; border-radius: .45cqw; overflow: hidden; background: var(--w-chip); font-size: .74cqw; margin-top: .15cqw; }
.app .flags span { flex: 1; text-align: center; padding: .25cqw .2cqw; color: var(--w-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .flags span.on { background: #5E5E5E; color: #fff; border-radius: .45cqw; }
.app .ikv { display: flex; justify-content: space-between; gap: .6cqw; font-size: .8cqw; white-space: nowrap; }
.app .ikv span { color: var(--w-soft); } .app .ikv b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

/* Sul fondo scuro il bordo della zona illuminata è un viola chiaro, se no non si vede. */
.app.sel .zone { box-shadow: 0 0 0 .3cqw #B57AF0, 0 0 0 200cqw var(--zone-dim); }

/* Nella guida stampata la finestra resta scura: solo il bordo e l'alone dei punti cambiano. */
@media print { .chapter .shot .app.sel .swin { box-shadow: 0 0 0 .1cqw #BCA9CC; } }