/* role-levels-v2: matrice permessi di un ruolo a colonne-livello (BlazorLevelColumns + RolePermissionsLevelBoard), solo sotto
   body.nh-v2; in produzione la matrice resta la tabella di sempre. Prototipo: docs/PropostaRuoliPermessiColonne.html,
   decisioni: docs/AnalisiRuoliPermessiColonneGrafica.md. Solo token del sito; i colori dei livelli arrivano dal server come
   variabili --rs0..3 (pieno), --ri (inchiostro), --rt (tenue), --rb (bordo), calcolati con contrasto verificato in
   RoleLevelTintRules. Testo minimo 12px. Pensato per desktop e portatile. Link e tab mai sottolineati. */

body.nh-v2 {
  --rl-ease: cubic-bezier(.16, 1, .3, 1);
  /* Inchiostri di avviso e pericolo: il sito ha solo i toni chiari, quindi si scuriscono verso il testo (>= 4.5:1 sui toni tenui). */
  --rl-warn-ink: color-mix(in srgb, var(--warning) 40%, var(--text));
  --rl-danger-ink: color-mix(in srgb, var(--danger) 55%, var(--text));
  --rl-slate: color-mix(in srgb, var(--text) 78%, var(--surface));
}

/* livelli: ogni elemento eredita i quattro colori dal proprio livello */
body.nh-v2 :is(.rl, .rl-pn) .lv0 { --rs: var(--rs0); --ri: var(--ri0); --rt: var(--rt0); --rb: var(--rb0); }
body.nh-v2 :is(.rl, .rl-pn) .lv1 { --rs: var(--rs1); --ri: var(--ri1); --rt: var(--rt1); --rb: var(--rb1); }
body.nh-v2 :is(.rl, .rl-pn) .lv2 { --rs: var(--rs2); --ri: var(--ri2); --rt: var(--rt2); --rb: var(--rb2); }
body.nh-v2 :is(.rl, .rl-pn) .lv3 { --rs: var(--rs3); --ri: var(--ri3); --rt: var(--rt3); --rb: var(--rb3); }

body.nh-v2 .rl-board { display: flex; flex-direction: column; gap: 12px; }
body.nh-v2 .rl { position: relative; color: var(--text); }
body.nh-v2 .rl [hidden] { display: none !important; }
body.nh-v2 :is(.rl, .rl-pn) :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.nh-v2 .rl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- barra superiore: viste, ricerca, piano ---------- */
body.nh-v2 .rl-toolbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
body.nh-v2 .rl-toolbar .rl-views { margin: 0 auto 0 0; }
body.nh-v2 .rl-toolbar .rl-search { width: 240px; }
body.nh-v2 .rl-toolbar .rl-plan { width: 190px; }
body.nh-v2 .rl-notice { padding: 8px 14px; border: 1px solid var(--warning); border-radius: 12px; background: var(--warning-soft); color: var(--rl-warn-ink); font-size: 14px; font-weight: 700; }
body.nh-v2 .rl-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
body.nh-v2 .rl-error h3 { margin: 0; font-size: 18px; font-weight: 800; }

/* ---------- palco ---------- */
body.nh-v2 .rl-stage { height: clamp(420px, calc(100vh - 430px), 860px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); overflow: hidden; }
body.nh-v2 .rl-scroller { height: 100%; overflow: auto; padding: 12px; }
body.nh-v2 .rl-skel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; height: 100%; padding: 12px; }
body.nh-v2 .rl-skel > div { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
body.nh-v2 .rl-skel i { display: block; height: 44px; border-radius: 11px; background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface) 50%, var(--bg-soft) 100%) 0 0 / 200% 100%; animation: rl-shimmer 1.4s linear infinite; }
body.nh-v2 .rl-skel i:first-child { height: 50px; width: 60%; border-radius: 25px; }
@keyframes rl-shimmer { to { background-position: -200% 0; } }

/* ---------- barra delle modifiche non salvate ---------- */
body.nh-v2 .rl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--warning); border-radius: 12px; background: var(--warning-soft); }
body.nh-v2 .rl-bar-count { margin-right: auto; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 800; }
body.nh-v2 .rl-bar-count em { font-style: normal; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border: 2px solid var(--warning); border-radius: 999px; background: var(--surface); color: var(--rl-warn-ink); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- la scala: barre accese fino al livello, ognuna col colore del proprio gradino ---------- */
body.nh-v2 :is(.rl, .rl-pn) .rl-lad { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad b { display: block; width: 4px; border-radius: 1.5px; background: var(--border-strong); }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad b:nth-child(1) { height: 6px; --c: var(--rs1); }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad b:nth-child(2) { height: 10px; --c: var(--rs2); }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad b:nth-child(3) { height: 14px; --c: var(--rs3); }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad[data-l="1"] b:nth-child(-n+1),
body.nh-v2 :is(.rl, .rl-pn) .rl-lad[data-l="2"] b:nth-child(-n+2),
body.nh-v2 :is(.rl, .rl-pn) .rl-lad[data-l="3"] b:nth-child(-n+3) { background: var(--c); }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad[data-conn] b:nth-child(n+2) { display: none; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad[data-conn] b:nth-child(1) { width: 12px; height: 8px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad.is-big { height: 24px; gap: 3px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad.is-big b { width: 7px; border-radius: 2px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad.is-big b:nth-child(1) { height: 10px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad.is-big b:nth-child(2) { height: 17px; }
body.nh-v2 :is(.rl, .rl-pn) .rl-lad.is-big b:nth-child(3) { height: 24px; }
/* sul fantasma scuro la scala si legge in bianco */
body.nh-v2 .rl-pg.is-lifted .rl-lad b { background: color-mix(in srgb, var(--surface) 35%, transparent); }
body.nh-v2 .rl-pg.is-lifted .rl-lad[data-l="1"] b:nth-child(-n+1),
body.nh-v2 .rl-pg.is-lifted .rl-lad[data-l="2"] b:nth-child(-n+2),
body.nh-v2 .rl-pg.is-lifted .rl-lad[data-l="3"] b:nth-child(-n+3) { background: var(--surface); }

/* anello: quota delle pagine nella colonna; il numero e' sempre scritto */
body.nh-v2 .rl-ring { flex: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--rs) calc(var(--p, 0) * 1%), var(--border-strong) 0); color: var(--ri); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.nh-v2 .rl-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
body.nh-v2 .rl-ring > span { position: relative; }

/* ---------- colonne ---------- */
body.nh-v2 .rl-cols { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 12px; height: 100%; min-width: 880px; align-items: stretch; }
body.nh-v2 .rl-col { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--rb); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: background .15s, box-shadow .15s; }
body.nh-v2 .rl-col.lv0 { border-style: dashed; border-color: var(--muted); box-shadow: none; background: var(--surface-soft); }
body.nh-v2 .rl-col-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--rt); }
body.nh-v2 .rl-col > .rl-col-head { border-radius: 13px 13px 0 0; }
body.nh-v2 .rl-col-title { flex: 1; min-width: 0; line-height: 1.2; }
body.nh-v2 .rl-col-title h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ri); }
body.nh-v2 .rl-col-title p { margin: 0; font-size: 13px; font-weight: 700; color: var(--ri); }
body.nh-v2 .rl-col-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; }
/* colonna vuota: binario tratteggiato, resta bersaglio di rilascio; mai una frase */
body.nh-v2 .rl-slot { flex: 1; min-height: 46px; border: 2px dashed var(--border-strong); border-radius: 12px; }
body.nh-v2 .rl-col.is-empty { border: 2px dashed var(--rs); background: var(--surface); }
body.nh-v2 .rl-col.is-empty.lv0 { border-color: var(--muted); }
body.nh-v2 .rl-col.is-empty > .rl-col-head { border-radius: 11px 11px 0 0; }
body.nh-v2 .rl-col.is-empty .rl-slot { border-color: var(--rs); opacity: .55; }
body.nh-v2 .rl-col.is-empty.lv0 .rl-slot { border-color: var(--muted); }

/* intestazione di sezione dentro la colonna: afferrabile, agisce su tutte le pagine della sezione in quella colonna */
body.nh-v2 .rl-blk { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
body.nh-v2 .rl-grp { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 9px; border: 1px solid transparent; border-radius: 8px; background: var(--rt); color: var(--ri); font-size: 12.5px; font-weight: 800; user-select: none; -webkit-user-select: none; touch-action: none; }
body.nh-v2 .rl-grp .rl-gc { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rl-slate); }
body.nh-v2 .rl-grp:hover { border-color: var(--rs); }
body.nh-v2 .rl-grp[data-drag],
body.nh-v2 .rl-pg[data-drag],
body.nh-v2 .rl-rowlab[data-drag] { cursor: grab; }

/* ---------- scheda pagina ---------- */
body.nh-v2 .rl-pg { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px 6px 8px; border: 1px solid var(--rb); border-radius: 12px; background: var(--rt); color: var(--text); cursor: default; user-select: none; -webkit-user-select: none; touch-action: none; transition: border-color .15s, box-shadow .15s, background .15s; }
body.nh-v2 .rl-pg:hover { border-color: var(--rs); }
body.nh-v2 .rl-tile { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--rb); border-radius: 9px; background: var(--surface); }
body.nh-v2 .rl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
body.nh-v2 .rl-name { overflow: hidden; font-size: 14px; font-weight: 800; color: var(--ri); text-overflow: ellipsis; white-space: nowrap; }
body.nh-v2 .rl-sub { overflow: hidden; font-size: 13px; color: var(--rl-slate); text-overflow: ellipsis; white-space: nowrap; }
body.nh-v2 .rl-pg.is-chip { min-height: 36px; padding: 3px 8px 3px 6px; gap: 8px; border-radius: 10px; }
body.nh-v2 .rl-pg.is-chip .rl-tile { width: 26px; height: 26px; border-radius: 8px; }
body.nh-v2 .rl-pg.is-chip .rl-name { font-size: 13.5px; }
/* copia sotto il livello vero: riga stretta bianca col bordo della colonna, nome e scala */
body.nh-v2 .rl-pg.is-inh { background: var(--surface); min-height: 26px; padding: 1px 8px 1px 4px; gap: 7px; border-radius: 8px; }
body.nh-v2 .rl-pg.is-inh .rl-tile { width: 20px; height: 20px; border-radius: 6px; }
body.nh-v2 .rl-pg.is-inh .rl-lad { transform: scale(.85); }
body.nh-v2 .rl-pg.is-inh .rl-name { font-size: 13px; font-weight: 700; }
body.nh-v2 .rl-col-body .rl-pg.is-inh { margin-top: -2px; }
/* bozza: anello ambra su tutte le copie, "era X" solo sulla carta alta */
body.nh-v2 .rl-pg.is-moved { box-shadow: 0 0 0 2px var(--warning); }
body.nh-v2 .rl-pg.is-moved .rl-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--rl-warn-ink); vertical-align: 1px; }
body.nh-v2 .rl-pg.is-moved.is-top .rl-sub { color: var(--rl-warn-ink); font-weight: 700; }
body.nh-v2 .rl-pg.is-origin,
body.nh-v2 .rl-grp.is-origin,
body.nh-v2 .rl-rowlab.is-origin { border-style: dashed !important; border-color: var(--border-strong) !important; background: var(--bg-soft) !important; opacity: .75; }
/* fantasma durante il trascinamento (sta su body) */
body.nh-v2 .rl.rl-ghost { position: fixed; z-index: 2000; left: 0; top: 0; pointer-events: none; will-change: transform; }
body.nh-v2 .rl-ghost .rl-pg.is-lifted,
body.nh-v2 .rl-ghost .rl-grp.is-lifted,
body.nh-v2 .rl-ghost .rl-rowlab.is-lifted { border-color: var(--primary-ink); background: var(--primary-ink); color: var(--surface); box-shadow: 0 16px 28px -10px rgba(var(--primary-rgb), .55); }
body.nh-v2 .rl-ghost .rl-pg.is-lifted .rl-name,
body.nh-v2 .rl-ghost .rl-pg.is-lifted .rl-sub,
body.nh-v2 .rl-ghost .rl-grp.is-lifted,
body.nh-v2 .rl-ghost .rl-grp.is-lifted .rl-gc,
body.nh-v2 .rl-ghost .rl-rowlab.is-lifted * { color: var(--surface); }
body.nh-v2 .rl-ghost .rl-pg.is-lifted .rl-tile { border-color: color-mix(in srgb, var(--surface) 70%, transparent); background: var(--primary-ink); }
body.nh-v2.rl-dragging,
body.nh-v2.rl-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- bersagli di rilascio ---------- */
body.nh-v2 .rl [data-drop] { transition: background .15s, box-shadow .15s; }
body.nh-v2 .rl-col[data-drop] { position: relative; }
body.nh-v2 .rl .is-can { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .8); }
body.nh-v2 .rl .is-no { outline: 2px dotted var(--rl-danger-ink); outline-offset: -2px; }
body.nh-v2 .rl .is-can.is-hover { background: rgba(var(--primary-rgb), .07) !important; box-shadow: 0 0 0 2px var(--primary); }
body.nh-v2 .rl .is-no.is-hover { background: var(--danger-soft) !important; box-shadow: 0 0 0 2px var(--danger); cursor: not-allowed; }
body.nh-v2 .rl .rl-cell.is-can,
body.nh-v2 .rl .rl-cell.is-no { outline: 0; box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), .8); }
body.nh-v2 .rl .rl-cell.is-no { box-shadow: inset 0 0 0 2px var(--rl-danger-ink); }
body.nh-v2 .rl .rl-cell.is-can.is-hover { box-shadow: inset 0 0 0 2px var(--primary); }
/* l'azione e il motivo sono scritti sul bersaglio: il colore non e' l'unico segnale */
body.nh-v2 .rl .is-can.is-hover-main::after { content: attr(data-lbl); position: absolute; top: 56px; left: 10px; right: 10px; z-index: 5; padding: 3px 10px; border-radius: 12px; background: var(--primary); color: var(--surface); font-size: 12.5px; font-weight: 700; text-align: center; pointer-events: none; }
body.nh-v2 .rl .is-no.is-hover-main::after { content: attr(data-reason); position: absolute; top: 56px; left: 10px; right: 10px; z-index: 5; padding: 3px 10px; border-radius: 12px; background: var(--rl-danger-ink); color: var(--surface); font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; pointer-events: none; }
body.nh-v2 .rl .rl-cell.is-can.is-hover-main::after,
body.nh-v2 .rl .rl-cell.is-no.is-hover-main::after { top: 6px; }
body.nh-v2 .rl .rl-col-head.is-hover-main::after { top: 100%; }

/* ---------- Per sezione: una riga per sezione, quattro stazioni ---------- */
body.nh-v2 .rl-rails { display: grid; grid-template-columns: 188px repeat(4, minmax(170px, 1fr)); min-width: 940px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: clip; }
body.nh-v2 .rl-rails > .rl-col-head { position: sticky; top: 0; z-index: 4; border-bottom: 2px solid var(--rs); border-left: 1px solid var(--border); }
body.nh-v2 .rl-rails > .rl-col-head[data-drop] { position: sticky; }
body.nh-v2 .rl-corner { position: sticky; top: 0; z-index: 4; border-bottom: 2px solid var(--border-strong); background: var(--surface-soft); }
body.nh-v2 .rl-rowlab { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-soft); user-select: none; -webkit-user-select: none; touch-action: none; }
body.nh-v2 .rl-rowlab:hover { background: var(--primary-soft); }
body.nh-v2 .rl-rn { font-size: 14px; font-weight: 800; color: var(--text); }
body.nh-v2 .rl-rc { font-size: 12.5px; font-weight: 700; color: var(--rl-slate); font-variant-numeric: tabular-nums; }
body.nh-v2 .rl-dist { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--border); }
body.nh-v2 .rl-dist i { display: block; min-width: 0; background: var(--rs); }
body.nh-v2 .rl-cell { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); align-content: start; gap: 5px; min-height: 52px; padding: 8px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
body.nh-v2 .rl-cell.lv0 { background: var(--surface-soft); }
body.nh-v2 .rl-cell.is-col-empty { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(15, 23, 42, .035) 8px 9px); outline: 2px dashed var(--rs); outline-offset: -5px; }

/* ---------- pannelli laterali ---------- */
body.nh-v2 .rl-pn { display: flex; flex-direction: column; gap: 10px; }
body.nh-v2 .rl-who { display: flex; flex-wrap: wrap; gap: 8px; }
body.nh-v2 .rl-cp { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-soft); color: var(--rl-slate); font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
body.nh-v2 .rl-cp.is-lose { border-color: var(--rl-warn-ink); background: var(--warning-soft); color: var(--rl-warn-ink); }
body.nh-v2 .rl-cp.is-up { border-color: var(--primary); color: var(--primary-ink); }
body.nh-v2 .rl-cp.is-up.is-danger { border-color: var(--rl-danger-ink); background: var(--danger-soft); color: var(--rl-danger-ink); }
body.nh-v2 .rl-was { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--warning); border-radius: 10px; background: var(--warning-soft); color: var(--rl-warn-ink); font-size: 13.5px; font-weight: 700; }
body.nh-v2 .rl-was .btn { margin-left: auto; }
body.nh-v2 .rl-opts { display: grid; gap: 8px; }
/* le scelte del pannello sono pulsanti del sito ristilati: dentro, scala e testo su due righe */
body.nh-v2 .rl-pn .btn.rl-opt { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-height: 0; padding: 11px 14px; border: 1.5px solid var(--rb); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; font-weight: inherit; }
body.nh-v2 .rl-pn .btn.rl-opt:hover:not(:disabled) { background: var(--rt); border-color: var(--rb); color: var(--text); }
body.nh-v2 .rl-pn .btn.rl-opt.is-on { background: var(--rt); border-color: var(--rs); box-shadow: 0 0 0 1.5px var(--rs); }
body.nh-v2 .rl-pn .btn.rl-opt:disabled { opacity: .7; }
body.nh-v2 .rl-otext { display: flex; flex-direction: column; line-height: 1.2; }
body.nh-v2 .rl-otext b { font-size: 15px; font-weight: 800; color: var(--ri); }
body.nh-v2 .rl-otext em { font-style: normal; font-size: 13px; color: var(--rl-slate); }
body.nh-v2 .rl-secrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bg-soft); }
body.nh-v2 .rl-sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
body.nh-v2 .rl-secrow.is-all { padding: 8px 12px; margin: 0 0 6px; border: 1px solid var(--primary); border-radius: 12px; background: var(--primary-soft); }
body.nh-v2 .rl-secrow.is-all .rl-sn { color: var(--primary-ink); font-weight: 800; }
body.nh-v2 .rl-secrow.is-moved .rl-sn::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--rl-warn-ink); }
body.nh-v2 .rl-segh { display: flex; justify-content: flex-end; gap: 3px; font-size: 12px; font-weight: 700; color: var(--rl-slate); line-height: 1.1; }
body.nh-v2 .rl-segh > span { width: 62px; text-align: center; }
body.nh-v2 .rl-segh > .rl-grow { flex: 1; width: auto; }
body.nh-v2 .rl-seg { display: inline-flex; gap: 3px; }
body.nh-v2 .rl-pn .btn.rl-segbtn { display: grid; place-items: center; width: 62px; height: 32px; min-height: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
body.nh-v2 .rl-pn .btn.rl-segbtn:hover:not(:disabled) { border-color: var(--rs); background: var(--rt); }
body.nh-v2 .rl-pn .btn.rl-segbtn.is-on { border-color: var(--rs); background: var(--rt); box-shadow: 0 0 0 1.5px var(--rs); }
body.nh-v2 .rl-seg.is-mixed .btn.rl-segbtn.is-on { box-shadow: none; }
body.nh-v2 .rl-pn .btn.rl-segbtn:disabled { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--bg-soft) 5px 6px); opacity: .7; }
/* riepilogo: una riga per pagina, da -> a */
body.nh-v2 .rl-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
body.nh-v2 .rl-nm { width: 168px; max-width: 168px; font-size: 14px; font-weight: 800; }
body.nh-v2 .rl-nm small { display: block; font-size: 12.5px; font-weight: 600; color: var(--rl-slate); }
body.nh-v2 .rl-mbody { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body.nh-v2 .rl-chg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--rb); border-radius: 999px; background: var(--rt); color: var(--ri); font-size: 13px; font-weight: 800; }
body.nh-v2 .rl-arr { flex: none; display: inline-block; width: 8px; height: 8px; margin: 0 2px 0 0; border-top: 2px solid var(--rl-slate); border-right: 2px solid var(--rl-slate); transform: rotate(45deg); }

@media (max-height: 840px) {
  body.nh-v2 .rl-stage { height: clamp(380px, calc(100vh - 380px), 860px); }
  body.nh-v2 .rl-col-head { padding: 8px 12px; }
  body.nh-v2 .rl-ring { width: 38px; height: 38px; font-size: 14px; }
  body.nh-v2 .rl-ring::before { inset: 4px; }
  body.nh-v2 .rl-col-body { padding: 8px 8px 6px; }
  /* schermi bassi: scheda su una riga con il piano accanto al nome, cosi' in colonna entrano piu' pagine */
  body.nh-v2 .rl-pg { min-height: 36px; padding: 3px 8px 3px 6px; gap: 8px; border-radius: 10px; }
  body.nh-v2 .rl-pg:not(.is-chip) .rl-tile { width: 26px; height: 26px; border-radius: 8px; }
  body.nh-v2 .rl-pg:not(.is-chip) .rl-main { flex-direction: row; align-items: baseline; gap: 8px; }
  body.nh-v2 .rl-pg:not(.is-chip) .rl-name { flex: 0 1 auto; font-size: 13.5px; }
  body.nh-v2 .rl-pg:not(.is-chip) .rl-sub { flex: 1 1 0; min-width: 0; font-size: 12px; }
  body.nh-v2 .rl-blk { gap: 4px; margin-bottom: 6px; }
  body.nh-v2 .rl-mrow { padding: 6px 12px; }
  body.nh-v2 .rl-secrow { padding: 4px 0; }
  body.nh-v2 .rl-pn .btn.rl-segbtn { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  body.nh-v2 .rl *, body.nh-v2 .rl *::before, body.nh-v2 .rl *::after { transition: none !important; animation: none !important; }
}