/* Mission Control Board — mondo visivo del Review Hub (stesso operatore, stesso telefono,
   stessa famiglia di strumenti), esteso con una scala di superfici vera perche' qui i livelli
   sono tre e non due: pagina < colonna < card. Superficie scura scelta dalla scena d'uso, non
   dalla categoria: si guarda in piedi col telefono, spesso di sera. */

:root {
  --bg: #0f1216;          /* pagina */
  --rail: #141920;        /* colonna */
  --surface: #1c222a;     /* card */
  --surface-hi: #232a34;  /* card in hover / riga selezionata */
  --line: #2a323d;
  --line-strong: #3a4552;
  --fg: #eef2f6;
  --fg-mut: #97a4b3;
  --accent: #7c8cff;
  --accent-ink: #0d1013;
  --danger: #ff6b74;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lift: 0 14px 34px -8px rgba(0,0,0,.72), 0 3px 8px rgba(0,0,0,.4);
  --shadow-sheet: 0 -18px 48px -12px rgba(0,0,0,.7);
  --ease: cubic-bezier(.2,.8,.25,1);

  /* Etichette: coppia inchiostro/fondo per ogni tinta. Il testo dell'etichetta e' SEMPRE
     scritto accanto al colore — lo stato non si comunica mai col colore da solo. */
  --l-blue: #78a9ff;   --l-blue-bg: #1a2a4a;
  --l-green: #5ed39b;  --l-green-bg: #143528;
  --l-amber: #e8b45c;  --l-amber-bg: #3a2c12;
  --l-red: #ff8d96;    --l-red-bg: #43191d;
  --l-purple: #c393f5; --l-purple-bg: #2f1f45;
  --l-teal: #5fd0d8;   --l-teal-bg: #123338;
  --l-pink: #f58bc0;   --l-pink-bg: #421f33;
  --l-slate: #a8b6c6;  --l-slate-bg: #262f3a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  margin: 0;
  /* Colonna flex a tutta altezza: la board prende quello che avanza dopo barra e stato, senza
     numeri magici da tenere allineati a mano quando la barra va a capo su telefono. */
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden; /* la board scorre nei suoi contenitori, la pagina no: e' un'app, non un documento */
  overscroll-behavior: none;
}

.ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

:where(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- barra superiore ---------- */

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem .85rem; padding-top: calc(.6rem + env(safe-area-inset-top));
  background: #0b0e12; border-bottom: 1px solid var(--line);
}
.topbar-id { min-width: 0; }
.topbar h1 { margin: 0; font-size: 1rem; font-weight: 640; letter-spacing: -.015em; white-space: nowrap; }
.topbar-sub { margin: .1rem 0 0; font-size: .76rem; color: var(--fg-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.search { position: relative; display: flex; align-items: center; }
.search .ico { position: absolute; left: .55rem; color: var(--fg-mut); pointer-events: none; }
.search input {
  width: 12rem; min-height: 38px; padding: .35rem .6rem .35rem 2.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--fg); font: inherit; font-size: .85rem;
}
.search input::placeholder { color: var(--fg-mut); }
.search input:hover { border-color: var(--line-strong); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 38px; padding: 0 .8rem; border-radius: var(--r-sm);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background: var(--surface-hi); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 680; }
.btn-primary:hover { background: #93a1ff; border-color: #93a1ff; }
.btn-ghost { background: transparent; }
.btn.danger, button.danger { color: var(--danger); }
.btn.danger:hover { background: rgba(255,107,116,.1); border-color: rgba(255,107,116,.45); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-mut); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-hi); color: var(--fg); }

.status {
  flex: 0 0 auto;
  margin: 0; padding: 0 .85rem; height: 0; overflow: hidden;
  font-size: .8rem; color: var(--fg-mut);
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.status.on { height: 1.9rem; padding-top: .45rem; opacity: 1; }
.status.err { color: var(--danger); }

/* ---------- board ---------- */

.board {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.board.dragging { scroll-snap-type: none; cursor: grabbing; }

.column {
  display: flex; flex-direction: column; flex: 0 0 auto;
  width: min(84vw, 310px); max-height: 100%;
  background: var(--rail); border: 1px solid var(--line); border-radius: var(--r-lg);
  scroll-snap-align: start;
}
.column.drop-target { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.column.col-dragging { opacity: .35; }

/* Nessun `touch-action` forzato ne' qui ne' sulle card: il dito deve poter scorrere board e
   colonne come sempre. Il trascinamento parte solo dopo una pressione prolungata, cioe' quando
   il browser non ha ancora iniziato nessuno scorrimento e app.js puo' ancora fermarlo. */
.col-head {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem .5rem .5rem .7rem;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.col-head .grip { color: var(--fg-mut); opacity: .5; margin-left: -.3rem; }
.col-name { flex: 1; min-width: 0; margin: 0; font-size: .88rem; font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-count { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--fg-mut); background: var(--surface); border-radius: 99px; padding: .1rem .45rem; }
.col-head .icon-btn { width: 32px; height: 32px; }

.col-list {
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 8px; padding: 0 .5rem .5rem;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.col-foot { padding: 0 .5rem .55rem; }
.col-add {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  min-height: 38px; padding: 0 .55rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--fg-mut); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.col-add:hover { background: var(--surface); color: var(--fg); }

.col-empty {
  margin: 0 0 .5rem; padding: .9rem .7rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--fg-mut); font-size: .8rem; line-height: 1.4; text-align: center;
}

/* ---------- card ---------- */

.card {
  position: relative; display: block; width: 100%;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg); font: inherit; text-align: left;
  box-shadow: var(--shadow-card); cursor: pointer;
  /* Senza questo, trascinare una card selezionerebbe il suo testo: si trascina una card, non si
     evidenzia una frase. Il testo resta comunque copiabile dalla scheda di dettaglio. */
  user-select: none; -webkit-user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.card:hover { background: var(--surface-hi); border-color: var(--line-strong); }

/* Mentre viaggia, l'elemento originale resta in pagina come segnaposto: stessa altezza esatta,
   contenuto invisibile. Cosi' le card sotto non ballano e non serve misurare niente a mano. */
.as-placeholder {
  border: 1px dashed var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
  box-shadow: none !important;
}
.as-placeholder > * { visibility: hidden; }
.column.as-placeholder > * { visibility: hidden; }

.card-labels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .45rem; border-radius: 5px;
  font-size: .69rem; font-weight: 640; letter-spacing: .01em; line-height: 1.5;
}
.chip { color: var(--chip); background: var(--chip-bg); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--chip); }
.chip[data-color="blue"] { --chip: var(--l-blue); --chip-bg: var(--l-blue-bg); }
.chip[data-color="green"] { --chip: var(--l-green); --chip-bg: var(--l-green-bg); }
.chip[data-color="amber"] { --chip: var(--l-amber); --chip-bg: var(--l-amber-bg); }
.chip[data-color="red"] { --chip: var(--l-red); --chip-bg: var(--l-red-bg); }
.chip[data-color="purple"] { --chip: var(--l-purple); --chip-bg: var(--l-purple-bg); }
.chip[data-color="teal"] { --chip: var(--l-teal); --chip-bg: var(--l-teal-bg); }
.chip[data-color="pink"] { --chip: var(--l-pink); --chip-bg: var(--l-pink-bg); }
.chip[data-color="slate"] { --chip: var(--l-slate); --chip-bg: var(--l-slate-bg); }

.card-cover { display: block; width: 100%; height: 116px; margin-bottom: .45rem; object-fit: cover; border-radius: var(--r-sm); background: #000; }
.card-title { margin: 0; font-size: .89rem; font-weight: 520; line-height: 1.38; overflow-wrap: anywhere; }
.card-foot { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; color: var(--fg-mut); font-size: .72rem; }
.card-foot .ico { width: 14px; height: 14px; }
.card-foot time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Il momento autoriale del prodotto: la card si stacca dal piano. Inclinazione minima e ombra
   con offset vero (non un alone), come un cartoncino sollevato di un centimetro. */
.drag-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ghost {
  position: absolute; top: 0; left: 0; will-change: transform;
  box-shadow: var(--shadow-lift); border-radius: var(--r-md);
  transform-origin: 20% 50%;
}
.ghost .card, .ghost .column { transform: rotate(2.4deg) scale(1.02); opacity: 1; }
.ghost .column { max-height: 55vh; overflow: hidden; }

/* ---------- composer inline (nuova card / nuova colonna) ---------- */

.composer { display: flex; flex-direction: column; gap: .45rem; padding: .55rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.composer textarea, .composer input {
  width: 100%; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); font: inherit; font-size: .87rem; resize: none;
}
.composer-actions { display: flex; gap: .4rem; }

.column-new { flex: 0 0 auto; width: min(84vw, 310px); }
.column-new .col-add { min-height: 46px; border: 1px dashed var(--line-strong); }

/* ---------- popover menu colonna ---------- */

.popover {
  min-width: 13rem; padding: .35rem; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lift);
}
.popover::backdrop { background: rgba(0,0,0,.35); }
.popover-title { margin: .3rem .5rem .35rem; font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mut); }
.popover button {
  display: block; width: 100%; min-height: 40px; padding: 0 .55rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; font-size: .87rem; text-align: left; cursor: pointer;
}
.popover button:hover { background: var(--surface-hi); }

/* ---------- scheda card ---------- */

.sheet {
  width: min(620px, 100%); max-width: 100%; max-height: 92dvh; padding: 0;
  margin: auto auto 0; /* su telefono sale dal basso: il pollice arriva ai comandi in fondo */
  border: 1px solid var(--line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--rail); color: var(--fg); box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(6,8,11,.66); }
.sheet[open] { display: flex; flex-direction: column; }
@media (min-width: 700px) {
  .sheet { margin: auto; border-radius: var(--r-lg); max-height: 86dvh; }
}

.sheet-head { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; margin: 0; font-size: .95rem; font-weight: 640; }
.sheet-body { flex: 1; padding: .9rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; }
.sheet-foot {
  display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: #0b0e12;
}
.sheet-foot-side { display: flex; gap: .4rem; margin-right: auto; }
.sheet-foot .btn-primary { min-width: 7rem; }

.field { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; border: 0; }
.field > span, .field > legend { padding: 0; font-size: .74rem; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; color: var(--fg-mut); }
.field > span em, .field > legend em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 42px; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); font: inherit; font-size: .9rem;
}
.field textarea { min-height: 7rem; line-height: 1.5; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }

.label-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.label-picker button {
  border: 1px solid transparent; cursor: pointer; font: inherit;
  padding: .25rem .55rem; min-height: 34px;
}
/* Etichetta non applicata: sfondo spento e testo neutro, non un colore sbiadito. Un chip a bassa
   opacita' scenderebbe sotto il rapporto di contrasto minimo proprio dove serve leggerlo per
   decidere. Il puntino conserva la tinta, cosi' l'etichetta resta riconoscibile a colpo d'occhio. */
.label-picker button[aria-pressed="false"] { color: var(--fg-mut); background: transparent; border-color: var(--line-strong); }
.label-picker button[aria-pressed="true"] { border-color: var(--chip); }
.label-new { display: flex; gap: .4rem; }
.label-new input { flex: 1; }

.image-preview img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-sm); background: #000; }
.image-preview[hidden] { display: none; }
.image-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.image-tools input[type="url"] { flex: 1; min-width: 10rem; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Descrizione: si legge formattata e si tocca per modificarla, come su Trello. Il markdown
   serve a qualcosa solo se qualcuno lo rende. */
.md {
  min-height: 3rem; padding: .55rem .6rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .9rem; line-height: 1.55; cursor: text;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.md:hover { background: var(--bg); border-color: var(--line); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: .4rem 0; }
.md ul { margin: .4rem 0; padding-left: 1.1rem; }
.md li { margin: .15rem 0; }
.md code { padding: .05rem .3rem; border-radius: 4px; background: #0a0d11; font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md a { color: var(--accent); }

.muted { color: var(--fg-mut); }

/* Testo per i soli lettori di schermo: sul davanti della card l'icona "ha una descrizione" ha
   bisogno di un nome, ma scriverlo accanto sprecherebbe la riga. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- vuoto / errore a livello board ---------- */

.board-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; max-width: 24rem; margin: 2rem auto; padding: 1.4rem; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.board-empty h2 { margin: 0; font-size: 1.05rem; font-weight: 640; }
.board-empty p { margin: 0; color: var(--fg-mut); font-size: .88rem; line-height: 1.5; }

/* ---------- cancello d'ingresso ---------- */

/* Copre la board invece di sostituirla: dietro non c'e' niente da vedere (senza credenziale non
   arriva un byte di dati) e cosi' l'accesso riuscito non ricostruisce la pagina, la scopre. */
.gate {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1.25rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top));
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--bg);
}
.gate[hidden] { display: none; }

.gate-panel {
  width: 100%; max-width: 21rem;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.5rem 1.35rem 1.25rem;
  background: var(--rail); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  /* L'unico momento animato della schermata: il pannello arriva da sotto e si ferma. Parte da
     uno stato gia' visibile, cosi' se l'animazione non gira non resta niente di invisibile. */
  animation: gate-in .42s var(--ease) both;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(12px); } }

.gate-panel h2 { margin: 0; font-size: 1.35rem; font-weight: 660; letter-spacing: -.02em; }
/* Sottotitolo attaccato al titolo (stesso gruppo), spazio vero prima del campo. */
.gate-sub { margin: -.5rem 0 .5rem; color: var(--fg-mut); font-size: .88rem; }
.gate-panel .field { gap: .4rem; }
.gate-panel input { min-height: 46px; font-size: 1rem; }
.gate-panel input:focus { border-color: var(--accent); }
.gate-go { width: 100%; min-height: 46px; margin-top: .15rem; }
.gate-go[disabled] { opacity: .6; cursor: progress; }

/* L'errore prende il posto suo: non si infila fra campo e bottone spostandoli sotto il dito
   mentre l'utente sta gia' toccando "Entra". Compare fra sottotitolo e bottone, sopra al
   bottone, e il pannello e' abbastanza corto da vederlo tutto. */
.gate-err { margin: 0; color: var(--danger); font-size: .85rem; line-height: 1.4; }
.gate-err[hidden] { display: none; }
.gate-foot { margin: .35rem 0 0; color: var(--fg-mut); font-size: .78rem; line-height: 1.45; }

/* Scossa alla password sbagliata: il "no" arriva prima di leggerlo. E' feedback di stato, non
   decorazione, quindi resta anche senza altre animazioni in giro. */
.gate-panel.wrong { animation: gate-wrong .34s var(--ease) both; }
@keyframes gate-wrong {
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: .5rem .6rem; }
  .topbar-tools { width: 100%; margin-left: 0; }
  .search { flex: 1; }
  .search input { width: 100%; }
  /* Su schermo stretto le etichette dei bottoni secondari spariscono alla vista ma NON
     dall'albero di accessibilita': con `display:none` un bottone con la sola icona resterebbe
     senza nome per chi usa un lettore di schermo. */
  .btn-ghost span, .sheet-foot .btn span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .btn-ghost { padding: 0 .7rem; }
  .sheet-foot .btn-primary span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .ghost .card, .ghost .column { transform: none; }
  /* Il pannello resta dov'e': l'entrata e la scossa sono l'unico modo in cui questa schermata si
     muove, e chi ha chiesto meno movimento legge comunque il messaggio d'errore. */
  .gate-panel, .gate-panel.wrong { animation: none; }
}