/* Piccole estensioni: il linguaggio visivo resta quello originale di CAMPO TERZO. */
.ct-extension {
  max-width: 780px;
  margin-top: 1rem;
}

.ct-extension-label {
  color: #918b9c;
  margin: 0 0 .65rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ct-tool-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid #ffffff1f;
  border-radius: 11px;
  background: #090911cc;
}

.ct-tool {
  min-height: 44px;
  padding: .65rem .45rem;
  border-right: 1px solid #ffffff17;
  color: #aaa5b3;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s, background .2s;
}

.ct-tool:last-child { border-right: 0; }
.ct-tool:hover, .ct-tool:focus-visible { color: #fff; background: #ffffff0a; }
.ct-tool:focus-visible, .ct-mini-button:focus-visible, .ct-card-chip:focus-visible, .ct-volume:focus-visible, .ct-contact-panel select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ct-tool[aria-expanded="true"] { color: var(--cyan); background: #28e5ff12; }

.ct-inline-panel {
  margin-top: .7rem;
  overflow: hidden;
  border: 1px solid #30e5ff40;
  border-radius: 12px;
  background: #050910e8;
  box-shadow: 0 0 38px #20ccff0d;
}

.ct-inline-panel[hidden], .ct-pane[hidden] { display: none; }

.ct-pane { padding: 1.15rem 1.35rem 1.35rem; }
.ct-pane-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1rem; }
.ct-pane-head strong { color: var(--cyan); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.ct-pane-head span { color: #aaa5b3; font-size: .75rem; }
.ct-copy { color: #b7b2bf; max-width: 700px; margin: 0 0 1rem; font-size: .875rem; line-height: 1.65; }

.ct-dual { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ct-field label { display: block; color: var(--gold); margin-bottom: .45rem; font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.ct-field textarea, .ct-field input, .ct-field select {
  width: 100%;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  background: #07070d;
  color: #f7f3ff;
  padding: .8rem;
  font-size: .875rem;
  line-height: 1.55;
}
.ct-field textarea { min-height: 105px; resize: vertical; }
.ct-field input, .ct-field select { min-height: 44px; }
.ct-field textarea:focus, .ct-field input:focus, .ct-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px #28e5ff38; }
.ct-field + .ct-field { margin-top: .65rem; }

.ct-card-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ct-card-chip {
  min-height: 64px;
  padding: .65rem .5rem;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  background: linear-gradient(145deg,#ffffff0c,#ffffff05);
  color: #aaa5b3;
  cursor: pointer;
  text-align: left;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ct-card-chip span { display: block; color: var(--coral); margin-bottom: .35rem; font-family: Georgia,serif; font-size: .95rem; }
.ct-card-chip[aria-pressed="true"] { color: #fff; border-color: #28e5ff80; background: linear-gradient(145deg,#28e5ff1f,#9a6cff14); box-shadow: inset 0 0 20px #28e5ff0d; }
.ct-compare { margin-top: .75rem; padding: .85rem 1rem; border-left: 2px solid var(--violet); background: #9a6cff0d; color: #c2bdca; font-size: .82rem; line-height: 1.6; }

.ct-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.ct-mini-button {
  min-height: 44px;
  padding: .65rem .9rem;
  border: 1px solid #ffffff2e;
  border-radius: 8px;
  color: #d7d2df;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ct-mini-button.primary { color: #07070c; border-color: transparent; background: linear-gradient(115deg,#26dfff,#8c59ff 65%,#ff4f89); }
.ct-mini-button.live { color: #07070c; border-color: var(--cyan); background: var(--cyan); }
.ct-mini-button.danger { color: #ff8ba2; }
.ct-mini-button:disabled { opacity: .35; cursor: not-allowed; }

.ct-status { min-height: 1.2em; margin: .65rem 0 0; color: #aaa5b3; font-size: .8rem; }
.ct-feedback { color: var(--gold); }
.ct-privacy-line { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; color: #aaa5b3; font-size: .75rem; line-height: 1.5; }
.ct-privacy-line i { color: var(--emerald); font-style: normal; }
.ct-volume { width: min(330px, 100%); accent-color: var(--cyan); }
.ct-player { width: 100%; height: 38px; margin-top: .8rem; }
.ct-guide { display: grid; gap: .7rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ct-guide li { display: grid; grid-template-columns: 30px 1fr; gap: .75rem; align-items: start; padding: .75rem; border: 1px solid #ffffff16; border-radius: 8px; background: #ffffff06; color: #b7b2bf; font-size: .85rem; line-height: 1.6; }
.ct-guide li > b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #28e5ff55; border-radius: 50%; color: var(--cyan); }

.ct-register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem .75rem; }
.ct-register-grid .ct-field:last-child { grid-column: 1 / -1; }
.ct-register-grid .ct-field + .ct-field { margin-top: 0; }

.ct-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ct-contact-panel {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  margin-top: 1.4rem;
  padding: 1.35rem;
  border: 1px solid #30e5ff4a;
  border-radius: 14px;
  background: #070810e8;
  text-align: left;
  box-shadow: 0 18px 55px #0008, inset 0 1px #ffffff12;
}
.ct-contact-panel[hidden] { display: none; }
.ct-contact-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: .85rem; margin-bottom: .85rem; }
.ct-contact-panel .ct-field + .ct-field { margin-top: 0; }
.ct-contact-panel textarea { min-height: 110px; }
.ct-contact-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem; color: #aaa5b3; font-size: .75rem; line-height: 1.5; }
.ct-contact-meta span:first-child { max-width: 540px; }
.ct-contact-privacy { margin: .8rem 0 0; color: #aaa5b3; font-size: .78rem; line-height: 1.55; }
.ct-contact-panel .button { width: 100%; margin-top: 1rem; }

[data-ct-progress] { scroll-margin-top: 86px; }
.ct-progress-nav {
  position: fixed;
  z-index: 29;
  top: max(.75rem, env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(720px, calc(100% - 2rem));
  min-height: 58px;
  transform: translateX(-50%);
  border: 1px solid #ffffff2b;
  border-radius: 14px;
  background: #07070ce8;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 45px #0009, inset 0 1px #ffffff12;
  overflow: hidden;
}
.ct-progress-nav[hidden] { display: none; }
.ct-progress-track { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #ffffff14; }
.ct-progress-fill { display: block; width: 11.111%; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--violet),var(--coral)); box-shadow: 0 0 14px #28e5ffaa; transition: width .25s ease; }
.ct-progress-content { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px 46px; align-items: center; min-height: 58px; }
.ct-progress-button,
.ct-progress-current {
  min-height: 46px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.ct-progress-button { margin: 5px; color: #d4cedb; cursor: pointer; font-size: 1rem; }
.ct-progress-button:hover { color: #fff; background: #ffffff0b; }
.ct-progress-button:disabled { opacity: .3; cursor: not-allowed; }
.ct-progress-current { min-width: 0; padding: .45rem .8rem; flex-direction: column; gap: .1rem; text-align: left; align-items: flex-start; }
.ct-progress-current small { color: var(--cyan); font-size: .75rem; font-weight: 900; letter-spacing: .15em; }
.ct-progress-current strong { width: 100%; color: #f7f3ff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-progress-button:focus-visible,
.ct-progress-current:focus-visible { outline: 3px solid var(--gold); outline-offset: -2px; }

@media (max-width: 650px) {
  .ct-tool-row { grid-template-columns: 1fr 1fr; }
  .ct-tool { border-bottom: 1px solid #ffffff17; }
  .ct-tool:nth-child(2) { border-right: 0; }
  .ct-tool:nth-child(3), .ct-tool:nth-child(4) { border-bottom: 0; }
  .ct-dual, .ct-register-grid { grid-template-columns: 1fr; }
  .ct-card-strip { grid-template-columns: 1fr 1fr; }
  .ct-register-grid .ct-field:last-child { grid-column: auto; }
  .ct-pane-head { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .ct-contact-actions { width: 100%; }
  .ct-contact-grid { grid-template-columns: 1fr; }
  .ct-contact-panel .ct-field + .ct-field { margin-top: .65rem; }
  .ct-contact-meta { flex-direction: column; gap: .25rem; }
  [data-ct-progress] { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .ct-progress-nav { top: env(safe-area-inset-top, 0px); width: 100%; border-width: 0 0 1px; border-radius: 0 0 13px 13px; }
  .ct-progress-content { grid-template-columns: 44px minmax(0,1fr) 44px 44px; }
  .ct-progress-current { padding-inline: .55rem; }
  .ct-progress-current small { font-size: .72rem; }
  .ct-progress-current strong { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-tool, .ct-mini-button, .ct-progress-fill { transition: none; }
}

/* Accessibilità dei controlli aggiunta senza alterare il linguaggio visivo. */
.lab-origin,
.topbar nav a,
footer a,
.legal-topbar a,
.legal-document a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 760px) {
  .lab-origin { font-size: .65rem; }
}
