/* ===========================================================================
   §40 — LA PLANCIA DI GOOGLE ANALYTICS (Brand Standards 3.6)
   ===========================================================================

   Il foglio lo carica solo la pagina di Google Analytics (e i due modelli di
   prova del banco `tests/prova_marketing.js`): nessuna regola scritta qui può
   cadere per sbaglio su un'altra pagina.

   Il disegno è quello di tutto Quadra: carta, inchiostro, un accento solo
   (`--pri`), gli stati in verde, giallo e rosso e basta. Le classi sono le
   stesse che `marketing.js` scrive e legge; cambia soltanto come appaiono.

   COSA SIGNIFICA OGNI COSA CHE SI ACCENDE
     la spia verde        una risposta di Meta recente; invecchiando diventa
                          gialla: è uno STATO, non un ornamento
     il tratteggio        una lacuna: il dato non c'è, e non è zero
     il piano di taglio   il giorno che si sta leggendo
   Nient'altro si muove. */

/* ------------------------------------------------ la testata e le sorgenti -- */
.mk-testa { display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
.mk-testa > div:first-child { flex: 1 1 280px; min-width: 0; }
.mk-testa h1 { margin: 0; font: 600 clamp(26px, 2.4vw, 32px)/1.1 var(--head); letter-spacing: -.03em; }
.mk-sotto { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.mk-sotto b { color: var(--ink); font-weight: 500; }
.mk-comandi { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.mk-periodi { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px;
  background: var(--soft); border-radius: var(--r-full); }
.mk-periodi button { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0 var(--s-3);
  display: grid; place-items: center; font: 500 12.5px/1 var(--sans); color: var(--ink-2); border-radius: var(--r-full);
  white-space: nowrap; transition: color var(--t-press), background var(--t-press); }
.mk-periodi button[aria-pressed="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.mk-periodi button:hover { color: var(--ink); }
.mk-periodi button:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }

.mk-azione { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-sm); background: var(--soft); color: var(--ink);
  font: 500 13px/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--t-press); }
.mk-azione:hover { background: color-mix(in srgb, var(--soft) 70%, var(--ink) 8%); }
.mk-azione:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
.mk-azione:active { transform: scale(.98); }
.mk-azione[disabled] { opacity: .5; cursor: default; }
.mk-azione svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Gira solo MENTRE una richiesta è davvero in volo. */
.mk-azione.in-volo svg { animation: mk-gira 1s linear infinite; }
@keyframes mk-gira { to { transform: rotate(360deg); } }

/* Le sorgenti: una riga di stati, come nella testata del prototipo. */
.mk-sorgenti { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); font-size: 12.5px; }
.mk-sorg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.mk-sorg:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mk-sorg b { color: var(--ink); font-weight: 500; }
.mk-sorg.b-warn b { color: var(--warn); }
.mk-sorg.b-bad b { color: var(--err); }
.mk-spia { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-2); opacity: .5; }
.mk-spia.viva { background: var(--ok); opacity: 1; }
.mk-spia.parziale, .mk-spia.manuale, .mk-spia.stantia { background: var(--warn); opacity: 1; }
.mk-spia.bloccata { background: var(--err); opacity: 1; }
.mk-spia.assente { background: var(--ink-2); opacity: .45; }
.mk-orologio { margin-left: auto; font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); }
.mk-sep-v { width: 1px; height: 14px; background: var(--line); flex: 0 0 auto; }

/* --------------------------------------------------------- l'area operativa */
.mk-area { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; min-width: 0; }
.mk-colonna { display: grid; grid-template-rows: minmax(260px, 1.8fr) auto minmax(220px, 1fr); gap: 14px; min-width: 0; min-height: 0; }
.mk-colonna.senza-strumenti { grid-template-rows: minmax(150px, var(--mk-campo, 1.8fr)) auto minmax(132px, 1fr); }

/* ------------------------------------------------------- il campo dominante */
.mk-campo { position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.mk-campo-testa { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-1); min-height: 0; }
.mk-campo-nome { display: contents; }
.mk-campo-testa .mk-occhio { grid-column: 1; grid-row: 1; }
.mk-campo-testa h2 { grid-column: 1; grid-row: 2; }
.mk-campo-strumenti { grid-column: 2; grid-row: 1 / span 2; margin-left: auto; display: flex; align-items: center;
  gap: var(--s-2); flex: none; }
.mk-occhio { margin: 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-campo-testa h2 { margin: 0; font: 600 15px/1.35 var(--head); letter-spacing: -.01em; }
.mk-campo-testa h2, .mk-campo-testa .mk-occhio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-minitab { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; background: var(--soft);
  border-radius: var(--r-full); }
.mk-minitab button { all: unset; box-sizing: border-box; cursor: pointer; height: 26px; padding: 0 var(--s-3);
  display: grid; place-items: center; font: 500 12.5px/1 var(--sans); color: var(--ink-2); border-radius: var(--r-full); white-space: nowrap; }
.mk-minitab button[aria-pressed="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.mk-minitab button:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }

.mk-tela { position: relative; z-index: 2; min-height: 0; padding: 0 12px; }
.mk-tela svg { display: block; width: 100%; height: 100%; }
.mk-tela:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; border-radius: var(--r-sm); }
.mk-cresta { transition: opacity 200ms var(--ease-out); }
.mk-tela.legge .mk-cresta { opacity: .34; }
.mk-tela.legge .mk-cresta.viva { opacity: 1; }
.mk-cresta-nome { font: 500 var(--fs-0)/1 var(--sans); fill: var(--ink-2); }
/* Il piano di taglio: il giorno letto. Invisibile finché non si legge. */
.mk-taglio { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity 180ms var(--ease-out); }
.mk-tela.legge .mk-taglio { opacity: .9; }
.mk-nodo { fill: var(--ink); opacity: 0; transition: opacity 180ms var(--ease-out); }
.mk-tela.legge .mk-nodo { opacity: 1; }
.mk-tela .mk-cresta { cursor: pointer; }

.mk-campo-piede { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); padding: 4px 18px 12px; font-size: 12px; color: var(--ink-2); }
.mk-campo-piede > * { min-width: 0; }
.mk-campo-piede p { margin: 0; }
.mk-campo-piede .assi { display: flex; gap: var(--s-5); min-width: 0; flex: 0 1 auto; transition: opacity 160ms var(--ease-out); }
.mk-campo-piede #mk-campo-nota { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  flex: 0 1 auto; transition: opacity 160ms var(--ease-out); }
.mk-campo-piede.legge #mk-campo-nota, .mk-campo-piede.legge .assi { opacity: .32; }
.mk-campo-piede.legge .assi { flex: 0 0 auto; }
.mk-asse { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-asse i { font-style: normal; color: var(--ink); opacity: .6; flex: none; }
.mk-lettura { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.mk-lettura b { font-weight: 600; }
.mk-lettura .u { color: var(--ink-2); font-size: 11.5px; }
.mk-lettura .d { color: var(--ink-2); font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; }

/* La forma che si compone, una volta per comparsa. */
#mk-svg-terreno { transform-origin: 50% 100%; }
/* Come ogni forma con l'asse del tempo (la curva della concentrazione, le
   linee per giorno): si scopre da sinistra, nel verso in cui la si legge, in
   `--t-forma`. Prima entrava da opacità zero e schiacciata in verticale, cioè
   con il primo fotogramma vuoto e la geometria del dato deformata. */
[data-moto="si"] #mk-svg-terreno.comparsa { animation: mk-comparsa var(--t-forma) var(--ease-out) backwards; }
@keyframes mk-comparsa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Il vuoto dentro la tela: fratello dell'<svg>, mai il suo sostituto. */
.mk-tela-vuoto { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: var(--s-4);
  text-align: center; }
.mk-tela-vuoto h3 { margin: 0; font: 600 16px/1.3 var(--head); }
.mk-tela-vuoto p { margin: 0 auto; max-width: 52ch; font-size: 13.5px; color: var(--ink-2); }
.mk-tela-vuoto .mk-rifiutate { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: var(--s-2);
  font-size: 12.5px; color: var(--err); }
.mk-tela-vuoto code { font: 12px ui-monospace, "SF Mono", Menlo, monospace; }
.mk-tela-vuoto .mk-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s-3); }

/* -------------------------------------------------------------- gli strumenti */
.mk-strumenti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mk-strum { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); }
.mk-strum .et { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--ink-2); }
.mk-strum .va { font: 400 26px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mk-strum .va small { font: 500 13px var(--sans); color: var(--ink-2); }
.mk-strum .no { font-size: 12px; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-strum.manuale .va { font: 500 15px/1.3 var(--sans); color: var(--ink-2); }

/* Il metro a tacche, in scala di grigi. */
.mk-metro { display: flex; gap: 2px; height: 8px; align-items: stretch; }
.mk-metro i { flex: 1; height: 100%; min-width: 2px; border-radius: 1px; background: var(--soft); }
.mk-metro i[data-g="1"] { background: var(--ramp-1); }
.mk-metro i[data-g="2"] { background: var(--ramp-2); }
.mk-metro i[data-g="3"] { background: var(--ramp-3); }
.mk-metro i[data-g="4"] { background: var(--ramp-4); }
.mk-metro i[data-g="5"] { background: var(--ramp-5); }

/* ------------------------------------- il piano, che scorre dentro sé stesso */
.mk-piano { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.mk-piano-testa { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.mk-piano-testa h3, .mk-piano-testa > h3 { margin: 0; font: 600 15px/1.35 var(--head); letter-spacing: -.01em; }
/* Il selettore dei blocchi è il segmentato di tutta l'applicazione
   (`.ui-seg.sm`, quadra.css § 6): qui resta solo il posto nella testata. */
.mk-piano-tab { margin-left: auto; }
.mk-piano-corpo { overflow: auto; min-height: 0; scrollbar-width: thin; }
.mk-piano-piede { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); }
.mk-piano table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mk-piano thead th { position: sticky; top: 0; z-index: 2; padding: 8px 18px; background: var(--panel);
  font-size: 12px; font-weight: 500; color: var(--ink-2); text-align: left; white-space: nowrap; }
.mk-piano td { padding: 8px 18px; border-top: 1px solid var(--line); }
.mk-piano tbody tr { transition: background 140ms var(--ease-out); }
.mk-piano tbody tr:hover { background: var(--panel); }
.mk-piano tbody tr[data-apre], .mk-piano tbody tr[data-contenuto] { cursor: pointer; }
.mk-piano tbody tr[data-apre]:focus-visible, .mk-piano tbody tr[data-contenuto]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }
.mk-piano .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-piano .nm { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-piano .sub { display: block; font-size: 11.5px; color: var(--ink-2); }
.mk-barretta { display: block; height: 4px; min-width: 2px; border-radius: 2px; background: var(--data); }

/* --------------------------------------------------------------- la lacuna --
   Un dato che non c'è non diventa MAI zero e non diventa un trattino muto:
   diventa una lacuna, con scritto sopra che cosa manca. */
/* Dal 2026-09-28 è la lacuna di tutta l'applicazione (quadra.css, «La
   lacuna»): tratteggio neutro e filo, con il motivo nel secondo inchiostro.
   Prima era tinta di rosso, cioè diceva «errore» dove c'era soltanto un dato
   che non è stato letto — due cose che l'interfaccia deve tenere distinte. */
.mk-vuoto { color: var(--ink-2); background: var(--hatch); }
.mk-vuoto abbr { text-decoration: none; border-bottom: 1px dotted var(--ink-2); cursor: help; }
.mk-lacuna { box-shadow: inset 0 0 0 1px var(--line) !important; background: var(--hatch), var(--panel) !important; }
.mk-lacuna .va { color: var(--ink-2) !important; font: 500 15px/1.3 var(--sans) !important; }
.mk-motivo { grid-column: 1 / -1; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.mk-motivo code { padding: 0 4px; border-radius: var(--r-xs); font: 11.5px ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--soft); color: var(--ink); }

/* ---------------------------------------------------------- il rail a destra */
.mk-lastre { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; min-width: 0; }
.mk-lastre-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-lastre-data { font: 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* La lastra maestra: una cifra e i suoi contorni. */
.mk-maestra { position: relative; overflow: hidden; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); }
.mk-maestra .et { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.mk-maestra .va { display: block; margin-top: 6px; font: 400 40px/1 var(--display); letter-spacing: -.01em; }
.mk-maestra .va small { font: 500 16px var(--sans); color: var(--ink-2); }
.mk-maestra .riga { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.mk-maestra[data-apre] { cursor: pointer; }
.mk-maestra[data-apre]:hover { border-color: var(--ink-2); }
.mk-maestra[data-apre]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; }
.mk-maestra[data-apre]::after { content: "›"; position: absolute; top: 12px; right: 14px; color: var(--ink-2); font-size: 16px;
  line-height: 1; opacity: 0; transition: opacity 140ms var(--ease-out); }
.mk-maestra[data-apre]:hover::after, .mk-maestra[data-apre]:focus-visible::after { opacity: 1; }
.mk-scintilla { height: 22px; margin-top: 6px; }
.mk-scintilla svg { display: block; width: 100%; height: 100%; }

.mk-piastre { display: grid; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mk-piastra { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 2px 9px; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line);
  transition: border-color var(--t-press); }
.mk-piastra .et { font-size: 13px; color: var(--ink-2); }
.mk-piastra .va { font: 600 17px/1.15 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mk-piastra .de { min-width: 32px; text-align: right; font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; }
.mk-piastra.piccola .va { font-size: 14px; font-weight: 500; }
.mk-piastra[data-apre] { width: 100%; cursor: pointer; text-align: left; font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none; }
.mk-piastra[data-apre]:hover { border-color: var(--ink-2); }
.mk-piastra[data-apre]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
.mk-piastra[data-apre] .et::after { content: "›"; display: inline-block; margin-left: 5px; color: var(--ink-2); opacity: 0;
  transition: opacity 140ms var(--ease-out); }
.mk-piastra[data-apre]:hover .et::after, .mk-piastra[data-apre]:focus-visible .et::after { opacity: 1; }
.de-su { color: var(--ok); } .de-giu { color: var(--err); } .de-pari { color: var(--ink-2); }

/* --------------------------------------------------------- avvisi e pastiglie */
.mk-avviso { display: flex; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px;
  background: color-mix(in srgb, var(--err) 8%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 30%, transparent); }
.mk-avviso.g { background: color-mix(in srgb, var(--warn) 9%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
.mk-avviso.v { background: color-mix(in srgb, var(--ok) 8%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.mk-avviso > span > b:first-child { display: block; margin-bottom: 1px; }
.mk-avviso p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.mk-avviso code { font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; }

.mk-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font: 500 11.5px/1 var(--sans); white-space: nowrap; background: var(--soft); color: var(--ink-2); }
.mk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-pill.ok { color: var(--ok-t); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.mk-pill.warn { color: var(--warn-t); background: color-mix(in srgb, var(--warn) 8%, var(--paper)); }
.mk-pill.bad { color: var(--err-t); background: color-mix(in srgb, var(--err) 8%, var(--paper)); }
.mk-pill.off { color: var(--ink-2); }

.mk-permessi { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-perm { padding: 1px 6px; border-radius: var(--r-xs); font: 11.5px/1.7 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--soft); color: var(--ink-2); }
.mk-perm.usato { color: var(--ok-t); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.mk-perm.manca { color: var(--err-t); text-decoration: line-through; background: color-mix(in srgb, var(--err) 8%, var(--paper)); }
.mk-perm.inutile { opacity: .45; }

.mk-diag { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 6px; }
.mk-dv { padding: 8px 12px; border-radius: var(--r-md); background: var(--panel); }
.mk-dv dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-dv dd { margin: 2px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mk-dv dd.mono { font: 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); }

/* --------------------------------------------- le tessere dei contenuti IG -- */
.mk-tessere { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--s-1); padding: var(--s-3) var(--s-5); }
.mk-tessera { position: relative; display: grid; place-items: end start; padding: 5px 6px; overflow: hidden;
  border-radius: var(--r-xs); background: var(--ramp-2); text-decoration: none; transition: transform 160ms var(--ease-out); }
.mk-tessera:hover { transform: translateY(-2px); }
.mk-tessera b { font: 600 12px/1 var(--sans); color: var(--ink); }
.mk-tessera i { position: absolute; top: 5px; right: 6px; font: normal 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); opacity: .7; }
.mk-tessera.reel { background: var(--ramp-4); }
.mk-tessera.reel b, .mk-tessera.reel i { color: var(--paper); }
.mk-tessera.senza { background: repeating-linear-gradient(135deg, var(--panel) 0 6px, var(--paper) 6px 12px);
  box-shadow: inset 0 0 0 1px var(--line); }
.mk-tessera.senza b { color: var(--ink-2); }

/* ------------------------------------------------------ la telemetria in fondo */
.mk-telemetria { display: flex; align-items: center; gap: var(--s-5); height: 30px; padding: 0 var(--s-4);
  border-radius: var(--r-sm); background: var(--panel); overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  font: 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); letter-spacing: .02em; }
.mk-telemetria::-webkit-scrollbar { display: none; }
.mk-telemetria > span { flex: 0 0 auto; }
.mk-telemetria b { color: var(--ink); font-weight: 600; }
.mk-telemetria .v { color: var(--ok); }
.mk-telemetria .g { color: var(--warn); }
.mk-telemetria a { margin-left: 8px; color: var(--ink-2); text-decoration: none; }
.mk-telemetria a:hover { color: var(--ink); text-decoration: underline; }
.mk-legale { margin-left: auto; flex: 0 0 auto; }

/* ------------------------------------------------------- stati grandi e vuoti */
.mk-grande-vuoto { max-width: 62ch; margin: 0 auto; align-self: center; padding: var(--s-7) var(--s-6); text-align: center;
  border-radius: var(--r-lg); background: var(--panel); }
.mk-grande-vuoto h3 { margin: 0 0 var(--s-2); font: 600 18px/1.3 var(--head); }
.mk-grande-vuoto p { margin: 0 0 var(--s-4); font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------ il contesto compatto */
.mk-contesto { padding-top: 6px; border-top: 1px solid var(--line); }
.mk-contesto-testa { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: 6px 4px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; text-align: left; cursor: pointer; }
.mk-contesto-testa:hover { background: var(--panel); }
.mk-contesto-testa:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
.mk-contesto-testa .et { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-contesto-stato { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.mk-contesto-testa::after { content: "›"; flex: none; color: var(--ink-2); font-size: 14px; line-height: 1;
  transition: transform 180ms var(--ease-out); }
.mk-contesto-testa[aria-expanded="true"]::after { transform: rotate(90deg); }
.mk-contesto-corpo { display: grid; gap: 4px; padding: 4px 2px 2px; max-height: clamp(110px, 21vh, 210px); overflow-y: auto; }
.mk-ctx { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding: 6px 10px;
  border-radius: var(--r-sm); background: var(--panel); }
.mk-ctx .et { font-size: 12.5px; color: var(--ink-2); }
.mk-ctx .va { max-width: 15ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.mk-ctx .no { grid-column: 1 / -1; overflow-wrap: anywhere; font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); }
.mk-ctx.manca .va { color: var(--err); }
button.mk-ctx { width: 100%; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
button.mk-ctx:hover { background: var(--soft); }
button.mk-ctx:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }

/* --------------------------------------------------- il dettaglio in lastra */
.mk-dett { display: grid; gap: var(--s-4); }
.mk-dett-def { max-width: 70ch; font-size: 13.5px; color: var(--ink-2); }
.mk-dett-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; }
.mk-dett-fatti div { padding: 8px 12px; border-radius: var(--r-md); background: var(--panel); }
.mk-dett-fatti dt, .mk-dett-fatti .et { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-dett-fatti .va { font: 600 16px/1.2 var(--sans); letter-spacing: -.01em; }
.mk-dett-tela { position: relative; height: 190px; border-radius: var(--r-md); background: var(--panel); }
.mk-dett-tela svg { display: block; width: 100%; height: 100%; }
.mk-dett-vuoto { display: grid; place-content: center; height: 100%; padding: var(--s-4); text-align: center; font-size: 13.5px; color: var(--ink-2); }
.mk-dett h4 { margin: 0 0 5px; font: 600 14px/1.3 var(--head); }
.mk-dett-scorre { max-height: 300px; overflow: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.mk-dett-scorre table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-dett-scorre thead th { position: sticky; top: 0; z-index: 1; padding: 6px var(--s-3); background: var(--panel);
  text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.mk-dett-scorre td { padding: 6px var(--s-3); border-top: 1px solid var(--line); }
.mk-dett-scorre .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-dett-scorre .nm { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* le barre dei contenuti */
.mk-barra-cont { cursor: pointer; }
.mk-barra-cont:hover rect:not([fill="transparent"]) { fill-opacity: .92; }
.mk-barra-cont:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -1px; }
.mk-barra-cont:focus-visible rect:not([fill="transparent"]) { fill-opacity: .92; }

/* ------------------------------------------------------- la scelta ancorata
   Un solo comando per la seconda scelta, largo SEMPRE UGUALE: è quello che
   tiene fermo il selettore della fonte alla sua sinistra. */
.mk-scelta { position: relative; flex: none; }
.mk-scelta-apri { display: flex; align-items: baseline; gap: 7px; width: 178px; padding: 6px 12px; border: 0;
  border-radius: var(--r-full); background: var(--soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-scelta-apri:hover { background: color-mix(in srgb, var(--soft) 70%, var(--ink) 8%); }
.mk-scelta-apri:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 1px; }
.mk-scelta-apri[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--ink); }
.mk-scelta-apri .et { flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-scelta-apri .va { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mk-scelta-apri::after { content: "⌄"; flex: none; color: var(--ink-2); font-size: 13px; line-height: 1; transform: translateY(-2px);
  transition: transform 180ms var(--ease-out); }
.mk-scelta-apri[aria-expanded="true"]::after { transform: translateY(-1px) rotate(180deg); }

.mk-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-pop); min-width: 216px; max-width: 300px;
  max-height: min(56vh, 420px); overflow-y: auto; padding: 6px; border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, .35); transform-origin: top right; }
/* Se il menu non ci sta a destra, si apre a sinistra: lo decide il codice. */
.mk-menu[data-lato="sinistra"] { right: auto; left: 0; transform-origin: top left; }
.mk-menu[data-su="si"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
.mk-menu-gruppo { padding: 6px 10px 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mk-menu-gruppo + .mk-menu-voce { margin-top: 1px; }
.mk-menu-voce { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 10px; border: 0;
  border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mk-menu-voce:hover, .mk-menu-voce:focus-visible, .mk-menu-voce[data-attiva="si"] { background: var(--panel); outline: none; }
.mk-menu-voce:focus-visible { box-shadow: inset 0 0 0 2px var(--pri-ink); }
.mk-menu-voce .segno { width: 12px; flex: none; color: var(--ink); font-size: 13px; }
.mk-menu-voce .nome { flex: 1; min-width: 0; }
.mk-menu-voce .no { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-2); }
.mk-menu-voce[aria-checked="true"] .nome { font-weight: 600; }
.mk-menu-voce[disabled] { opacity: .45; cursor: default; }
.mk-menu-voce[disabled]:hover { background: none; }
[data-moto="si"] .mk-menu { animation: mk-menu-entra 160ms var(--ease-out) backwards; }
@keyframes mk-menu-entra { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* ------------------------------------------------------------- il taglio
   Il manico che ridimensiona il campo: sei pixel visibili, una presa più
   grande di quello che si vede. Non si chiama come il piano di taglio. */
.mk-manico {
  position: relative; height: 6px; margin: -3px 0; cursor: row-resize; touch-action: none; z-index: 5;
  display: grid; place-items: center;
}
.mk-manico::before { content: ""; position: absolute; inset: -6px 0; }
.mk-manico-presa { width: 46px; height: 3px; border-radius: 2px; background: var(--line);
  transition: background 160ms var(--ease-out), width 160ms var(--ease-out); }
.mk-manico:hover .mk-manico-presa, .mk-manico[data-trascina="si"] .mk-manico-presa { background: var(--ink-2); width: 74px; }
.mk-manico:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: 2px; border-radius: var(--r-xs); }
.mk-manico:focus-visible .mk-manico-presa { background: var(--ink); }
/* Mentre si trascina non si seleziona testo. */
body[data-taglia="si"], body[data-taglia="si"] * { user-select: none; -webkit-user-select: none; cursor: row-resize !important; }

/* Le viste del telefono non servono più: sotto la finestra larga la pagina si
   impila e scorre, come tutte le altre. */
.mk-viste { display: none; }

/* ------------------------------------------ la pagina a una schermata e sotto */
@media (min-width: 1100px) and (min-height: 680px) {
  body.una-schermata .pg > .mk-area { flex: 1 1 auto; min-height: 0; }
  body.una-schermata .mk-area, body.una-schermata .mk-colonna, body.una-schermata .mk-lastre { overflow: hidden; }
  body.una-schermata .mk-colonna { grid-template-rows: minmax(0, 1.8fr) auto minmax(0, 1fr); }
  body.una-schermata .mk-colonna.senza-strumenti { grid-template-rows: minmax(150px, var(--mk-campo, 1.8fr)) auto minmax(132px, 1fr); }
}
@media (max-width: 1099px), (max-height: 679px) {
  .mk-area { grid-template-columns: minmax(0, 1fr); }
  .mk-colonna, .mk-colonna.senza-strumenti { grid-template-rows: none; grid-auto-rows: auto; }
  .mk-campo { min-height: 300px; }
  .mk-piano { max-height: 520px; }
  .mk-lastre { grid-template-rows: none; }
  .mk-manico { display: none; }
}
@media (max-width: 700px) {
  .mk-strumenti { grid-template-columns: 1fr 1fr; }
  .mk-comandi { margin-left: 0; width: 100%; }
  .mk-periodi { flex: 1; }
  .mk-orologio { margin-left: 0; }
  .mk-campo-testa { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .mk-campo-strumenti { grid-column: 1; grid-row: auto; margin-left: 0; flex-wrap: wrap; }
  .mk-maestra .va { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-azione.in-volo svg { animation: none; }
  [data-moto="si"] #mk-svg-terreno.comparsa, #mk-svg-terreno.comparsa { animation: mk-appare 160ms var(--ease-out) backwards; }
  @keyframes mk-appare { from { opacity: .5; } }
  [data-moto="si"] .mk-menu { animation: mk-appare 120ms var(--ease-out) backwards; }
}

/* Le righe dei blocchi si aprono nella lastra centrata (2026-09-26). */
[data-ga-riga] { cursor: pointer; }
[data-ga-riga]:hover td { background: var(--panel); }
[data-ga-riga]:focus-visible { outline: 2px solid var(--pri-ink); outline-offset: -2px; }