@layer components {
  /* ── Header sticky di pratica ── */
  .pv-header {
    position: sticky;
    inset-block-start: var(--nav-height);
    z-index: 15;
    background: var(--color-canvas);
    border-block-end: var(--border);
    margin-inline: calc(var(--main-padding) * -1);
    padding: var(--space-3) var(--main-padding);
    margin-block-end: var(--space-4);
    box-shadow: var(--shadow-sm);
  }

  .pv-header__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .pv-header__row + .pv-header__row {
    margin-block-start: var(--space-2);
  }

  .pv-header .back-link {
    margin: 0;
    flex-shrink: 0;
  }

  .pv-header__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The practice number as a protocol stamp: it is literally the number the
     file is archived under, so it is treated as such instead of as ordinary
     text. Double border and slight rotation recall an ink stamp on a paper
     folder. */
  .pv-header__number {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2);
    font-weight: var(--weight-bold);
    /* From a reference next to the title to the whole page heading
       (ADR-0005): the stamp stays, the size goes up to something legible
       on its own. */
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-timbro);
    border: 1.5px solid var(--color-timbro);
    border-radius: var(--radius-sm);
    transform: rotate(-2deg);
  }

  .pv-header__number::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid var(--color-timbro);
    border-radius: 1px;
    opacity: 0.55;
  }

  .pv-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-inline-start: auto;
  }

  .pv-header__client {
    margin-inline-start: var(--space-3);
    color: var(--color-ink);
  }

  .pv-header__accident {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
  }

  .pv-header__menu .pv-panel__menu-list { inline-size: max-content; }

  /* ── Claim tabs ── the practices of the same claim (ADR-0001), above the
     header; shown only when there is more than one. */
  .pv-tree {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-end: var(--space-3);
    border-block-end: var(--border-light);
  }

  .pv-tree__tab {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;

    &:hover { color: var(--color-ink); }

    &.is-current {
      border-block-end-color: var(--color-primary);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  /* ── Section tabs ── inside the practice_section frame. */
  .pv-sections {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-end: var(--space-5);
    border-block-end: var(--border);
  }

  .pv-sections__tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-decoration: none;

    &:hover { color: var(--color-ink); }

    &.is-current {
      border-block-end-color: var(--color-primary);
      color: var(--color-primary);
      font-weight: var(--weight-semibold);
    }
  }

  .pv-sections__count {
    min-inline-size: 1.25rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-align: center;
  }

  .pv-alert {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
  }
  .pv-alert--danger {
    background: var(--color-negative-bg);
    border: 1px solid var(--color-negative-border);
    color: var(--color-negative);
  }
  .pv-alert--warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning);
  }
  .pv-alert strong {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-2xs);
  }

  /* ── The summary, layout D ── read top to bottom on the left, the status
     column on the right; one column on a narrow screen, status first. */
  .pv-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--space-6);
    align-items: start;
  }

  .pv-summary__main { min-inline-size: 0; }

  .pv-summary__heading {
    margin-block: var(--space-5) var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;

    &:first-of-type { margin-block-start: 0; }
  }

  @media (max-width: 64rem) {
    .pv-summary { grid-template-columns: 1fr; }
    .pv-rail { order: -1; }
  }

  /* The position in figures. */
  .pv-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .pv-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    padding: var(--panel-pad-y) var(--space-4);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    color: inherit;
    text-decoration: none;
  }

  .pv-figure--link:hover { border-color: var(--color-primary); }
  .pv-figure__label { color: var(--color-ink-muted); font-size: var(--text-xs); }
  .pv-figure__value { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  .pv-figure__note { color: var(--color-ink-muted); font-size: var(--text-xs); }

  /* Each company against its share of the claim, under the figures. */
  .pv-shares { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
  .pv-shares__row { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

  /* The parties in brief, side by side. */
  .pv-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .pv-party {
    padding: var(--panel-pad-y) var(--space-4);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
  }

  .pv-party__title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-block-end: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);

    a { font-size: var(--text-xs); font-weight: var(--weight-normal); }
  }

  .pv-party p { margin: 0; font-size: var(--table-text); }

  .pv-party__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-1);
    font-size: var(--table-text);

    & + & { border-block-start: var(--border-light); }
  }

  /* The status column. */
  .pv-rail {
    display: grid;
    gap: var(--space-3);
    font-size: var(--text-sm);
  }

  .pv-rail__block {
    display: grid;
    gap: var(--space-1-5);
    padding: var(--panel-pad-y) var(--space-4);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);

    p { margin: 0; }
  }

  .pv-rail__title {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pv-rail__track { display: flex; justify-content: space-between; gap: var(--space-2); }

  .pv-rail__deadline {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-2);
    align-items: baseline;

    &.is-overdue .pv-rail__days { color: var(--color-negative); font-weight: var(--weight-semibold); }
  }

  .pv-rail__days { color: var(--color-ink-muted); }

  .pv-rail__event {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);

    > :last-child { flex: none; white-space: nowrap; }
  }

  /* The status column in one line, on the section pages. */
  .pv-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-block-end: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    font-size: var(--text-sm);

    .is-overdue { color: var(--color-negative); }
  }

  .pv-strip__todo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;

    .pv-strip__label { color: inherit; }
  }

  /* The other open deadlines, counted: red when one of them is overdue. */
  .pv-strip__more {
    margin-inline-start: var(--space-1);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;

    &.is-overdue { color: var(--color-negative); }
    &:hover { text-decoration: underline; }
  }

  .pv-strip__label {
    margin-inline-end: var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
  }

  /* ── Drawer "Storia della pratica" ──
     Fuori dal flusso della pagina: non contende spazio orizzontale al
     contenuto principale. Fissato al bordo destro della finestra, con
     una linguetta (pv-drawer__handle) sempre visibile che sporge a
     sinistra del corpo del drawer. Aperto: l'intero blocco scorre a
     translateX(0). Chiuso: trasla a destra di quanto basta a lasciare
     visibile solo la linguetta — il collasso si muove quindi da
     sinistra verso destra.
     --pv-drawer-top: impostata da practice_drawer_controller.js
     misurando il bordo inferiore reale di .pv-header (sticky, altezza
     variabile — titolo e azioni possono andare a capo). Un valore fisso
     in CSS sottostimerebbe l'altezza in quei casi e il drawer aperto
     finirebbe parzialmente sotto l'header; il fallback qui sotto vale
     solo per il primo istante prima che il JS misuri. z-index sopra
     l'header (15) per lo stesso motivo. */
  .pv-drawer {
    position: fixed;
    inset-block-start: var(--pv-drawer-top, var(--nav-height));
    inset-inline-end: 0;
    inline-size: min(20rem, 85vw);
    max-block-size: calc(100vh - var(--pv-drawer-top, var(--nav-height)) - var(--space-4));
    z-index: 20;
    transform: translateX(calc(100% - 2.75rem));
    transition: transform var(--transition-base);
  }

  .pv-drawer.pv-drawer--open { transform: translateX(0); }

  .pv-drawer__handle {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: 0;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: var(--border);
    border-inline-end: none;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    color: var(--color-ink-muted);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  .pv-drawer__handle:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
  }

  .pv-drawer__handle-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .pv-drawer__body {
    margin-inline-start: 2.75rem;
    max-block-size: calc(100vh - var(--pv-drawer-top, var(--nav-height)) - var(--space-4));
    overflow-y: auto;
    box-shadow: var(--shadow-md);
  }

  .pv-drawer__body .pv-panel { margin-block-end: 0; }

  @media (max-width: 64rem) {
    .pv-drawer { inline-size: min(20rem, 100vw - 2.75rem); }
  }

  /* ── Panel container ── */
  .pv-panel {
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-block-end: var(--space-4);
    background: var(--color-canvas);
    box-shadow: var(--shadow-sm);
  }

  .pv-panel__hd {
    background: var(--color-accent-bar);
    color: var(--color-ink-inverted);
    padding: var(--space-1-5) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    user-select: none;
  }

  .pv-panel__hd-actions { display: flex; align-items: center; gap: var(--space-3); }

  .pv-panel__hd a:where(:not(.btn)) {
    color: var(--color-ink-inverted);
    text-decoration: none;
    opacity: 0.75;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    transition: opacity var(--transition-fast);
  }
  .pv-panel__hd a:where(:not(.btn)):hover { opacity: 1; }

  .pv-panel__hd .hd-add {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    opacity: 1;
    line-height: 1;
    color: var(--color-accent-bar-add);
  }

  .pv-panel__hd .badge { font-size: var(--text-3xs); }

  /* ── Menu dei fatti registrabili ("Registra un fatto", testata della
     pratica) ── dropdown_controller, a list on a light surface. The items
     are qualified with their container: inside a dark panel header,
     .pv-panel__hd a (ink-inverted) would otherwise win on specificity and
     make them unreadable on the light menu. */
  .pv-panel__menu { position: relative; }

  .pv-panel__menu-list {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: 20;
    min-inline-size: 15rem;
    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1);
    margin-block-start: var(--space-1);
    /* Some thirty facts: the list scrolls rather than leave the screen. */
    max-block-size: 70vh;
    overflow-y: auto;
    display: none;

    &.is-open { display: block; }
  }

  .pv-panel__menu-group {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-3xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-subtle);
  }

  :is(.pv-panel__hd, .pv-header__menu) .pv-panel__menu-item {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    opacity: 1;
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover {
      background-color: var(--color-surface);
      color: var(--color-ink);
    }
  }

  .pv-panel__body {
    padding: var(--panel-pad-y) var(--space-4);
    font-size: var(--text-xs);
  }

  /* ── Two-panel split layout ── */
  .pv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .pv-split .pv-panel { margin-block-end: 0; }

  /* ── Dati pratica: griglia dei soli campi compilati.
     Niente colonne fisse: si adatta a quanti campi sono presenti (da 2
     a una decina) e usa lo spazio recuperato per una taglia più leggibile
     dei valori, invece dell'elenco fitto label:valore di prima. */
  .dati-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-4) var(--space-6);
    padding: var(--space-4) var(--space-5);
  }

  .dati-item { min-inline-size: 0; }

  .dati-item__label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-subtle);
    margin-block-end: 0.2rem;
  }

  .dati-item__value {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    line-height: 1.35;
  }
  .dati-item__value .badge { vertical-align: middle; }

  /* Il modello di servizio è l'unico valore derivato di questa griglia:
     la nota dice che non si modifica dal form "Modifica" dell'header,
     dove chi lo cercasse non lo troverebbe. Misure allineate a
     .dati-item__label qui sopra, non scelte a parte. */
  .dati-item__note {
    display: block;
    font-size: var(--text-2xs);
    color: var(--color-ink-subtle);
    margin-block-start: 0.2rem;
  }

  /* ── Description band ── */
  .descrizione-band {
    background: var(--color-surface);
    border-block-start: var(--border);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-xs);
  }
  .descrizione-band strong {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-ink-muted);
    display: block;
    margin-block-end: 0.15rem;
  }

  /* ── Subject table ── */
  .subj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    border-block-start: var(--border);
  }
  .subj-table thead tr {
    background: var(--color-surface);
    border-block-end: var(--border);
  }
  .subj-table th {
    padding: var(--space-1) var(--space-3);
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-ink-subtle);
  }
  .subj-table th:first-child { width: 1.8rem; }
  .subj-table td {
    padding: var(--row-pad-y) var(--space-3);
    color: var(--color-ink);
    font-weight: var(--weight-medium);
    vertical-align: middle;
    border-block-end: var(--border);
  }
  .subj-table tr:last-child td { border-block-end: none; }
  .subj-table .td-num {
    width: 2rem;
    color: var(--color-ink-subtle);
    font-size: var(--text-2xs);
  }
  .subj-table .td-small { font-size: var(--text-2xs); }
  .subj-table .td-actions {
    width: 3.5rem;
    text-align: right;
  }
  .subj-table .td-actions a,
  .subj-table .td-actions button {
    cursor: pointer;
    margin-inline-start: var(--space-1);
  }
  /* Specificità maggiore di ".subj-table .td-actions a" sopra — serve per
     vincere il suo padding e far apparire il link Modifica come icon-button
     (.btn--icon) compatto invece che come link testuale. */
  .subj-table .td-actions .btn--icon {
    padding: 0.3em;
    font-size: var(--text-xs);
  }
  .subj-table__empty td {
    padding: var(--space-3);
    color: var(--color-ink-subtle);
    font-style: italic;
    font-size: var(--text-2xs);
  }

  .pv-subject-company {
    font-size: var(--text-2xs);
    color: var(--color-ink-subtle);
  }

  /* ── Role grid ── */
  .role-grid { border-block-start: var(--border); }

  /* Intestazione di gruppo (Assicurazione / Professionisti / Veicolo):
     spezza la sequenza di righe in zone leggibili invece di lasciarle
     tutte allineate sotto la stessa barra scura. */
  .role-grid__group {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-subtle);
    background: var(--color-surface);
    border-block-end: var(--border-light);
  }
  .role-grid__group:not(:first-child) { border-block-start: var(--border); }

  .rg-row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    border-block-end: var(--border);
    min-height: 2.2rem;
  }
  .rg-row:last-child { border-block-end: none; }

  .rg-label {
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
    border-inline-start: 3px solid var(--color-accent-bar);
    padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) - 3px);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    line-height: 1.3;
  }

  .rg-value {
    padding: var(--space-1) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }

  /* The empty roles of a side, folded into one row (Fase 2): the summary
     names them, opening it shows their search fields. */
  .rg-add-roles {
    border-block-end: var(--border);

    &:last-child { border-block-end: none; }
    &[open] .rg-add-roles__summary { border-block-end: var(--border); }
    &[open] .rg-add-roles__icon { transform: rotate(45deg); }
  }

  .rg-add-roles__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &:hover { background: var(--color-surface); }

    .text-muted { font-weight: var(--weight-normal); }
  }

  .rg-add-roles__icon {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    align-self: center;
    transition: transform var(--transition-fast);
  }

  /* Riga combobox di ricerca + bottone icona "aggiungi" affiancati. */
  .rg-add-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Contenuto che il trigger "+" rivela (combobox + link "nuovo
     contatto") — vedi reveal_controller.js. Il trigger stesso ora vive
     in .rg-actions, accanto alle altre azioni dell'ultimo professionista
     (vedi needs_reveal_trigger in _role_row.html.erb), non più qui.
     display:contents: i figli restano flex item diretti di .rg-add-row,
     senza introdurre un box in più nel layout. */
  .rg-add-toggle__content {
    display: contents;
  }

  /* Wraps the role-combobox input; anchors the absolutely-positioned .combobox__results */
  .rg-combobox {
    position: relative;
  }

  /* padding-inline-start/end restano a carico di .combobox__input (icona
     di ricerca + spazio per il toggle): qui solo block, per non
     sovrascriverli con lo shorthand "padding". Larghezza a 13.5rem, un
     filo più della vecchia 12rem, per lasciare al testo lo spazio tolto
     da icona e freccia. */
  .rg-combobox__input {
    inline-size: 13.5rem;
    padding-block: var(--space-1);
    font-size: var(--text-xs);
  }

  /* Select diretto per l'istruttore — stessa larghezza della combobox di
     ricerca usata dagli altri ruoli, per coerenza visiva nella riga. */
  .rg-instructor-form {
    inline-size: 12rem;
  }
  .rg-instructor-form select.input {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  .rg-value--empty {
    color: var(--color-ink-subtle);
    font-style: italic;
    font-size: var(--text-2xs);
  }

  /* Contenitore verticale per 0..N participant sotto lo stesso ruolo,
     più il combobox/link per aggiungerne un altro (vedi ADR-0002). */
  .rg-value--list {
    padding: var(--space-1) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  /* Riparatore convenzionato con la compagnia che paga (vedi
     Contact#agreed_with_any?): un conflitto d'interessi implicito, non
     un'informazione neutra — la stessa compagnia che risarcisce paga
     anche il riparatore. Deve restare evidente ("warning" è corretto):
     tinge l'intera cella valore del ruolo (non solo il box del nome),
     uno sfondo ambra tenue (color-mix, non un bordo duro) + il badge col
     triangolo di allerta sul partecipante coinvolto. */
  .rg-value--list--conflict {
    background-color: color-mix(in srgb, var(--color-warning) 14%, transparent);
  }

  .rg-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    border-radius: var(--radius-sm);
  }

  /* Raggruppa combobox/nome + badge di allerta come un unico blocco:
     senza, lo space-between di .rg-participant li avrebbe distribuiti
     su tutta la riga invece di tenere il badge a ridosso della
     combobox. min-inline-size: 0 lascia che il testo tronchi invece di
     spingere .rg-actions fuori dalla riga. */
  .rg-participant__main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .rg-conflict-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5em;
    block-size: 1.5em;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    flex-shrink: 0;
    cursor: default;

    .icon {
      inline-size: 0.8em;
      block-size: 0.8em;
    }
  }

  .rg-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
  }

  .linked-practices-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .linked-practices-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--text-sm);
  }

  /* Fase, giorni in fase e badge scadenze/stallo di un'altra pratica
     dell'albero (§3c del piano processo-risarcitorio) — riga a sé, non
     impilata verticalmente come gli altri figli di .linked-practices-list
     li (che è flex-direction: column). */
  .linked-practice-phase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
  }

  /* Participant di sola lettura delle altre pratiche dell'albero — vedi
     ADR-0002. Nessuna azione: per modificare si naviga sulla pratica. */
  .linked-practice-participants {
    list-style: none;
    padding-inline-start: var(--space-3);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--text-xs);
  }

  /* ── Responsive ── */
  @media (max-width: 64rem) {
    .pv-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 40rem) {
    .pv-header__actions {
      margin-inline-start: 0;
      inline-size: 100%;
    }
  }
}