/* Parentilia LinkedIn: strumento interno, pensato prima per il telefono.
   Colori dal teal del marchio Parentilia, scurito dove serve per il contrasto AA. */

:root {
  color-scheme: light dark;

  --sfondo: #f4f8f7;
  --superficie: #ffffff;
  --superficie-2: #e9f1f0;
  --testo: #15303a;
  --testo-tenue: #4a626a;
  --bordo: #d3e1df;
  --primario: #1f6f6a;
  --primario-hover: #185a56;
  --su-primario: #ffffff;
  --fuoco: #3e9a94;
  --pericolo: #b42318;

  --ok-sfondo: #e6f4ea;
  --ok-testo: #1e6b33;
  --errore-sfondo: #fdecea;
  --errore-testo: #9b1c1c;
  --info-sfondo: #e8f1fb;
  --info-testo: #1d4e89;
  --attenzione-sfondo: #fff4d6;
  --attenzione-testo: #7a4b00;
  --neutro-sfondo: #edf1f2;
  --neutro-testo: #4a5a60;

  --raggio: 12px;
  --raggio-piccolo: 8px;
  --ombra: 0 1px 2px rgb(21 48 58 / 6%), 0 2px 8px rgb(21 48 58 / 6%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0e1b1f;
    --superficie: #152529;
    --superficie-2: #1c3136;
    --testo: #e4efed;
    --testo-tenue: #a7bcc0;
    --bordo: #2b4248;
    --primario: #5cc2b9;
    --primario-hover: #7dd3cb;
    --su-primario: #062421;
    --fuoco: #7dd3cb;
    --pericolo: #ff8a80;

    --ok-sfondo: #12301d;
    --ok-testo: #8fd6a3;
    --errore-sfondo: #3a1714;
    --errore-testo: #ffb4ab;
    --info-sfondo: #142a44;
    --info-testo: #9cc3f0;
    --attenzione-sfondo: #3a2c0a;
    --attenzione-testo: #f3c969;
    --neutro-sfondo: #22353a;
    --neutro-testo: #b8c9cc;

    --ombra: none;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--primario);
}

:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 2px;
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

h2 {
  font-size: 1rem;
  line-height: 1.4;
}

.tenue {
  color: var(--testo-tenue);
  margin: 0 0 8px;
}

.salta {
  position: absolute;
  left: -9999px;
}

.salta:focus {
  left: 16px;
  top: 8px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--superficie);
  border-radius: var(--raggio-piccolo);
}

/* --- Testata --- */

.testata {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.testata__interno {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marchio {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--primario);
  text-decoration: none;
}

.marchio span {
  color: var(--testo-tenue);
  font-weight: 500;
}

.testata__esci {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.testata__nome {
  color: var(--testo-tenue);
  font-size: 0.9375rem;
}

.menu {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--testo-tenue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.menu a:hover {
  color: var(--testo);
}

.menu a[aria-current="page"] {
  color: var(--primario);
  border-bottom-color: var(--primario);
}

.banda-prova {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9375rem;
  background: var(--attenzione-sfondo);
  color: var(--attenzione-testo);
}

.contenuto {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* --- Schede (stati) --- */

/* Vanno a capo invece di scorrere: sul telefono la scheda attiva resta sempre visibile. */
.schede {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

.scheda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--testo);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  transition: background-color 150ms ease;
}

.scheda:hover {
  background: var(--bordo);
}

.scheda[aria-current="page"] {
  background: var(--primario);
  color: var(--su-primario);
}

.scheda__conteggio {
  min-width: 1.75em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--testo);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Elenco --- */

.settimana h2 {
  margin: 24px 0 8px;
  color: var(--testo-tenue);
}

.elenco-bozze {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.scheda-bozza {
  display: grid;
  gap: 4px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  color: var(--testo);
  text-decoration: none;
  transition: border-color 150ms ease;
}

.scheda-bozza:hover {
  border-color: var(--fuoco);
}

.scheda-bozza__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scheda-bozza__canale {
  font-weight: 600;
  font-size: 0.9375rem;
}

.scheda-bozza__quando {
  color: var(--testo-tenue);
  font-size: 0.9375rem;
}

.scheda-bozza__tema {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.scheda-bozza__estratto {
  color: var(--testo-tenue);
}

.scheda-bozza__nota {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--attenzione-testo);
}

.vuoto {
  padding: 48px 16px;
  text-align: center;
  color: var(--testo-tenue);
}

/* --- Stati --- */

.stato {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.stato--da_approvare {
  background: var(--attenzione-sfondo);
  color: var(--attenzione-testo);
}

.stato--approvata,
.stato--in_pubblicazione {
  background: var(--info-sfondo);
  color: var(--info-testo);
}

.stato--pubblicata {
  background: var(--ok-sfondo);
  color: var(--ok-testo);
}

.stato--fallita,
.stato--scaduta {
  background: var(--errore-sfondo);
  color: var(--errore-testo);
}

.stato--scartata {
  background: var(--neutro-sfondo);
  color: var(--neutro-testo);
}

/* --- Dettaglio --- */

.indietro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.intestazione-bozza {
  margin-bottom: 16px;
}

.intestazione-bozza__canale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--testo-tenue);
}

.testo-post {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  margin-bottom: 16px;
}

.avviso {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--raggio-piccolo);
  border-left: 4px solid currentColor;
}

.avviso--ok {
  background: var(--ok-sfondo);
  color: var(--ok-testo);
}

.avviso--errore {
  background: var(--errore-sfondo);
  color: var(--errore-testo);
}

.avviso--info {
  background: var(--info-sfondo);
  color: var(--info-testo);
}

.avviso a {
  color: inherit;
  font-weight: 700;
}

.da-completare {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--raggio-piccolo);
  background: var(--attenzione-sfondo);
  color: var(--attenzione-testo);
}

.da-completare p {
  margin: 0 0 4px;
  font-weight: 600;
}

.da-completare ul {
  margin: 0;
  padding-left: 20px;
}

.sottotitolo {
  margin: 24px 0 8px;
}

.fonti {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
}

.fonti h2 {
  margin: 0 0 4px;
}

.fonti ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.fonti li {
  overflow-wrap: anywhere;
}

/* --- Note del team --- */

.riquadro--aperto {
  padding: 16px;
}

.elenco-note {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.nota {
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.nota__meta {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.nota__testo {
  margin: 0 0 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nota form {
  margin: 0;
}

/* Più discreto, ma sempre 44px di altezza per il tocco. */
.bottone--piccolo {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.campo select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  padding: 10px 12px;
  min-height: 44px;
}

/* --- Moduli --- */

.modulo {
  margin: 0;
}

.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.campo label {
  font-weight: 600;
}

.campo input,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px: niente zoom automatico su iOS */
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  padding: 10px 12px;
  min-height: 44px;
}

.campo textarea {
  line-height: 1.6;
  resize: vertical;
}

#testo {
  min-height: 18rem;
}

.campo__piede {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.aiuto {
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.casella {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 8px;
  cursor: pointer;
}

.casella[hidden] {
  display: none;
}

.casella input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primario);
}

.contatore {
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.contatore--oltre {
  color: var(--pericolo);
  font-weight: 700;
}

.campi-affiancati {
  display: grid;
  gap: 0 12px;
}

@media (min-width: 480px) {
  .campi-affiancati {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Bottoni --- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--raggio-piccolo);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bottone:disabled {
  opacity: 0.65;
  cursor: progress;
}

.bottone--primario {
  background: var(--primario);
  color: var(--su-primario);
}

.bottone--primario:hover:not(:disabled) {
  background: var(--primario-hover);
}

.bottone--secondario {
  background: var(--superficie);
  color: var(--primario);
  border-color: var(--primario);
}

.bottone--secondario:hover:not(:disabled) {
  background: var(--superficie-2);
}

.bottone--leggero {
  background: transparent;
  color: var(--testo-tenue);
  border-color: var(--bordo);
}

.bottone--pericolo {
  background: transparent;
  color: var(--pericolo);
  border-color: currentColor;
}

.bottone--pieno {
  width: 100%;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.azioni .bottone {
  flex: 1 1 100%;
}

.azioni form {
  display: contents;
}

@media (min-width: 480px) {
  .azioni .bottone {
    flex: 0 0 auto;
  }
}

.azioni--secondarie {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--bordo);
}

.riquadro {
  margin-top: 24px;
  padding: 0 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.riquadro summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  cursor: pointer;
}

.riquadro[open] {
  padding-bottom: 16px;
}

/* --- Accesso --- */

.accesso {
  max-width: 400px;
  margin: 32px auto;
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

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