/* NODARIS - operational product stylesheet.
   Every value comes from tokens.css, which is generated from the frozen identity.
   No hex, no px size and no duration is typed by hand in this file. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.mono, code, kbd { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: var(--font-weight-semibold); }
a { color: var(--color-interaction-link); }
/* A canonical identifier is data, not prose. Underlining every id in a 126-row queue turns
   the surface into noise; the monospace face plus the link hue already mark it actionable. */
a.id, .rail a, .barra a, .coda a, .btn { text-decoration: none; }
a.id:hover, .coda a:hover { text-decoration: underline; }
a.id { color: var(--color-text-primary); }
.coda a.id, .ispettore .rel a { color: var(--color-interaction-link); }
:focus-visible {
  outline: var(--border-width-emphasis) solid var(--color-interaction-focus);
  outline-offset: 1px;
}
::selection { background: var(--color-interaction-accent-wash); }

/* ============================================================ layout shell */
.app { display: grid; grid-template-rows: var(--density-nav-height) 1fr; height: 100vh; }

.barra {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-bg-raised);
  border-bottom: var(--border-width-hairline) solid var(--color-border-default);
  /* the bar must never widen the page: the project context is the part that yields */
  min-width: 0; overflow: hidden;
}
.barra > * { flex: 0 0 auto; min-width: 0; }
.barra .ctx { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .marchio, .barra .utente-box, .barra #apri-palette,
.barra .stato-barra { flex-shrink: 0; }
.stato-barra { display: flex; align-items: center; gap: var(--space-2); }
body[data-autenticato="0"] .stato-barra { display: none; }
.barra .marchio { display: flex; align-items: center; gap: var(--space-2); }
.barra .wordmark {
  font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wordmark);
  font-size: var(--font-size-base);
}
.barra .sep { color: var(--color-text-muted); }
.barra .ctx { font-family: var(--font-family-mono); color: var(--color-text-secondary); }
.barra .ctx strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.barra .spazio { flex: 1; }

.corpo { display: grid; grid-template-columns: auto 1fr auto; min-height: 0; }

/* -------------------------------------------------------------------- rail */
.rail {
  width: 208px; flex-shrink: 0;
  background: var(--color-bg-raised);
  border-right: var(--border-width-hairline) solid var(--color-border-default);
  overflow-y: auto; padding: var(--space-2) 0;
}
.rail a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); height: var(--density-control-height);
  color: var(--color-text-secondary); text-decoration: none;
  font-size: var(--font-size-sm);
  border-left: var(--border-width-emphasis) solid transparent;
}
.rail a:hover { background: var(--color-interaction-hover); color: var(--color-text-primary); }
.rail a[aria-current="page"] {
  color: var(--color-text-primary);
  border-left-color: var(--color-interaction-accent);
  background: var(--color-interaction-accent-wash);
}
.rail .conteggio {
  margin-left: auto; font-family: var(--font-family-mono);
  font-size: var(--font-size-micro); color: var(--color-text-muted);
}
.rail a[data-allarme="1"] .conteggio { color: var(--color-status-blocked); }

/* ---------------------------------------------------------------- surface */
.superficie {
  min-width: 0; overflow: auto; padding: var(--space-4);
  display: flex; flex-direction: column; align-items: stretch;
}
.superficie > * { flex: 0 0 auto; }
.superficie > .riempi { flex: 1 1 auto; min-height: 0; }
.superficie > header { margin-bottom: var(--space-3); }
.superficie > header h1 { font-size: var(--font-size-lg); }
.superficie > header .sub { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* -------------------------------------------------------------- inspector */
.ispettore {
  width: var(--density-inspector-width); flex-shrink: 0;
  background: var(--color-bg-overlay);
  border-left: var(--border-width-hairline) solid var(--color-border-default);
  overflow-y: auto; padding: var(--space-4);
}
.ispettore h2 {
  font-size: var(--font-size-base); font-family: var(--font-family-mono);
  word-break: break-all;
}
.ispettore .tipo {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
}
.ispettore section { margin-top: var(--space-4); }
.ispettore section > h3 {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.ispettore .rel a {
  display: block; padding: var(--space-1) 0; font-family: var(--font-family-mono);
  font-size: var(--font-size-xs); color: var(--color-interaction-link);
  text-decoration: none; word-break: break-all;
}
.ispettore .rel a:hover { text-decoration: underline; }
.ispettore dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-1); }
.ispettore dt {
  font-size: var(--font-size-micro); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: var(--font-tracking-label);
}
.ispettore dd {
  margin: 0 0 var(--space-2) 0; font-family: var(--font-family-mono);
  font-size: var(--font-size-xs); word-break: break-word;
}

/* ============================================================ state grammar
   Never colour alone: hue + glyph + word, always all three. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs); color: var(--stato-colore, var(--color-text-secondary));
  white-space: nowrap;
}
.badge .glifo { font-size: var(--font-size-xs); line-height: 1; }
.badge[data-stato="DESIGNED"] { color: var(--color-text-secondary); }
.riga-stato { border-left: var(--border-width-emphasis) solid var(--stato-colore, transparent); }
.badge-pieno {
  background: var(--stato-colore); color: var(--color-text-inverse);
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

/* ================================================================== tables */
table.densa {
  width: 100%; border-collapse: collapse; font-size: var(--font-size-sm);
  background: var(--color-bg-raised);
}
table.densa thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-bg-overlay); text-align: left;
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-emphasis) solid var(--color-border-strong);
  white-space: nowrap;
}
table.densa tbody td {
  padding: 0 var(--space-3); height: var(--density-row-compact);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
  vertical-align: middle;
}
table.densa tbody tr:nth-child(even) { background: var(--color-bg-inset); }
table.densa tbody tr:hover { background: var(--color-interaction-hover); }
table.densa tbody tr[aria-selected="true"] { background: var(--color-interaction-accent-wash); }
table.densa td.num, table.densa th.num { text-align: right; }
table.densa .id {
  font-family: var(--font-family-mono); color: var(--color-text-primary);
  cursor: pointer; text-decoration: none;
}
table.densa .id:hover { text-decoration: underline; }
.tab-wrap { overflow-x: auto; border: var(--border-width-hairline) solid var(--color-border-default); }
td.tronca, .tronca {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A canonical identifier must never break mid-token: a wrapped `link:dev:fast-dev:core`
   reads as two different objects. */
table.densa .id, table.densa td.mono, .coda .soggetto, .ispettore h2 {
  white-space: nowrap; word-break: normal;
}

/* ================================================================ controls */
button, .btn {
  height: var(--density-control-height); padding: 0 var(--space-3);
  background: transparent; color: var(--color-text-primary);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm); font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
button:hover { background: var(--color-interaction-hover); }
button.primario {
  background: var(--color-interaction-accent); color: var(--color-text-inverse);
  border-color: var(--color-interaction-accent); font-weight: var(--font-weight-medium);
}
button.primario:hover { background: var(--color-interaction-link); }
button[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
input, select, textarea {
  height: var(--density-control-height); padding: 0 var(--space-2);
  background: var(--color-bg-base); color: var(--color-text-primary);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-sm); font: inherit; width: 100%;
}
textarea { height: auto; padding: var(--space-2); font-family: var(--font-family-mono); }
label { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ============================================================ action queue */
.coda { display: flex; flex-direction: column; gap: var(--border-width-hairline); }
.coda .voce {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3);
  align-items: center; padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised);
  border-left: var(--border-width-emphasis) solid var(--stato-colore);
}
.coda .voce .soggetto {
  font-family: var(--font-family-mono); font-size: var(--font-size-sm);
  word-break: break-all;
}
.coda .voce .dettaglio {
  font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px;
}
.coda .voce .azione { text-align: right; }
.coda-gruppo > summary { gap: var(--space-3); }
.coda-gruppo > summary .n { text-transform: uppercase; letter-spacing: var(--font-tracking-label); }
.coda-gruppo[data-stato] > summary {
  border-left: var(--border-width-emphasis) solid var(--stato-colore);
}
.coda .voce .attore {
  font-size: var(--font-size-micro); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: var(--font-tracking-label);
}

/* =============================================================== continuity */
.continuita {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--border-width-hairline); background: var(--color-border-subtle);
  border: var(--border-width-hairline) solid var(--color-border-default);
  margin-bottom: var(--space-4);
}
.continuita div { background: var(--color-bg-raised); padding: var(--space-2) var(--space-3); }
.continuita dt {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
}
.continuita dd {
  margin: 2px 0 0; font-family: var(--font-family-mono); font-size: var(--font-size-base);
}

/* ================================================================== canvas */
.canvas-wrap {
  position: relative; background: var(--color-bg-sunken);
  border: var(--border-width-hairline) solid var(--color-border-default);
  height: 100%; min-height: 340px;
}
.riempi { display: flex; flex-direction: column; }
.riempi > * { flex: 1 1 auto; min-height: 0; }
.canvas-scroll { width: 100%; height: 100%; overflow: auto; }
.canvas-scroll svg { display: block; cursor: grab; }
.canvas-scroll svg:active { cursor: grabbing; }
.canvas-scroll:focus-visible { outline-offset: -2px; }
.canvas-wrap { display: flex; flex-direction: column; }
.canvas-strumenti {
  flex: 0 0 auto; z-index: 3; order: -1;
  display: flex; gap: var(--space-1); justify-content: flex-end; align-items: center;
  background: var(--color-bg-overlay);
  border-bottom: var(--border-width-hairline) solid var(--color-border-default);
  padding: var(--space-1) var(--space-2);
}
.canvas-scroll { flex: 1 1 auto; }
.canvas-strumenti button { height: 26px; padding: 0 var(--space-2); font-size: var(--font-size-xs); }
.canvas-strumenti .zoom-val {
  font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  color: var(--color-text-secondary); min-width: 4.5ch; text-align: center;
  align-self: center; font-variant-numeric: tabular-nums;
}
.nodo rect { fill: var(--color-topology-node-device); stroke: var(--color-topology-node-stroke); }
.nodo[data-sel="1"] rect { stroke: var(--color-interaction-accent); stroke-width: 2; }
.nodo text { fill: var(--color-text-primary); font-family: var(--font-family-mono); }
.nodo .sub { fill: var(--color-text-muted); }
.nodo { cursor: pointer; }
.arco { stroke: var(--color-topology-link-default); fill: none; }
.arco-etichetta {
  fill: var(--color-text-secondary); font-family: var(--font-family-mono);
  font-size: var(--font-size-micro);
}
.gruppo-bordo { fill: var(--color-topology-group-fill); stroke: var(--color-topology-group-stroke); }
.gruppo-nome {
  fill: var(--color-text-muted); font-size: var(--font-size-micro);
  text-transform: uppercase; letter-spacing: var(--font-tracking-label);
}
.porta-stub {
  fill: var(--color-topology-port-fill); stroke: var(--color-topology-port-stroke);
}
.porta-testo { fill: var(--color-text-secondary); font-family: var(--font-family-mono); }

/* ==================================================================== rack */
.rack-fila { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.rack {
  background: var(--color-bg-sunken); padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
}
.rack h3 { font-size: var(--font-size-sm); font-family: var(--font-family-mono); }
.rack .cap { font-size: var(--font-size-micro); color: var(--color-text-muted); }
.rack .vuoto {
  margin-top: var(--space-3); padding: var(--space-3);
  border: var(--border-width-hairline) dashed var(--color-border-strong);
  color: var(--color-text-secondary); font-size: var(--font-size-xs); max-width: 240px;
}

/* ================================================================= banners */
.banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border: var(--border-width-hairline) solid var(--stato-colore);
  border-left-width: var(--border-width-emphasis);
  background: var(--color-bg-raised); font-size: var(--font-size-sm);
}
.banner.obsoleta { border-color: var(--color-status-stale); }
body[data-obsoleta="1"] .superficie { opacity: var(--opacity-stale); }
body[data-obsoleta="1"] .banner.obsoleta { opacity: 1; }

.vuoto-stato {
  padding: var(--space-8) var(--space-4); text-align: center;
  color: var(--color-text-secondary);
}
.vuoto-stato p { max-width: 52ch; margin: 0 auto var(--space-4); }

/* ================================================================= palette */
.palette-sfondo {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg-sunken) 82%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.palette {
  width: min(640px, 92vw); background: var(--color-bg-overlay);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md); box-shadow: var(--elevation-overlay); overflow: hidden;
}
.palette input { border: 0; border-radius: 0; height: 48px; font-size: var(--font-size-md); }
.palette ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.palette li {
  padding: var(--space-2) var(--space-3); cursor: pointer;
  display: flex; gap: var(--space-3); align-items: baseline;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.palette li[aria-selected="true"] { background: var(--color-interaction-accent-wash); }
.palette li .oid { font-family: var(--font-family-mono); }
.palette li .tipo { font-size: var(--font-size-micro); color: var(--color-text-muted); }

/* ================================================================== errors */
.errore {
  border: var(--border-width-hairline) solid var(--color-status-blocked);
  border-left-width: var(--border-width-emphasis);
  background: var(--color-bg-raised); padding: var(--space-3); margin-bottom: var(--space-3);
}
.errore h3 { color: var(--color-status-blocked); font-size: var(--font-size-base); }
.errore dl { margin: var(--space-2) 0 0; }
.errore dt {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.errore dd { margin: 0; font-size: var(--font-size-xs); }

/* ================================================================ sections */
.blocco { margin-bottom: var(--space-6); }
.blocco > h2 {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
  margin-bottom: var(--space-2); padding-bottom: var(--space-1);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
details.gruppo { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
details.gruppo > summary {
  cursor: pointer; padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised); display: flex; gap: var(--space-3); align-items: center;
  font-family: var(--font-family-mono); font-size: var(--font-size-sm);
}
details.gruppo > summary .n {
  margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-micro);
}
.passo {
  padding: var(--space-3); background: var(--color-bg-base);
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
  border-left: var(--border-width-emphasis) solid var(--stato-colore, transparent);
}
.passo .pid { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.passo .istruzione { margin: var(--space-2) 0; }
.passo dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-1) var(--space-3); }
.passo dt { font-size: var(--font-size-micro); color: var(--color-text-muted); }
.passo dd { margin: 0; font-size: var(--font-size-xs); }
.passo code, .passo .val { font-family: var(--font-family-mono); }

/* =========================================================== motion / a11y */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
.solo-lettore {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================== responsive
   Not a shrunk desktop: each class gets the workflow the contract froze. */
@media (max-width: 1100px) {           /* TABLET - professional / field workspace */
  .rail { width: 76px; }
  .rail a {
    flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-1);
    height: 56px; text-align: center; line-height: 1.15;
  }
  .rail a .etichetta { font-size: var(--font-size-micro); }
  .rail .conteggio { margin-left: 0; }
  .ispettore { width: 300px; }
  table.densa tbody td { height: var(--density-row-standard); }
  button, .btn, input, select { min-height: 44px; }
  button, .btn { padding: 0 var(--space-4); }
  /* inline identifiers: the row is the primary target, the id is secondary, so it takes the
     WCAG 2.2 AA minimum rather than the enhanced 44px that would wreck engineering density */
  table.densa .id, .rel a, .coda a.id {
    display: inline-flex; align-items: center; min-height: 26px;
  }
  .barra .marchio { min-height: 44px; align-items: center; }
  .canvas-wrap { height: calc(100vh - 260px); }
}
/* A six-column engineering table needs more than ~900 px. Below that the row becomes a
   labelled card so that EVERY column survives - including the state column, which was the
   one being pushed off the right edge on a tablet in portrait. The shell itself stays as the
   frozen device contract defines it: side rail and side inspector down to 760 px. */
@media (max-width: 900px) {            /* TABLET PORTRAIT + MOBILE - card rows */
  table.densa thead { display: none; }
  table.densa tbody tr {
    display: block; padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
    border-left: var(--border-width-emphasis) solid var(--stato-colore, transparent);
  }
  table.densa tbody td {
    display: grid; grid-template-columns: 14ch 1fr; gap: var(--space-3);
    height: auto; padding: 2px 0; border: 0; min-height: 0;
  }
  table.densa tbody td::before {
    content: attr(data-col); font-size: var(--font-size-micro);
    text-transform: uppercase; letter-spacing: var(--font-tracking-label);
    color: var(--color-text-muted);
  }
  table.densa td.num, table.densa th.num { text-align: left; }
  td.tronca, .tronca { max-width: none; white-space: normal; }
  .rack-fila { gap: var(--space-4); }
}

@media (max-width: 760px) {            /* MOBILE - field & project companion shell */
  .corpo { grid-template-columns: 1fr; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: auto;
    display: flex; overflow-x: auto; z-index: 20; padding: 0;
    border-right: 0; border-top: var(--border-width-hairline) solid var(--color-border-default);
    scroll-snap-type: x proximity;
  }
  .rail a { flex: 0 0 auto; flex-direction: row; gap: var(--space-2);
            padding: 0 var(--space-3); height: 52px; border-left: 0;
            border-top: var(--border-width-emphasis) solid transparent;
            scroll-snap-align: start; }
  .rail a[aria-current="page"] { border-left-color: transparent;
                                 border-top-color: var(--color-interaction-accent); }
  .rail a .etichetta { display: inline; font-size: var(--font-size-micro); }
  .rail .conteggio { margin-left: 0; }
  .ispettore {
    position: fixed; inset: auto 0 52px 0; width: auto; max-height: 62vh; z-index: 21;
    border-left: 0; border-top: var(--border-width-emphasis) solid var(--color-border-strong);
    box-shadow: var(--elevation-overlay);
  }
  .superficie { padding: var(--space-3) var(--space-3) 76px; }
  .barra .ctx .nome-lungo { display: none; }
  .continuita { grid-template-columns: repeat(2, 1fr); }
  .coda .voce { grid-template-columns: 1fr; }
  .coda .voce .azione { text-align: left; }
}

/* ================================================================== accesso */
.accesso-pagina {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--density-nav-height) - var(--space-8));
  padding: var(--space-6);
}
.accesso {
  width: min(380px, 92vw);
  background: var(--color-bg-raised);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.accesso h1 {
  font-size: var(--font-size-lg); letter-spacing: var(--font-tracking-wordmark);
  font-weight: var(--font-weight-bold);
}
.accesso .sub {
  color: var(--color-text-muted); font-size: var(--font-size-xs);
  margin: 0 0 var(--space-4);
}
.accesso label { margin-top: var(--space-2); }
.accesso button { margin-top: var(--space-4); justify-content: center; }
.accesso .nota {
  color: var(--color-text-muted); font-size: var(--font-size-micro);
  margin: var(--space-4) 0 0; line-height: 1.5;
}
body[data-autenticato="0"] .rail,
body[data-autenticato="0"] #apri-palette,
body[data-autenticato="0"] .barra .sep,
body[data-autenticato="0"] .barra .ctx { display: none; }
body[data-autenticato="0"] .corpo { grid-template-columns: 1fr; }
.utente-box { display: flex; align-items: center; gap: var(--space-2); }
.utente-box .utente {
  font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}
.utente-box .ruolo {
  font-size: var(--font-size-micro); text-transform: uppercase;
  letter-spacing: var(--font-tracking-label); color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .utente-box .ruolo { display: none; }
  .barra { gap: var(--space-2); padding: 0 var(--space-2); }
  .barra #apri-palette { padding: 0 var(--space-2); }
  .barra #apri-palette kbd { display: none; }
  .utente-box .utente { max-width: 8ch; overflow: hidden; text-overflow: ellipsis;
                        white-space: nowrap; }
  /* on the smallest screens the project identity yields before the state does */
  .barra .ctx { max-width: 14ch; }
  .barra .wordmark { display: none; }
}