/* =======================================================================
   DOWNLOADS — glass card + filter pills + responsive grid + hover “wow”
   ======================================================================= */

/* Card container — Surface tier 1 (sess.25 task #3, pattern Linear).
   Bordo rgba + microelevation + accent brand left identifier.
   Auto-reattivo light/dark via tokens. */
.downloads-card.widget.widget--glass-pro{
  --_x: var(--page-x, 32px);
  width: min(var(--content-w, 1204px), calc(100% - (var(--_x) * 2)));
  margin: 28px auto;
  border-radius: 22px;
  position: relative;
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  /* Drop microelevation + accent brand left (entrambi via box-shadow per layering). */
  box-shadow:
    var(--ds-surface-1-accent),
    var(--ds-surface-1-shadow);
  z-index: 0;
}

.downloads-card .dl-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px 8px; border-bottom: 1px solid rgba(0,0,0,.07); }
/* Riga titolo + pulsante "Tool esteso" (button a dx del titolo, come gli altri widget).
   NB: niente min-width:0 → su colonna stretta (>1850) il titolo non si schiaccia. */
.dl-head-top{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dl-head-top .dl-extend-cta{ margin-left: auto; }

/* Title — match specs-title: accent bar + Oswald uppercase */
.downloads-card .dl-title{
  margin: 0;
  /* Proprietà separate invece di font shorthand: Chrome non parsava clamp() nella shorthand */
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(.88rem, 1vw + .5rem, 1.05rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
  padding-left: 14px;
  position: relative;
}
.downloads-card .dl-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 32px; /* uguale a DMX/ACC span bar */
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4B532, #F3E955);
}
body.ds-dark .downloads-card .dl-title{
  color: rgba(255,255,255,.78);
}

.downloads-card .dl-controls{ display:flex; align-items:center; gap:12px; }
.downloads-card .dl-filter{ display:flex; flex-wrap:wrap; gap:8px; }

/* filter pills — flat (sess.25 task #3 step5), no drop shadow */
.dl-filter .pill{
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; box-sizing: border-box;
  padding: 0 .80rem; border-radius: 999px;
  background: var(--ds-btn-toggle-off-bg, rgba(255,255,255,.72));
  border: 1px solid var(--ds-btn-toggle-off-bd, rgba(0,0,0,.09));
  font: 600 .78rem/1 "Oswald", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ds-c-text-secondary, rgba(0,0,0,.72)); cursor: pointer;
  box-shadow: none;
  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    border-color 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
@media (hover: hover){
  .dl-filter .pill:hover{
    background: rgba(244,181,50,.12);
    border-color: rgba(244,181,50,.40);
  }
}
.dl-filter .pill.is-active{
  background: #F4B532;
  border-color: #C9A800;
  color: #111;
  /* Glow ambra subtle, no drop shadow legacy */
  box-shadow: 0 0 0 1px rgba(201,168,0,0.30), 0 2px 8px rgba(255,209,0,0.22);
}

/* body */
.downloads-card .dl-body{ padding: 8px 16px 16px; }
.downloads-card .dl-state{ padding:16px; font: 600 13px/1.3 Oswald, system-ui, sans-serif; text-transform: uppercase; opacity:.7; }

/* grid */
.dl-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}

/* card — Surface tier 2 (sess.25 task #3, pattern Linear).
   Nested element dentro .downloads-card. Auto-reattivo light/dark. */
.dl-item{
  position: relative;     /* sess.26 Tier 1.3: ancoraggio share btn assoluto */
  display:grid; grid-template-columns: 40px 1fr; grid-template-rows:auto auto; column-gap:10px;
  padding:12px 14px; padding-right: 44px;   /* spazio per share btn top-right */
  border-radius:16px; text-decoration:none;
  color: var(--ds-c-text);
  background: var(--ds-surface-2-bg);
  border: 1px solid var(--ds-surface-2-border);
  box-shadow: var(--ds-surface-2-shadow);
  transition:
    background   180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    border-color 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow   220ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform    120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
@media (hover: hover){
  .dl-item:hover{
    transform: translateY(-1px);
    background:   var(--ds-surface-3-bg-hover);
    border-color: var(--ds-surface-3-border-hover);
    box-shadow:   var(--ds-surface-3-glow-hover);
  }
}

/* icon badge */
.dl-icon{
  grid-row: 1 / span 2;
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px; font:700 11px/1 Oswald,system-ui,sans-serif;
  color:#fff; letter-spacing:.4px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}

/* estensioni → colori */
.ext-pdf  .dl-icon{ background:#E63946; }
.ext-dwg  .dl-icon{ background:#0EA5E9; }
.ext-dxf  .dl-icon{ background:#38BDF8; }
.ext-xls  .dl-icon{ background:#16A34A; }
.ext-xlsx .dl-icon{ background:#16A34A; }
.ext-doc  .dl-icon{ background:#2563EB; }
.ext-docx .dl-icon{ background:#2563EB; }
.ext-zip  .dl-icon{ background:#6B7280; }
.ext-ies  .dl-icon{ background:#F59E0B; }
.ext-ldt  .dl-icon{ background:#F59E0B; }
.ext-file .dl-icon{ background:#9CA3AF; }

/* texts */
.dl-label{ font: 600 13px/1.15 Oswald, system-ui, sans-serif; text-transform: uppercase; }
.dl-meta{ font: 11px/1.2 system-ui, sans-serif; opacity:.65; margin-top:4px; }

/* responsive */
@media (max-width: 640px){
  .downloads-card .dl-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .dl-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ================================================================
   sess.26 Tier 1.3 STEP 9 — SHARE BUTTON inline su dl-item
   ================================================================
   Pattern: feature-detect navigator.share (Web Share API).
   iOS Safari 12.2+, Android Chrome 75+, ~95% coverage 2026.
   Fallback graceful: clipboard.writeText → window.open last resort.
   Target tap mobile: 44×44 (Apple HIG), desktop 32×32 + hover bg.
   ================================================================ */
.dl-share-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ds-c-text-secondary);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    transform 80ms ease;
  z-index: 1;
}
@media (hover: hover){
  .dl-share-btn:hover{
    background: var(--ds-c-surface-hover);
    color: var(--ds-c-text);
  }
}
.dl-share-btn:active{
  transform: scale(.92);
}
.dl-share-btn:focus-visible{
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
}

/* Mobile: tap target + uniformazione outline gold (sess.33 Step 1c — ref Specs).
   sess.39: esteso a 1399.98 per coprire compact-narrow (1100-1399 touch). */
@media (max-width: 1399.98px){
  body.ds-vp-app .dl-share-btn{
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
  body.ds-vp-app .dl-item{
    padding-right: 52px;   /* spazio per share btn 44 + 8 margine */
  }
  /* NOTA sess.33 Step 1b: pill height 40px gestita universalmente da _mobile-touch.css
     selettore `body.ds-vp-app .pill` (min-height: 40 + padding-inline: 16). */

  /* sess.33 Step 1c — filter pill outline gold ambra (pattern parity .specs-extend-cta).
     Decisione utente: Specs è il riferimento target per coerenza famiglia 3 cross-widget. */
  body.ds-vp-app .dl-filter .pill{
    background: transparent;
    border-color: rgba(244,181,50,.45);
    color: rgba(0,0,0,.78);
  }
  body.ds-vp-app .dl-filter .pill.is-active{
    background: #F4B532;
    border-color: #C9A800;
    color: #111;
  }
  body.ds-vp-app .dl-filter .pill:active{
    background: rgba(244,181,50,.12);
  }
  /* Dark mode mobile */
  body.ds-dark.ds-vp-app .dl-filter .pill{
    background: transparent;
    border-color: rgba(244,181,50,.45);
    color: rgba(255,255,255,.88);
  }

  /* sess.33 Step 1d — pill equal-width 3-per-row + stacco da title */
  body.ds-vp-app .dl-filter{
    margin-top: 6px;
  }
  body.ds-vp-app .dl-filter .pill{
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    justify-content: center;
  }
}

.ext-glb .dl-icon{ background:#7C3AED; } /* viola */

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
/* body.ds-dark override rimosso (sess.25 task #3): i token surface-1
   sono già reattivi al tema via ds-tokens.css. */
body.ds-dark .dl-filter .pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: var(--ds-c-text);
}
@media (hover: hover){
  body.ds-dark .dl-filter .pill:hover{
    background: rgba(255,255,255,.12);
  }
}
body.ds-dark .dl-filter .pill.is-active{
  background: #F4B532;
  border-color: #C9A800;
  color: #111;
  box-shadow: 0 0 0 3px rgba(255,208,0,.22), 0 4px 8px rgba(0,0,0,.30);
}
/* body.ds-dark .dl-item override rimosso (sess.25 task #3): i token
   surface-2 sono auto-reattivi al tema via ds-tokens.css. */


/* ========================================================================
   DL MODAL — multi-select + anteprima (sess.47 scope A)
   Famiglia modal "buona" (fade overlay + frame scale), token-driven.
   Markup generato da downloads-final.js (window.DSDownloads.openModal).
   ======================================================================== */
.dl-modal{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity 220ms var(--ds-ease-out, cubic-bezier(0,0,.2,1));
}
.dl-modal[hidden]{ display: none; }     /* batte il display:flex quando chiuso */
.dl-modal.is-open{ opacity: 1; }
body.dl-modal-open{ overflow: hidden; }  /* blocca lo scroll della pagina dietro il modal */

.dl-modal__overlay{
  position: absolute; inset: 0;
  background: var(--ds-c-bg-overlay, rgba(12,12,12,.92));
  backdrop-filter: blur(var(--ds-glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 12px));
}

.dl-modal__frame{
  position: relative;
  display: flex; flex-direction: column;
  width: min(1080px, 100%);
  height: min(86vh, 760px);   /* altezza definita → l'anteprima ha respiro */
  max-height: 92vh;
  border-radius: 22px;
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  box-shadow: var(--ds-surface-1-accent), 0 24px 64px rgba(0,0,0,.34);
  overflow: hidden;
  transform: scale(.96);
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.dl-modal.is-open .dl-modal__frame{ transform: scale(1); }

/* head */
.dl-modal__head{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px 12px; border-bottom: 1px solid rgba(0,0,0,.08);
}
body.ds-dark .dl-modal__head{ border-bottom-color: rgba(255,255,255,.10); }
.dl-modal__title{
  margin: 0; padding-left: 14px; position: relative;
  font-family: "Oswald", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(.95rem, 1.1vw + .5rem, 1.18rem); line-height: 1.1;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ds-c-text);
}
.dl-modal__title::before{
  content:""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 34px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #F4B532, #F3E955);
}
/* Range selector nell'header (come DMX): mostra il range attivo + permette di cambiarlo */
.dl-modal__head{ gap: 10px; }
.dl-modal__x{ margin-left: auto; flex-shrink: 0; }
.dl-modal__ranges{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.dl-modal__ranges[hidden]{ display: none; }

/* filterbar (riusa .ds-btn--toggle) */
.dl-modal__filterbar{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px; border-bottom: 1px solid rgba(0,0,0,.06);
}
body.ds-dark .dl-modal__filterbar{ border-bottom-color: rgba(255,255,255,.08); }
.dl-modal__filt{ height: 30px; }

/* main = lista + anteprima */
.dl-modal__main{
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
}
.dl-modal__listcol{
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(0,0,0,.07);
}
body.ds-dark .dl-modal__listcol{ border-right-color: rgba(255,255,255,.08); }

.dl-modal__selbar{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
}
.dl-modal__selall{
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 .76rem/1 "Oswald", system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ds-c-text-secondary);
}
.dl-modal__selall-cb{ width: 17px; height: 17px; accent-color: var(--ds-c-accent); cursor: pointer; }
.dl-modal__count{ font: 600 .72rem/1 "Oswald", system-ui, sans-serif; letter-spacing: .03em; color: var(--ds-c-text-tertiary); }

.dl-modal__list{
  list-style: none; margin: 0; padding: 0 12px 14px;
  overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.dl-modal__empty{ padding: 24px 6px; color: var(--ds-c-text-tertiary); font: 600 13px/1.3 Oswald, system-ui, sans-serif; text-transform: uppercase; }

.dl-modal__row{
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 14px;
  background: var(--ds-surface-2-bg);
  border: 1px solid var(--ds-surface-2-border);
  transition: background 160ms var(--ds-ease-std), border-color 180ms var(--ds-ease-std);
}
.dl-modal__row.is-active{
  border-color: var(--ds-c-accent-border, rgba(244,181,50,.40));
  box-shadow: inset 0 0 0 1px var(--ds-c-accent-border, rgba(244,181,50,.40));
}
.dl-modal__rcb{ width: 18px; height: 18px; accent-color: var(--ds-c-accent); cursor: pointer; }
.dl-modal__rbtn{
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px;
  padding: 2px; color: var(--ds-c-text); min-width: 0;
}
.dl-modal__ricon{
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  color: #fff; font: 700 10px/1 Oswald, system-ui, sans-serif; letter-spacing: .4px;
  background: #9CA3AF;
}
.dl-modal__row.ext-pdf  .dl-modal__ricon{ background:#E63946; }
.dl-modal__row.ext-ies  .dl-modal__ricon,
.dl-modal__row.ext-ldt  .dl-modal__ricon{ background:#F59E0B; }
.dl-modal__row.ext-dwg  .dl-modal__ricon{ background:#0EA5E9; }
.dl-modal__row.ext-dxf  .dl-modal__ricon{ background:#38BDF8; }
.dl-modal__row.ext-zip  .dl-modal__ricon{ background:#6B7280; }
.dl-modal__row.ext-glb  .dl-modal__ricon{ background:#7C3AED; }
.dl-modal__row.ext-doc  .dl-modal__ricon,
.dl-modal__row.ext-docx .dl-modal__ricon{ background:#2563EB; }
.dl-modal__row.ext-xls  .dl-modal__ricon,
.dl-modal__row.ext-xlsx .dl-modal__ricon{ background:#16A34A; }
.dl-modal__rtxt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-modal__rname{ font: 600 12.5px/1.15 Oswald, system-ui, sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-modal__rmeta{ font: 400 11px/1.2 "Oswald", system-ui, sans-serif; opacity: .6; }
@media (hover: hover){
  .dl-modal__row:hover{ background: var(--ds-surface-3-bg-hover, rgba(244,181,50,.06)); }
}

/* preview pane */
.dl-modal__preview{ position: relative; min-height: 0; overflow: auto; display: flex; }
.dl-modal__pvempty, .dl-modal__pvnone{
  margin: auto; padding: 24px; text-align: center; color: var(--ds-c-text-tertiary);
  font: 500 13px/1.5 "Oswald", system-ui, sans-serif;
}
.dl-modal__pvframe{ flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; }
.dl-modal__pvimg{ margin: auto; padding: 18px; }
.dl-modal__pvimg img{ max-width: 100%; max-height: 60vh; border-radius: 10px; display: block; }
.dl-modal__pvacts{ display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* foot */
.dl-modal__foot{
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 14px 18px; border-top: 1px solid rgba(0,0,0,.08);
}
body.ds-dark .dl-modal__foot{ border-top-color: rgba(255,255,255,.10); }

/* ── MOBILE (body.ds-vp-app) = bottom-sheet single-column, no preview pane ── */
@media (max-width: 1099.98px){
  body.ds-vp-app .dl-modal{ align-items: flex-end; padding: 0; }
  body.ds-vp-app .dl-modal__frame{
    width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0;
    transform: translateY(100%); transition: transform 320ms cubic-bezier(.22,1,.36,1);
  }
  body.ds-vp-app .dl-modal.is-open .dl-modal__frame{ transform: translateY(0); }
  body.ds-vp-app .dl-modal__main{ grid-template-columns: 1fr; }
  body.ds-vp-app .dl-modal__preview{ display: none; }   /* anteprima apre in nuova scheda */
  body.ds-vp-app .dl-modal__listcol{ border-right: 0; }
  body.ds-vp-app .dl-modal__rcb{ width: 22px; height: 22px; }   /* tap target */
  body.ds-vp-app .dl-modal__row{ padding: 10px 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .dl-modal, .dl-modal__frame{ transition: none !important; }
  .dl-modal__frame{ transform: none !important; }
}

/* rail-dl-card è ora un <button> (apre il modal): neutralizza chrome UA + allinea
   il testo a sinistra come le altre card del rail (il button UA centra di default). */
button.rail-dl-card{ appearance: none; -webkit-appearance: none; font: inherit; text-align: left; cursor: pointer; }

/* Pulsante "Tool esteso" del widget Downloads — stesso pattern di .specs-extend-cta
   (coerenza cross-widget): outline gold pill + ↗ + label. Nascosto su desktop
   (≥1400 il trigger è la card del rail DX), visibile <1400 (mobile + compact-narrow). */
.dl-controls{ flex-wrap: wrap; }
.dl-extend-cta{ display: none; }
@media (max-width: 1399.98px){
  .dl-extend-cta{
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 44px; height: 44px; padding: 0 16px;
    border: 1px solid rgba(244,181,50,.45); border-radius: 999px;
    background: transparent; color: rgba(0,0,0,.78);
    font: 600 13px/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    transition: background 160ms ease, transform 100ms ease;
  }
  .dl-extend-cta__icon{ font-size: .95em; }
  .dl-extend-cta:active{ transform: scale(.97); }
  body.ds-dark .dl-extend-cta{ color: rgba(255,255,255,.85); }
}
@media (max-width: 1399.98px) and (hover: hover){
  .dl-extend-cta:hover{ background: rgba(244,181,50,.12); }
}

/* === Hover-toolbar maximize sul widget Downloads (registrata in widget-actions-config) ===
   <1400: nascosta (lì c'è il pulsante in-page "Tool esteso").
   1400-1849: rail a SX (default vertical-left).
   ≥1850: flip a DX (Downloads è in colonna destra → rail verso il bordo esterno). */
@media (max-width: 1399.98px){
  #downloads-widget .ds-widget-toolbar{ display: none !important; }
}
@media (min-width: 1850px){
  #downloads-widget .ds-widget-toolbar--vertical-left{
    left: auto !important; right: -40px !important;
    border-radius: 0 10px 10px 0 !important;
    border-right-color: rgba(244,181,50,.30) !important;
    border-left-color: transparent !important;
    box-shadow: 2px 4px 12px rgba(0,0,0,.06) !important;
    transform: translateX(8px) !important;
  }
  #downloads-widget.has-widget-toolbar.is-spotlight .ds-widget-toolbar--vertical-left{
    transform: translateX(0) !important;
  }
  #downloads-widget.has-widget-toolbar.is-teasing:not(.is-spotlight) .ds-widget-toolbar--vertical-left{
    transform: translateX(6px) !important;
  }
  #downloads-widget.has-widget-toolbar--vertical::before{
    left: auto !important; right: -40px !important;
  }
  #downloads-widget .ds-widget-toolbar--vertical-left .ds-widget-toolbar__label{
    left: auto !important; right: calc(100% + 8px) !important;
  }
}