/* Aurora, Stack layout, Columns chart. Every colour comes from tokens.css. */
*{box-sizing:border-box}
/* The browser hides [hidden] with display:none, at the same specificity as any
   class rule, and an author stylesheet is read later so it wins. Both .app and
   .signin declare display:flex, so hidden did nothing to either and the whole
   dashboard sat underneath the sign in card on every visit. Every panel in this
   file is toggled with the attribute, so the fix belongs here once. */
[hidden]{display:none !important}
body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.55;letter-spacing:-.01em;
  color:var(--label);-webkit-font-smoothing:antialiased;background:transparent}
h1,h2,h3,p,table{margin:0}
button{font:inherit;cursor:pointer}
a{color:var(--tint-text)}
:focus-visible{outline:3px solid var(--tint);outline-offset:2px}

.wall{position:fixed;inset:0;z-index:0;background:var(--wall);pointer-events:none}
.pane{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-4);padding:var(--space-4);min-height:100vh}
/* A reading width. On a wide screen the four tiles were stretching to 380px
   each and the page read as a spreadsheet rather than a report. */
.main{width:100%;max-width:1400px;min-width:0;display:flex;flex-direction:column;
  gap:var(--space-4);padding-bottom:var(--space-6)}
.pad{padding:var(--space-5)}

/* top bar */
.topbar{width:100%;max-width:1400px;flex-shrink:0;display:flex;align-items:center;gap:16px;
  padding:10px 14px;position:sticky;top:var(--space-4);z-index:4}
.bm{display:flex;align-items:center;gap:10px;flex-shrink:0}
.bm .ic{width:32px;height:32px;border-radius:9px;flex-shrink:0;color:#fff;
  background:linear-gradient(155deg,var(--tint),#9D4FBC);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-sm)}
.bm .ic svg{display:block;width:20px;height:20px}
.bm b{font-size:15px;font-weight:600;letter-spacing:-.026em}
.topRight{display:flex;align-items:center;gap:10px;margin-left:auto}
.topRight .who{margin-bottom:0}
.picker{display:flex;align-items:center;gap:8px;min-width:0;max-width:420px;
  border:1px solid var(--hair);background:var(--field);color:var(--label);
  border-radius:var(--radius-pill);padding:10px 18px;font-size:15px;font-weight:600}
.picker:hover{background:var(--hover)}
.newBtn{display:flex;align-items:center;gap:7px;flex-shrink:0;border:none;
  background:var(--thumb);color:var(--on-thumb);border-radius:var(--radius-pill);
  padding:10px 16px;font-size:14px;font-weight:600}
.newBtn:hover{filter:brightness(1.08)}
.sheetCard.narrow{max-width:460px}
.sheetCard.narrow .dek{max-width:none}
.picker .pk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker svg{flex-shrink:0;opacity:.6}

/* the step before the numbers */
/* In colonna, non in riga. Le tre parti di questa schermata, la scelta, la
   coda e i clienti, erano tre elementi flessibili affiancati: su uno schermo
   largo lo spazio bastava e non si vedeva, su un telefono l'elenco clienti
   veniva spinto oltre il bordo destro ed era l'unica cosa che faceva scorrere
   la pagina di lato. */
.chooser{width:100%;max-width:1400px;display:flex;flex-direction:column;align-items:center;
  padding:6vh 0}
.chooseCard{width:100%;max-width:700px;padding:40px 36px;text-align:center}
.chooseCard h2{font-size:25px;letter-spacing:-.028em}
.chooseCard .dek{margin:10px auto 26px;max-width:46ch;font-size:15px}
.chooseRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bigBtn{display:flex;flex-direction:column;gap:6px;text-align:left;padding:22px 24px;
  border:1px solid var(--hair);border-radius:var(--radius-md);background:var(--field);color:var(--label)}
.bigBtn:hover{background:var(--hover)}
/* The darker accent, not the light one. White on the light indigo measured
   3.87, and the second line under it at 78 percent came to 3.14, which is why
   it read as a smudge. On this ground the same two are 6.37 and 4.88. */
.bigBtn.primary{background:var(--thumb);border-color:transparent;color:var(--on-thumb)}
.bigBtn.primary .bd{color:var(--on-thumb);opacity:.88}
.bb{font-size:18px;font-weight:600;letter-spacing:-.022em}
.bd{font-size:13.5px;color:var(--label-3);line-height:1.45}

/* the list, on demand */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;
  padding:8vh 20px 20px;background:rgba(6,6,12,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.sheetCard{width:100%;max-width:560px;max-height:76vh;padding:18px;display:flex;flex-direction:column;gap:10px}
.sheetTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheetCard nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;margin:0 -4px;padding:0 4px}
.sheetCard nav button{display:block;width:100%;flex-shrink:0;text-align:left;border:none;
  background:transparent;color:var(--label);padding:12px 14px;border-radius:var(--radius-md);
  font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheetCard nav button:hover{background:var(--hover)}
.sheetCard nav button[aria-current]{background:var(--tint-soft);color:var(--tint-text);font-weight:600}
.sheetCard nav .meta{display:block;font-size:11.5px;color:var(--label-3);font-weight:400;margin-top:2px}
.sheetCard nav button[aria-current] .meta{color:var(--tint-text);opacity:.8}
.find{width:100%;border:1px solid var(--hair);background:var(--field);color:var(--label);
  border-radius:var(--radius-sm);padding:7px 11px;font:inherit;font-size:13px}
.find::placeholder{color:var(--label-3)}
.find:focus{outline:2px solid var(--tint);outline-offset:1px}
/* La tendina di un select nativo la disegna il sistema, non la pagina, e prende
   il colore del testo dal controllo senza prendere lo sfondo: su un tema scuro
   usciva testo chiaro su lista chiara, illeggibile riga per riga. Le due
   proprieta' vanno messe insieme sull'option, o non ne vale nessuna. */
select.find option{background:var(--solid);color:var(--label)}
select.find option:checked{background:var(--tint);color:var(--on-tint)}
.navEmpty{font-size:12.5px;color:var(--label-3);padding:10px 11px}
/* The state of the data and the button that refreshes it, in one pill. It used
   to be a sentence and a separate button taking half the bar to say something
   nobody reads twice. The sentence is in the tooltip now. */
.syncPill{display:flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  min-height:32px;
  border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-pill);padding:6px 12px;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.syncPill:hover:not(:disabled){background:var(--hover);color:var(--label)}
.syncPill:disabled{cursor:default}
.syncPill.static{cursor:help}
.syncPill i{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--label-3)}
.syncPill i.ok{background:var(--ok)}
.syncPill i.stale{background:var(--warn)}
.syncPill i.never{background:var(--bad)}
.syncPill svg{flex-shrink:0;opacity:.7}
.syncPill.spin svg{animation:turn 1.1s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
/* No display:block on the b. There was one here, left from when this was a
   three line paragraph in the sidebar, and it survived the rewrite: it forced
   the age onto its own line and left the separator hanging at the start of the
   next one. A duplicate rule further down the file beats the one above it. */
/* Sign out is a quiet icon beside the name rather than a button the size of a
   navigation item: it is used once a session, and it was competing with the
   campaign list for attention. */
.iconBtn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;
  border:none;border-radius:var(--radius-sm);background:transparent;color:var(--label-3)}
.iconBtn:hover{background:var(--hover);color:var(--label)}
.themeWrap{position:relative;flex-shrink:0}
/* Opaque, not glass. A panel sitting over the wallpaper can be translucent and
   still read; a menu sits over body text, and the words behind it came through
   the words on it. */
.themeMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:210px;padding:6px;
  display:flex;flex-direction:column;gap:2px;border-radius:var(--radius-md);
  background:var(--solid);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
.themeMenu button{display:flex;align-items:center;gap:10px;width:100%;border:none;
  background:transparent;color:var(--label);border-radius:var(--radius-sm);
  padding:9px 11px;font-size:13.5px;text-align:left}
.themeMenu button:hover{background:var(--hover)}
.themeMenu button[aria-checked="true"]{background:var(--tint-soft);color:var(--tint-text);font-weight:600}
.themeMenu .tl{flex:1}
.themeMenu .tm{font-size:11.5px;color:var(--label-3)}
.themeMenu button[aria-checked="true"] .tm{color:var(--tint-text);opacity:.75}

/* Each swatch shows its own theme's two column tones over its own panel, so
   the row is a sample of the thing it selects rather than a label for it. */
.sw{width:22px;height:22px;border-radius:7px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.sw[data-swatch="dark"]{background:linear-gradient(135deg,#5E66D9 50%,#C5C8F1 50%)}
.sw[data-swatch="ocean"]{background:linear-gradient(135deg,#2E86C6 50%,#B8E0F5 50%)}
.sw[data-swatch="paper"]{background:linear-gradient(135deg,#16161A 50%,#8A8A94 50%)}
.sw[data-swatch="forest"]{background:linear-gradient(135deg,#2E9169 50%,#BEE9D6 50%)}
.sw[data-swatch="light"]{background:linear-gradient(135deg,#272FA5 50%,#7B82E0 50%)}
.sw[data-swatch="sand"]{background:linear-gradient(135deg,#5E2A0E 50%,#B07C4E 50%)}

/* header */
.lt{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:6px 4px 0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600}
/* The dot carries the state, the word carries the reading. Colouring both put
   the word on a wash of its own hue, which measured 4.0 on four of the six
   themes. The dot is six pixels of pure tone and loses nothing. */
.badge i{width:6px;height:6px;border-radius:50%;display:block}
.badge{color:var(--label)}
.badge.ok{background:var(--ok-soft)}
.badge.ok i{background:var(--ok-text)}
.badge.mute{background:var(--sunk)}
.badge.mute i{background:var(--label-3)}
.badge.warn{background:var(--warn-soft)}
.badge.warn i{background:var(--warn-text)}
h1{font-size:30px;font-weight:700;letter-spacing:-.032em;line-height:1.1;margin-top:10px;
  max-width:22ch;text-wrap:balance}
.sub{font-size:14px;color:var(--label-2);margin-top:7px}
/* La nota che dice cosa il filtro puo' e non puo' toccare. Sta sotto ai
   bottoni del periodo perche' e' li' che nasce il malinteso. */
.scopeNote{font-size:13px;line-height:1.5;color:var(--label-2);margin:0 0 var(--space-4);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  background:var(--glass);border:1px solid var(--glass-edge)}
.scopeNote b{color:var(--label);font-weight:600}

/* Il marchio sulle cifre ricavate. Piccolo e a bassa voce: dice da dove viene
   un numero, non che c'e' qualcosa che non va. */
.drv{appearance:none;border:0;background:none;font:inherit;cursor:pointer;padding:0 0 0 5px;
  color:var(--label-3);font-size:13px;line-height:1;vertical-align:baseline}
.drv:hover{color:var(--label-2)}
.drv:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:3px}
.drvInline{color:var(--label-3);font-weight:700}

/* Il pannello di cosa succede a pubblicita' spenta. Ha un bordo suo perche' e'
   l'unica sezione che racconta una cosa diversa dal resto della pagina. */
.after{border-color:var(--ok);background:var(--ok-soft)}
.afterTop h2{font-size:19px;letter-spacing:-.024em}
.afterTop .dek{margin-top:4px}
.afterRow{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-6);margin-top:var(--space-4)}
.af{min-width:150px}
.afv{font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.afk{font-size:13px;color:var(--label-2);margin-top:3px;max-width:26ch;line-height:1.4}
.afterNote{margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--hair-2);font-size:12.5px;line-height:1.55;
  color:var(--label-2);max-width:78ch}

/* L'elenco dei clienti, sotto la scelta della campagna. Righe larghe e non
   caselle: si scorre con l'occhio cercando un nome. */
.customers{width:100%;max-width:700px;margin:var(--space-4) auto 0}
.custList{display:flex;flex-direction:column;gap:4px;margin-top:var(--space-4)}
.cust{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  text-align:left;border:1px solid transparent;background:transparent;color:var(--label);
  border-radius:var(--radius-md);padding:11px 13px}
.cust:hover{background:var(--hover)}
.cust.on{background:var(--tint-soft);border-color:var(--tint)}
.custName{font-size:14.5px;font-weight:600}
.custMeta{font-size:12.5px;color:var(--label-2);font-variant-numeric:tabular-nums}
.custMeta b{color:var(--ok-text);font-weight:600}
.cust.clear{margin-top:6px;border-top:1px solid var(--hair-2);border-radius:0;
  color:var(--label-3);font-size:13px}
/* Il cliente, il suo credito e il pulsante per registrare un versamento, su
   una riga sola: il credito e' la prima cosa che si guarda aprendo la lista. */
.custRow{display:flex;align-items:center;gap:10px}
.custRow .cust{flex:1;min-width:0}
.bal{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:var(--radius-pill)}
.bal.ok{background:var(--ok-soft);color:var(--label)}
.bal.red{background:var(--bad-soft);color:var(--bad-text)}
.bal.none{background:transparent;color:var(--label-3);font-weight:400}
.payBtn{border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-pill);padding:5px 12px;font-size:12.5px;white-space:nowrap}
.payBtn:hover{background:var(--hover);color:var(--label)}

.payForm{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hair)}
.payForm b{flex-basis:100%;font-size:14px}
.payForm label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--label-3)}
.payForm input,.payForm select{border:1px solid var(--hair);background:var(--field);
  color:var(--label);border-radius:var(--radius-sm);padding:7px 10px;font:inherit;font-size:13px}
.payForm select option{background:var(--solid);color:var(--label)}
.payCancel{border:0;background:transparent;color:var(--label-3);font-size:13px;padding:8px 4px}

/* Il piano accanto al nome, e il selettore che si apre cliccandolo. */
.planTag{border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-pill);padding:4px 11px;font-size:12px;font-weight:600;
  white-space:nowrap}
.planTag:hover{background:var(--hover);color:var(--label)}
.planPick{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hair)}
.planTop{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:var(--space-4)}
.planTop b{flex-basis:100%;font-size:14px}
.planTop label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--label-3)}
.planTop input{width:120px;border:1px solid var(--hair);background:var(--field);
  color:var(--label);border-radius:var(--radius-sm);padding:7px 10px;font:inherit;font-size:13px}
.planGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.planCard{border:1px solid var(--hair);border-radius:var(--radius-md);padding:14px;
  display:flex;flex-direction:column;gap:8px}
.planCard.best{border-color:var(--tint);background:var(--tint-soft)}
.planCard.tight{opacity:.55}
.planName{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.planName i{font-style:normal;font-size:11px;font-weight:600;color:var(--tint-text)}
.planTotal{font-size:23px;font-weight:700;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums}
.planLines{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--label-2);
  line-height:1.4;flex:1}
.tightWhy{color:var(--warn-text)}
.planSet{margin-top:2px;border:1px solid var(--hair);background:var(--field);color:var(--label);
  border-radius:var(--radius-sm);padding:7px 10px;font-size:12.5px;font-weight:600}
.planSet:hover{background:var(--hover)}
.planSet.on{background:transparent;border-color:transparent;color:var(--label-3);cursor:default}
.paySaid{font-size:12.5px;color:var(--label-2)}

/* Il link da mandare, sotto il pannello che lo giustifica. */
.shareRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--space-4);
  padding-top:var(--space-4);border-top:1px solid var(--hair-2)}
.shareK{font-size:13px;color:var(--label-2)}
.shareLink{font-size:13px;font-family:var(--font-mono);color:var(--tint-text);
  word-break:break-all}
.copyBtn{border:1px solid var(--hair);background:var(--field);color:var(--label);
  border-radius:var(--radius-pill);padding:5px 13px;font-size:12.5px;font-weight:600}
.copyBtn:hover{background:var(--hover)}

/* Le informative in fondo alla campagna. Prosa, non caselle: si leggono una
   volta e poi si sa. */
.notices h2{margin-bottom:var(--space-4)}
.nb{padding:var(--space-4) 0;border-top:1px solid var(--hair-2)}
.nb:first-of-type{border-top:0;padding-top:0}
.nb b{display:block;font-size:14.5px;color:var(--label);margin-bottom:5px}
.nb p{font-size:13.5px;line-height:1.6;color:var(--label-2);max-width:78ch}
.segs{position:relative;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
/* Floated over the page, not laid out in the row. In the flow it was a wide
   box appearing beside the periods, which shoved the whole control sideways
   the moment it opened. */
.dates{position:absolute;right:0;top:calc(100% + 8px);z-index:12;
  display:flex;align-items:flex-end;gap:8px;padding:12px 14px;
  border:1px solid var(--glass-edge);border-radius:var(--radius-md);
  background:var(--solid);box-shadow:var(--shadow)}
.dates label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--label-3)}
.dates input{border:1px solid var(--hair);background:var(--glass);color:var(--label);
  border-radius:var(--radius-xs);padding:6px 9px;font:inherit;font-size:13px;color-scheme:inherit}
.dateGo,.dateClear{border:none;border-radius:var(--radius-xs);padding:7px 14px;
  font-size:13px;font-weight:600}
.dateGo{background:var(--thumb);color:var(--on-thumb)}
.dateGo:hover{filter:brightness(1.08)}
.dateClear{background:transparent;color:var(--label-3)}
.dateClear:hover{color:var(--label);background:var(--hover)}
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--radius-sm);background:var(--sunk)}
.seg.small button{padding:7px 13px;font-size:13px}
.seg.small button span{margin-left:5px;opacity:.6;font-variant-numeric:tabular-nums}
.seg button{border:none;background:transparent;color:var(--label-2);padding:9px 18px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:600;white-space:nowrap}
.seg button:not([aria-pressed="true"]):hover{background:var(--hover);color:var(--label)}
.seg button[aria-pressed="true"]{background:var(--thumb);color:var(--on-thumb);font-weight:600;
  box-shadow:var(--shadow-sm)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}

/* The second rank of numbers: everything the provider reports that is not one
   of the four headline figures. One panel rather than six, so it reads as
   detail and does not compete with the tiles above it. */
.facts{display:grid;grid-template-columns:repeat(6,1fr);padding:18px 6px}
.fact{padding:0 16px;border-left:1px solid var(--hair-2)}
.fact:first-child{border-left:none}
.fk{font-size:12.5px;color:var(--label-3)}
.fv{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:3px 0 2px;
  font-variant-numeric:tabular-nums}
.fn{font-size:12px;color:var(--label-3)}

.secTop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.secTools{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-top:2px}
.secTop .find{width:170px;flex-shrink:0}
.expandBtn{border:1px solid var(--hair);background:var(--field)}
.expandBtn[aria-pressed="true"]{background:var(--tint-soft);color:var(--tint-text);border-color:transparent}

/* One section takes the width, the other folds to its heading. Everything below
   the heading is hidden rather than removed, so the search text, the sort and
   the page you were on are all still there when it opens again. */
.duo.solo{grid-template-columns:1fr}
.folded{padding-top:14px;padding-bottom:14px}
.folded .dek,.folded .scrollX,.folded .pager,.folded .find{display:none}
.folded .secTop{align-items:center}
.folded h2{font-size:16px}
.perPage{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--label-3)}
.perPage .seg{gap:2px;padding:2px}
.perPage .seg button{padding:4px 9px;font-size:12px}
.dash{color:var(--label-3);opacity:.6}
td.none{color:var(--label-3);padding:18px 0;text-align:center}

/* Where the run has got to. Deliberately not the provider's chain of named
   phases: those names are theirs and we cannot read them from the API, so
   copying the look would mean inventing the content. This says what we can
   measure, which is how much of the booked run has elapsed. */
/* A timeline of the booked run, with the moments that mattered placed on it.
   The labels alternate between two rows: two events a few days apart would
   otherwise print over each other, which is the same problem the chart has and
   the same answer. */
.run{display:flex;flex-direction:column;gap:12px;padding:14px 20px 16px}
.runHead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.runTrack{position:relative;height:52px;margin-top:2px}
.runBar{position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:var(--radius-pill);
  background:var(--sunk);overflow:hidden}
.runBar i{display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--series-new),var(--series-back))}
.runK{font-size:12.5px;color:var(--label-3);white-space:nowrap}
.runK b{color:var(--label);font-weight:600}

.runMark{position:absolute;bottom:0;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:0;cursor:help}
.runMark b{position:relative;z-index:1;padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--sunk);color:var(--label-2);font-size:11px;font-weight:600;white-space:nowrap}
.runMark i{width:1px;background:var(--hair);display:block}
.runMark[data-row="0"]{height:46px}
.runMark[data-row="0"] i{height:26px}
.runMark[data-row="1"]{height:26px}
.runMark[data-row="1"] i{height:6px}
.runMark::after{content:"";position:absolute;bottom:-3px;left:50%;width:9px;height:9px;
  margin-left:-4.5px;border-radius:50%;background:var(--label-3);
  box-shadow:0 0 0 3px var(--glass)}
.runMark.back b{color:var(--series-back-text)}
.runMark.back i{background:var(--series-back-edge)}
.runMark.back::after{background:var(--series-back)}
.runMark:hover b{background:var(--hover);color:var(--label)}

/* Pagination. Two hundred rows was six screens of scrolling. */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;
  font-size:12px;color:var(--label-3)}
.pager button{border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-xs);padding:4px 10px;font-size:12px}
.pager button:hover:not(:disabled){background:var(--hover);color:var(--label)}
/* Quieter, not fainter. Fading the whole button to 40 percent took its border
   and its fill with it and left the word at 1.9 to 1, which reads as a missing
   control rather than an unavailable one. The chrome stays and only the label
   steps back, at 4.2 to 5.0 depending on the theme. */
.pager button:disabled{color:var(--label-3);cursor:default}
.pager span{font-variant-numeric:tabular-nums}

/* A definition, on the figure it defines.
   The title attribute was tried first and is not good enough: it waits a second,
   cannot be styled, wraps wherever it likes, and on a touch screen never appears
   at all. This is a real bubble, shown on hover and on keyboard focus. */
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;
  margin-left:6px;border:none;border-radius:50%;font-size:11px;font-weight:700;
  background:var(--sunk);color:var(--label-2);vertical-align:1px;padding:0}
/* Seventeen pixels is the right size for the circle and the wrong size for a
   finger. The reachable area is grown around it instead, so the column widths
   do not move. */
.info::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;
  transform:translate(-50%,-50%);z-index:1}
.info:hover,.info:focus-visible{background:var(--tint);color:var(--on-thumb)}
#tipbox{position:fixed;z-index:60;max-width:300px;padding:11px 13px;border-radius:var(--radius-md);
  font-size:12.5px;line-height:1.5;color:var(--label);background:var(--solid);
  border:1px solid var(--glass-edge);box-shadow:var(--shadow);pointer-events:none}

/* A sortable column says so, and says which way it is pointing. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--label)}
th.sortable .ar{opacity:0;margin-left:4px;font-size:10px}
th.sortable[aria-sort] {color:var(--tint-text)}
th.sortable[aria-sort] .ar{opacity:1}
.tile{padding:20px 22px}
.tile .k{font-size:13.5px;color:var(--label-2);font-weight:500}
.tile .v{font-size:38px;font-weight:700;letter-spacing:-.042em;line-height:1;margin:9px 0 6px;
  font-variant-numeric:tabular-nums}
.tile.hero .v{color:var(--series-back-text)}
.tile .n{font-size:12.5px;color:var(--label-3)}

/* chart */
.chartTop{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.chartCtl{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
h2{font-size:19px;font-weight:600;letter-spacing:-.022em}
.dek{font-size:13.5px;color:var(--label-2);margin-top:5px;max-width:58ch}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--label-2);flex-wrap:wrap;align-items:center}
.legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.legend i{width:11px;height:11px;border-radius:3px;display:block;box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.plotRow{display:flex;gap:20px;align-items:stretch}
/* overflow-y is hidden on purpose. Setting only overflow-x to auto makes the
   other axis compute to auto as well, so a chart one pixel taller than its box
   grew a vertical scrollbar down the side of the plot. */
.plotHost{position:relative;flex:1;min-width:0;margin-top:16px;overflow-x:auto;overflow-y:hidden}
.plotHost svg{display:block;max-width:none}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5;
  background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(190%);
  backdrop-filter:blur(24px) saturate(190%);border:1px solid var(--glass-edge);
  border-radius:13px;box-shadow:var(--shadow);padding:11px 13px;min-width:196px}
.tip.on{opacity:1}
.tip .d{font-size:12.5px;font-weight:600;margin-bottom:7px}
.tip .row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--label-2);padding:2px 0}
.tip .row i{width:9px;height:9px;border-radius:3px;display:block;flex-shrink:0}
.tip .row b{margin-left:auto;color:var(--label);font-variant-numeric:tabular-nums;font-weight:600}
.tip .tot{display:flex;gap:8px;font-size:12.5px;font-weight:600;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--hair)}
.tip .tot b{margin-left:auto;font-variant-numeric:tabular-nums}
.sumCol{width:176px;flex-shrink:0;border-left:1px solid var(--hair);padding-left:20px;margin-top:16px;
  display:flex;flex-direction:column;justify-content:center;gap:15px}
.sumCol .rr{font-size:12.5px;color:var(--label-2)}
.sumCol .big{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--series-back-text);font-variant-numeric:tabular-nums}
.sumCol .r{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--label-2);padding:3px 0}
.sumCol .r i{width:9px;height:9px;border-radius:3px;display:block;box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.sumCol .r b{margin-left:auto;color:var(--label);font-variant-numeric:tabular-nums}
.sumCol .r.total{border-top:1px solid var(--hair);padding-top:9px;margin-top:6px}

/* The two series, as classes rather than inline styles: the policy in the
   response headers blocks a style attribute, so a swatch written that way was
   drawing transparent and read as an empty box. */
.swNew{background:var(--series-new)}
.swBack{background:var(--series-back)}
.tip .row.back,.tip .row.back b{color:var(--series-back-text)}

/* tables */
/* Not two equal halves. The left table has five columns and the right one has
   nine, so splitting the width down the middle starved the side that needed it
   most: three of its headings overflowed their cells and printed on top of the
   next one. Seven twelfths against five is the ratio of what they hold.

   Side by side is a luxury, not the default. The nine column table needs 745
   pixels before its headings stop touching, the five column one needs 500, and
   with the gap that is 1269 pixels of table. Under a window wide enough to give
   them that, they stack and each takes the whole width, which reads better than
   two tables squeezed to the point of overlapping. */
.duo{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-4)}
@media(max-width:1500px){.duo{grid-template-columns:1fr}}
/* A grid or flex child is min-width:auto by default, so a wide table pushes
   its column past the viewport and the whole page scrolls sideways, even
   though the div around the table has overflow-x:auto and would have handled
   it. This is what made the phone layout scroll horizontally. */
.duo > *,.main > *,.plotRow > *{min-width:0}
/* table-layout:fixed is load bearing. With automatic layout the columns are
   measured from their contents, so sorting a column changed the digits in the
   cells and every column jumped sideways. Fixed widths mean the table holds
   still and only the rows change. */
table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;margin-top:14px}
/* Every column is measured, in percentages, and the reason is that a fixed
   layout distributes whatever is left over to the columns that have no width.
   With only some of them measured, one column absorbed the remainder: at half
   width the rank collapsed under the country name, and expanded the name
   column swallowed a third of the panel and left a gap you could park in.
   Percentages hold the proportions at any width. */
/* The track name is the only thing here that can be shortened without losing a
   figure, so it gives up the width the number columns need. */
.tbl-tracks{min-width:500px}
.tbl-tracks th:nth-child(1){width:5%}
.tbl-tracks th:nth-child(2){width:34%}
.tbl-tracks th:nth-child(3){width:13%}
.tbl-tracks th:nth-child(4){width:15%}
.tbl-tracks th:nth-child(5){width:33%}

/* One flat width for all seven number columns was the other half of the
   problem. Listeners and Followers are the longest words in the row and were
   six and nine pixels short of fitting, while S/L and CPL each sat on nineteen
   pixels of nothing. Each column is now measured against the wider of its
   heading and its longest value. */
.tbl-markets{min-width:745px}
/* S/L and Spend carry a definition badge as well as a word, and both were a
   few pixels short of holding it. The country name gives up the difference. */
.tbl-markets th:nth-child(1){width:4%}
.tbl-markets th:nth-child(2){width:24.5%}
.tbl-markets th:nth-child(3){width:10.6%}   /* Listeners */
.tbl-markets th:nth-child(4){width:10.9%}   /* Followers */
.tbl-markets th:nth-child(5){width:10%}     /* Streams   */
.tbl-markets th:nth-child(6){width:9.3%}    /* S/L    + i */
.tbl-markets th:nth-child(7){width:11.5%}   /* Spend  + i */
.tbl-markets th:nth-child(8){width:9.6%}    /* CPL    + i */
.tbl-markets th:nth-child(9){width:9.6%}    /* CPF    + i */
th{text-align:left;font-size:12.5px;color:var(--label-3);font-weight:500;padding:0 14px 10px 0;
  border-bottom:1px solid var(--hair);white-space:nowrap}
th.n{text-align:right}
td{padding:11px 14px 11px 0;border-top:1px solid var(--hair-2);color:var(--label-2)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
td.rk{color:var(--label-3);width:34px;font-variant-numeric:tabular-nums}
td.nm{color:var(--label);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.hot{color:var(--series-back-text);font-weight:600}
tbody tr:hover td{background:var(--hover)}
.cc{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:2px 8px;
  border-radius:var(--radius-xs);background:var(--sunk);font-family:var(--font-mono);
  font-size:11px;font-weight:600;color:var(--label-2)}
.meter{height:8px;flex:1;border-radius:var(--radius-pill);background:var(--sunk);overflow:hidden;min-width:52px}
.meter i{display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--series-new),var(--series-back))}
.meterRow{display:flex;align-items:center;gap:10px}
.pct{color:var(--series-back-text);font-size:12.5px;font-variant-numeric:tabular-nums}
th.shareCol{width:26%}
.scrollX{overflow-x:auto}
.foot{font-size:12.5px;color:var(--label-2);line-height:1.7;padding:18px 20px}
.foot b{color:var(--label);font-weight:600}

/* states */
.empty{text-align:center;padding:52px 20px}
.empty h3{font-size:16px;font-weight:600;letter-spacing:-.02em}
.empty p{font-size:13.5px;color:var(--label-3);margin:8px auto 0;max-width:52ch;line-height:1.6}
.empty code{font-family:var(--font-mono);font-size:12.5px;background:var(--sunk);
  padding:2px 7px;border-radius:6px;color:var(--label)}
.banner{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--radius-md);
  font-size:13px;line-height:1.55;background:var(--bad-soft);color:var(--bad-text)}
.sk{background:linear-gradient(90deg,var(--sunk) 25%,var(--hover) 37%,var(--sunk) 63%);
  background-size:400% 100%;animation:shim 1.5s ease infinite;border-radius:var(--radius-xs)}
.sk.line{height:12px}.sk.tall{height:30px}
.skTitle{width:280px}.skDek{width:420px}
.skK{width:60%}.skV{width:80%;margin-top:12px}.skChart{height:340px}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-page{display:flex;flex-direction:column;gap:var(--space-4);padding-top:10px}

@media(max-width:1220px){
  .plotRow{flex-direction:column}
  .sumCol{width:auto;border-left:none;border-top:1px solid var(--hair);padding-left:0;padding-top:16px;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px}
}
@media(max-width:1120px){.facts{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .fact:nth-child(3n+1){border-left:none}}
@media(max-width:1000px){.duo{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}
  .secTop{flex-direction:column}.secTop .find{width:100%}}
@media(max-width:640px){.facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(odd){border-left:none}}
@media(max-width:860px){
  .app{padding:10px;gap:10px}
  h1{font-size:24px}
  .pad{padding:16px}

  /* Two rows, not three. The brand, the account and the controls share the
     first; the campaign gets the second to itself because its name is the
     longest thing in the bar. */
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 12px;position:static}
  .bm b{display:none}
  .picker{order:3;max-width:none;width:100%;justify-content:space-between}
  .topRight{gap:8px}
  .syncPill span{display:none}
  .who span:last-child{display:none}

  /* A segmented control that cannot wrap is what pushed the page sideways:
     five period buttons in a row are wider than a phone. It scrolls on its
     own now, which keeps them in one line and the page still. */
  .segs{width:100%}
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .lt{gap:14px}
  .chartCtl{align-items:flex-start;width:100%}
  .chartTop{gap:12px}

  /* Anchored to both edges instead of just the right one: at 375px the panel
     is wider than the screen, so right:0 alone pushed its left edge off. */
  .dates{left:0;right:0;flex-wrap:wrap}
  .dates label{flex:1 1 40%}
  .dates input{width:100%}
  .dateGo,.dateClear{flex:1 1 40%}

  .secTop{gap:10px}
  .secTools{width:100%}
  .secTools .find{flex:1;width:auto}

  .chooseRow{grid-template-columns:1fr}
  /* Four labels do not fit across a phone: they overlapped and ran off both
     ends. The dots stay, and a tap on one names it through the same tooltip
     the rest of the page uses. */
  .runTrack{height:18px}
  .runMark b{display:none}
  .runMark i{display:none}
  .runMark,.runMark[data-row="0"],.runMark[data-row="1"]{height:12px}
  .sheetCard{max-height:84vh}
  #tipbox{max-width:calc(100vw - 24px)}
  .pager{justify-content:space-between}
}
@media(max-width:420px){
  .tiles{grid-template-columns:1fr}
  .tile .v{font-size:32px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* sign in */
.signin{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px}
.signin .card{width:100%;max-width:390px;padding:30px 28px}
.signin .mark{width:44px;height:44px;border-radius:13px;color:#fff;margin-bottom:20px;
  background:linear-gradient(155deg,var(--tint),#9D4FBC);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-sm)}
.signin h1{font-size:24px;margin-top:0}
.signin .dek{margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:12.5px;font-weight:500;color:var(--label-2)}
.input{width:100%;background:var(--field);border:1px solid var(--hair);border-radius:var(--radius-sm);
  padding:11px 13px;color:var(--label);font-family:var(--font-sans);font-size:14px;outline:none;
  transition:border-color var(--duration),box-shadow var(--duration)}
.input::placeholder{color:var(--label-3)}
.input:focus{border-color:var(--tint);box-shadow:0 0 0 3px var(--tint-soft)}
.btn{width:100%;border:none;border-radius:var(--radius-sm);padding:12px 18px;
  background:var(--tint);color:var(--on-tint);font-family:var(--font-sans);font-size:14px;
  font-weight:600;letter-spacing:-.012em;margin-top:4px}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.signinError{font-size:13px;color:var(--bad-text);background:var(--bad-soft);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px;line-height:1.5}
.who{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--label-3);margin-bottom:10px}
.who .av{width:24px;height:24px;border-radius:50%;flex-shrink:0;font-size:11px;font-weight:600;
  color:var(--on-tint);background:var(--tint);display:flex;align-items:center;justify-content:center}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── arrival ─────────────────────────────────────────────────────────────
   The two rooms somebody lands in, the sign in card and the chooser, had no
   moment to them: the page simply existed. The mark draws itself once, the
   card rises, and the two choices follow it a beat apart. Nothing loops and
   nothing repeats on a redraw, because an animation you see twice is an
   animation you start waiting through.
   The reduced motion rule at the end of tokens.css switches all of it off. */
@keyframes drawMark{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
@keyframes popDot{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.signin .mark svg path,.chooseMark svg path{
  stroke-dasharray:150;animation:drawMark .9s var(--ease) both}
.signin .mark svg circle,.chooseMark svg circle{
  transform-box:fill-box;transform-origin:center;animation:popDot .32s var(--ease) .78s both}

.signin .card{animation:riseIn .5s var(--ease) both}
.chooseCard{animation:riseIn .5s var(--ease) both}
.chooseCard h2{animation:fadeIn .5s var(--ease) .14s both}
.chooseCard .dek{animation:fadeIn .5s var(--ease) .2s both}
.chooseRow .bigBtn:nth-child(1){animation:riseIn .46s var(--ease) .28s both}
.chooseRow .bigBtn:nth-child(2){animation:riseIn .46s var(--ease) .36s both}

.chooseMark{width:52px;height:52px;border-radius:15px;margin:0 auto 18px;color:#fff;
  background:linear-gradient(155deg,var(--tint),#9D4FBC);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-sm)}
.chooseMark svg{display:block;width:32px;height:32px}

/* ── what the markets are saying ─────────────────────────────────────────
   A line per rule, each carrying the two numbers it rests on. The tone
   separates keeping from cutting: a market that costs more and holds people
   is not a warning, and colouring it like one would undo the point. */
.advice{display:flex;flex-direction:column;gap:2px}
.advice .secTop{margin-bottom:8px}
.note{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  border-left:3px solid transparent;border-radius:var(--radius-md);
  font-size:15px;line-height:1.5}
.note + .note{margin-top:2px}
.note .cc{flex-shrink:0;margin-top:2px}
/* Text colour is not where the tone belongs. Coloured text on a wash of its own
   hue is the one combination that cannot hold contrast, and on the two darkest
   themes it fell to 3.9:1. The tone is now the wash plus a full strength edge,
   which reads from further away and costs nothing to read up close. */
.note b{font-weight:600;color:var(--label)}
/* The evidence line, at the size of the table it asks to be checked against.
   It was two steps smaller and in the faintest label colour, which is the wrong
   way round: the claim is short and the proof is the part worth reading. */
.note .why{display:block;font-size:14px;color:var(--label);opacity:.82;margin-top:3px}
.note.good{background:var(--ok-soft);border-left-color:var(--ok)}
.note.keep{background:var(--tint-soft);border-left-color:var(--tint-text)}
.note.bad{background:var(--bad-soft);border-left-color:var(--bad)}
/* A hairline colour is right for a one pixel rule and invisible as a three
   pixel edge: it measured 1.1 against its own wash. A neutral note still needs
   a visible marker, or it reads as a note with the edge left off. */
.note.mute{background:var(--sunk);border-left-color:var(--label-3)}
.adviceNone{font-size:14.5px;color:var(--label-2);padding:8px 2px;line-height:1.5}
.adviceFoot{font-size:13px;color:var(--label-2);margin-top:14px;padding-top:11px;
  border-top:1px solid var(--hair-2);line-height:1.5}

/* ── i soldi, una riga sotto la corsa ────────────────────────────────────
   Come lo dicono loro: speso tanto di tanto, e un filo sotto. La prima
   versione era un pannello a se' con tre cifre grandi, e prendeva la cima
   della pagina per quella che e' una frase. */
.runMoney{display:flex;align-items:center;gap:12px;margin-top:10px;cursor:help}
.runMoney .runK{flex-shrink:0}
.spendBar{flex:1;height:4px;min-width:60px;border-radius:var(--radius-pill);
  background:var(--sunk);overflow:hidden}
.spendBar i{display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:var(--series-back);transition:width .5s var(--ease)}
/* Il pacchetto superato non disegna una barra piu' lunga del suo binario: la
   riempie e cambia colore, che e' il segnale per ricaricare. */
.spendBar i.over{background:var(--warn)}
@media(max-width:640px){.runMoney{flex-wrap:wrap;gap:8px}.spendBar{flex-basis:100%}}

/* ── l'interruttore delle cifre copiate ───────────────────────────────────
   Acceso, la pagina si riduce a quello che il fornitore pubblica lui. Sta in
   cima e non nelle impostazioni perche' la domanda a cui risponde, di cosa mi
   posso fidare, viene mentre si guardano i numeri. */
.provSwitch{display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 16px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:var(--field);color:var(--label-2);font-size:14.5px;font-weight:600;
  text-align:left}
.provSwitch:hover{background:var(--hover)}
.provSwitch .knob{flex-shrink:0;width:34px;height:20px;border-radius:var(--radius-pill);
  background:var(--sunk);position:relative;transition:background .16s var(--ease)}
.provSwitch .knob::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:var(--label-3);transition:transform .16s var(--ease),background .16s var(--ease)}
.provSwitch.on{border-color:var(--tint);color:var(--label)}
.provSwitch.on .knob{background:var(--thumb)}
.provSwitch.on .knob::after{background:#fff;transform:translateX(14px)}
.provNote{margin-left:auto;font-size:13px;font-weight:400;color:var(--label-3)}
@media(max-width:640px){.provSwitch{flex-wrap:wrap}.provNote{margin-left:0;flex-basis:100%}}

/* ── le quattro schermate dell'acquisto ───────────────────────────────────
   Larghe e alte: era una finestrella che scorreva dentro se stessa per non
   diventare piu' grande, che e' il modo peggiore di risparmiare spazio su uno
   schermo pieno di spazio. */
.orderCard{max-width:760px;max-height:94vh;padding:20px 22px}
.stepDots{display:flex;align-items:center;gap:0;margin:4px 0 14px}
.stepNode{position:relative;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--hair);background:var(--field);
  color:var(--label-3);font-size:12.5px;font-weight:700;cursor:help;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.stepNode+.stepNode{margin-left:44px}
.stepNode+.stepNode::before{content:"";position:absolute;right:26px;width:44px;height:1px;
  background:var(--hair)}
.stepNode.done{border-color:transparent;background:var(--ok-soft);color:var(--ok-text)}
.stepNode.on{border-color:transparent;background:var(--thumb);color:var(--on-thumb);
  box-shadow:0 0 0 4px var(--tint-soft)}

.stepBody{display:flex;flex-direction:column;gap:12px;overflow-y:auto;
  min-height:300px;padding:2px 2px 6px}
.stepBody.in{animation:stepIn .2s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stepFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--hair)}
.stepFoot .btn{margin-left:auto;width:auto;padding:12px 26px;font-size:15px}
.stepProblems{font-size:14px;font-weight:600;color:var(--warn-text)}
.stepWhy{font-size:14px;line-height:1.6;color:var(--label-2);max-width:64ch}
.stepSaid{font-size:14px;font-weight:600;color:var(--label-2);min-height:20px}
.stepNote{font-size:14px;line-height:1.6;color:var(--warn-text);
  background:var(--warn-soft);padding:12px 14px;border-radius:var(--radius-sm)}
.stepBody .field{display:flex;flex-direction:column;gap:7px}
.stepBody .field span{font-size:13.5px;font-weight:600;color:var(--label-2)}
.stepBody .input{font-size:15px;padding:12px 14px}

/* Le due domande. Due scelte per domanda: chi le sceglierebbe tutte non ha
   risposto, ha detto che gli va bene qualsiasi cosa. */
.ask{display:flex;flex-direction:column;gap:9px}
.askTop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.askTop b{font-size:16px}
.askRoom{font-size:12.5px;color:var(--label-3)}
.pickGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:7px}
.pick{display:flex;align-items:center;gap:8px;
  border:1px solid var(--hair);background:var(--field);color:var(--label);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;line-height:1.35;text-align:left;
  transition:border-color .16s var(--ease),background .16s var(--ease),opacity .16s var(--ease)}
.pick:hover{background:var(--hover)}
.pick.on{border-color:var(--tint);background:var(--tint-soft);font-weight:600}
.pick.spent{opacity:.42}
.pick.spent:hover{background:var(--field)}
.pickTick{display:flex;align-items:center;color:var(--tint-text);width:13px;flex-shrink:0}

/* Il budget. Il prezzo grande e il perche' sotto, perche' la domanda vera non
   e' quanto costa ma cosa cambia fra uno e l'altro. */
.budGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.bud{display:flex;flex-direction:column;gap:6px;text-align:left;
  border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-md);padding:15px;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.bud:hover{background:var(--hover)}
.bud.on{border-color:var(--tint);background:var(--tint-soft);color:var(--label)}
.budName{font-size:15px;font-weight:700;color:var(--label);display:flex;gap:8px;align-items:baseline}
.budName i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--tint-text);
  text-transform:uppercase;letter-spacing:.04em}
.budPrice{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--label);
  font-variant-numeric:tabular-nums}
.budWhy{font-size:13px;line-height:1.5;color:var(--label-2)}
.bud.own{cursor:default}
.bud.own label{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;color:var(--label-2)}
.bud.own input{width:92px;padding:9px 10px;font-size:14px}

/* Il riepilogo, che e' la schermata su cui si decide di pagare. */
.revHero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:var(--radius-md);padding:16px 20px;
  background:var(--field)}
.revWhat{display:flex;flex-direction:column;gap:4px}
.revKind{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tint-text)}
.revWhat b{font-size:19px;font-weight:700;letter-spacing:-.015em}
.revGenre{font-size:13.5px;color:var(--label-2)}
.revPrice{display:flex;flex-direction:column;gap:2px;text-align:right;margin-left:auto}
.revPrice b{font-size:42px;font-weight:700;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.revK{font-size:12px;color:var(--label-3)}
.revCols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.revH{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--label-3);margin-bottom:9px}
.revTicks,.revWhen{display:flex;flex-direction:column;gap:7px;list-style:none}
.revTicks li{display:flex;gap:9px;font-size:14.5px;line-height:1.45;color:var(--label)}
.revTicks i{color:var(--ok-text);flex-shrink:0;display:flex;align-items:center;height:21px}
.revWhen li{font-size:14.5px;line-height:1.45;color:var(--label);padding-left:15px;position:relative}
.revWhen li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--series-back)}

.payLines{display:flex;flex-direction:column;gap:2px}
.payLines div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:10px 0;border-top:1px solid var(--hair-2);font-size:14.5px;color:var(--label-2)}
.payLines b{font-size:17px;font-weight:700;color:var(--label);font-variant-numeric:tabular-nums}
.payLines .short b{color:var(--warn-text)}

/* Cosa succede dopo, come orario e non come elenco puntato. */
.whenList{display:flex;flex-direction:column;gap:2px}
.whenRow{display:flex;align-items:flex-start;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--hair-2)}
.whenAt{flex-shrink:0;width:52px;font-size:17px;font-weight:700;color:var(--tint-text);
  font-variant-numeric:tabular-nums}
.whenWhat{display:flex;flex-direction:column;gap:2px}
.whenWhat b{font-size:15px;font-weight:600}
.whenWhat i{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--label-2)}
.stepOff{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--label-2)}
.stepOff i{color:var(--ok-text);display:flex;align-items:center}

/* La spunta finale. Una riga sola: le caselle lunghe non le legge nessuno. */
.tickRow{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;
  color:var(--label);border:1px solid var(--hair);background:var(--field);
  border-radius:var(--radius-md);padding:13px 15px;cursor:pointer}
.tickRow:hover{background:var(--hover)}
.tickRow input{margin-top:1px;width:19px;height:19px;flex-shrink:0;accent-color:var(--tint)}

.sentBox{display:flex;flex-direction:column;gap:12px}
.sentMark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:var(--ok-soft);color:var(--ok-text)}
.sentBox b{font-size:21px;font-weight:700;letter-spacing:-.02em}
.sentBox p{font-size:14.5px;line-height:1.6;color:var(--label-2);max-width:60ch}

/* Il tetto pieno. Non un errore: il piano che lo alzerebbe, con il prezzo. */
.capFull{border:1px solid var(--tint);background:var(--tint-soft);
  border-radius:var(--radius-md);padding:15px 17px;display:flex;flex-direction:column;gap:6px}
.capFull b{font-size:15px}
.capFull p{font-size:14px;line-height:1.55;color:var(--label)}
.capFull .capWho{color:var(--label-2);font-size:13px}

@media(max-width:640px){
  .stepNode+.stepNode{margin-left:26px}
  .stepNode+.stepNode::before{right:26px;width:26px}
  .revPrice{text-align:left;margin-left:0}
  .revPrice b{font-size:34px}
}

/* ── la coda di chi deve costruire ────────────────────────────────────────
   Un cliente che ha gia' pagato e aspetta viene prima di tutto il resto, e
   sta sopra l'elenco dei clienti per quello. */
.queue{margin-top:var(--space-4)}
.queueList{display:flex;flex-direction:column;gap:8px}
.qRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:var(--radius-md);padding:12px 14px;
  background:var(--field)}
.qRow.bad{border-color:var(--warn)}
.qWho{display:flex;flex-direction:column;gap:3px;flex:1;min-width:220px}
.qName{font-size:14.5px;font-weight:600}
.qMeta{font-size:12.5px;color:var(--label-3)}
.qAsk{font-size:12.5px;color:var(--label-2)}
.qErr{font-size:12.5px;color:var(--warn-text)}
.qWait{font-size:12.5px;color:var(--label-3);font-variant-numeric:tabular-nums}
.qLink{font-size:12.5px;color:var(--label-2);text-decoration:none;border-bottom:1px solid var(--hair)}
.qLink:hover{color:var(--label)}
@media(max-width:640px){.qRow .newBtn{width:100%}}

/* L'interruttore del rinnovo. Stesso vestito di quello delle cifre copiate,
   perche' fanno la stessa cosa: una scelta con una conseguenza scritta. */
.renewSwitch{margin-top:var(--space-4)}
.renewSwitch:disabled{opacity:.6}

/* ── la copertina di quello che si promuove ───────────────────────────────
   Un identificativo di ventidue caratteri non lo riconosce nessuno. */
.cover{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--hair);border-radius:var(--radius-md);background:var(--field)}
.cover img{border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.cover.small img{border-radius:50%}
.coverNone{width:62px;height:62px;border-radius:var(--radius-sm);background:var(--sunk);flex-shrink:0}
.cover.small .coverNone{width:40px;height:40px;border-radius:50%}
.coverWho{display:flex;flex-direction:column;gap:2px;min-width:0}
.coverWho b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coverWho span{font-size:13px;color:var(--label-3)}

/* ── ogni valore con il suo nome sopra ────────────────────────────────────
   La riga di un cliente era il nome e poi tre pastiglie senza etichetta. */
.custCell{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.custK{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--label-3)}

/* ── il pulsante che installa ─────────────────────────────────────────────
   Compare solo quando il browser dice che si puo' installare, e sparisce una
   volta installata. Senza, l'unica strada era un'icona nella barra degli
   indirizzi che nessuno guarda. */
.installBtn{display:flex;align-items:center;gap:7px;flex-shrink:0;
  border:1px solid var(--tint);background:var(--tint-soft);color:var(--label);
  border-radius:var(--radius-pill);padding:7px 14px;font-size:12.5px;font-weight:600}
.installBtn:hover{background:var(--hover)}

/* ── il telefono ──────────────────────────────────────────────────────────
   La regola: niente scorre di lato. Una tabella che si allarga oltre lo
   schermo su un telefono non e' una tabella stretta, e' una tabella che non si
   legge, quindi sotto una certa larghezza smette di essere una tabella e
   diventa un elenco di schede. Ogni cella porta gia' il nome della sua
   colonna, ed e' quello che compare accanto al numero. */
@media(max-width:760px){
  .scrollX{overflow-x:visible}
  .tbl-tracks,.tbl-markets{min-width:0}
  .tbl-tracks thead,.tbl-markets thead{display:none}
  .tbl-tracks,.tbl-markets,
  .tbl-tracks tbody,.tbl-markets tbody,
  .tbl-tracks tr,.tbl-markets tr,
  .tbl-tracks td,.tbl-markets td{display:block;width:auto}
  .tbl-tracks tr,.tbl-markets tr{
    border:1px solid var(--hair);border-radius:var(--radius-md);
    padding:12px 14px;margin-top:9px;background:var(--field)}
  .tbl-tracks td,.tbl-markets td{border:0;padding:0}
  /* Il titolo della scheda: numero di posizione e nome sulla stessa riga. */
  .tbl-tracks td.rk,.tbl-markets td.rk{
    display:inline-block;width:auto;margin-right:8px;font-weight:600;color:var(--label-3)}
  .tbl-tracks td.nm,.tbl-markets td.nm{
    display:inline;white-space:normal;font-size:15px;color:var(--label)}
  /* I numeri, uno per riga, con il nome della colonna a sinistra. */
  .tbl-tracks td[data-k],.tbl-markets td[data-k]{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:7px 0 0;text-align:left;font-size:14.5px;color:var(--label)}
  .tbl-tracks td[data-k]::before,.tbl-markets td[data-k]::before{
    content:attr(data-k);font-size:12.5px;color:var(--label-3);white-space:nowrap}
  .tbl-tracks td.n,.tbl-markets td.n{text-align:right}
  .tbl-tracks tbody tr:hover td,.tbl-markets tbody tr:hover td{background:transparent}
  .meterRow{min-width:140px}
  td.none{text-align:left;padding:12px 0}

  /* Le righe dei clienti e della coda: una colonna, e i pulsanti larghi
     quanto il dito. */
  .custRow{flex-direction:column;align-items:stretch;gap:10px}
  .custCell{flex-direction:row;align-items:center;justify-content:space-between}
  .custRow .planTag,.custRow .payBtn{width:auto}
  .qRow{flex-direction:column;align-items:stretch}
  .qWait,.qLink{align-self:flex-start}

  /* Il pannello dell'acquisto prende lo schermo, invece di essere una
     finestrella dentro una finestra. */
  .sheet{padding:0;align-items:stretch}
  .orderCard{max-width:none;max-height:100vh;min-height:100dvh;border-radius:0;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
  .stepBody{min-height:0;flex:1}
  .stepFoot .btn{padding:14px 24px}
  .revPrice b{font-size:34px}
  .budGrid,.pickGrid,.revCols{grid-template-columns:1fr}
  .payForm label,.planTop label{flex:1 1 100%}

  /* Il grafico non si stringe sotto una larghezza leggibile, quindi scorre
     lui invece di allargare la pagina. */
  .plotHost{overflow-x:auto}
}

@media(max-width:420px){
  .installBtn span{display:none}
  .stepNode{width:24px;height:24px;font-size:12px}
  .stepNode+.stepNode{margin-left:18px}
  .stepNode+.stepNode::before{right:24px;width:18px}
}

/* ── il portafoglio del fornitore ─────────────────────────────────────────
   Il numero grande e' una stima e la riga sotto lo dice. La loro API non
   pubblica il saldo, quindi si conta dall'ultima volta che qualcuno ha
   guardato la loro schermata. */
.wallet,.ledger{width:100%;max-width:700px;margin:var(--space-4) auto 0}
.walTop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:var(--radius-md);padding:16px 18px;
  background:var(--field);margin-top:var(--space-4)}
.walTop.short{border-color:var(--warn);background:var(--warn-soft)}
.walTop.unknown{border-style:dashed}
.walBig{display:flex;flex-direction:column;gap:3px;min-width:0}
.walBig b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.walK{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--label-3)}
.walSays{font-size:13.5px;line-height:1.5;color:var(--label-2);max-width:46ch}
.walTop.short .walSays{color:var(--warn-text);font-weight:600}
.walSide{display:flex;flex-direction:column;gap:10px;text-align:right;margin-left:auto}
.walSide div{display:flex;flex-direction:column;gap:1px}
.walSide b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.walSide i{font-style:normal;font-size:12px;color:var(--label-3)}
.walSum{margin-top:10px;font-size:13px;line-height:1.6;color:var(--label-3)}
.walDue{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4)}
.walRow{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-top:1px solid var(--hair-2);font-size:13.5px;color:var(--label-2)}
.walWho{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.walWho b{color:var(--label);font-weight:600}
.walWhen{color:var(--label-3);font-size:12.5px}
.walCost{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label)}
.walForms{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--space-4)}
.walForms .payForm{flex:1 1 260px;margin:0;display:flex}
.walSaid{font-size:13px;color:var(--warn-text);margin-top:8px}
.walLog{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4)}
.walLogRow{display:flex;align-items:baseline;gap:12px;padding:7px 0;
  border-top:1px solid var(--hair-2);font-size:12.5px;color:var(--label-3)}
.walKind{flex:1}

/* ── l'estratto conto di un cliente ─────────────────────────────────────── */
.balBtn{border:0;background:transparent;padding:0;text-align:left;cursor:pointer}
.balBtn:hover .bal{text-decoration:underline}
.ledTop{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.ledTop b{font-size:17px;font-weight:700}
.ledSums{display:flex;gap:20px;margin-left:auto}
.ledSums div{display:flex;flex-direction:column;gap:2px}
.ledSums b{font-size:16px;font-variant-numeric:tabular-nums}
.ledSums b.red{color:var(--bad)}
.ledSums b.ok{color:var(--label)}
.ledList{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4)}
.ledRow{display:flex;align-items:baseline;gap:14px;padding:10px 0;
  border-top:1px solid var(--hair-2);font-size:13.5px}
.ledWhen{width:58px;flex-shrink:0;color:var(--label-3);font-size:12.5px}
.ledWhat{flex:1;min-width:0;color:var(--label-2);overflow:hidden;text-overflow:ellipsis}
.ledAmt{font-variant-numeric:tabular-nums;font-weight:600}
.ledAmt.in{color:var(--ok-text)}
.ledAmt.out{color:var(--label)}

@media(max-width:760px){
  .walTop,.ledTop{flex-direction:column}
  .walSide,.ledSums{margin-left:0;text-align:left;flex-direction:row;flex-wrap:wrap;gap:18px}
  .walRow,.walLogRow{flex-wrap:wrap}
  .walWho{flex-basis:100%}
  .ledWhen{width:auto}
}

/* ── cosa e' successo ─────────────────────────────────────────────────────
   Raggruppato per giorno, perche' la domanda e' quasi sempre "cosa e' successo
   oggi" e non "cosa e' successo alle 14:32". */
.changelog{width:100%;max-width:700px;margin:var(--space-4) auto 0}
.logDay{margin-top:var(--space-4)}
.logDate{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--label-3);
  padding-bottom:6px;border-bottom:1px solid var(--hair)}
.logRow{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--hair-2);font-size:13.5px;color:var(--label-2)}
.logTime{width:40px;flex-shrink:0;color:var(--label-3);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.logSays{flex:1;min-width:0;line-height:1.45}
.logSays b{color:var(--label);font-weight:600}
.logSays i{font-style:normal;color:var(--label-3);font-size:12.5px}
.logAmt{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label)}
.logRow.in .logAmt{color:var(--ok-text)}
.logRow.bad .logSays{color:var(--warn-text)}
.logRow.warn .logSays{color:var(--warn-text)}
.logRow.good .logSays b,.logRow.good .logSays{color:var(--label)}
/* Una tacca di colore a sinistra, che dice il tipo senza una parola in piu'. */
.logRow{border-left:2px solid transparent;padding-left:10px}
.logRow.in{border-left-color:var(--ok)}
.logRow.out{border-left-color:var(--series-back)}
.logRow.good{border-left-color:var(--tint)}
.logRow.bad,.logRow.warn{border-left-color:var(--warn)}

@media(max-width:760px){
  .logRow{flex-wrap:wrap}
  .logAmt{margin-left:52px}
}

/* Il pulsante che ferma. Sotto l'interruttore del rinnovo, perche' sono la
   stessa domanda: questa campagna continua o no. Conferma con una seconda
   pressione invece che con una finestra di sistema. */
.stopRow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:10px}
.stopBtn{flex-shrink:0;border:1px solid var(--hair);background:var(--field);color:var(--label-2);
  border-radius:var(--radius-pill);padding:9px 16px;font-size:13px;font-weight:600}
.stopBtn:hover{background:var(--hover);color:var(--label);border-color:var(--warn)}
.stopBtn.sure{border-color:var(--warn);background:var(--warn-soft);color:var(--warn-text)}
.stopBtn:disabled{opacity:.6}
.stopWhy{font-size:12.5px;line-height:1.5;color:var(--label-3);flex:1;min-width:200px}
.stopDone{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ok-text)}