/* Home staging della scheda (components/staging.html): nota con le proposte a sinistra, confronto prima/dopo a destra.
   Il confronto e' components/compare.css; la scelta della proposta sta in js/detail.js. */

@layer components {
  .staging { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--gap); align-items: stretch; }
  .staging .note { display: grid; align-content: start; gap: 14px; padding: 22px; border-radius: var(--r-md); background: var(--tint); }
  .staging .styles { display: grid; gap: 8px; }
  .staging .note .msg { background: var(--ground); } /* il riquadro ha gia' il fondo tint */
  .staging .styles button {
    display: grid;
    justify-items: start;
    gap: 2px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--ground);
    color: var(--ink);
    font: 500 var(--step-small) var(--font);
    text-align: left;
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);

    & .s { font-weight: 400; color: var(--ink-soft); }
    &:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
    &[aria-checked="true"] { background: var(--select); color: var(--on-ink); box-shadow: none; }
    &[aria-checked="true"] .s { color: var(--on-ink); }
  }
  .staging .compare { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
  /* proposta senza foto di partenza: si vede intera, senza cursore */
  .compare[data-no-before] { cursor: default; }
  .compare[data-no-before] .compare-after { clip-path: none !important; -webkit-clip-path: none !important; }
  .compare[data-no-before] :is(.compare-handle, .badge.before, .badge.after) { display: none; }
  .viewer-panel .staging { flex: 1; min-height: 0; }
  .viewer-panel .staging .compare { aspect-ratio: auto; height: 100%; min-height: 320px; }
  @media (max-width: 640px) {
    .staging { grid-template-columns: 1fr; }
    .viewer-panel .staging .compare { min-height: 240px; }
  }
}