/* Documentazione completa del foglio di stile: docs/main-css.md */

:root {
  --c-bg: #0D0D0D;
  --c-surface: #16161a;
  --c-surface-2: #1f1f26;
  --c-text: #f2f2f0;
  --c-text-dim: #9b9ba3;
  --c-accent: #F71A27;
  --c-button: #BF000C;
  --c-accent-contrast: #0d0d0f;
  --c-border: rgba(255, 255, 255, 0.10);
  --c-error: #ff6b6b;
  --c-success: #6bffb0;
  --c-warning: #ffd166;
  --c-info: #6bb5ff;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Karla", system-ui, sans-serif;

  --header-h: 64px;
  --frame-pad: clamp(1.5rem, 4vw, 4rem);
  --radius: 14px;
  --overlay-pad: clamp(0.75rem, 1.5vw, 1.75rem);
  --control-h: 36px;
  --account-chip: 26px;
  --focus-ring: 3px solid var(--c-accent);
  --focus-ring-on-accent: 3px solid var(--c-text);

  --fs-hero-title: clamp(2.5rem, 1.1rem + 5.9vw, 7rem);
  --fs-slide-title: clamp(2rem, 1.07rem + 3.93vw, 5rem);
  --fs-eyebrow: clamp(0.75rem, 0.67rem + 0.33vw, 1rem);
  --fs-ob-step: clamp(0.8rem, 0.67rem + 0.33vw, 1.25rem);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--frame-pad);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(13, 13, 15, 0.85), transparent);
  backdrop-filter: blur(6px);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand-dot { color: var(--c-accent); }

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.account-link,
.ca-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--control-h);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  padding-inline: 1.1rem calc((var(--control-h) - 2px - var(--account-chip)) / 2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}

.account-link { transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.account-link:hover {
  background: var(--c-button);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.account-link:focus-visible { outline: var(--focus-ring-on-accent); outline-offset: 2px; }

.account-link-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--account-chip);
  height: var(--account-chip);
  border-radius: 50%;
  background: var(--c-bg);
  perspective: 240px;
}

.account-link.is-signed-in {
  width: var(--control-h);
  padding-inline: 0;
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.account-link.is-signed-in .account-link-label { display: none; }
.account-link.is-signed-in .account-link-chip { width: 100%; height: 100%; }
.account-link.is-signed-in:hover {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-accent);
}

@media (max-width: 620px) {
  .account-link { width: var(--control-h); padding-inline: 0; }
  .account-link .account-link-label { display: none; }
  .account-link .account-link-chip { width: 100%; height: 100%; }
}

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.account-link-icon {
  flex: none;
  width: 18px;
  height: 20px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 3px 6px rgba(180, 0, 35, 0.45));
  animation: account-tumble 14s ease-in-out infinite;
}

@keyframes account-tumble {
  0%, 84% { transform: rotateY(0deg) rotateX(0deg); }
  92% { transform: rotateY(190deg) rotateX(14deg); }
  100% { transform: rotateY(360deg) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .account-link-icon { animation: none; }
}

.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.scroll-progress-bar {
  height: 100%;
  width: 0;
  background: var(--c-accent);
}

.site-footer {
  position: fixed;
  right: 1rem;
  bottom: 0.6rem;
  z-index: 90;
  padding: 0;
  font-size: 0.7rem;
  color: var(--c-text-dim);
  text-align: right;
  pointer-events: none;
}
.site-footer a { color: var(--c-text-dim); pointer-events: auto; }

.h-scene { height: 100svh; overflow: hidden; }

.h-track {
  display: flex;
  height: 100svh;
  width: max-content;
}

.h-track > * { flex: 0 0 100vw; width: 100vw; height: 100%; }

.v-scene { height: 100%; overflow: hidden; }
.v-track { display: flex; flex-direction: column; width: 100%; }

.panel {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-top: var(--header-h);
}

.frame {
  width: min(92vw, calc((100svh - var(--header-h)) * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--header-h) - 2rem);
  padding: var(--frame-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
}

.hero-title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.hero-sub {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--c-text-dim);
  max-width: 34ch;
}

.project-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
}

.project-media .placeholder-label {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.07);
  user-select: none;
}

.project-index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--c-text-dim);
  margin-bottom: 0.75rem;
}

.project-title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 1rem;
}

.project-desc {
  color: var(--c-text-dim);
  margin-bottom: 1.25rem;
  max-width: 40ch;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.project-tags li {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-dim);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.project-tags li.is-active {
  background: var(--c-accent);
  border-color: var(--c-text);
  color: var(--c-text);
}
.project-tags li:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.project-tags li.is-active:focus-visible { outline: var(--focus-ring-on-accent); }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  color: var(--c-text);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Tutto il `:hover` della famiglia `.btn` sta qui dentro, e non è pignoleria:
   su uno schermo tattile `:hover` non è uno stato di passaggio ma **resta
   appiccicato dopo il tocco**, quindi il tasto dell'header sembrava selezionato
   dopo averlo premuto. Con `hover: hover` quello stile non esiste proprio dove
   non c'è un puntatore. */
@media (hover: hover) {
  .btn:hover {
    background: var(--c-button);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .btn:disabled:hover { background: transparent; color: var(--c-text); border-color: var(--c-border); }
  .btn-primary:hover { background: #ffffff3d; color: var(--c-text); }
  .btn-danger:hover {
    color: var(--c-error);
    background: color-mix(in srgb, var(--c-error) 26%, transparent);
    border-color: color-mix(in srgb, var(--c-error) 60%, transparent);
  }
  .btn-danger.is-armed:hover {
    color: var(--c-accent-contrast);
    background: var(--c-error);
  }
}
.btn:focus-visible { outline: var(--focus-ring-on-accent); outline-offset: 2px; }

.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--control-h);
  font-size: 0.85rem;
  padding: 0 1.1rem;
}

.btn-icon { flex: none; width: 16px; height: 16px; }

.btn-primary {
  background: var(--c-button);
  font-weight: 700;
  padding: 0.85rem 2.2rem;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled { opacity: 0.5; cursor: wait; }

.btn-danger {
  color: var(--c-error);
  background: color-mix(in srgb, var(--c-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--c-error) 40%, transparent);
}
.btn-danger:focus-visible { outline-color: var(--c-error); }

.btn-danger.is-armed {
  color: var(--c-accent-contrast);
  background: var(--c-error);
  border-color: var(--c-error);
  font-weight: 700;
}

/* `:not(.is-armed)`: un tasto armato che si disabilita è a metà esecuzione, e
   deve continuare a sembrarlo invece di tornare a riposo. */
.btn-danger:disabled:not(.is-armed),
.btn-danger:disabled:not(.is-armed):hover {
  color: var(--c-error);
  background: color-mix(in srgb, var(--c-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--c-error) 40%, transparent);
}
.btn-danger.is-armed:disabled,
.btn-danger.is-armed:disabled:hover {
  color: var(--c-accent-contrast);
  background: var(--c-error);
  border-color: var(--c-error);
}

.panel-onboarding .frame-carousel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.5rem;
}

.ob-back {
  position: absolute;
  z-index: 6;
  left: var(--frame-pad);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ob-back:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-50%) translateX(-2px); }
.ob-back:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.ob-back-icon { width: 16px; height: 16px; }

.onboarding-head { text-align: center; flex: none; }
.onboarding-head h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.onboarding-head .eyebrow { margin-bottom: 0.5rem; }

.carousel-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.carousel-stage {
  position: relative;
  flex: 1;
  min-height: 360px;
  perspective: 1400px;
}

.ob-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 82%);
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--c-border);
  border-radius: calc(var(--radius) + 6px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease, filter 0.45s ease;
  cursor: pointer;
}
.ob-card.is-active { cursor: default; }

.ob-card fieldset {
  border: 0;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  min-height: 330px;
  justify-content: center;
}
.ob-card fieldset:disabled { pointer-events: none; opacity: 0.9; }

.ob-step {
  font-family: var(--font-display);
  font-size: var(--fs-ob-step);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.ob-hint { font-size: 0.85rem; color: var(--c-text-dim); }

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.service-other {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}
.service-other.is-visible {
  max-height: 6rem;
  margin-top: 0.9rem;
  opacity: 1;
  pointer-events: auto;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.chip:hover { border-color: var(--c-accent); }

.chip[aria-pressed="true"] {
  background: var(--c-button);
  border-color: var(--c-accent);
  color: var(--c-text);
  font-weight: 600;
}

.budget-counter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.counter-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.counter-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }

.counter-display {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 0.5rem 0.9rem;
}
.counter-display input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-text);
  text-align: right;
}
.counter-currency { color: var(--c-text-dim); font-size: 1rem; }

.word-meter {
  align-self: flex-end;
  font-size: 0.8rem;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}
.word-meter.is-near { color: var(--c-accent); }
.word-meter.is-over { color: var(--c-error); font-weight: 700; }

.switch {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--c-text-dim);
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch-track {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  margin-top: 0.1rem;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-text-dim);
  transition: transform 0.25s ease, background 0.25s ease;
}
.switch input:checked + .switch-track {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(20px);
  background: var(--c-accent-contrast);
}

.ob-bar {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.ob-nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.ob-nav:hover { background: rgba(255, 255, 255, 0.1); }
.ob-nav:disabled { opacity: 0.3; cursor: default; }

.ob-dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: clamp(120px, 18vw, 320px);
}
.ob-track,
.ob-track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
.ob-track { right: 0; background: rgba(255, 255, 255, 0.16); }
.ob-track-fill {
  width: 0%;
  background: var(--c-accent);
  transition: width 0.35s ease;
}

.ob-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--c-text-dim);
  background: var(--c-bg);
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ob-dot.is-current {
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.ob-dot.is-done {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

@media (pointer: coarse) {
  .ob-nav { width: 44px; height: 44px; }
  .ob-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

.ob-submit {
  font-family: var(--font-display);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background: var(--c-button);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  max-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease 0.1s, padding 0.5s ease;
}
.ob-bar.is-ready .ob-submit {
  max-width: 220px;
  padding: 0.6rem 1.5rem;
  opacity: 1;
}
.ob-submit:disabled { opacity: 0.5; cursor: wait; }

.form-feedback { text-align: center; margin-top: 0.5rem; }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.form-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.field-note {
  display: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--c-accent);
}

.field-note.is-visible { display: inline; }

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--c-accent); }

/* Freccia disegnata: quella nativa sta incollata al bordo e `padding-right` non
   la sposta. Il colore è dentro il data URI e non segue i token — se cambia
   `--c-text-dim`, va aggiornato anche qui. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%239b9ba3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.72rem auto;
}
/* La tendina aperta la disegna il sistema operativo: senza questo, su alcuni
   browser le voci ereditano il fondo del campo. */
.form-field select option {
  color: var(--c-text);
  background: var(--c-surface);
}

.form-field input[type="date"] { color-scheme: dark; }
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: drop-shadow(0 0 3px var(--c-accent));
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--c-error); }

.form-feedback { font-size: 0.9rem; min-height: 1.4em; }
.form-feedback.is-error { color: var(--c-error); }
.form-feedback.is-success { color: var(--c-success); }

body.no-horizontal .h-scene {
  height: auto;
  overflow: visible;
}
body.no-horizontal .site-footer {
  position: static;
  text-align: center;
  padding: 1.2rem var(--frame-pad);
  pointer-events: auto;
}
body.no-horizontal .h-track {
  flex-direction: column;
  width: 100%;
  height: auto;
}
body.no-horizontal .v-scene {
  height: auto;
  overflow: visible;
}
body.no-horizontal #showcaseDetail { display: none; }
body.no-horizontal .h-track > * {
  flex: none;
  width: 100%;
  height: auto;
}
body.no-horizontal .panel {
  flex: none;
  width: 100%;
  min-height: 100svh;
  height: auto;
}
body.no-horizontal .frame {
  aspect-ratio: auto;
  max-height: none;
  width: min(92vw, 1100px);
  padding-block: 3rem;
}

@media (max-width: 820px) {
  .form-row { grid-template-columns: 1fr; }

  /* Il carosello smette di essere una pila in prospettiva e diventa uno
     scorrimento nativo: sul telefono il gesto atteso è il trascinamento, non un
     tasto. Le frecce restano e continuano a funzionare — muovono la barra di
     scorrimento invece delle trasformazioni (`onboarding-carousel.js`). */
  .carousel-stage {
    --ob-card: 82%;
    --ob-gap: 0.75rem;
    display: flex;
    gap: var(--ob-gap);
    min-height: 0;
    perspective: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .carousel-stage::-webkit-scrollbar { display: none; }

  /* Due code vuote larghe esattamente il margine che resta ai lati della card
     attiva, meno il gap che il flex aggiunge comunque. Sono ciò che permette
     alla PRIMA e all'ULTIMA di stare al centro come tutte le altre: senza,
     restano incollate ai bordi e il carosello sembra sfalsato. */
  .carousel-stage::before,
  .carousel-stage::after {
    content: "";
    flex: 0 0 calc((100% - var(--ob-card)) / 2 - var(--ob-gap));
  }

  /* La card attiva al centro, la precedente e la successiva che sporgono ai
     lati — più piccole e smorzate, così si vede che il form è fatto di più
     schede. `center` qui e posizione centrata nel JS: se i due allineamenti
     non coincidessero, ogni salto con le frecce si correggerebbe due volte. */
  .ob-card {
    position: static;
    flex: 0 0 var(--ob-card);
    scroll-snap-align: center;
    opacity: 0.4;
    transform: scale(0.93);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .ob-card.is-active { opacity: 1; transform: scale(1); }

  /* Il ritorno all'ultimo progetto è un comando del binario orizzontale: in una
     pagina che scorre in verticale non porta da nessuna parte. */
  body.no-horizontal .ob-back { display: none; }
}

.showcase {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg);
}

.sc-bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.4) saturate(1.05);
  transform: scale(1.08);
  z-index: 0;
  transition: opacity 0.2s linear;
}
.sc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,13,15,0.9) 0%, rgba(13,13,15,0.55) 45%, rgba(13,13,15,0.12) 100%);
}

.sc-hero {
  position: absolute;
  left: var(--frame-pad);
  right: var(--frame-pad);
  top: calc(var(--header-h) + 1rem);
  bottom: 5.5rem;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}
.sc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9,9,11,0.72) 0%, rgba(9,9,11,0.3) 45%, rgba(9,9,11,0) 70%);
}

.sc-back {
  position: absolute;
  z-index: 6;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(13, 13, 15, 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: background 0.18s ease, transform 0.18s ease;
}
.sc-back:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(-2px); }
.sc-back:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.sc-back-icon { width: 18px; height: 18px; }

.sc-advance {
  --size: clamp(30px, 3.2vw, 44px);
  position: absolute;
  z-index: 7;
  top: 50%;
  right: max(4px, calc((var(--frame-pad) - var(--size)) / 2));
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.7);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.18s ease, border-color 0.18s ease,
              visibility 0s linear 0.35s;
}
.sc-advance.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.18s ease, border-color 0.18s ease;
}
.sc-advance.is-visible:hover {
  background: var(--c-button);
  border-color: var(--c-accent);
  transform: translateY(-50%) scale(1.06);
}
.sc-advance:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sc-advance-icon { width: 55%; height: 55%; }
.sc-advance::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}

.sc-content {
  position: absolute;
  z-index: 3;
  left: calc(var(--frame-pad) + var(--overlay-pad));
  bottom: calc(5.5rem + var(--overlay-pad));
  max-width: min(50ch, 56vw);
  pointer-events: none;
}
.sc-eyebrow { margin-bottom: 0.6rem; }
.sc-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-slide-title);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.sc-desc {
  color: var(--c-text-dim);
  margin: 1rem 0 1.2rem;
  max-width: 80ch;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}
.sc-tags { margin-bottom: 1.4rem; }
/* `.sc-content` è `pointer-events: none`: i tag sono cliccabili, quindi se lo
   riprendono — solo le pill, non il blocco intorno. */
.sc-tags li { pointer-events: auto; }
.sc-cta { pointer-events: auto; }
.sc-cta.is-hidden { display: none; }

.sc-cta--detail { color: #fff; }
.sc-cta--detail::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.6em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  vertical-align: middle;
}

.showcase.is-hero-active:not(.has-hero-media) .sc-hero,
.showcase.is-hero-active:not(.has-hero-media) .sc-bg {
  background-image: none !important;
  background-color: var(--c-bg);
}
.showcase.is-hero-active .sc-content {
  max-width: min(44ch, 54vw);
  bottom: calc(6.5rem + var(--overlay-pad));
}
.showcase.is-hero-active .sc-title {
  font-size: var(--fs-hero-title);
  text-transform: uppercase;
}
.showcase.is-hero-active .sc-tags,
.showcase.is-hero-active .sc-cta { display: none; }

.sc-rail {
  position: absolute;
  z-index: 4;
  right: calc(var(--frame-pad) + var(--overlay-pad));
  bottom: calc(5.5rem + var(--overlay-pad));
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  pointer-events: none;
}
.sc-thumb {
  pointer-events: auto;
  position: relative;
  display: block;
  width: clamp(150px, 17vw, 260px);
  aspect-ratio: 16 / 8;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex: 0 0 auto;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sc-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.sc-thumb:hover,
.sc-thumb:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.6);
}
.sc-thumb:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.sc-thumb.is-tag-match { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent), 0 12px 12px rgba(0, 0, 0, 0.3); }
.sc-tlabel {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 11px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
}
.sc-tlabel b { display: block; font-size: 0.72rem; font-weight: 600; }
.sc-tcat { color: var(--c-accent); }

.sc-ui {
  position: absolute;
  z-index: 6;
  left: var(--frame-pad);
  right: var(--frame-pad);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.sc-arrows { display: flex; gap: 0.6rem; }
.sc-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.sc-nav:hover { background: rgba(255, 255, 255, 0.16); }
.sc-nav:active { transform: scale(0.94); }
.sc-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.sc-nav:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.sc-progress {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  border-radius: 2px;
}
.sc-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: var(--c-text);
  border-radius: 2px;
}
.sc-counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sc-counter small { color: var(--c-text-dim); font-weight: 400; font-family: var(--font-body); font-size: 0.85rem; }

/* Il numero è un campo, non un'etichetta: si può scrivere dentro per saltare a
   una diapositiva. Sembra testo finché non lo si mette a fuoco. */
.sc-cur {
  width: 2.2ch;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: text;
  caret-color: var(--c-accent);
}
.sc-cur:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 3px; }
.sc-cur.is-lost { color: var(--c-accent); animation: sc-lost 0.5s steps(2, jump-none) infinite; }
@keyframes sc-lost { 50% { opacity: 0.3; } }

.sc-hint {
  position: absolute;
  z-index: 6;
  top: calc(var(--header-h) + 1rem + var(--overlay-pad));
  left: calc(var(--frame-pad) + var(--overlay-pad));
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.sc-hint-text { transition: opacity 0.4s ease; }
.sc-hint-text.is-fading { opacity: 0; }

.sc-wheel { width: 20px; height: 32px; border: 2px solid var(--c-text-dim); border-radius: 12px; position: relative; flex: none; }
.sc-wheel::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 6px;
  border-radius: 2px;
  background: var(--c-text-dim);
  transform: translateX(-50%);
  animation: sc-wheel 1.5s ease-in-out infinite;
}
@keyframes sc-wheel {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50%      { transform: translate(-50%, 8px); opacity: 0.2; }
}

.sc-ghost {
  position: fixed;
  z-index: 5;
  margin: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  will-change: transform, width, height, left, top, border-radius;
  pointer-events: none;
}

.showcase.is-fallback { height: auto; overflow: visible; }
.sc-fallback {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: min(92vw, 1100px);
  margin: 0 auto;
  padding: calc(var(--header-h) + 2rem) 0 3rem;
}
.sc-fb-hero { padding-bottom: 1rem; border-bottom: 1px solid var(--c-border); }
.sc-fb-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.sc-fb-card .project-media { aspect-ratio: 16 / 10; }

/* Carosello per progetto: `buildFallbackGalleries` sposta la scheda scritta a
   mano dentro la prima `.sc-fb-slide` e aggiunge le altre dalla gallery. Lo
   scorrimento è nativo — nessun motore, nessun listener. La diapositiva
   successiva si vede sporgere: è quella l'unica indicazione che ce n'è dell'altra. */
.sc-fb-card:has(.sc-fb-strip) { display: block; }
/* Niente `scroll-snap`: il gesto atteso qui è quello dei caroselli social —
   una catena unica che si può lasciare anche a metà, non quattro schede che
   scattano una alla volta. */
.sc-fb-strip {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.sc-fb-strip::-webkit-scrollbar { display: none; }
.sc-fb-slide {
  flex: 0 0 min(88%, 520px);
  display: grid;
  gap: 1rem;
  align-content: start;
}
/* "01 / 04" accanto a un carosello si legge come "diapositiva 1 di 4", che è
   un'altra cosa. Sulle diapositive della gallery lo stesso posto porta la
   categoria, che invece serve: sparisce solo il numero del progetto. */
.sc-fb-slide:first-child .project-index { display: none; }

@media (max-width: 820px) {
  .sc-rail, .sc-hint { display: none; }
  .sc-content { max-width: 88vw; bottom: 7.5rem; }

  .sc-fallback { gap: 2rem; padding: calc(var(--header-h) + 1.5rem) 0 2rem; }

  /* L'introduzione presenta il primo progetto: sta sopra di lui, non su una
     schermata sua. */
  .sc-fb-hero { padding-bottom: 0.5rem; border-bottom: 0; }
  .sc-fb-hero .hero-sub { margin-bottom: 0; }

  .sc-fb-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-top: 1rem;
  }
  /* Più vicino al quadrato che su desktop, ma ancora orizzontale. */
  .sc-fb-card .project-media { aspect-ratio: 5 / 4; }
  /* Gli scatti sono 16:10: dentro un 5/4 lasciati liberi mostrerebbero due
     bande vuote. Qui il riquadro va riempito, il taglio è accettato — solo
     sotto la soglia, su desktop l'immagine resta intera. */
  .sc-fb-card .project-media img { width: 100%; height: 100%; object-fit: cover; }
  /* Più stretta: la successiva sporge di più e la catena si legge come tale. */
  .sc-fb-slide { flex-basis: min(76%, 420px); }
}

/* Comparsa allo scroll: solo dove il browser sa animare sulla timeline della
   vista, così non serve un IntersectionObserver e chi non la supporta vede il
   contenuto già visibile invece che invisibile per sempre. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sc-fb-card {
      animation: sc-fb-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes sc-fb-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .showcase.is-hero-active .sc-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-wheel::after { animation: none; }
  .sc-advance,
  .sc-advance.is-visible,
  .sc-advance.is-visible:hover { transform: translateY(-50%); }
}

/* Puntatore personalizzato. La classe `has-cursor` la mette `cursor.js` solo
   dove ha senso (mouse fine, niente reduced-motion, GSAP presente): senza JS il
   puntatore di sistema resta, e nessuno si ritrova una pagina senza cursore.
   `cursor: text` sui campi resta: sapere dove si sta scrivendo vale più della
   coerenza estetica, e il pallino continua a vedersi accanto. */
body.has-cursor,
body.has-cursor * { cursor: none; }
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor [contenteditable] { cursor: text; }

.cursor-dot,
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--c-accent);
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, background 0.2s ease;
}
.cursor-dot.is-over {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: color-mix(in srgb, var(--c-accent) 35%, transparent);
}
.cursor-trail {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: var(--c-accent);
  opacity: 0.5;
  filter: blur(7px);
}
body.cursor-away .cursor-dot,
body.cursor-away .cursor-trail { opacity: 0; }

/* Con un layer aperto la pagina sotto non deve scorrere. `position: fixed` e
   non `overflow: hidden` perché iOS Safari ignora il secondo sul body; la
   posizione la rimette `page-overlay.js`, che l'ha segnata prima di bloccare. */
body.is-page-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  padding: 0 var(--frame-pad);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.page-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.page-close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.25s ease;
}
.page-close:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); }
.page-close:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.page-notice {
  font-size: 0.82rem;
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 2rem;
}

.page-tabs {
  position: relative;
  display: flex;
  gap: 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.3rem;
  margin-bottom: 1.8rem;
}
.page-tab-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  border-radius: 999px;
  background: var(--c-button);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  pointer-events: none;
}
.page-tab-thumb.is-stretching { transition: transform 0.11s ease-out; }
.page-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}
.page-tab:hover { color: var(--c-text); }
.page-tab.is-active { color: #fff; }

.auth-page {
  width: min(440px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
  display: flex;
  flex-direction: column;
}

.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form[hidden] { display: none; }

.auth-intro {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-text-dim);
  margin: -0.2rem 0 0.3rem;
}

.auth-submit { width: 100%; text-align: center; margin-top: 0.4rem; }

.auth-feedback {
  font-size: 0.85rem;
  color: var(--c-text-dim);
  text-align: center;
  margin-top: 1.2rem;
  min-height: 1.2em;
}
.auth-feedback.is-error { color: var(--c-error); }

.legal-page {
  width: min(680px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
  display: flex;
  flex-direction: column;
}

.legal-doc[hidden] { display: none; }
.legal-doc h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 0.4rem; }

.legal-updated {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 1.6rem;
}

.legal-body { display: flex; flex-direction: column; gap: 1.4rem; }
.legal-body h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.legal-body p { color: var(--c-text-dim); max-width: 68ch; }

.ca-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.ca-page.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ca-head {
  flex: none;
  position: relative;
  z-index: 2;
  display: grid;
  /* `minmax(0, …)` su tutte e tre: senza, la colonna centrale non scende mai
     sotto la larghezza dei suoi tab e a spanciare è la riga dei comandi. Così
     invece è la nav a cedere — e ha `overflow-x: auto`, quindi cedere per lei
     significa scorrere, non perdere niente. Le due colonne `1fr` restano
     simmetriche: è quello che tiene la nav centrata sulla pagina. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0.6rem var(--frame-pad);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(to bottom, rgba(13, 13, 15, 0.85), transparent);
}

.ca-nav {
  margin-bottom: 0;
  justify-self: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border-color: transparent;
}
.ca-nav::-webkit-scrollbar { display: none; }
.ca-nav .page-tab { flex: 0 0 auto; }
/* Quando niente è attivo il cursore sparisce, invece di restare acceso su una
   voce che non stai guardando: la slide "Impostazioni" dell'area clienti, e le
   chip dei progetti mentre le stai riordinando. */
.page-tabs.is-detached .page-tab-thumb { opacity: 0; }

.ca-actions {
  justify-self: end;
  display: flex;
  /* Esplicito anche se è il default: questi due tasti non vanno MAI a capo,
     e la regola dev'essere leggibile accanto a chi la deve rispettare. Chi
     restringe la finestra deve vedere accorciarsi l'etichetta (vedi le due
     soglie in coda al foglio), non impilarsi i comandi. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.7rem;
}

/* Il nome del cliente non detta la larghezza della testata: un nome lungo si
   tronca invece di spingere il badge contro la nav. */
.ca-user-name {
  display: block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'etichetta corta esiste solo dentro le sue soglie. */
.btn-label-short { display: none; }

.ca-account { position: relative; }

.ca-user {
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ca-user:hover,
.ca-account.is-open .ca-user {
  background: rgba(255, 255, 255, 0.06);
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.ca-user:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.ca-popover {
  --ca-pop-gap: 0.55rem;
  position: absolute;
  z-index: 3;
  top: calc(100% + var(--ca-pop-gap));
  right: 0;
  width: max(280px, 100%);
  padding: 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.ca-account.is-open .ca-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Ponte invisibile sul vuoto fra badge e riquadro: senza, il puntatore
   "esce" dal gruppo a metà strada e il riquadro si richiude. */
.ca-popover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--ca-pop-gap));
  height: var(--ca-pop-gap);
}

.ca-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.ca-pop-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  /* Un nome lungo deve accorciarsi, non andare a capo: il tasto accanto
     resterebbe appeso a metà di due righe. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-pop-settings {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -0.35rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.35s ease;
}
.ca-pop-settings:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text);
  transform: rotate(60deg);
}
.ca-pop-settings:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ca-pop-settings-icon { width: 17px; height: 17px; }
/* Il disegno resta piccolo, l'area toccabile no: il riquadro si apre anche su
   touch, dove 32px sono sotto la soglia comoda. */
.ca-pop-settings::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .ca-pop-settings:hover { transform: none; }
}

.ca-fields { display: flex; flex-direction: column; gap: 0.7rem; }
.ca-field dt {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.ca-field dd {
  font-size: 0.85rem;
  word-break: break-word;
}
.ca-field[hidden] { display: none; }

.ca-logout-row {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-border);
}

.ca-logout-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.3rem;
  font-size: 0.8rem;
  color: var(--c-text-dim);
  visibility: hidden;
}
.ca-logout-row.is-confirming .ca-logout-confirm { visibility: visible; }

.ca-logout {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  height: var(--control-h);
  padding: 0 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--c-button);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ca-logout:hover { background: var(--c-accent); }
.ca-logout:focus-visible { outline: var(--focus-ring-on-accent); outline-offset: 2px; }

.ca-logout-cancel {
  flex: none;
  font: inherit;
  font-size: 0.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ca-logout-cancel:hover { color: var(--c-text); }
.ca-logout-cancel:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ca-popover { transition: opacity 0.01s linear, visibility 0s linear 0.01s; transform: none; }
  .ca-account.is-open .ca-popover { transform: none; }
}

.ca-scene {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ca-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ca-track.is-instant { transition: none; }

.ca-panel {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  display: grid;
  /* `safe`: se il contenuto supera l'altezza (Fatture, Impostazioni) smette di
     centrare e riparte dall'alto, invece di tagliare la testa del pannello. */
  align-content: safe center;
  justify-items: center;
}
.ca-panel::-webkit-scrollbar {
  width: 14px;
  background-color: var(--c-bg);
}
.ca-panel::-webkit-scrollbar-track { background-color: var(--c-bg); }

.ca-panel::-webkit-scrollbar-thumb {
  background-color: var(--c-accent);
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 999px;
}
.ca-panel::-webkit-scrollbar-thumb:hover { border-width: 3px; }

.ca-panel::-webkit-scrollbar-button:vertical {
  display: block;
  height: 16px;
  background-color: var(--c-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
.ca-panel::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 2.8 10.4 9.2H1.6Z' fill='none' stroke='%23F71A27' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}
.ca-panel::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 9.2 1.6 2.8h8.8Z' fill='none' stroke='%23F71A27' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}
.ca-panel::-webkit-scrollbar-button:vertical:start:increment,
.ca-panel::-webkit-scrollbar-button:vertical:end:decrement { display: none; }

@supports not selector(::-webkit-scrollbar) {
  .ca-panel { scrollbar-width: thin; scrollbar-color: var(--c-accent) var(--c-bg); }
}

.ca-panel-inner {
  width: min(1100px, 88%);
  padding: clamp(1.5rem, 5vh, 3rem) 0;
}
.ca-panel-title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ca-panel-desc {
  color: var(--c-text-dim);
  margin-top: 0.4rem;
  max-width: 60ch;
}

.ca-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.8rem;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ca-back:hover { color: var(--c-text); }
.ca-back:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

.ca-stack { display: grid; gap: 1.75rem; margin-top: 2.25rem; }
.ca-stack .ca-blocks { margin-top: 0; }

.ca-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
  align-items: start;
}
.ca-block h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 0.8rem;
}

.ca-empty {
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.5rem, 4vh, 2.5rem) 1.5rem;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  color: var(--c-text-dim);
  font-size: 0.85rem;
}
.ca-empty-title { color: var(--c-text); font-weight: 600; }

.ca-pay { display: grid; gap: 0.7rem; list-style: none; }
.ca-pay-option {
  padding: 1rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.ca-pay-option h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.ca-pay-option p { font-size: 0.82rem; color: var(--c-text-dim); }
.ca-pay-option.is-preferred { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.ca-pay-option.is-soon { opacity: 0.65; }

.ca-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 12px;
  padding: 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.ca-form .btn { justify-self: start; }
.ca-form-note { font-size: 0.78rem; color: var(--c-text-dim); margin-top: 0.4rem; }

/* ---- Il piede di un form dell'area clienti ----
   L'azione sta a destra, in fondo: è l'ultima cosa che si fa, e la si cerca
   dove finisce il modulo. Alla sua sinistra c'è il posto dell'esito.

   Quel posto **non esiste finché non serve**. Prima il paragrafo dell'esito
   stava su una riga sua e teneva la sua altezza anche da vuoto: dentro un
   riquadro piccolo non si legge come "spazio riservato", si legge come un
   buco. `:empty` lo toglie del tutto, e il piede resta la sola riga
   dell'azione. Il nodo resta nel DOM, quindi `aria-live` annuncia comunque il
   messaggio quando compare. */
.ca-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.9rem;
}
/* `1 1 12ch`: cresce con un messaggio lungo, ma anche corto tiene la sua base
   e spinge comunque l'azione a destra invece di appiccicarlesi accanto. */
.ca-form-foot .auth-feedback {
  flex: 1 1 12ch;
  margin-top: 0;
  min-height: 0;
  text-align: left;
}
.ca-form-foot .auth-feedback:empty { display: none; }
.ca-form-foot .btn { flex: none; }

.form-field input:disabled,
.form-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  resize: none;
}

.ca-link {
  justify-self: start;
  margin-top: 0.6rem;
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  /* Non accentato: a 0.8rem il rosso sul fondo della card si ferma a ~4.4:1,
     appena sotto la soglia. L'affordance la porta la sottolineatura, e
     l'accento torna in hover, dove il testo è già stato letto. */
  color: var(--c-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.ca-link:hover { color: var(--c-accent); }
.ca-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

.ca-pill,
.ca-tag {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.ca-pill { background: var(--c-button); color: #ffffff; }
.ca-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
}
.ca-tag-icon { width: 11px; height: 11px; flex: none; }

.ca-panel-inner .page-notice { margin-top: 1.6rem; margin-bottom: 0; }
/* Dentro `.ca-stack` la spaziatura la dà già il `gap` del contenitore:
   sommare anche il margine dell'avviso raddoppierebbe lo stacco. */
.ca-stack .page-notice { margin-top: 0; }

.ca-settings {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--c-border);
}
.ca-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-border);
}
.ca-setting h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.ca-setting p { font-size: 0.82rem; color: var(--c-text-dim); }
.ca-setting .btn { flex: none; }

@media (max-width: 620px) {
  .ca-setting { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* ---- Area clienti: i dati veri (Passo 12) ---------------------------------
   Il guscio dichiara gli slot, `client-data.js` li riempie. Uno slot vuoto
   deve sparire: dentro `.ca-stack` (griglia con `gap`) un div a contenuto
   nullo lascerebbe comunque due spazi sommati, e la colonna si sfalserebbe. */

[data-ca-slot]:empty,
[data-ca-switch]:empty { display: none; }

.ca-error {
  flex: none;
  margin: 1rem var(--frame-pad) 0;
}
.ca-error[hidden] { display: none; }

.ca-loading { font-size: 0.85rem; color: var(--c-text-dim); }

.ca-welcome {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-text-dim);
  padding-left: 0.9rem;
  border-left: 2px solid color-mix(in srgb, var(--c-accent) 60%, transparent);
}

/* ---- Selettore di progetto ----
   Compare solo con più di un progetto: con uno solo non c'è niente da
   scegliere e la riga sarebbe un comando che non comanda nulla. */
.ca-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.ca-switch-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-right: 0.3rem;
}
.ca-switch-btn {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ca-switch-btn:hover { color: var(--c-text); }
.ca-switch-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ca-switch-btn.is-active {
  color: #fff;
  background: var(--c-button);
  border-color: transparent;
}

/* ---- Le sezioni spiegate una per una ----
   Cinque colonne fisse, non `auto-fit`. Le sezioni dell'area clienti sono
   cinque e sono pari fra loro: con `auto-fit` la quinta finiva a capo da sola,
   e una card isolata su una seconda riga si legge come un'aggiunta invece che
   come una delle cinque. A tenerle in riga sono i `clamp()` qui sotto, che
   stringono corpo, spaziatura e altezza fino ai ~700px — sotto quella soglia
   cinque colonne diventerebbero cinque strisce, e si cede. */
.ca-guide {
  display: grid;
  /* `minmax(0, 1fr)` e non `1fr`: il minimo automatico di `1fr` è il contenuto,
     e una parola lunga terrebbe la colonna larga sfondando la griglia. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.55rem, 0.11rem + 1.02vw, 0.9rem);
  list-style: none;
}
.ca-guide-item {
  display: flex;
  flex-direction: column;
  /* L'altezza vera la detta la card col testo più lungo — la griglia le pareggia
     tutte. Questa è la soglia sotto cui nessuna scende, che è ciò che dà alle
     card la loro proporzione invece di lasciarle schiacciate sul testo. */
  min-height: clamp(13rem, 9.2rem + 8.73vw, 16rem);
  padding: clamp(0.7rem, 0.19rem + 1.16vw, 1.1rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.ca-guide-item h4 {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 0.57rem + 0.49vw, 0.95rem);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  /* "Fatture & Pagamenti" in una colonna stretta: si spezza solo se proprio
     non ci sta, invece di sbordare dalla card. */
  overflow-wrap: break-word;
}
.ca-guide-item p {
  font-size: clamp(0.72rem, 0.59rem + 0.29vw, 0.82rem);
  line-height: 1.5;
  color: var(--c-text-dim);
  flex: 1;
}
/* In colonna flex il tasto si stirerebbe a tutta larghezza, e con lui la
   sottolineatura che è la sua unica affordance. */
.ca-guide-item .ca-link {
  align-self: flex-start;
  font-size: clamp(0.72rem, 0.59rem + 0.29vw, 0.8rem);
  margin-top: 0.7rem;
}

/* Sotto i ~700px le cinque colonne non reggono: la griglia si riempie da sé e
   la simmetria si perde, ma per necessità e non per distrazione. */
@media (max-width: 700px) {
  .ca-guide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ca-guide-item { min-height: 0; }
}

/* ---- Le fasi del progetto ----
   Numerate perché sono davvero in ordine: le sezioni sopra no, e infatti non
   hanno numeri. */
.ca-flow { display: grid; gap: 0.9rem; list-style: none; }
.ca-flow-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.ca-flow-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-accent);
  padding-top: 0.15rem;
  flex: none;
}
.ca-flow-step h4 { font-family: var(--font-display); font-size: 0.92rem; }
.ca-flow-step p { font-size: 0.82rem; color: var(--c-text-dim); }

/* ---- FAQ ---- */
.ca-faq {
  border-top: 1px solid var(--c-border);
}
.ca-faq-item { border-bottom: 1px solid var(--c-border); }

.ca-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--c-text-dim);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}
.ca-faq-q::-webkit-details-marker { display: none; }
.ca-faq-q:hover,
.ca-faq-item[open] .ca-faq-q { color: var(--c-text); }
.ca-faq-q:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.ca-faq-caret {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 0.2rem;
  color: var(--c-accent);
  transition: transform 0.2s ease;
}
.ca-faq-item[open] .ca-faq-caret { transform: rotate(90deg); }

.ca-faq-a {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-dim);
  padding: 0 0 1rem 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .ca-faq-caret { transition: none; }
}

/* ---- Card, elenchi e campi ---- */
.ca-list { display: grid; gap: 0.75rem; list-style: none; }

.ca-card {
  display: grid;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.ca-card.is-compact { padding: 0.75rem 1rem; gap: 0.45rem; }

.ca-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ca-card-title { font-family: var(--font-display); font-size: 1rem; }
.ca-card-text { font-size: 0.85rem; color: var(--c-text-dim); }
.ca-meta { font-size: 0.76rem; color: var(--c-text-dim); }

/* ---- La card del progetto ----
   Identità a sinistra (titolo, e sotto la data di apertura), stato a destra
   sulla stessa riga. Stessa forma della card progetto nell'Admin: chi è, e in
   che stato è, si leggono in una riga sola. */
.ca-card-ident { flex: 1 1 auto; min-width: 0; }
.ca-card-sub {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--c-text-dim);
}
.ca-project .ca-card-head {
  /* `center` e non `baseline`: la colonna di sinistra è alta due righe, e per
     baseline la pastiglia resterebbe appesa alla prima. */
  align-items: center;
  gap: 0.6rem 1.25rem;
}
/* La pastiglia è a tutta larghezza dove spiega qualcosa (le consegne): qui è
   un'etichetta in fondo a una riga, e si stringe sulle sue parole. */
.ca-project .ca-state { flex: none; }

.ca-amount {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
}

.ca-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem 1.25rem;
}
.ca-field dd.is-long { line-height: 1.55; }

/* Le parole del cliente, riportate: si distinguono da quelle del sito. */
.ca-quote {
  padding: 0.75rem 0.95rem;
  border-left: 2px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 0 calc(var(--radius) / 2) calc(var(--radius) / 2) 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-dim);
}

/* `.ca-card-actions` e NON `.ca-actions`: quel nome è già del contenitore dei
   tasti in testata (riga 1429). Chiamarli allo stesso modo faceva vincere
   questa regola — più in basso nel foglio — e il suo `flex-wrap: wrap`
   impilava "Torna alla Home" sopra il badge dell'account. */
.ca-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ca-card-actions .ca-link { margin-top: 0; }

/* ---- Lo stato, con gli stessi toni dell'Admin ----
   È la riga che dice se si può scaricare: stesso vocabolario dai due lati
   dello schermo, o "in attesa del saldo" finirebbe per voler dire due cose. */
.ca-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--c-border);
}
.ca-state-label { font-weight: 700; }
.ca-state-note { color: var(--c-text-dim); }

.ca-state[data-tone="idle"] {
  color: var(--c-text-dim);
  background: var(--c-surface-2);
}
.ca-state[data-tone="live"] {
  color: var(--c-info);
  background: color-mix(in srgb, var(--c-info) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-info) 35%, transparent);
}
.ca-state[data-tone="live"] .ca-state-note { color: color-mix(in srgb, var(--c-info) 75%, var(--c-text-dim)); }
.ca-state[data-tone="paused"] {
  color: var(--c-warning);
  background: color-mix(in srgb, var(--c-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-warning) 35%, transparent);
}
.ca-state[data-tone="paused"] .ca-state-note { color: color-mix(in srgb, var(--c-warning) 75%, var(--c-text-dim)); }
.ca-state[data-tone="late"] {
  color: var(--c-error);
  background: color-mix(in srgb, var(--c-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-error) 35%, transparent);
}
.ca-state[data-tone="late"] .ca-state-note { color: color-mix(in srgb, var(--c-error) 75%, var(--c-text-dim)); }
.ca-state[data-tone="done"] {
  color: var(--c-success);
  background: color-mix(in srgb, var(--c-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-success) 35%, transparent);
}
.ca-state[data-tone="done"] .ca-state-note { color: color-mix(in srgb, var(--c-success) 75%, var(--c-text-dim)); }

/* ---- Log attività ---- */
.ca-timeline {
  display: grid;
  gap: 0.9rem;
  list-style: none;
  padding-left: 0.9rem;
  border-left: 1px solid var(--c-border);
}
.ca-timeline-item { position: relative; }
.ca-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-0.9rem - 4px);
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}
.ca-timeline-date {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.ca-timeline-item p { font-size: 0.88rem; line-height: 1.55; }

/* ---- Thread di messaggi ----
   Componente condiviso con l'Admin: `admin.html` carica `main.css`, quindi
   queste regole valgono anche là, e la conversazione si legge identica dai due
   lati dello schermo. Il markup lo genera `renderMessages()` in `formats.js`.

   Due assi di lettura, non uno: il LATO dice chi parla — il cliente a
   sinistra, l'admin a destra — e il RIEMPIMENTO lo conferma. Chi non
   distingue i due colori ha comunque la posizione; su una colonna stretta,
   dove le bolle si somigliano in larghezza, restano colore e nome. */

.ca-msgs {
  display: grid;
  gap: 0.3rem;
  list-style: none;
}

.ca-msg {
  /* Il colore della bolla passa da una variabile perché lo rilegge anche il
     codino: due dichiarazioni separate scivolerebbero l'una rispetto
     all'altra alla prima modifica. Il default è il lato cliente, così una
     bolla senza classe di mittente resta comunque visibile. */
  --bubble: var(--c-surface-2);
  position: relative;   /* per il codino */
  display: grid;
  gap: 0.1rem;
  /* Il tetto in `ch` è quello che conta davvero: su un monitor largo una bolla
     al 78% darebbe righe da centoventi caratteri, che non si rileggono. */
  max-width: min(78%, 46ch);
  padding: 0.5rem 0.7rem 0.35rem;
  border-radius: 13px;
  background: var(--bubble);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Il primo messaggio di una sequenza apre il turno di parola: porta il nome,
   uno stacco in più e il codino. Quelli che seguono sono la stessa voce che
   continua, e si stringono sotto senza ripetere niente. */
.ca-msg.is-first { margin-top: 0.55rem; }
.ca-msg.is-first:first-child,
.ca-msg-day + .ca-msg.is-first { margin-top: 0; }

.ca-msg.is-cliente { justify-self: start; }
.ca-msg.is-admin {
  /* Accento smorzato sul fondo della card e non `--c-accent` pieno: una bolla
     rossa a piena saturazione con testo sopra non arriva al contrasto, e
     griderebbe in una conversazione dove nessuno dei due deve gridare. */
  --bubble: color-mix(in srgb, var(--c-accent) 17%, var(--c-surface-2));
  justify-self: end;
}

/* Il codino. `background: var(--bubble)` e non `inherit`: il valore arriva
   dalla stessa variabile della bolla, quindi non c'è modo che i due colori
   scivolino l'uno rispetto all'altro. L'angolo dal lato del codino si squadra,
   o resterebbe una tacca fra i due. */
.ca-msg.is-first::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 10px;
  background: var(--bubble);
}
.ca-msg.is-cliente.is-first {
  border-top-left-radius: 2px;
}
.ca-msg.is-cliente.is-first::after {
  left: -7px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.ca-msg.is-admin.is-first {
  border-top-right-radius: 2px;
}
.ca-msg.is-admin.is-first::after {
  right: -7px;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.ca-msg-who {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ca-msg.is-cliente .ca-msg-who { color: var(--c-text-dim); }
/* Non `--c-accent` pieno: a 0.66rem sulla bolla rossa si ferma a 3,6:1, sotto
   la soglia. Schiarito verso il testo arriva a 5,6:1 — e per giunta somiglia
   di più a un nome di mittente che a un avviso. Stessa trappola già annotata
   su `.ca-link`. */
.ca-msg.is-admin .ca-msg-who { color: color-mix(in srgb, var(--c-accent) 55%, var(--c-text)); }

/* Un link incollato senza spazi è più lungo di qualunque bolla. */
.ca-msg-body { overflow-wrap: anywhere; }

.ca-msg-time {
  justify-self: end;
  font-size: 0.64rem;
  line-height: 1.2;
  color: var(--c-text-dim);
  /* Cifre a larghezza fissa: incolonnate una sotto l'altra, gli orari
     proporzionali ballano. */
  font-variant-numeric: tabular-nums;
}

/* Separatore di giornata: la data esce dalle bolle, che così portano la sola
   ora. Ripetere "25 ago 2026" su ogni messaggio è rumore in una conversazione
   che si legge tutta di seguito. */
.ca-msg-day {
  justify-self: center;
  margin: 0.85rem 0 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.ca-msg-day:first-child { margin-top: 0; }

/* Il riquadro per scrivere non fa parte della conversazione: la riga lo
   separa da ciò che si sta leggendo. */
.ca-reply {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-border);
}
.ca-reply .form-field { width: 100%; }
.ca-reply .auth-feedback { margin-top: 0; text-align: left; min-height: 0; }
.ca-reply .auth-feedback:empty { display: none; }

/* ---- Coordinate del bonifico ---- */
.ca-bank { margin-top: 0.7rem; }
.ca-iban {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: calc(var(--radius) / 2);
  background: var(--c-surface-2);
  justify-content: space-between;
}
/* L'IBAN è da trascrivere, resta a piena leggibilità anche dentro `.ca-pay-option`. */
.ca-iban span {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  color: var(--c-text);
  word-break: break-all;
}

/* ---- Form su due colonne, come nell'Admin ---- */
.ca-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
}
.ca-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text-dim);
}

/* ---- La testata si stringe a scalini ----
   Media Query per gestire alcuni elementi più ostici da ridimensionare */

/* 1: l'etichetta si accorcia. "Torna alla Home" smette di starci: le due colonne `1fr` sono
   simmetriche, quindi la testata deve contenere DUE volte la riga dei comandi più la nav in mezzo. */
@media (max-width: 1450px) {
  .ca-actions .btn-label { display: none; }
  .ca-actions .btn-label-short { display: inline; }
}

/* 2: resta la sola icona, e il tasto diventa quadrato come il badge. */
@media (max-width: 1280px) {
  .ca-actions .btn-label-short { display: none; }
  #caClose { width: var(--control-h); padding: 0; gap: 0; }
}

/* 3: soglia di "header compatto" — la nav va a capo su una riga sua, e il
   badge perde il nome restando il solo simbolo. */
@media (max-width: 900px) {
  .ca-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.7rem; }
  .ca-nav { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; }

  .ca-user { width: var(--control-h); padding-inline: 0; }
  .ca-user .ca-user-name { display: none; }
  .ca-user .account-link-chip { width: 100%; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-track { transition: none; }
}