/* Elio — fondamenta dell'interfaccia.
   Un solo tema, chiaro. CSS scritto a mano, nessun framework, nessun build.
   Qui stanno i token, la cornice e i componenti usati da più pagine; il resto
   sta nel foglio della singola pagina (timeline.css, mock.css). */

:root {
  /* Superfici: carta calda, non bianco puro, così i pannelli bianchi
     si staccano senza bisogno di ombre finte. */
  --paper: #f3f2ef;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f0efeb;

  --ink: #17181c;
  --ink-2: #41454d;
  --muted: #767a83;
  --faint: #9ba0a8;

  --line: #e2e0da;
  --line-soft: #edebe5;
  --line-strong: #cfccc4;

  --accent: #1d4ed8;
  --accent-ink: #16359a;
  --accent-soft: #e8edfd;

  --ok: #0d7048;
  --ok-soft: #e2f2ea;
  --warn: #8f5d00;
  --warn-soft: #fbf0d9;
  --bad: #ab2318;
  --bad-soft: #fbeae8;

  /* Tinte per canale: la stessa famiglia in tutta l'app, così un colore
     significa sempre lo stesso canale. */
  --c-email: #0d7048;
  --c-linkedin: #14588f;
  --c-instagram: #b3325f;
  --c-facebook: #2c4ba8;
  --c-ads: #8a5a00;
  --c-whatsapp: #157a53;

  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  --sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --bar-h: 52px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); }

.num { font-variant-numeric: tabular-nums; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
}

::selection { background: #cfdcfb; }

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

/* --- Barra e navigazione -------------------------------------------------- */

.bar {
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brandmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}
.brandmark .logo, .gatehead .logo {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--ink);
  align-self: center;
  /* Il quadrato ha una tacca: è un segno, non un gradiente decorativo. */
  box-shadow: inset -4px -4px 0 0 var(--accent);
}
.brandmark strong { font-size: 15px; letter-spacing: -0.01em; }
.brandmark .sep { color: var(--line-strong); }
.brandmark .page { color: var(--muted); font-size: 13px; }

.nav { display: flex; gap: 2px; }
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-3); }
.nav a.on { background: var(--ink); color: #fff; }
.nav a.dev { color: var(--warn); }
.nav a.dev.on { background: var(--warn); color: #fff; }

.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.spacer { margin-left: auto; }

/* --- Chi è entrato -------------------------------------------------------- */

/* Menu senza JavaScript: <details> apre e chiude da sé, e la barra resta
   funzionante anche mentre il resto della pagina carica. */
.who { position: relative; flex: none; }
.who summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 5px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
}
.who summary::-webkit-details-marker { display: none; }
.who summary:hover { background: var(--surface-3); }
.who[open] summary { background: var(--surface-3); }
.whoname { font-size: 13px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

.whomenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgb(23 24 28 / 0.16);
  z-index: 50;
}
.whomenu .whomail { font-size: 12px; color: var(--muted); padding: 2px 6px 8px; }
.whomenu a {
  display: block;
  padding: 6px;
  border-radius: var(--r-sm);
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
}
.whomenu a:hover { background: var(--surface-3); }
.whomenu a.on { background: var(--surface-3); font-weight: 550; }
.whomenu .whover {
  padding: 0 10px 8px;
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.whomenu form { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 6px; }

.updatebar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.updatebar[hidden] { display: none; }

/* --- Ingresso (login, primo avvio) --------------------------------------- */

body.gate {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 380px at 50% -8%, #e9ecf6 0%, transparent 70%),
    var(--paper);
}
.gatecard {
  width: 100%;
  max-width: 372px;
  padding: 26px 26px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 34px rgb(23 24 28 / 0.07);
}
.gatecard.is-wide { max-width: 456px; }
.gatehead { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.gatehead strong { font-size: 15px; }
.gatecard h1 { font-size: 20px; letter-spacing: -0.015em; margin-bottom: 5px; }
.gatecard > .hint { margin-bottom: 18px; }
.gatecard .notice { margin-bottom: 14px; }
.gateform { margin-top: 4px; }
.gateform .field em { margin-top: 4px; display: block; }
.gatefoot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--faint);
}

.mockbar {
  flex: none;
  padding: 6px 16px;
  font-size: 12px;
  color: var(--warn);
  background: var(--warn-soft);
  border-bottom: 1px solid #eddfbc;
}
.mockbar b { font-weight: 600; }

/* --- Controlli ----------------------------------------------------------- */

button, .btn {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--surface-3); }
button:active, .btn:active { transform: translateY(0.5px); }

button.primary, .btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  text-decoration: none;
}
button.primary:hover, .btn.primary:hover { background: #000; }
button.primary:disabled {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--faint);
  cursor: not-allowed;
  transform: none;
}
button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
button.ghost:hover { background: var(--surface-3); }
button.mini { font-size: 12px; padding: 3px 8px; }
button.mini.warn { border-color: #d9b877; color: var(--warn); background: var(--warn-soft); }
button.wide { width: 100%; padding: 8px 11px; }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); }

.icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
  line-height: 1;
}
.icon:hover { color: var(--ink); background: var(--surface-3); }
.icon svg { width: 15px; height: 15px; display: block; }

/* Segmentato: le viste della timeline e le anteprime del builder. */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.seg button:hover { background: #e6e4de; color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 550;
  box-shadow: 0 1px 2px rgb(23 24 28 / 0.1);
}

.switch {
  --on: var(--ok);
  appearance: none;
  width: 30px;
  height: 17px;
  border-radius: 20px;
  background: var(--line-strong);
  border: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.16s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s;
}
.switch:checked { background: var(--on); }
.switch:checked::after { transform: translateX(13px); }
.switch:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline-color: var(--accent); border-color: var(--accent); }

.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-2);
  margin: 8px 0;
  cursor: pointer;
}
.check input { margin: 2px 0 0; accent-color: var(--accent); }

/* --- Impaginazione ------------------------------------------------------- */

.workbench {
  flex: 1;
  min-height: 0;
  display: grid;
  overflow: hidden;
}
.pane { min-width: 0; min-height: 0; overflow: auto; }
.pane + .pane { border-left: 1px solid var(--line); }

.rail { background: var(--surface); }

.panel { padding: 16px 18px; }
.panel + .panel { border-top: 1px solid var(--line-soft); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.eyebrow .count {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
  text-transform: none;
}
.eyebrow .spacer { margin-left: auto; }

.hint { color: var(--muted); font-size: 12.5px; }
.empty { color: var(--faint); font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* --- Etichette ----------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.chip-email { color: var(--c-email); background: #e4f2eb; }
.chip-linkedin { color: var(--c-linkedin); background: #e3eef7; }
.chip-instagram { color: var(--c-instagram); background: #fae8ef; }
.chip-facebook { color: var(--c-facebook); background: #e8ecf9; }
.chip-meta_ads, .chip-ads { color: var(--c-ads); background: #f8eeda; }
.chip-whatsapp { color: var(--c-whatsapp); background: #e2f2ec; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
  display: inline-block;
}
.dot-published { background: var(--accent); }
.dot-scheduled, .dot-approved { background: var(--ok); }
.dot-in_review { background: #c58a17; }
.dot-draft, .dot-idea { background: var(--faint); }
.dot-failed { background: var(--bad); }

/* --- Avvisi -------------------------------------------------------------- */

.notice {
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.notice strong { display: block; margin-bottom: 3px; font-size: 13px; }
.notice p { color: var(--ink-2); }
.notice-warn { background: var(--warn-soft); border-color: #e8d5a8; }
.notice-warn strong { color: var(--warn); }
.notice-bad { background: var(--bad-soft); border-color: #f0cdc9; }
.notice-bad strong { color: var(--bad); }
.notice .mini { margin-top: 9px; }

/* --- Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 10px);
  padding: 9px 15px;
  border-radius: 20px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 20px rgb(23 24 28 / 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
}
.toast-show { opacity: 1; transform: translate(-50%, 0); }
.toast-err { background: var(--bad); }

/* Foglio laterale per creare brand, canali, uscite. Stesso markup ovunque. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgb(23 24 28 / 0.35);
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgb(23 24 28 / 0.16);
}
.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* --- Barra di misura ----------------------------------------------------- */

.meter {
  /* Blocco anche quando è uno <span>: da inline l'altezza non si applica e la
     barra piena diventa un rettangolo nero alto quanto il testo. */
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 3px;
}
.meter-ok > i { background: var(--ok); }
.meter-warn > i { background: #c58a17; }
.meter-bad > i { background: var(--bad); }

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