/* ---------------------------------------------------------
   18. Grouped navigation: active area + section sub-nav
   --------------------------------------------------------- */

/* Active top-level area in the primary nav: soft accent fill + accent ink
   text + weight 650 (no accent bar — docs/ui/DESIGN_CONTRACT.md §0.4). */
.site-nav__list .is-active > a,
.site-nav__list a[aria-current="page"],
.site-nav__list a[aria-current="location"] {
  font-weight: 650;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
}

/* Section sub-nav (tabs) shown under the primary nav for the active area.
   Areas with many subtabs (e.g. Conformità: 6-11 items depending on active
   modules) used to `flex-wrap: wrap`, which ate 2-5 extra vertical rows —
   against the tight-chrome direction, and at 390px it wrapped into a ~220px
   tall stack with no way to tell it wasn't the whole nav. Single row,
   horizontal scroll on overflow instead (same pattern as .site-nav in
   responsive.css): no wrap, no page-level overflow, a cut-off next item is
   the scroll affordance. */
.section-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  /* Flush strip under the header (Registro chrome): full-width surface with
     a bottom hairline, links aligned to the centered content column via the
     max() inline padding — not a floating boxed island. */
  margin: 0;
  padding: var(--sp-2) max(var(--sp-4), calc((100% - var(--max-w)) / 2));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.section-nav::-webkit-scrollbar { display: none; }

.section-nav[data-scrollable="true"][data-scroll-end="false"]::after {
  content: "";
  position: sticky;
  right: 0;
  flex: 0 0 var(--sp-6);
  align-self: stretch;
  margin-left: calc(-1 * var(--sp-6));
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--color-surface));
}

/* Content-width, left-aligned tabs (docs/ui/UI_V3_PLAN.md L2): the old
   `flex: 1 0 auto` stretched every tab to fill the row, so 2-3 subtabs on a
   wide screen each spanned hundreds of pixels of dead centered padding
   (diagnosis D1). Tabs now size to their label; the row still scrolls
   horizontally instead of wrapping when there are many. */
.section-nav a {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  text-align: left;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.section-nav a:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

.section-nav a.is-active,
.section-nav a[aria-current="page"] {
  color: var(--accent-ink);
  font-weight: 650;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

@media (pointer: coarse) {
  .section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* DVR workspace — a two-column shell: a section-nav rail on the left and the
   compilation area on the right, so the document gets the full height/width.
   On narrow screens it collapses to a stacked layout with the nav as a
   horizontal underline strip. */
.dvr-workspace {
  margin: 0 0 var(--sp-4);
}

.dvr-workspace__main {
  min-width: 0; /* let wide tables shrink/scroll instead of overflowing the column */
}

/* DVR workspace internal tabs — secondary nav, subordinate to .section-nav.
   Visually lighter so the two navigation levels read as a hierarchy. */
.dvr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--color-border);
}

.dvr-tabs a {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.dvr-tabs a:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

.dvr-tabs a.is-active,
.dvr-tabs a[aria-current="page"] {
  color: var(--accent-ink);
  font-weight: 650;
  background: var(--accent-soft);
}

@media (min-width: 1024px) {
  .dvr-workspace {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Left rail: fixed-width vertical nav that stays in view while scrolling. */
  .dvr-tabs {
    flex: 0 0 11rem;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0 var(--sp-3) 0 0;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    position: sticky;
    top: var(--sp-4);
  }

  .dvr-tabs a {
    white-space: normal;
  }

  .dvr-tabs a:hover {
    background: var(--color-bg);
  }

  .dvr-tabs a.is-active,
  .dvr-tabs a[aria-current="page"] {
    background: var(--accent-soft);
  }

  .dvr-workspace__main {
    flex: 1 1 auto;
  }
}

/* DVR Riepilogo — "Completezza documento (art. 28)" panel. */
.art28-panel {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.art28-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.art28-panel__head h2 {
  font-size: var(--text-lg);
  margin: 0;
}

.art28-table {
  width: 100%;
  border-collapse: collapse;
}

.art28-table th,
.art28-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.art28-table th {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.art28-cell-icon {
  width: 2rem;
  text-align: center;
}

.art28-cell-rif {
  white-space: nowrap;
}

.art28-icon {
  font-weight: 700;
}

.art28-ok            { color: var(--st-ok); }
.art28-mancante      { color: var(--st-warn); }
.art28-non-tracciato { color: var(--color-text-muted); }

.art28-row--mancante { background: var(--st-warn-bg); }

.art28-nota {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Conformità export — header block, per-company picker and print caption. */
.export-header { margin-bottom: var(--sp-5); }

.export-company-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

.export-meta {
  margin: 0 0 var(--sp-4);
  color: var(--color-text-muted);
}

/* DVR Revisioni — superseded versions are dimmed in the history table. */
.version-row--superato {
  opacity: .7;
}

/* DVR Riepilogo — per-fascia breakdown (pure CSS bars, no JS). */
.fascia-breakdown {
  margin: var(--sp-5) 0;
}

.fascia-breakdown h2 {
  font-size: var(--text-md);
  margin-bottom: var(--sp-3);
}

.fascia-breakdown__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.fascia-breakdown__label {
  flex: 0 0 7rem;
  font-size: var(--text-sm);
}

.fascia-breakdown__bar {
  flex: 1 1 auto;
  height: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.fascia-breakdown__fill {
  display: block;
  height: 100%;
}

.fascia-breakdown__fill.fascia--basso      { background: var(--ch-ok); }
.fascia-breakdown__fill.fascia--medio      { background: var(--ch-warn); }
.fascia-breakdown__fill.fascia--alto       { background: var(--ch-bad); }
.fascia-breakdown__fill.fascia--molto-alto { background: var(--color-danger); }

.fascia-breakdown__count {
  flex: 0 0 2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Inline contextual help: native <details>, no JavaScript. */
.info {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: var(--text-sm);
  vertical-align: middle;
}
.info > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent-fill) 35%, var(--accent-soft));
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.info > summary::-webkit-details-marker { display: none; }
.info[open] > summary { background: var(--accent-fill); color: var(--on-accent); }
.info__body {
  position: relative;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  color: var(--color-text);
  max-width: 32rem;
}

/* Export dropdown: native <details>, no JavaScript.
   The summary acts as the trigger button; the panel appears below it.
   Right-align the panel so it never overflows the viewport on narrow screens. */
.export-menu {
  display: inline-block;
  position: relative;
}
.export-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  min-width: 10rem;
  padding: var(--sp-1) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
  white-space: nowrap;
}
.export-menu[open] > .export-menu__panel {
  display: block;
}
.export-menu__panel a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.export-menu__panel a:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}
@media (max-width: 400px) {
  .export-menu__panel {
    right: auto;
    left: 0;
    min-width: 8rem;
  }
}

/* A standalone help/guide page reads better with constrained line length. */
.guida { max-width: 50rem; }
.guida h2 { margin-top: var(--sp-6); }
.guida h3 { margin-top: var(--sp-5); }