/* ==========================================================================
   Corridoio — stile
   Idea: i corridoi dell'università. Bianco carta, inchiostro, il verde dei cartelli
   di uscita come unico colore d'accento. L'unico elemento "forte" è l'evidenziatore
   giallo sui nomi degli esami: tutto il resto resta sobrio.
   ========================================================================== */

@font-face {
  font-family: "Corridoio Text";
  src: url("/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Corridoio Text";
  src: url("/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Corridoio Text";
  src: url("/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Condensed";
  src: url("/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colori: tema chiaro (predefinito) ---------- */
:root {
  --paper: #FFFFFF;
  --hall: #F3F5F4;
  --ink: #1D2321;
  --graphite: #5D6966;
  --line: #DFE4E2;
  --exit: #0B7A5B;
  --exit-strong: #08624A;
  --exit-tint: #E4F2EC;
  --on-exit: #FFFFFF;
  --marker: #FFE45C;
  --danger: #B3261E;
  --danger-tint: #FBEAE8;

  --font-text: "Corridoio Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sign: "Plex Condensed", "Arial Narrow", system-ui, sans-serif;

  --rail: 232px;
  --column: 640px;
  --aside: 300px;
  --tabbar: 62px;

  color-scheme: light;
}

/* ---------- Tema scuro (scelto dall'utente nel profilo) ---------- */
:root[data-theme="dark"] {
  --paper: #121614;
  --hall: #1A1F1D;
  --ink: #E7ECE9;
  --graphite: #9AA7A2;
  --line: #2A312E;
  --exit: #3DB48D;
  --exit-strong: #5CC9A4;
  --exit-tint: #17302A;
  --on-exit: #0B1210;
  --marker: rgba(255, 214, 0, .32);
  --danger: #F2867E;
  --danger-tint: #3A1C1A;
  color-scheme: dark;
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--font-sign);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .75rem; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--exit);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon { flex-shrink: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Avvio ---------- */
.splash {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  color: var(--graphite);
  font-family: var(--font-sign);
  font-size: 1.25rem;
}

/* ---------- Struttura ---------- */
.shell { min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sign);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
}

.wordmark img { width: 30px; height: 30px; }
.wordmark:hover { text-decoration: none; }

.content {
  min-width: 0;
  padding-bottom: calc(var(--tabbar) + 24px + env(safe-area-inset-bottom));
}

.aside { display: none; }

/* Barra di navigazione: in basso sul telefono, a sinistra su schermi larghi */
.nav {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--graphite);
  font-size: .7rem;
}

.nav-link:hover { text-decoration: none; color: var(--ink); }
.nav-link.active { color: var(--exit); font-weight: 700; }

.nav-count {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--exit);
  color: var(--on-exit);
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nav .wordmark, .nav .nav-extra, .nav .nav-me { display: none; }

@media (min-width: 760px) {
  .topbar { display: none; }

  .shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--column));
    justify-content: center;
  }

  .nav {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }

  .nav .wordmark { display: inline-flex; margin: 0 10px 22px; }
  .nav .nav-extra { display: flex; }

  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1rem;
  }

  .nav-link:hover { background: var(--hall); }
  .nav-link.active { background: var(--exit-tint); }
  .nav-count { position: static; margin-left: auto; }

  .nav .nav-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px;
    border-radius: 8px;
  }

  .nav .nav-me:hover { background: var(--hall); text-decoration: none; }

  .content {
    border-right: 1px solid var(--line);
    padding-bottom: 48px;
  }
}

@media (min-width: 1180px) {
  .shell { grid-template-columns: var(--rail) minmax(0, var(--column)) var(--aside); }
  .shell.no-aside { grid-template-columns: var(--rail) minmax(0, calc(var(--column) + var(--aside))); }

  .aside {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px 20px 40px;
  }
}

/* ---------- Testata di pagina ---------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 14px;
}

.page-head p { margin: 4px 0 0; color: var(--graphite); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px 0;
  color: var(--graphite);
  font-size: .9rem;
}

/* ---------- Sezioni ed elenchi ---------- */
.section { border-top: 1px solid var(--line); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 6px;
}

.section-head a { color: var(--exit); font-size: .9rem; }

.rows { list-style: none; margin: 0; padding: 0; }
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.rows > li + li > .row-item, .rows > li + li.row-item { border-top: 1px solid var(--line); }
a.row-item:hover { background: var(--hall); text-decoration: none; }

.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
a.row-title:hover { text-decoration: underline; }
.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--graphite);
  font-size: .88rem;
}

.meta-item { display: inline-flex; align-items: center; gap: 5px; }

.empty {
  padding: 28px 16px;
  color: var(--graphite);
}

.empty p { margin-bottom: 12px; }

.muted { color: var(--graphite); }
.small { font-size: .88rem; }
.hidden { display: none !important; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.pad { padding: 0 16px; }
.pad-block { padding: 0 16px 18px; }

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Esami: l'evidenziatore ---------- */
.exam {
  font-weight: 700;
  padding: 0 .2em;
  background: linear-gradient(176deg, transparent 38%, var(--marker) 38%, var(--marker) 88%, transparent 88%);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a.exam:hover { text-decoration: none; filter: saturate(1.4); }

/* Etichette libere (città, passioni...): più discrete */
.topic {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--graphite);
  font-size: .82rem;
}

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }

/* ---------- Avatar ---------- */
.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: .02em;
}

.avatar-0 { background: #DCEFE6; color: #0B5A43; }
.avatar-1 { background: #E5E3F4; color: #3D3580; }
.avatar-2 { background: #F7E6D5; color: #7A4313; }
.avatar-3 { background: #DDEAF6; color: #1D4F7C; }
.avatar-4 { background: #F5DFE5; color: #85253F; }
.avatar-5 { background: #EAEDD6; color: #4E5713; }

:root[data-theme="dark"] .avatar-0 { background: #1E3A30; color: #9ADBC0; }
:root[data-theme="dark"] .avatar-1 { background: #2A2846; color: #BDB6F0; }
:root[data-theme="dark"] .avatar-2 { background: #3F2C1B; color: #F0C79E; }
:root[data-theme="dark"] .avatar-3 { background: #1C2F42; color: #A9CDEE; }
:root[data-theme="dark"] .avatar-4 { background: #3E2129; color: #F0AFC0; }
:root[data-theme="dark"] .avatar-5 { background: #31351A; color: #D5DD9C; }

/* ---------- Post (bacheca pubblica e bacheca dei gruppi) ---------- */
.post {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.post-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.post-author { font-weight: 700; }
.post-sub { color: var(--graphite); font-size: .86rem; }
.post-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.post-actions { display: flex; align-items: center; gap: 4px; margin: 6px 0 -6px -8px; }

.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--graphite);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.action:hover { background: var(--hall); color: var(--ink); }
.action.on { color: var(--exit); }
.action.on .icon { fill: currentColor; }
.action-end { margin-left: auto; }

.comments { grid-column: 2; margin-top: 8px; border-left: 2px solid var(--line); padding-left: 12px; }
.comment { padding: 6px 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; }
.comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; margin-top: 6px; }

/* Composer: scrivere un nuovo post */
.composer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 12px;
  padding: 4px 16px 14px;
}

.composer textarea { min-height: 44px; }
.composer-bar { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---------- Form ---------- */
label, .label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 5px; }
.field { margin-bottom: 16px; }
.hint { color: var(--graphite); font-size: .84rem; margin-top: 5px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

input:hover, select:hover, textarea:hover { border-color: var(--graphite); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--exit); outline-offset: -1px; border-color: var(--exit); }
textarea { resize: none; min-height: 44px; line-height: 1.4; overflow-y: hidden; display: block; }

.search {
  position: relative;
  margin: 0 16px 12px;
}

.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--graphite); }
.search input { padding-left: 40px; background: var(--hall); border-color: transparent; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--exit); }

.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-weight: 400;
  cursor: pointer;
}

.choice input { margin-top: 4px; accent-color: var(--exit); }
.choice:has(input:checked) { border-color: var(--exit); background: var(--exit-tint); }
.choice strong { display: block; }

.notice {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: .95rem;
}

.notice-error { background: var(--danger-tint); color: var(--danger); }
.notice-ok { background: var(--exit-tint); color: var(--exit-strong); }

.form { padding: 4px 16px 20px; }

fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }

/* Segmenti (es. tema chiaro/scuro) */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.segmented button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 7px; background: none; color: var(--graphite);
  font: inherit; padding: 6px 14px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--exit);
  border-radius: 8px;
  background: var(--exit);
  color: var(--on-exit);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover { background: var(--exit-strong); border-color: var(--exit-strong); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-quiet { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--hall); border-color: var(--line); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(.9); }
.btn-small { min-height: 32px; padding: 0 12px; font-size: .88rem; }
.btn-wide { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--graphite);
  cursor: pointer;
}

.icon-btn:hover { background: var(--hall); color: var(--ink); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--graphite);
  font-size: .88rem;
  white-space: nowrap;
}

/* ---------- Schede ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs button {
  position: relative;
  border: 0;
  background: none;
  font: inherit;
  color: var(--graphite);
  padding: 12px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.tabs button.active { color: var(--ink); font-weight: 700; }
.tabs button.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--exit);
}

/* ---------- Gruppo: testata ---------- */
.group-head { padding: 18px 16px 16px; }
.group-head h1 { margin-bottom: 6px; }
.group-head .post-body { margin: 10px 0 14px; }

/* ---------- Profilo ---------- */
.profile-head { display: flex; align-items: center; gap: 16px; padding: 22px 16px 16px; }
.profile-head p { margin: 2px 0 0; }

.availability { width: 100%; border-collapse: collapse; }
.availability th { font-weight: 400; color: var(--graphite); font-size: .86rem; padding: 6px 4px; }
.availability th[scope="row"] { text-align: left; color: var(--ink); font-size: .95rem; }
.availability td { text-align: center; padding: 6px 4px; border-top: 1px solid var(--line); }
.availability th[scope="row"] { border-top: 1px solid var(--line); }
.availability input { width: 20px; height: 20px; accent-color: var(--exit); }

.slot-list { list-style: none; margin: 0; padding: 0 16px; }
.slot-list li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.slot-list li:first-child { border-top: 0; }

/* ---------- Chat ---------- */
.chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 230px - env(safe-area-inset-bottom));
  min-height: 340px;
  border-top: 1px solid var(--line);
}

.chat-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }

.bubble {
  max-width: 78%;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--hall);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--exit); color: var(--on-exit); }
.bubble-author { display: block; font-size: .8rem; font-weight: 700; color: var(--exit); }
.bubble-time { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: .72rem; opacity: .7; margin-top: 2px; }
.bubble-flag { display: inline-grid; place-items: center; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.bubble-flag .icon { width: 13px; height: 13px; }
.chat-empty { margin: auto; text-align: center; }
.section-top { border-top: 1px solid var(--line); padding-top: 14px; }
.chat-form { display: flex; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.chat-form textarea { min-height: 44px; }

@media (min-width: 760px) {
  .chat { height: calc(100vh - 200px); }
}

/* ---------- Colonna laterale (PC) ---------- */
.aside-block { margin-bottom: 26px; }
.aside-block h2 { font-size: 1.05rem; margin-bottom: 8px; }
.aside-block .row-item { padding: 8px 0; }
.aside-block .rows > li + li > .row-item { border-top: 0; }
.aside-foot { color: var(--graphite); font-size: .8rem; }

/* ---------- Suggerimenti etichette ---------- */
.suggest { position: relative; }
.suggest-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 30, 26, .12);
  max-height: 240px;
  overflow-y: auto;
}

.suggest-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.suggest-list li:hover { background: var(--hall); }

/* ---------- Finestre di dialogo ---------- */
dialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--paper);
  color: var(--ink);
}

dialog::backdrop { background: rgba(10, 16, 14, .45); }
dialog h2 { margin-bottom: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- Notifiche ---------- */
.toasts {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: .95rem;
}

.toast.error { background: var(--danger); color: #fff; }

@media (min-width: 760px) { .toasts { bottom: 24px; } }

/* ---------- Accesso e iscrizione ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.auth-side { display: none; }

.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px;
}

.auth-main .wordmark { margin-bottom: 28px; }
.auth-main h1 { font-size: 2rem; margin-bottom: 6px; }
.auth-main > p { color: var(--graphite); margin-bottom: 24px; }
.auth-switch { margin-top: 20px; color: var(--graphite); }
.auth-switch a { color: var(--exit); font-weight: 700; }

@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .auth-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px;
    background: var(--exit);
    color: var(--on-exit);
  }

  .auth-side h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    line-height: 1.05;
    max-width: 12ch;
    margin-bottom: 18px;
  }

  .auth-side p { max-width: 38ch; opacity: .9; font-size: 1.05rem; }
}

details summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 8px; }
.rules { margin: 0 0 16px; padding-left: 18px; color: var(--graphite); font-size: .92rem; }
.rules li + li { margin-top: 4px; }

.report-quote {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  background: var(--hall);
  white-space: pre-wrap;
}

/* ==========================================================================
   Home, appelli, amministrazione
   ========================================================================== */

/* ---------- Home: "Da fare" ---------- */
.todo { background: var(--exit-tint); }
.todo .section-head h2 { color: var(--exit-strong); }
.todo .rows > li + li > .row-item { border-top-color: color-mix(in srgb, var(--exit) 18%, transparent); }
.todo a.row-item:hover { background: color-mix(in srgb, var(--exit) 10%, transparent); }
.todo .row-item > .icon:last-child { color: var(--exit-strong); }

.todo-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--exit);
}

/* Prossimo appello: una sola riga grande, non un elenco */
.feature { padding-top: 14px; padding-bottom: 18px; }
.feature .exam { font-size: 1.1rem; }
.row-item > .icon:last-child { color: var(--graphite); }

/* ---------- Tessera data ---------- */
.date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  padding: 6px 0 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  line-height: 1;
}

.date-tile-month { font-size: .72rem; text-transform: lowercase; color: var(--exit); font-weight: 700; }
.date-tile-day { font-family: var(--font-sign); font-weight: 600; font-size: 1.55rem; margin: 3px 0 2px; }
.date-tile-week { font-size: .7rem; color: var(--graphite); }

/* ---------- Pannello che si apre solo quando serve ---------- */
.panel { background: var(--hall); }
.panel .form { padding-top: 0; }

.filters { margin-bottom: 8px; }
.filters select { width: auto; min-width: 150px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--hall);
  color: var(--graphite);
  font-size: .75rem;
  font-weight: 700;
}

/* ---------- Etichette di stato ---------- */
.pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.pill-ok { background: var(--exit-tint); color: var(--exit-strong); }
.pill-warn { background: #FFF1CC; color: #7A5300; }
.pill-danger { background: var(--danger-tint); color: var(--danger); }
.pill-muted { background: var(--hall); color: var(--graphite); }
.pill-info { background: #E1EBFA; color: #1D4F9C; }

:root[data-theme="dark"] .pill-warn { background: #3D3112; color: #F0D27A; }
:root[data-theme="dark"] .pill-info { background: #1C2F4A; color: #A9C8F5; }

.admin-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.admin-side .pill { margin-left: 0; }

/* ---------- Amministrazione ---------- */
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 14px 68px;
}

.admin-actions .btn .icon { margin-right: -2px; }

.admin-detail {
  margin: 0 16px 14px 68px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.admin-detail h3 { margin-bottom: 4px; }
.admin-detail .row-item { padding-left: 0; padding-right: 0; }

@media (max-width: 520px) {
  .admin-actions, .admin-detail { padding-left: 16px; margin-left: 0; margin-right: 0; }
  .admin-detail { padding-left: 16px; padding-right: 16px; }
}

.facts { margin: 0; padding: 0 16px 8px; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.fact:first-child { border-top: 0; }
.fact dt { color: var(--graphite); }
.fact dd { margin: 0; display: flex; align-items: baseline; gap: 10px; text-align: right; }
.fact dd strong { font-family: var(--font-sign); font-size: 1.3rem; font-weight: 600; }

.log-row { align-items: flex-start; }
.log-time { flex-shrink: 0; width: 96px; color: var(--graphite); font-size: .84rem; padding-top: 2px; }
.log-summary { margin-top: 2px; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .log-row { flex-direction: column; gap: 2px; }
  .log-time { width: auto; }
}

/* Finestre lunghe (es. nuovo utente) scorrono invece di uscire dallo schermo */
dialog { max-height: calc(100vh - 32px); overflow-y: auto; }

/* ---------- Rifiniture ---------- */
.page-head { flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 240px; min-width: 0; }

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.row-actions .action { margin-left: -8px; }

.tabs-compact { gap: 0; padding: 0 4px; }
.tabs-compact button { padding: 12px 8px; font-size: .94rem; }
.tabs-compact button.active::after { left: 8px; right: 8px; }

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


/* ==========================================================================
   Persone, foto, installazione, limiti di caratteri
   ========================================================================== */

/* ---------- Foto profilo ---------- */
.avatar { overflow: hidden; }
.avatar.avatar-photo { background: var(--hall); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Contatore di caratteri ---------- */
.counter { margin-right: auto; align-self: center; font-size: .84rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
.counter-low { color: var(--danger); font-weight: 700; }
.composer-bar { align-items: center; gap: 10px; flex-wrap: wrap; }
.composer-bar .counter { margin-left: auto; margin-right: 0; }
.comment-form { align-items: center; }
.comment-form .counter { min-width: 2ch; }

/* ---------- Foto in un post e anteprima nel composer ---------- */
.post-image { display: block; margin-top: 10px; }
.post-image img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--hall);
}
.attach-preview { position: relative; display: inline-block; margin-top: 8px; }
.attach-preview img { display: block; max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); }
.attach-preview .icon-btn { position: absolute; top: 4px; right: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; }
.upload { display: inline-flex; }

/* ---------- Profilo stile scheda ---------- */
.profile-head-large { align-items: flex-start; }
.profile-head-large h1 { margin-bottom: 2px; }
.profile-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stack-tight { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.stat-row { display: flex; gap: 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.stat-row li { display: flex; flex-direction: column; line-height: 1.2; }
.stat-row strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stat-row span { font-size: .84rem; color: var(--graphite); }

.fact-list { list-style: none; margin: 0; padding: 0 16px 12px; }
.fact-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.fact-list .icon { color: var(--graphite); margin-top: 2px; flex-shrink: 0; }
.common { background: var(--exit-tint); }
.common .fact-list .icon { color: var(--exit-strong); }

.fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.fieldset legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.check-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .check-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Persone suggerite ---------- */
.row-top { align-items: flex-start; }
.reasons { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.reasons li { padding-left: 14px; position: relative; }
.reasons li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--exit); }
.row-actions-end { flex-shrink: 0; align-self: flex-start; }

/* ---------- Frasi suggerite nelle finestre (messaggio di presentazione) ---------- */
.chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chip {
  text-align: left;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: var(--hall);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.chip:hover { border-color: var(--exit); }

/* ---------- Installazione dell'app ---------- */
.install-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--exit-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.install-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--paper); color: var(--exit); flex-shrink: 0; }
.install-card .row-main { display: flex; flex-direction: column; min-width: 180px; }
.install-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.guide-steps li strong { display: block; }

/* ==========================================================================
   Bussa in due passi, bacheca a categorie, stanza dell'esame, appunti con voti
   ========================================================================== */

/* ---------- Bussa: scelta ---------- */
.knock-dialog { width: min(460px, calc(100vw - 32px)); }
.choice-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
}
.choice-card:hover, .choice-card:focus-visible { border-color: var(--exit); background: var(--exit-tint); }
.choice-card .row-main { display: flex; flex-direction: column; gap: 2px; }
.choice-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--exit-tint); color: var(--exit-strong); flex-shrink: 0; }
.knock-message { margin: 4px 0 0; font-size: .92rem; color: var(--graphite); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Menu: voci dello staff ---------- */
.nav-section { display: none; }
@media (min-width: 760px) {
  .nav-section {
    display: block;
    margin: 14px 12px 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--graphite);
  }
}

/* ---------- Bacheca: filtri e argomento ---------- */
.tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll button { white-space: nowrap; }
.select-compact { width: auto; min-height: 36px; padding: 4px 8px; font-size: .9rem; margin-right: auto; }
.composer-bar .counter { margin-left: 0; }
.post-head .pill { margin-left: 2px; }

/* ---------- Filtri a pillola ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filter-chip {
  font: inherit;
  font-size: .88rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.filter-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Stanza dell'esame ---------- */
.room-head { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.room-title { display: flex; gap: 14px; align-items: flex-start; }
.room-title h1 { margin: 0 0 4px; font-size: 1.5rem; }
.row-link { text-decoration: none; }
.row-link:hover .exam { text-decoration: underline; }

.travel-group + .travel-group { margin-top: 4px; }
.travel-head { display: flex; align-items: center; gap: 8px; margin: 14px 16px 2px; font-size: 1rem; color: var(--graphite); }
.travel-route { margin-top: 4px; }

/* ---------- Appunti ---------- */
.notes .note { padding: 16px; border-top: 1px solid var(--line); }
.notes .note:first-child { border-top: 0; }
.note-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.note-head h3 { margin: 0; font-size: 1.08rem; }
.note .row-meta { margin-top: 6px; gap: 6px; }
.note .row-meta .avatar { font-size: 10px !important; }
.note-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .92rem; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.note-rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rating { display: inline-flex; align-items: center; gap: 5px; }
.rating .icon { color: #C98A00; }
.star-input { display: inline-flex; gap: 2px; }
.star-input .star { border: 0; background: none; padding: 4px; color: var(--line); cursor: pointer; border-radius: 6px; line-height: 0; }
.star-input .star.on { color: #C98A00; }
.star-input .star:hover { color: #E0A520; }
:root[data-theme="dark"] .star-input .star { color: #4A534F; }
:root[data-theme="dark"] .star-input .star.on, :root[data-theme="dark"] .rating .icon { color: #F0C24A; }
.clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { border: 0; background: none; padding: 0; margin-top: 4px; color: var(--exit); font: inherit; font-size: .9rem; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Ritocchi */
.feed-filters { padding-top: 4px; }
.post-head .pill { margin-left: 0; }
.row-main > .pill { display: inline-block; margin: 6px 0 0; }
.travel-route + .post-body, .row-main > .post-body { margin-top: 4px; }
.note-head .pill { margin-left: 0; }

/* ==========================================================================
   Rifinitura per il lancio: notifiche, Home, appelli, gruppi, bacheca, chat
   ========================================================================== */

:root { --alert: #D92D20; --cat-study: #0B7A5B; --cat-study-bg: #E4F2EC; --cat-question: #1D4F9C; --cat-question-bg: #E1EBFA; --cat-market: #B54708; --cat-market-bg: #FEF0E1; }
:root[data-theme="dark"] { --alert: #F97066; --cat-study: #5CC9A4; --cat-study-bg: #17302A; --cat-question: #A9C8F5; --cat-question-bg: #1C2F4A; --cat-market: #F7B27A; --cat-market-bg: #3A2614; }

/* ---------- Notifiche nel menu: rosse, contornate, impossibili da non vedere ---------- */
.nav-count {
  background: var(--alert);
  color: #fff;
  box-shadow: 0 0 0 2px var(--paper);
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: .72rem;
}
.nav-dot {
  position: absolute;
  top: 8px;
  left: calc(50% + 8px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 0 2px var(--paper);
}
.nav-link[data-badge="on"] { color: var(--ink); }
@media (min-width: 760px) {
  .nav-count { position: static; margin-left: auto; }
  .nav-dot { position: static; margin-left: auto; }
}

/* ---------- Home ---------- */
.global-search { position: relative; margin-bottom: 12px; }
.global-search .search { margin-bottom: 0; }
.global-results {
  margin: 8px 16px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.global-results h3 { margin: 10px 16px 0; font-size: .8rem; color: var(--graphite); font-weight: 700; }
.global-results .row-item { padding: 8px 16px; }
.global-results .row-item:hover { background: var(--hall); text-decoration: none; }
.search-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hall); color: var(--exit); flex-shrink: 0; }

.todo-card {
  margin: 4px 16px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--exit);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.todo-card .section-head { padding-top: 12px; }
.todo-card .section-head h2 { font-size: 1rem; }
.todo-card .row-item { padding: 10px 16px; }
.todo-card a.row-item:hover { background: var(--hall); text-decoration: none; }
.todo-card .rows > li + li > .row-item { border-top: 1px solid var(--line); }
.todo-card .todo-icon { background: var(--exit-tint); color: var(--exit-strong); }

/* ---------- Appelli: righe compatte, stato d'iscrizione chiaro, ordinamento ---------- */
.exam-row { padding: 8px 16px; gap: 12px; }
.exam-row .date-tile { width: 48px; padding: 4px 0; }
.exam-row .date-tile-day { font-size: 1.3rem; margin: 1px 0; }
.exam-row .row-meta { margin-top: 2px; }
.exam-row .row-actions { margin-top: 6px; gap: 8px; align-items: center; }
.joined { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--exit-strong); }
.btn-muted { background: var(--hall); color: var(--graphite); border-color: var(--hall); }
.btn-muted:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.btn-muted:disabled { opacity: 1; cursor: default; }
.row-open { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; font-weight: 700; }
.sort-chips { align-items: center; margin-bottom: 4px; }
.sort-label { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; }

/* ---------- Motivi dei suggerimenti: un'icona per tipo ---------- */
.reasons li { padding-left: 0; display: flex; align-items: flex-start; gap: 6px; }
.reasons li::before { content: none; }
.reasons li .icon { color: var(--exit); flex-shrink: 0; margin-top: 2px; }

/* ---------- Etichette uniformi (gruppi) ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--graphite);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.badge-member { background: var(--exit-tint); border-color: transparent; color: var(--exit-strong); }
.badge-pending { background: #FFF1CC; border-color: transparent; color: #7A5300; }
.badge-invited { background: var(--cat-question-bg); border-color: transparent; color: var(--cat-question); }
.badge-exam { background: var(--marker); border-color: transparent; color: var(--ink); }
.badge-topic { background: var(--hall); border-color: transparent; }
:root[data-theme="dark"] .badge-pending { background: #3D3112; color: #F0D27A; }

/* ---------- Bacheca: categorie a colori, scelta rapida, menu "…" ---------- */
.pill.cat-study { background: var(--cat-study-bg); color: var(--cat-study); }
.pill.cat-question { background: var(--cat-question-bg); color: var(--cat-question); }
.pill.cat-market { background: var(--cat-market-bg); color: var(--cat-market); }
.cat-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cat-chip {
  font: inherit;
  font-size: .84rem;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--graphite);
  cursor: pointer;
}
.cat-chip.on { font-weight: 700; border-color: currentColor; }
.cat-chip.cat-general.on { color: var(--ink); background: var(--hall); }
.cat-chip.cat-study.on { color: var(--cat-study); background: var(--cat-study-bg); }
.cat-chip.cat-question.on { color: var(--cat-question); background: var(--cat-question-bg); }
.cat-chip.cat-market.on { color: var(--cat-market); background: var(--cat-market-bg); }

.post-head { position: relative; padding-right: 36px; }
.post-menu { position: absolute; top: -6px; right: -6px; }
.menu { position: relative; }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(10, 16, 14, .14);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hall); }
.menu-item.danger { color: var(--danger); }
.post-hidden { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--graphite); font-size: .9rem; }
.post-hidden .link-btn { margin: 0; }
.hint.block { display: block; font-weight: 400; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Chat: elenco + conversazione affiancati su PC, pallino online ---------- */
.presence-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #12B76A;
  box-shadow: 0 0 0 2px var(--paper);
}
.online-label { color: #079455; font-weight: 700; }
:root[data-theme="dark"] .online-label { color: #47CD89; }
.conversation-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.unread-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--alert); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.conversation-list .row-item.unread .row-title { font-weight: 700; }
.conversation-list .row-item.unread .row-meta { color: var(--ink); }
.conversation-list .row-item.active { background: var(--exit-tint); }
.conversation-list a.row-item:hover { background: var(--hall); text-decoration: none; }
.chat-head:hover { text-decoration: none; }

.chat-split.is-list .chat-split-pane { display: none; }
.chat-split.is-thread .chat-split-list { display: none; }
.chat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 48px 24px; }
.chat-placeholder h2 { margin: 6px 0 0; }
.chat-placeholder p { max-width: 34ch; margin: 0 0 6px; }
.chat-placeholder-art { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: var(--exit-tint); color: var(--exit); }

@media (min-width: 900px) {
  .chat-split { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; border-top: 1px solid var(--line); min-height: calc(100vh - 140px); }
  .chat-split.is-list .chat-split-pane, .chat-split.is-thread .chat-split-list { display: block; }
  .chat-split.is-list .chat-placeholder { display: flex; }
  .chat-split-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 140px); }
  .chat-split-pane { min-width: 0; }
  .chat-split .chat-back { display: none; }
  .chat-split.is-thread { min-height: 100vh; border-top: 0; }
  .chat-split.is-thread .chat-split-list { max-height: 100vh; }
}

.person-actions { margin-top: 8px; }
.knock-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Un solo avviso alla volta: se si ripete, lampeggia invece di accumularsi */
.toast-pulse { animation: toast-pulse .35s ease; }
@keyframes toast-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .toast-pulse { animation: none; } }

/* ---------- Primo accesso guidato ---------- */
.welcome { min-height: 100vh; min-height: 100dvh; background: var(--paper); display: flex; flex-direction: column; }
.welcome-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.welcome-main { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 20px 40px; }
.welcome-main h1 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 6px; }
.welcome-main h2 { font-size: 1.2rem; }
.welcome-main h3 { font-size: 1rem; margin-top: 18px; }
.welcome-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; padding: 0; margin: 22px 0 24px; }
.welcome-progress li { font-size: .78rem; color: var(--graphite); padding-top: 8px; border-top: 4px solid var(--line); }
.welcome-progress li.done { border-top-color: var(--exit); }
.welcome-progress li.current { border-top-color: var(--exit); color: var(--ink); font-weight: 700; }
.welcome-step { min-height: 260px; }
.welcome-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.welcome-actions .btn:last-child { margin-left: auto; }
.welcome-photo { display: flex; align-items: center; gap: 16px; }
.welcome-skip { background: none; border: 0; padding: 6px 4px; color: var(--graphite); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.welcome-skip:hover { color: var(--ink); }
.welcome-photo .stack-tight { align-items: flex-start; }
.push-card .btn { align-self: flex-start; }

/* ---------- Chat: composer con allegati e vocali ---------- */
.chat-form { flex-direction: column; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
.chat-form-row { display: flex; align-items: flex-end; gap: 6px; }
.chat-form-row textarea { flex: 1; border-radius: 22px; padding: 11px 16px; }
.chat-form-row .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.chat-attach { flex: none; }
.chat-attach .icon-btn { width: 44px; height: 44px; border-radius: 50%; }
.chat-attach .menu-list { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; }

.chat-draft { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--hall); }
.chat-draft-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.chat-draft-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--paper); color: var(--exit); flex: none; }
.chat-draft-audio { height: 36px; max-width: 46%; flex: none; }
.chat-draft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: .88rem; }
.chat-draft-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-draft-status { color: var(--graphite); font-size: .8rem; }
.chat-draft-progress { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.chat-draft-progress > span { display: block; width: 0; height: 100%; background: var(--exit); transition: width .2s; }

.chat-record { display: flex; align-items: center; gap: 10px; }
.chat-record .btn { height: 44px; border-radius: 22px; }
.chat-record-cancel { width: 44px; padding: 0; color: var(--danger); }
.chat-record-live { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .92rem; min-width: 0; }
.chat-record-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--graphite); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* Allegati nei messaggi */
.bubble-text { display: block; }
.bubble-photo { display: block; width: min(260px, 62vw); max-height: 340px; padding: 0; margin: 2px 0 4px; border: 0; border-radius: 10px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.bubble-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble-audio { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.bubble-audio audio { height: 38px; width: min(230px, 54vw); }
.bubble-audio-time { font-size: .78rem; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.bubble-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 2px 0 4px; border-radius: 10px; background: rgba(255, 255, 255, .55); color: inherit; text-decoration: none; min-width: 0; max-width: 280px; }
.bubble.mine .bubble-file { background: rgba(255, 255, 255, .16); }
.bubble-file:hover { text-decoration: none; filter: brightness(.97); }
.bubble-file-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--paper); color: var(--exit); flex: none; }
.bubble-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; white-space: normal; }
.bubble-file-text strong { font-size: .9rem; overflow-wrap: anywhere; }
.bubble-file-text span { font-size: .76rem; opacity: .8; }

/* Foto a schermo intero */
.photo-viewer { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.photo-viewer::backdrop { background: rgba(8, 12, 10, .88); }
.photo-viewer img { display: block; max-width: 96vw; max-height: 80vh; border-radius: 6px; object-fit: contain; }
.photo-viewer-close { position: fixed; top: 12px; right: 12px; background: rgba(255, 255, 255, .9); color: #111; width: 44px; height: 44px; border-radius: 50%; }
.photo-viewer-save { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }

/* ---------- Telefono: filtri e schede su una riga che scorre ---------- */
@media (max-width: 759px) {
  .filter-chips, .cat-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 2px;
  }
  .filter-chips::-webkit-scrollbar, .cat-picker::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .filter-chips.pad { margin-inline: 0; }
  .filter-chip, .cat-chip { flex: none; white-space: nowrap; }
  .tabs + .filter-chips, .tabs + div > .filter-chips:first-child { padding-top: 12px; }
  .sort-chips { margin-bottom: 0; }
  .sort-label { flex: none; }

  /* Schede: si stringono per entrare; se sono troppe scorrono. */
  .tabs-compact button { padding: 12px 7px; font-size: .9rem; }
  .tabs-compact button.active::after { left: 7px; right: 7px; }

  /* Ricerca appelli: esame più largo della città, testo che non si taglia. */
  .filters.inline { gap: 8px; }
  .filters.inline > .row-main:first-child { flex: 1.5 1 0; min-width: 0; }
  .filters.inline > .row-main + .row-main { flex: 1 1 0; min-width: 0; }

  /* Profilo: foto in alto e al centro, pulsanti affiancati. */
  .profile-head-large { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .profile-head-large .row-main { width: 100%; }
  .profile-head-large .stat-row { justify-content: center; }
  .profile-photo .stack-tight { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  /* Testata della chat più compatta per lasciare spazio ai messaggi. */
  .chat { height: calc(100dvh - 252px - env(safe-area-inset-bottom)); min-height: 300px; }
}
.report-attachment { margin: 6px 0 10px; color: var(--ink); }
.report-attachment .bubble-file { background: var(--hall); }

/* ---------- Evoluzione social: Home, Compagni, colonna destra ---------- */
.pad-top { padding: 14px 16px 0; }

/* Home */
.home-hero { padding: 22px 16px 10px; }
.home-hero h1 { margin: 0; }
.home-date { margin: 2px 0 0; color: var(--graphite); font-size: .92rem; }
.home-motto { margin: 10px 0 0; font-weight: 700; color: var(--exit-strong); }
.activity-row .row-meta { flex-wrap: wrap; }
.activity-author { color: var(--ink); }
.newcomers { display: flex; align-items: center; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.newcomers p { margin: 0; }
.content .aside-block { margin: 0; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.content .aside-block .row-item { padding: 8px 0; }
@media (min-width: 1180px) { .home-narrow { display: none; } }

/* Colonna destra */
.aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.aside-head h2 { margin: 0; font-size: 1.02rem; }
.aside-link { font-size: .86rem; color: var(--exit); }
.discussion-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; color: var(--ink); }
.discussion-row .row-meta { margin-top: 4px; }
a.discussion-row:hover { text-decoration: none; }
a.discussion-row:hover .discussion-text { text-decoration: underline; }

/* Amici agli appelli */
.friends-going { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--exit-strong); }
.friends-going.compact { font-size: .8rem; margin-top: 4px; }
.avatar-stack { display: inline-flex; }
.avatar-stack > * { box-shadow: 0 0 0 2px var(--paper); border-radius: 50%; }
.avatar-stack > * + * { margin-left: -8px; }

/* Compagni */
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: .74rem; font-weight: 700; }
.person-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person-bio { margin: 6px 0 0; font-size: .92rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person-row .tags { margin-top: 6px; }
.person-row .row-meta .icon { flex-shrink: 0; }
.directory-filters { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.directory-filters .search { margin: 0; }
.directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.directory-grid > * { min-width: 0; }
.directory-extra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.directory-extra .link-btn { margin: 0; }
@media (min-width: 760px) { .directory-grid { grid-template-columns: 2fr 1fr 1.4fr 1.6fr; } }

/* Profilo: il numero di amici porta all'elenco */
.stat-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.stat-link:hover strong { color: var(--exit); }

/* Bacheca: foto apribili e condivisione */
button.post-image { border: 0; padding: 0; background: none; width: 100%; text-align: left; cursor: zoom-in; }
@media (max-width: 420px) { .post-actions .action-label { display: none; } }

/* Chat: separatore tra giorni */
.day-sep { display: flex; justify-content: center; margin: 10px 0 4px; }
.day-sep span { padding: 3px 10px; border-radius: 999px; background: var(--hall); color: var(--graphite); font-size: .76rem; font-weight: 700; }

/* Bacheca: i filtri stanno su una riga anche su PC */
.feed-filters { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.feed-filters::-webkit-scrollbar { display: none; }
.feed-filters .filter-chip { flex: none; white-space: nowrap; padding: 6px 11px; }

/* ---------- Documenti legali ---------- */
.legal-links { padding: 14px 0 0; color: var(--graphite); font-size: .8rem; }
.legal-links nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.legal-links a { color: var(--graphite); }
.legal-links a:hover { color: var(--ink); }
.legal-links p { margin: 6px 0 0; line-height: 1.4; }
.legal-links.compact { font-size: .74rem; }
.nav .legal-links { padding: 10px 12px 4px; margin-top: 4px; }
@media (max-width: 759px) { .nav .legal-links { display: none; } }
.home-legal { padding: 16px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .home-legal { display: none; } }
.auth-main .legal-links { margin-top: 28px; border-top: 1px solid var(--line); }
.legal-public { max-width: 760px; margin: 0 auto; min-height: 100vh; background: var(--paper); }
.legal-public-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.legal-tabs { padding: 0 8px; }
.legal-tabs a { position: relative; padding: 12px 10px; color: var(--graphite); white-space: nowrap; text-decoration: none; font-size: .94rem; }
.legal-tabs a.active { color: var(--ink); font-weight: 700; }
.legal-tabs a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--exit); }
.legal-doc { padding: 8px 16px 40px; max-width: 72ch; line-height: 1.6; }
.legal-doc h1 { font-size: 1.6rem; margin: 18px 0 4px; }
.legal-doc h2 { font-size: 1.15rem; margin: 26px 0 6px; }
.legal-doc h3 { font-size: 1rem; margin: 18px 0 4px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc li { margin: 3px 0; }
.legal-doc hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.legal-note { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--exit); background: var(--exit-tint); border-radius: 0 8px 8px 0; font-size: .92rem; }
.legal-list { padding-left: 20px; }
.legal-doc a { color: var(--exit); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Rifinitura grafica per la produzione: allineamenti, spazi, pulsanti
   ========================================================================== */

/* Schede: il testo della prima scheda si allinea al contenuto (16px dal bordo). */
.tabs { padding: 0 6px; }
.tabs-compact { padding: 0 8px; }
@media (max-width: 759px) { .tabs-compact { padding: 0 9px; } }

/* Contenuto subito sotto le schede: un respiro, non attaccato alla linea. */
.filters { padding-top: 12px; }
.tabs + * > p.pad:first-child, .tabs + * > .pad-top:first-child,
.tabs ~ [role="tabpanel"] > .filter-chips:first-child,
.tabs + * > .pad.stack:first-child { padding-top: 12px; }

/* Righe con più righe di testo: avatar e tessera data in alto, allineati al nome. */
.exam-row, .activity-row, .row-item:has(> .row-main > .knock-actions) { align-items: flex-start; }
.exam-row .date-tile { margin-top: 2px; }

/* Stanza dell'esame e righe con un pulsante a destra: sul telefono il pulsante va sotto,
   così il nome non si spezza su due righe. */
@media (max-width: 559px) {
  .row-top:has(> .row-actions-end > .btn) { flex-wrap: wrap; }
  .row-top:has(> .row-actions-end > .btn) > .row-main { flex: 1 1 0; }
  .row-top > .row-actions-end:has(> .btn) { order: 3; flex-basis: 100%; padding-left: 56px; margin-top: -2px; }
}

/* Commenti: azioni a destra, bersagli comodi, campo e pulsante della stessa altezza. */
.comment-head { align-items: center; flex-wrap: wrap; }
.comment-tools { display: inline-flex; gap: 4px; margin-left: auto; margin-right: -6px; }
.icon-btn-small { width: 32px; height: 32px; }
.comment-form { align-items: stretch; }
.comment-form input { min-width: 0; }
.comment-form .btn { min-height: 0; }
.comment-form .counter { align-self: center; }

/* Post dei gruppi: segnala ed elimina in alto a destra, non su una riga vuota. */
.post-head-tools { padding-right: 0; align-items: center; }
.post-tools { display: inline-flex; gap: 2px; margin: -6px -8px -6px auto; }
.post-tools:empty { display: none; }

/* Chat: le icone sotto il messaggio restano piccole ma si toccano facilmente. */
.bubble-flag { width: 28px; height: 28px; margin: -7px -8px -7px -2px; border-radius: 50%; }
.bubble-flag .icon { width: 14px; height: 14px; }
.bubble-photo, .bubble-file { margin-bottom: 8px; }
.bubble-flag:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.bubble-audio audio { max-width: 100%; }
.bubble-audio { flex-wrap: wrap; }

/* Profilo: etichette con la x dentro, anteprima del profilo come pulsante. */
.removable {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 3px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .9rem;
}
.removable-exam { background: var(--marker); border-color: transparent; font-weight: 700; }
.removable-x {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--graphite);
  cursor: pointer;
}
.removable-exam .removable-x { color: var(--ink); }
.removable-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.profile-preview { margin-top: 14px; }
@media (min-width: 760px) {
  .profile-photo { min-width: 132px; }
  .profile-photo .stack-tight { align-items: stretch; width: 100%; }
  .profile-photo .stack-tight > *, .profile-photo .stack-tight .btn { width: 100%; }
}

/* Elenchi puntati dentro le sezioni: i pallini restano dentro il margine. */
.rules.pad-block { padding-left: 34px; padding-right: 16px; }

/* Moderazione: titolo allineato al resto della scheda, data che non va a capo. */
.form > .section-head { padding-left: 0; padding-right: 0; }
.section-head > .small, .section-head > .muted { white-space: nowrap; flex-shrink: 0; }

/* Bacheca: anche "Discussione" ha la sua pillola, come le altre categorie. */
.pill.cat-general { background: var(--hall); color: var(--graphite); }

/* Indietro: meno vuoto sopra il link. */
.back { padding-top: 12px; }
.post-back { padding-bottom: 10px; }

/* Tasti e campi affiancati: stessa altezza. */
.inline > .row-main + .btn, form.inline > .btn { align-self: stretch; min-height: 44px; }

/* Accesso: "Password dimenticata?" ben distanziato e facile da toccare. */
.forgot-link { margin-top: 8px; }
.forgot-link a { display: inline-block; padding: 4px 0; color: var(--exit); font-weight: 700; }

/* Orari: la cella vuota in alto a sinistra non ha la riga sopra. */
.availability thead td { border-top: 0; }

/* Menu: la mia foto, che si aggiorna da sola quando la cambio. */
.nav-me-avatar { display: inline-flex; flex-shrink: 0; }

/* ---------- Bacheca: composer compatto ---------- */
/* Foto dentro la casella di testo (in basso a destra); argomento, contatore e "Pubblica" su una sola riga. */
.composer-main { min-width: 0; }
.composer-input { position: relative; }
.composer-input.has-photo textarea { padding-right: 48px; }
.composer-input .upload { position: absolute; right: 5px; bottom: 5px; }
.composer-photo { width: 36px; height: 36px; color: var(--graphite); }
.composer-photo:hover { color: var(--exit); background: var(--exit-tint); }
.composer-photo.is-busy { opacity: .6; cursor: progress; }

.composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.composer-row .cat-picker {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer-row .cat-picker::-webkit-scrollbar { display: none; }
.composer-row .cat-chip { flex: none; white-space: nowrap; }
.composer-row .counter { flex: none; margin: 0; }
.composer-row .counter:empty { display: none; }
.composer-row .btn { flex: none; }
@media (max-width: 759px) {
  .composer-row .cat-picker { margin-inline: 0; padding-inline: 0; }
}
/* Se le categorie non entrano tutte, scorrono: una sfumatura a destra indica che ce ne sono altre. */
.composer-row .cat-picker.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.composer .attach-preview { margin-top: 8px; }

/* Link dentro il testo (es. "Apri il profilo" in moderazione) */
.link-inline { color: var(--exit); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }