/* SocialHub :: Quiete Operativa
 *
 * Token, base e guscio. Un solo accento, una sola famiglia, tre raggi, tre
 * elevazioni. Le ombre sono sempre tinte, mai nere.
 */

:root {
  color-scheme: light dark;

  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-sunken: #EFF1F5;
  --surface-hover: #F2F4F7;

  --ink: #14171C;
  --ink-muted: #5A6472;
  --ink-faint: #656D7A;

  --line: #E2E6EC;
  --line-strong: #CFD5DE;

  --accent: #2450DC;
  --accent-pressed: #1B3EB4;
  --accent-ink: #FFFFFF;
  --accent-wash: #EDF1FE;

  --success: #0E7A5F;
  --success-wash: #E6F3EF;
  --warning: #A35A06;
  --warning-wash: #FBF0E3;
  --danger: #B42318;
  --danger-wash: #FBEAE7;
  --info: #1C5F8F;
  --info-wash: #E9F2F9;

  --shadow-1: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-2: 0 4px 14px rgba(20, 23, 28, 0.08);
  --shadow-3: 0 18px 48px rgba(20, 23, 28, 0.16);
  --scrim: rgba(20, 23, 28, 0.32);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;

  --sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 160ms;
  --mid: 220ms;

  --sidebar-w: 248px;
  --content-max: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0D0F13;
    --surface: #171A21;
    --surface-sunken: #101317;
    --surface-hover: #1E222B;

    --ink: #ECEFF4;
    --ink-muted: #9AA4B2;
    --ink-faint: #828B99;

    --line: #252A33;
    --line-strong: #353C48;

    --accent: #7D9BFF;
    --accent-pressed: #9DB4FF;
    --accent-ink: #0D0F13;
    --accent-wash: #1B2233;

    --success: #63C892;
    --success-wash: #16251E;
    --warning: #E0A863;
    --warning-wash: #26201A;
    --danger: #F08A80;
    --danger-wash: #2A1B1A;
    --info: #7FBEE8;
    --info-wash: #16232C;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.44);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.58);
    --scrim: rgba(6, 8, 11, 0.62);
  }
}

:root[data-theme='dark'] {
  --bg: #0D0F13;
  --surface: #171A21;
  --surface-sunken: #101317;
  --surface-hover: #1E222B;

  --ink: #ECEFF4;
  --ink-muted: #9AA4B2;
  --ink-faint: #828B99;

  --line: #252A33;
  --line-strong: #353C48;

  --accent: #7D9BFF;
  --accent-pressed: #9DB4FF;
  --accent-ink: #0D0F13;
  --accent-wash: #1B2233;

  --success: #63C892;
  --success-wash: #16251E;
  --warning: #E0A863;
  --warning-wash: #26201A;
  --danger: #F08A80;
  --danger-wash: #2A1B1A;
  --info: #7FBEE8;
  --info-wash: #16232C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.36);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.44);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.58);
  --scrim: rgba(6, 8, 11, 0.62);
}

/* ------------------------------------------------------------------- base */

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

html.sh-root {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 {
  font-size: 34px;
  line-height: 1.08;
}

h2 {
  font-size: 22px;
  line-height: 1.15;
}

h3 {
  font-size: 16px;
  line-height: 1.3;
}

p {
  margin: 0 0 var(--s3);
  max-width: 68ch;
  color: var(--ink-muted);
}

a {
  color: var(--accent);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

.sh-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.sh-spacer {
  flex: 1 1 auto;
}

.sh-topbar__spacer {
  flex: 1 1 auto;
}

.sh-icon {
  flex: 0 0 auto;
  display: block;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ----------------------------------------------------------------- guscio */

.sh-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
}

.sh-shell--plain {
  align-items: center;
  justify-content: center;
  padding: var(--s4);
}

.sh-shell--plain .sh-card {
  max-width: 460px;
}

.sh-side {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 var(--sidebar-w);
  flex-direction: column;
  gap: var(--s2);
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--line);
  background: var(--surface);
}

/* Il blocco del cliente e' un bottone: stessa quiete di prima, piu' la
   possibilita' di cambiare attivita' senza cercare un menu. */
.sh-brand {
  display: flex;
  width: 100%;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  margin-bottom: var(--s3);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.sh-brand:hover {
  background: var(--surface-hover);
}

.sh-brand--on {
  background: var(--accent-wash);
}

.sh-brand__caret {
  flex: 0 0 auto;
  color: var(--ink-faint);
}

.sh-brand__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
}

.sh-brand__text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.sh-brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-brand__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sh-brand__ws {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-navlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-nav {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: 9px var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.sh-nav:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.sh-nav--on {
  background: var(--accent-wash);
  color: var(--accent);
}

.sh-nav__label {
  flex: 1 1 auto;
}

.sh-nav__badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--warning);
  color: var(--surface);
  font-size: 12px;
  font-weight: 700;
}

.sh-side__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.sh-side__foot .sh-btn {
  justify-content: flex-start;
}

.sh-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.sh-top {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
}

.sh-top__theme {
  display: none;
}

.sh-view {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--s4) var(--s5) var(--s6);
  margin: 0 auto;
}

.sh-bottombar {
  display: none;
}

@supports not (color: color-mix(in srgb, white, black)) {
  .sh-top {
    background: var(--bg);
  }
}

/* ---------------------------------------------------------------- bottoni */

.sh-btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.sh-btn:active {
  transform: scale(0.97);
}

.sh-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.sh-btn[disabled]:active {
  transform: none;
}

.sh-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.sh-btn--primary:hover {
  background: var(--accent-pressed);
}

.sh-btn--outline {
  border-color: var(--line-strong);
  background: var(--surface);
}

.sh-btn--outline:hover {
  background: var(--surface-hover);
}

.sh-btn--quiet {
  color: var(--ink-muted);
}

.sh-btn--quiet:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.sh-btn--danger {
  color: var(--danger);
}

.sh-btn--danger:hover {
  background: var(--danger-wash);
}

.sh-btn--icon {
  width: 38px;
  padding: 0;
}

/* -------------------------------------------------------------- etichette */

.sh-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.sh-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.sh-dot--neutral { background: var(--ink-faint); }
.sh-dot--info { background: var(--info); }
.sh-dot--success { background: var(--success); }
.sh-dot--warning { background: var(--warning); }
.sh-dot--danger { background: var(--danger); }
.sh-dot--accent { background: var(--accent); }

.sh-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.sh-chan {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sh-chan--lg {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* ------------------------------------------------------------------ campi */

.sh-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: var(--s4);
}

.sh-label {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.sh-input,
.sh-textarea {
  width: 100%;
  padding: 11px var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

.sh-textarea {
  min-height: 132px;
  line-height: 1.55;
  resize: vertical;
}

.sh-input::placeholder,
.sh-textarea::placeholder {
  color: var(--ink-faint);
}

.sh-input:focus,
.sh-textarea:focus {
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash), inset 0 0 0 1px var(--accent);
}

.sh-count {
  display: flex;
  gap: var(--s3);
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 12px;
}

.sh-count--over {
  color: var(--danger);
  font-weight: 500;
}

/* ------------------------------------------------------------------- box */

/* Piano uno: bordo hairline e nessuna ombra. L'ombra resta al piano due,
 * cioe' sheet, menu e l'elemento trascinato. */
.sh-card {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.sh-card + .sh-card,
.sh-card + .sh-note,
.sh-note + .sh-card {
  margin-top: var(--s3);
}

.sh-rows {
  display: flex;
  flex-direction: column;
  padding: var(--s2) 0;
}

.sh-row {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sh-row + .sh-row {
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.sh-row__main {
  min-width: 0;
  flex: 1 1 auto;
}

.sh-row__title {
  font-size: 15px;
  font-weight: 500;
}

.sh-row__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-faint);
  font-size: 13px;
}

.sh-section {
  margin-top: var(--s5);
}

.sh-section__head {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  margin-bottom: var(--s3);
}

.sh-section__hint {
  color: var(--ink-faint);
  font-size: 13px;
}

/* --------------------------------------------------------------- messaggi */

.sh-note {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.sh-note__body {
  flex: 1 1 auto;
}

.sh-note--accent { background: var(--accent-wash); color: var(--accent); }
.sh-note--success { background: var(--success-wash); color: var(--success); }
.sh-note--warning { background: var(--warning-wash); color: var(--warning); }
.sh-note--danger { background: var(--danger-wash); color: var(--danger); }

.sh-field .sh-note,
.sh-sheet__body > .sh-note {
  margin-bottom: var(--s3);
}

.sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s6) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}

.sh-empty__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s3);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent);
}

.sh-empty__title {
  margin-bottom: 6px;
}

.sh-empty__text {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}

/* -------------------------------------------------------------- scheletri */

.sh-skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  animation: sh-pulse 1400ms var(--ease) infinite alternate;
}

.sh-skeleton--text {
  width: 100%;
  height: 13px;
  border-radius: var(--r-pill);
}

.sh-skeleton--block {
  width: 100%;
  height: 72px;
}

@keyframes sh-pulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

.sh-shell--booting {
  pointer-events: none;
}

/* Chi chiede meno movimento non perde il feedback: resta una dissolvenza
 * breve, senza spostamenti ne' scale, e le pulsazioni infinite si fermano. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-name: none !important;
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, border-color, color !important;
    transition-duration: 80ms !important;
  }

  .sh-skeleton {
    opacity: 0.8;
  }
}

/* ----------------------------------------------------------- statistiche */

/* Un solo pannello diviso da hairline, non tre card sullo stesso piano.
 * Il fondo --line si vede solo nel gap da 1px: e' il divisore. */
.sh-stats {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  gap: 1px;
  /* Quattro numeri in fila su schermo pieno, due a due quando si stringe:
     cosi' non resta mai una cella spaiata a fare da buco. */
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.sh-stat {
  padding: var(--s4);
  background: var(--surface);
}

.sh-stat__label {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.sh-stat__value {
  margin: 2px 0 4px;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sh-stat__note {
  color: var(--ink-faint);
  font-size: 12.5px;
}

.sh-bar {
  display: grid;
  gap: var(--s3);
  align-items: center;
  grid-template-columns: 132px 1fr 64px;
  font-size: 14px;
}

.sh-bar + .sh-bar {
  margin-top: var(--s3);
}

.sh-bar__track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
}

.sh-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.sh-bar__value {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ----------------------------------------------------------------- avvisi */

.sh-toasts {
  position: fixed;
  z-index: 80;
  bottom: var(--s4);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: center;
  width: max-content;
  max-width: calc(100vw - var(--s5));
  transform: translateX(-50%);
}

.sh-toast {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: 11px var(--s3);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-3);
  animation: sh-rise var(--mid) var(--ease) both;
}

/* accent-ink si ribalta col tema: bianco sul chiaro, quasi nero sullo scuro,
 * dove i semantici si schiariscono e il bianco non si leggerebbe piu'. */
.sh-toast--success { background: var(--success); color: var(--accent-ink); }
.sh-toast--warning { background: var(--warning); color: var(--accent-ink); }
.sh-toast--danger { background: var(--danger); color: var(--accent-ink); }

@keyframes sh-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- pannello */

.sh-scrim {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(8px);
  animation: sh-fade var(--mid) var(--ease) both;
}

@keyframes sh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sh-sheet {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(560px, 100vw);
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  animation: sh-slide-right var(--mid) var(--ease) both;
}

@keyframes sh-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.sh-grab {
  display: none;
}

.sh-sheet__head {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}

.sh-sheet__title {
  font-size: 18px;
  font-weight: 700;
}

.sh-sheet__body {
  flex: 1 1 auto;
  padding: var(--s4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sh-sheet__foot {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* -------------------------------------------------------------- composer */

.sh-chanpick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-chanpick__btn {
  display: flex;
  gap: var(--s3);
  align-items: center;
  width: 100%;
  padding: 11px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.sh-chanpick__btn:hover {
  background: var(--surface-hover);
}

.sh-chanpick__btn[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.sh-chanpick__meta {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.sh-chanpick__name {
  font-size: 14px;
  font-weight: 500;
}

.sh-chanpick__handle {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-fmtpick {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
}

.sh-fmtpick__btn {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.sh-fmtpick__btn[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.sh-media {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.sh-media__item {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}

.sh-media__item img,
.sh-media__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-media__x {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.sh-drop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.sh-drop:hover,
.sh-drop--over {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ------------------------------------------------------------- anteprime */

.sh-previews {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.sh-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.sh-preview__head {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) var(--s3);
}

.sh-preview__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sh-preview__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-preview__fmt {
  color: var(--ink-faint);
  font-size: 11.5px;
}

.sh-preview__frame {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background: var(--surface-sunken);
}

.sh-preview__frame img,
.sh-preview__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-preview__ph {
  color: var(--ink-faint);
  font-size: 12.5px;
}

.sh-preview__cap {
  display: -webkit-box;
  padding: var(--s2) var(--s3) var(--s3);
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ------------------------------------------------------------- calendario */

.sh-cal__head {
  display: flex;
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s3);
}

.sh-cal__range {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 15px;
  font-weight: 500;
}

.sh-cal__range span {
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 400;
}

.sh-cal__grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sh-day {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--surface);
  transition: background var(--fast) var(--ease);
}

.sh-day--off {
  background: var(--surface-sunken);
}

.sh-day--drop {
  background: var(--accent-wash);
}

.sh-day__head {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px var(--s1) var(--s2);
  border-bottom: 1px solid var(--line);
}

.sh-day__dow {
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sh-day__num {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sh-day--today .sh-day__num {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.sh-day--today .sh-day__dow {
  color: var(--accent);
}

.sh-day__add {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}

.sh-day:hover .sh-day__add,
.sh-day__add:focus-visible {
  opacity: 1;
}

.sh-day__add:hover {
  background: var(--accent-wash);
  color: var(--accent);
}

.sh-day__items {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
}

.sh-day__empty {
  padding: var(--s1);
  color: var(--ink-faint);
  font-size: 12px;
}

.sh-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: left;
  cursor: grab;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.sh-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

.sh-item--dragging {
  transform: rotate(1deg) scale(1.02);
  box-shadow: var(--shadow-3);
}

.sh-item__top {
  display: flex;
  gap: 5px;
  align-items: center;
}

.sh-item__time {
  flex: 1 1 auto;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sh-item__chans {
  display: flex;
  gap: 3px;
}

.sh-item__body {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.sh-item__thumb {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.sh-item__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sh-loose {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* --------------------------------------------------------------- telefono */

@media (max-width: 900px) {
  .sh-side {
    display: none;
  }

  .sh-top {
    padding: var(--s3);
  }

  .sh-top h1 {
    font-size: 24px;
  }

  .sh-top__theme {
    display: inline-flex;
  }

  .sh-view {
    padding: var(--s3) var(--s3) 104px;
  }

  .sh-cal__grid {
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: var(--s2);
    grid-template-columns: 1fr;
  }

  .sh-day {
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }

  .sh-day__add {
    opacity: 1;
  }

  .sh-bar {
    grid-template-columns: 96px 1fr 54px;
  }

  .sh-bottombar {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 6px var(--s2) calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .sh-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    padding: 6px 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
  }

  .sh-tab--on {
    color: var(--accent);
  }

  .sh-sheet {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    border-left: 0;
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
    animation-name: sh-slide-up;
  }

  .sh-sheet__foot {
    padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  }

  .sh-grab {
    display: block;
    width: 38px;
    height: 4px;
    margin: var(--s2) auto 0;
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }

  .sh-toasts {
    bottom: 96px;
  }
}

@keyframes sh-slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- clienti */

.sh-clients {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sh-client {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.sh-client:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Il cliente aperto adesso resta riconoscibile anche da fermo, senza che il
   colore sia l'unica cosa a dirlo: il bordo cambia spessore percepito. */
.sh-client--on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sh-client__head {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  justify-content: space-between;
}

.sh-client__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sh-client__chans {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.sh-client__nums {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(3, 1fr);
}

.sh-client__nums > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-client__num {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sh-client__cap {
  color: var(--ink-faint);
  font-size: 12px;
}

.sh-client__foot {
  display: flex;
  gap: var(--s1);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.sh-client__next {
  flex: 1 1 auto;
  color: var(--ink-muted);
  font-size: 13px;
}

/* La scheda intera resta cliccabile col mouse, ma il nome e' un bottone vero:
   chi naviga da tastiera trova un fermo solo per cliente invece di
   attraversarne tre, e il bottone non porta nessuno stile suo. */
.sh-client__open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* La rotella compare al passaggio del mouse, come il piu' nel calendario:
   venti clienti con venti rotelle sempre accese sarebbero venti inviti a fare
   una cosa che si fa una volta ogni tanto. Dove il mouse non esiste resta
   visibile, altrimenti non ci si arriverebbe mai. */
.sh-client__gear {
  width: 30px;
  height: 30px;
  min-height: 0;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.sh-client:hover .sh-client__gear,
.sh-client__gear:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .sh-client__gear {
    opacity: 1;
  }
}

/* =========================================================== impostazioni
 *
 * Profilo, abbonamento e squadra. Sono schermate da visitare di rado: pochi
 * blocchi larghi, molta aria, nessun colore che chieda attenzione oltre
 * all'unico accento gia' in uso altrove.
 * ------------------------------------------------------------------------ */

.sh-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--s5);
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  align-self: flex-start;
  width: fit-content;
}

.sh-tabs__one {
  padding: 8px var(--s4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.sh-tabs__one:hover {
  color: var(--ink);
}

.sh-tabs__one--on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.sh-panel {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.sh-panel + .sh-section,
.sh-section + .sh-section {
  margin-top: var(--s6);
}

.sh-panel__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.sh-section__note {
  color: var(--ink-muted);
  font-size: 14px;
}

.sh-hint {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Le stesse misure del campo di testo: una tendina accanto a un campo non
   deve sedersi due pixel piu' in basso. */
.sh-select {
  padding: 11px var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.sh-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.sh-form {
  display: grid;
  gap: var(--s4);
  max-width: 460px;
}

/* ------------------------------------------------------------------ chi sei */

.sh-ident {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.sh-ident__face {
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
}

.sh-ident__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sh-ident__role {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 14px;
}

/* -------------------------------------------------------------- abbonamento */

.sh-plannow {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
}

.sh-plannow__cap {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sh-plannow__name {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sh-plannow__note {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 14px;
}

.sh-plannow > .sh-pill {
  margin-left: auto;
}

.sh-usage {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.sh-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
}

.sh-toggle__opt {
  padding: 6px var(--s3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.sh-toggle__opt--on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ---------------------------------------------------------------- i piani */

.sh-plans {
  display: grid;
  /* Quattro piani: due file da due. A 212px ne entravano tre e il quarto
     restava da solo in fondo, come un ripensamento. */
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s4);
}

.sh-plan {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* Il piano gia' pagato non si vende: un bordo d'accento e nessun bottone. */
.sh-plan--on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sh-plan__name {
  font-size: 15px;
  font-weight: 600;
}

.sh-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sh-plan__per {
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.sh-plan__blurb {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sh-plan__list {
  margin: var(--s2) 0 var(--s4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}

.sh-plan__list li {
  padding-left: var(--s4);
  position: relative;
}

.sh-plan__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.sh-plan > .sh-btn,
.sh-plan > .sh-pill {
  margin-top: auto;
  justify-content: center;
}

/* ------------------------------------------------------------- pagamenti */

.sh-method {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 15px;
}

.sh-method__brand {
  font-weight: 600;
}

.sh-method__exp {
  color: var(--ink-muted);
  font-size: 14px;
}

.sh-table {
  margin-top: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.sh-table__head,
.sh-table__row {
  display: grid;
  grid-template-columns: 1.1fr 1.7fr 1fr 0.9fr 0.8fr;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
}

.sh-table__head {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sh-table__row {
  border-top: 1px solid var(--line);
  font-size: 14px;
}

/* ---------------------------------------------------------------- squadra */

.sh-people {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.sh-person {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}

.sh-person:first-child {
  border-top: 0;
}

.sh-person__who {
  display: grid;
  min-width: 0;
  flex: 1;
}

.sh-person__name {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-person__mail {
  color: var(--ink-faint);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-person__scope {
  color: var(--ink-muted);
  font-size: 13px;
}

.sh-person__role {
  color: var(--ink-muted);
  font-size: 14px;
}

.sh-person__select {
  padding: 7px var(--s3);
  font-size: 14px;
}

.sh-invite {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s4);
}

.sh-invite .sh-panel__foot {
  grid-column: 1 / -1;
}

/* Sotto i 720 il tavolo si smonta: ogni riga diventa un blocco leggibile. */
@media (max-width: 720px) {
  .sh-invite {
    grid-template-columns: 1fr;
  }

  .sh-table__head {
    display: none;
  }

  .sh-table__row {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
  }

  .sh-person {
    flex-wrap: wrap;
  }

  .sh-person__scope {
    width: 100%;
    order: 3;
  }
}

/* La rotella in alto serve dove la colonna non c'e'. */
@media (min-width: 981px) {
  .sh-top__gear {
    display: none;
  }
}

/* ----------------------------------------------------------- revisioni */

/* Una colonna sola anche sugli schermi larghi: si leggono uno alla volta,
   e una didascalia messa in due colonne non si legge affatto. */
.sh-reviews {
  display: grid;
  gap: var(--s3);
}

.sh-review {
  display: grid;
  gap: var(--s3);
}

.sh-review__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}

.sh-review__ident {
  display: grid;
  gap: var(--s2);
  min-width: 0;
  flex: 1;
}

.sh-review__title {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
}

.sh-review__title:hover {
  color: var(--accent);
}

.sh-review__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.sh-review__when {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

/* Tre righe bastano a capire di cosa si parla: per il resto si apre il
   contenuto, che e' a un clic sul titolo. */
.sh-review__body {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sh-review__signature {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

.sh-review__ask {
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.sh-review__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ------------------------------------------------------------- registro */

.sh-log {
  list-style: none;
  margin: 0;
  padding: var(--s3) 0 0;
  display: grid;
  gap: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.sh-log__row {
  color: var(--ink-muted);
}

.sh-log__who {
  color: var(--ink);
  font-weight: 500;
}

.sh-log__when {
  color: var(--ink-faint);
}

.sh-log__note {
  margin: var(--s1) 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--line-strong);
  color: var(--ink);
}

/* ---------------------------------------------------------------- vetrina
 *
 * La pagina pubblica di /registrati. Vive nello stesso foglio dell'app perche'
 * deve usare gli stessi token: chi entra non deve accorgersi di aver cambiato
 * prodotto fra il listino e il calendario.
 */

.sh-body--land {
  display: block;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  background: var(--bg);
}

.sh-land__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s4) var(--s3);
}

.sh-land__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sh-land {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s3) var(--s6);
}

.sh-land__hero {
  padding: var(--s6) 0 var(--s5);
  max-width: 44rem;
}

.sh-land__h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.sh-land__sub {
  margin: var(--s3) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.sh-land__go {
  margin-top: var(--s4);
  text-decoration: none;
}

.sh-land__fine {
  margin: var(--s2) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.sh-land__h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sh-land__lede {
  margin: var(--s2) 0 0;
  color: var(--ink-muted);
}

.sh-land__foot {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- offerte */

.sh-land__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s3);
  align-items: start;
}

.sh-plan {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.sh-plan--pick {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.sh-plan--on {
  border-color: var(--accent);
}

.sh-plan__flag {
  align-self: flex-start;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
}

.sh-plan__kicker {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.sh-plan__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sh-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: var(--s1) 0 0;
}

.sh-plan__amount {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sh-plan__unit {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.sh-plan__custom {
  font-size: 1.125rem;
  color: var(--ink);
}

.sh-plan__blurb {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.sh-plan__list {
  margin: var(--s2) 0 var(--s3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.sh-plan__list li {
  position: relative;
  padding-left: var(--s3);
  line-height: 1.45;
}

/* Il segno di spunta e' disegnato con un bordo piegato: una lista di vantaggi
   non ha bisogno di caricare un'icona per ogni riga. */
.sh-plan__list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.35em;
  width: 5px;
  height: 9px;
  border: solid var(--accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.sh-plan__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

/* ---------------------------------------------------------- registrazione */

.sh-land__open {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.sh-signup {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.sh-signup__err {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 0.875rem;
}

.sh-signup__plan {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 0.9375rem;
}

.sh-signup__go {
  justify-content: center;
  width: 100%;
}

.sh-signup__foot {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-align: center;
}

.sh-signup__foot a {
  color: var(--accent);
}

.sh-signup__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .sh-land__open {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}

/* ------------------------------------------------------------ collegamenti */

/* Gli identificativi tecnici (indirizzi di ritorno, nomi dei permessi) vanno
   letti carattere per carattere e spesso ricopiati: il monospazio e' l'unico
   modo di non confondere l per 1 mentre si incolla in una console. */
.sh-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

.sh-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Il piede della scheda piattaforma: il bottone principale prende lo spazio,
   l'ingranaggio delle credenziali resta al suo fianco senza rubargli peso. */
.sh-plan__foot {
  margin-top: auto;
  padding-top: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.sh-plan__foot .sh-btn {
  flex: 1;
  justify-content: center;
}

.sh-check {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Una riga scelta si distingue per fondo, non per bordo: il bordo sposterebbe
   di un pixel tutte le righe sotto a ogni spunta. */
.sh-row--on {
  background: var(--surface-sunken);
}

label.sh-row {
  cursor: pointer;
}

/* --------------------------------------------------------------- banco prova
   Una scheda sola, con il campo sopra e i comandi sotto: il risultato compare
   dentro la stessa scheda, cosi' lo sguardo non deve andare a cercarlo. */

.sh-banco {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
}

.sh-banco__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.sh-banco__foot .sh-select {
  max-width: 220px;
}

/* Il conteggio delle altre regole va a capo: e' una nota, non la risposta. */
.sh-note .sh-row__meta {
  display: block;
  margin-top: var(--s1);
}

/* --------------------------------------------------- conversazione */

/* Le osservazioni stanno accanto al contenuto, dentro il pannello in cui lo
   si scrive: chi risponde a un commento ha il testo sotto gli occhi mentre
   lo fa. */

.sh-talk__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

.sh-talk__riga {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}

.sh-talk__foto {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--surface-sunken);
}

.sh-talk__corpo {
  min-width: 0;
}

.sh-talk__chi {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  flex-wrap: wrap;
}

.sh-talk__nome {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.sh-talk__quando {
  font-size: 13px;
  color: var(--ink-faint);
}

.sh-talk__testo {
  margin: var(--s1) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Quello che ho scritto io si riconosce senza spostarsi di lato: le chat
   allineate a destra qui farebbero solo perdere la colonna di lettura. */
.sh-talk__riga--io .sh-talk__testo {
  color: var(--ink);
}

.sh-talk__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

/* Uscite gia' online. Il segno e' una spunta, non un colore: il colore da solo
   non si vede quando le schede sono sei in una colonna stretta, e non si vede
   affatto per chi non distingue il verde. Il filo a sinistra fa il resto. */
.sh-item--pubblicato {
  border-color: color-mix(in srgb, var(--success) 32%, var(--line));
  box-shadow: inset 3px 0 0 var(--success);
}

.sh-item--pubblicato:hover {
  border-color: var(--success);
}

.sh-item--pubblicato .sh-item__time {
  color: var(--success);
}

.sh-item__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success-wash);
  color: var(--success);
}


/* ---------------------------------------------------------------- accesso
   /entra e /entra/impostazioni: una scheda sola al centro, il bottone di
   Google in cima e la password come seconda strada. */

.sh-entra {
  display: grid;
  place-items: start center;
  padding: var(--s5) var(--s3);
}

.sh-entra__card {
  display: grid;
  gap: var(--s3);
  width: 100%;
  max-width: 420px;
  padding: var(--s5) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.sh-entra__card--wide {
  max-width: 640px;
}

.sh-entra__h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sh-entra__lede {
  margin: 0 0 var(--s2);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Il bottone di Google: bianco, bordo pieno, la G a colori. Largo quanto la
   scheda perche' e' la strada principale. */
.sh-entra__google {
  gap: 12px;
  width: 100%;
  min-height: 44px;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.sh-entra__google:hover {
  background: var(--surface-hover);
}

.sh-entra__google[disabled]:hover {
  background: var(--surface);
}

.sh-entra__g {
  flex: none;
}

.sh-entra__nota {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.sh-entra__nota a {
  color: var(--accent);
}

.sh-entra__or {
  display: flex;
  gap: var(--s2);
  align-items: center;
  color: var(--ink-faint);
  font-size: 13px;
}

.sh-entra__or::before,
.sh-entra__or::after {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  content: "";
}

.sh-entra__pw {
  width: 100%;
  min-height: 44px;
  text-decoration: none;
}

/* ------------------------------------------------ accesso: impostazioni */

.sh-entra__stato {
  justify-self: start;
  margin: 0;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--warning-wash);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
}

.sh-entra__stato--on {
  background: var(--success-wash);
  color: var(--success);
}

.sh-entra__esito {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sh-entra__esito--success {
  background: var(--success-wash);
  color: var(--success);
}

.sh-entra__esito--warning {
  background: var(--warning-wash);
  color: var(--warning);
}

.sh-entra__esito--danger {
  background: var(--danger-wash);
  color: var(--danger);
}

.sh-entra__passi {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.sh-entra__passi strong {
  color: var(--ink);
  font-weight: 500;
}

.sh-entra__passi a {
  color: var(--accent);
}

.sh-entra__copia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink);
}

.sh-entra__copia code {
  min-width: 0;
  flex: 1 1 16rem;
}

.sh-entra__form {
  margin: 0;
}

.sh-entra__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

@media (max-width: 520px) {
  .sh-entra {
    padding-top: var(--s4);
  }

  .sh-entra__card {
    padding: var(--s4) var(--s3);
  }

  .sh-entra__h1 {
    font-size: 1.5rem;
  }
}


.sh-land__foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sh-land__foot a:hover {
  color: var(--ink);
}