/* La finestra di RawLine Rename ricostruita in HTML: la stessa nel giro guidato del sito, nella guida e nei PDF.
   Tutte le misure sono in cqw (larghezza della finestra), così si rimpicciolisce intera sul telefono. */

.app { --g0: #FFFFFF; --g1: #F6F6F5; --g2: #ECECEA; --g3: #D9D9D6; --g4: #A3A3A0; --g5: #6E6E6B; --g6: #2B2B29;
  --add: #1F6B4E; --add-bg: #E3F1EA; --warn: #9A5B00; --err: #B3261E; --accent: #55554F;
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 1.4cqw; overflow: clip; color: var(--g6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Geist, "Helvetica Neue", Arial, sans-serif; }
.app .win { position: absolute; inset: 0; background: var(--g0); border-radius: 1.4cqw; overflow: hidden;
  box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .28), 0 0 0 .08cqw rgba(0, 0, 0, .18); display: grid;
  grid-template-columns: 19% 1fr 21%; grid-template-rows: 5.2% 1fr 6.4%; font-size: 1.05cqw; line-height: 1.3; }
.app .mono { font-family: "SF Mono", "Geist Mono", ui-monospace, Menlo, monospace; }

/* Barra del titolo e strumenti */
.app .bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw; background: var(--g1); border-bottom: .08cqw solid var(--g3); }
.app .lights { display: flex; gap: .6cqw; }
.app .lights i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #FF5F57; }
.app .lights i:nth-child(2) { background: #FEBC2E; } .app .lights i:nth-child(3) { background: #28C840; }
.app .bar .title { font-weight: 600; margin-left: 13%; }
.app .bar .title small { font-weight: 400; color: var(--g5); margin-left: .6cqw; }
.app .bar .tools { margin-left: auto; display: flex; gap: .7cqw; align-items: center; }
.app .chip { border: .08cqw solid var(--g3); background: var(--g0); border-radius: .6cqw; padding: .3cqw .8cqw; color: var(--g5); white-space: nowrap; }
.app .chip b { color: var(--g6); font-weight: 600; }

/* Barra laterale */
.app .side { grid-row: 2 / 4; background: var(--g1); border-right: .08cqw solid var(--g3); padding: 1.2cqw .9cqw; display: flex; flex-direction: column; gap: .35cqw; overflow: hidden; }
.app .side h6 { margin: .9cqw .5cqw .3cqw; font-size: .85cqw; font-weight: 600; color: var(--g4); text-transform: none; }
.app .side h6:first-child { margin-top: 0; }
.app .side .it { display: flex; align-items: center; gap: .6cqw; padding: .38cqw .55cqw; border-radius: .5cqw; white-space: nowrap; }
.app .side .it.on { background: var(--g2); font-weight: 600; }
.app .side .it span { margin-left: auto; color: var(--g4); font-variant-numeric: tabular-nums; }
.app .side .it.muted { color: var(--g5); }
.app .ico { width: 1cqw; height: 1cqw; flex: none; border-radius: .2cqw; background: currentColor; opacity: .55; }
.app .ico.f { border-radius: .15cqw .15cqw .2cqw .2cqw; }
.app .ico.c { border-radius: 50%; }

/* Centro */
.app .main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.app .panel { margin: 1cqw 1.2cqw 0; padding: 1cqw 1.1cqw; background: var(--g1); border-radius: .9cqw; }
.app .panel + .panel { margin-top: .7cqw; }
.app .ph { display: flex; align-items: center; gap: .8cqw; }
.app .num { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; border: .1cqw solid var(--g5); display: grid; place-items: center; font-weight: 700; font-size: .85cqw; }
.app .ph strong { font-size: 1.12cqw; }
.app .ph small { display: block; color: var(--g5); font-size: .85cqw; }
.app .tiles { display: flex; align-items: flex-end; gap: .25cqw; margin-top: .9cqw; flex-wrap: wrap; }
.app .t { background: var(--g0); border: .08cqw solid var(--g3); border-radius: .55cqw; padding: .3cqw .7cqw .35cqw; }
.app .t small { display: block; font-size: .7cqw; font-weight: 600; color: var(--g5); }
.app .t b { font-weight: 500; font-size: .98cqw; }
.app .t.edit { border-color: var(--g5); }
.app .gap { font-weight: 700; font-size: 1.1cqw; padding: 0 .15cqw .35cqw; }
.app .row2 { display: flex; align-items: center; gap: .9cqw; margin-top: .9cqw; font-size: .9cqw; color: var(--g5); }
.app .row2 .chip { color: var(--g6); }
.app .result { margin-top: .6cqw; font-size: .9cqw; color: var(--g5); }
.app .result b { color: var(--add); font-weight: 600; margin-left: .5cqw; }
.app .fixes { display: flex; gap: .6cqw; margin-top: .7cqw; flex-wrap: wrap; }

.app .list { flex: 1; margin: .9cqw 1.2cqw 0; display: flex; flex-direction: column; min-height: 0; }
.app .lh { display: grid; grid-template-columns: 2cqw 1fr 1fr; gap: .8cqw; padding: .4cqw .6cqw; font-size: .8cqw; font-weight: 600; color: var(--g4); border-bottom: .08cqw solid var(--g3); }
.app .lr { display: grid; grid-template-columns: 2cqw 1fr 1fr; gap: .8cqw; align-items: center; padding: .42cqw .6cqw; border-bottom: .08cqw solid var(--g2); font-size: .92cqw; white-space: nowrap; }
.app .lr.sel { background: var(--g2); border-radius: .45cqw; border-color: transparent; }
.app .tick { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--g6); position: relative; }
.app .tick::after { content: ""; position: absolute; left: .33cqw; top: .2cqw; width: .3cqw; height: .55cqw; border: solid #fff; border-width: 0 .14cqw .14cqw 0; transform: rotate(45deg); }
.app .tick.off { background: transparent; box-shadow: inset 0 0 0 .1cqw var(--g4); }
.app .tick.off::after { display: none; }
.app .was { color: var(--g5); overflow: hidden; text-overflow: ellipsis; }
.app .new { overflow: hidden; text-overflow: ellipsis; color: var(--g5); }
.app .new em { font-style: normal; color: var(--g6); font-weight: 600; }
.app .lr.warn .new { color: var(--warn); }
.app .badge { font-size: .75cqw; color: var(--warn); margin-left: .4cqw; }

/* Barra in basso */
.app .status { grid-column: 2; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.2cqw; border-top: .08cqw solid var(--g3); background: var(--g1); font-size: .92cqw; color: var(--g5); }
.app .status .warnc { color: var(--warn); }
.app .status .go { margin-left: auto; background: var(--g6); color: #fff; border-radius: .6cqw; padding: .45cqw 1.2cqw; font-weight: 600; }
.app .status .ghost { border: .08cqw solid var(--g3); border-radius: .6cqw; padding: .4cqw 1cqw; color: var(--g6); background: var(--g0); }

/* Pannello del file */
.app .insp { grid-row: 2 / 4; grid-column: 3; border-left: .08cqw solid var(--g3); padding: 1.2cqw; display: flex; flex-direction: column; gap: .8cqw; overflow: hidden; }
.app .photo { aspect-ratio: 3 / 2; border-radius: .7cqw; background:
  linear-gradient(180deg, #F2C27B 0%, #E28A5A 38%, #8A5A6B 62%, #2F3550 100%); position: relative; overflow: hidden; }
.app .photo::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -8%; height: 46%; background: #1D2233; border-radius: 50% 50% 0 0 / 80% 80% 0 0; }
.app .kv small { display: block; font-size: .78cqw; color: var(--g4); font-weight: 600; }
.app .kv b { font-weight: 600; font-size: .95cqw; word-break: break-all; }
.app .kv b.add { color: var(--add); }
.app .steps { font-size: .82cqw; color: var(--g5); display: grid; gap: .3cqw; }
.app .steps div { display: flex; justify-content: space-between; gap: .6cqw; }
.app .steps div span:last-child { color: var(--g6); }
.app .sync { margin-top: auto; border: .08cqw solid var(--g3); border-radius: .7cqw; padding: .7cqw; font-size: .8cqw; color: var(--g5); }
.app .sync b { color: var(--g6); }

/* I punti numerati del giro guidato */
.app .spot { position: absolute; z-index: 3; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; border: 0;
  background: #0E9E8A; color: #fff; font: 700 1.35cqw/1 Geist, -apple-system, sans-serif; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 .35cqw rgba(14, 158, 138, .28), 0 .4cqw 1cqw rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s; }
.app .spot:hover, .app .spot[aria-pressed="true"] { transform: scale(1.15); box-shadow: 0 0 0 .6cqw rgba(14, 158, 138, .35), 0 .4cqw 1cqw rgba(0, 0, 0, .25); }
.app .spot:focus-visible { outline: .25cqw solid #0B3F38; outline-offset: .3cqw; }
.app .zone { position: absolute; z-index: 2; border-radius: 1cqw; box-shadow: 0 0 0 .3cqw #0E9E8A, 0 0 0 200cqw rgba(11, 63, 56, .34); opacity: 0; pointer-events: none; transition: opacity .25s, inset .35s cubic-bezier(.3, .9, .3, 1), width .35s cubic-bezier(.3, .9, .3, 1), height .35s cubic-bezier(.3, .9, .3, 1); }
.app.is-touring .zone { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .app .zone, .app .spot { transition: none; } }