/*
 * La Redazione v3 — identità visiva (design: Fable, in prima persona).
 *
 * L'idea: una sala di redazione di un quotidiano culturale. La TESTATA è
 * d'inchiostro, firmata dal filo-spettro del prisma (PRISMA). Lo spazio di
 * lavoro è carta calda e luminosa. I TITOLI sono il prodotto: serif ovunque
 * contino, a partire dalle card della bacheca (con la cover: una bacheca da
 * rivista, non da CRM). Il COLORE è informazione: solo gli stati editoriali
 * e le azioni ne hanno diritto.
 *
 * Vincolo tecnico: i selettori v2 restano tutti validi (il markup vivo non si
 * rompe); i componenti nuovi (cover card, menu rapido, drag&drop, modale
 * "Nuovo articolo", Lancio a pannelli) aggiungono classi, non ne cambiano.
 */

:root {
    /* Inchiostro & carta (più caldi della v2: da ufficio a redazione) */
    --bg: #f2efe9;
    --surface: #ffffff;
    --surface-2: #faf8f4;
    --paper: #f7f4ee;          /* alias palette comp usati dal reskin v4 */
    --paper-2: #efece4;
    --paper-3: #ffffff;
    --ink: #171511;
    --ink-2: #4f4b43;
    --ink-3: #8b857a;
    --line: #e5e1d8;
    --line-strong: #cfc9bc;

    /* Azione: indaco editoriale */
    --accent: #1f3a63;
    --accent-ink: #ffffff;
    --accent-soft: #e9edf5;

    /* Stati editoriali (colonne, badge, calendario) */
    --s-darevisionare: #6d5b97;
    --s-inrevisione: #a6791f;
    --s-dacorreggere: #b5521e;
    --s-pronto: #2f6b4f;
    --s-pubblicati: #1f3a63;
    --s-quarantena: #9b2d2d;

    /* Esiti generici */
    --ok: #2f6b4f;
    --warn: #a6791f;
    --err: #9b2d2d;

    /* Lo spettro del prisma: la firma della testata */
    --spettro: linear-gradient(90deg,
        #7b5ea8 0%, #40618f 22%, #2f7d6b 45%, #9a8b32 66%, #b06a2a 84%, #9b3b3b 100%);

    /* Tipografia e misure */
    --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-read: 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs: 0.875rem;
    --fs-lg: 1rem;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(23, 21, 17, 0.05), 0 6px 20px rgba(23, 21, 17, 0.08);
    --shadow-lg: 0 12px 34px -12px rgba(23, 21, 17, 0.3);
    --header-h: 56px;
}

/* Mappa stato -> token, usata da colonne/badge/pill via var(--st) */
.st-da_revisionare { --st: var(--s-darevisionare); }
.st-in_revisione   { --st: var(--s-inrevisione); }
.st-da_correggere  { --st: var(--s-dacorreggere); }
.st-pronto         { --st: var(--s-pronto); }
.st-pubblicati     { --st: var(--s-pubblicati); }
.st-quarantena     { --st: var(--s-quarantena); }

* { box-sizing: border-box; }

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

body {
    font-family: var(--font-ui);
    font-size: var(--fs);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.num, .count, .cal-day-n, .cost, .chip-date, time, .bell-badge {
    font-variant-numeric: tabular-nums;
}

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

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

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

/* ---------- Testata (inchiostro + filo spettro) ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--header-h);
    padding: 0 18px;
    background: var(--ink);
    color: #ded8cb;
    border-bottom: 0;
}
/* Il filo-spettro: cucito sotto la testata, la firma PRISMA. */
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.5px;
    background: var(--spettro);
    opacity: 0.95;
    pointer-events: none;
}

.brand {
    font-size: var(--fs);
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}
.brand .brand-sub {
    font-family: var(--font-read);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #cbc3b2;
    font-size: 1.02rem;
    margin-left: 0.35rem;
}

.tabs { display: flex; gap: 4px; height: 100%; overflow-x: auto; align-items: center; }
.tab {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    color: #b6ae9d;
    font-weight: 600;
    font-size: var(--fs-sm);
    border-bottom: 0;
    border-radius: 99px;
    white-space: nowrap;
    transition: color 0.13s, background 0.13s;
}
.tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.tab.active { color: var(--ink); background: #f2efe9; font-weight: 700; }

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b6ae9d;
    white-space: nowrap;
}
.topbar-right .editor-name { color: #ded8cb; font-size: var(--fs-sm); }
.topbar-right .btn-ghost { color: #b6ae9d; }
.topbar-right .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* "+ Nuovo articolo" in testata: l'unico bottone chiaro sul fondo scuro */
.btn-nuovo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--ink);
    background: #f2efe9;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-nuovo:hover { transform: translateY(-1px); box-shadow: 0 5px 16px -6px rgba(0, 0, 0, 0.55); }

/* ---------- Campanella richiami ---------- */

.bell-wrap { position: relative; }

.bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font: inherit;
    color: #b6ae9d;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}
.bell-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.bell-btn svg { display: block; }

.bell-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #c9463d;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--ink);
    box-sizing: content-box;
}

.bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(370px, calc(100vw - 24px));
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    overflow: hidden;
}
.bell-head {
    padding: 10px 14px;
    font-size: var(--fs-sm);
    font-weight: 800;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    white-space: normal;
}
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    white-space: normal;
}
.bell-item:hover { background: var(--surface-2); }
.bell-item:last-child { border-bottom: 0; }
.bell-kind {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 800;
    color: #fff;
    background: var(--accent);
}
.bell-kind.k-assign { background: var(--s-pronto); }
.bell-kind.k-blocked { background: var(--err); }
.bell-body { flex: 1; min-width: 0; }
.bell-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.bell-meta { color: var(--ink-2); font-size: var(--fs-xs); margin-top: 2px; }
.bell-foot {
    border-top: 1px solid var(--line);
    padding: 6px;
    display: flex;
    justify-content: center;
    background: var(--surface-2);
}
.bell-empty { padding: 22px 12px; text-align: center; color: var(--ink-2); font-size: var(--fs-sm); white-space: normal; }

/* ---------- Bottoni e form ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Il primario è d'inchiostro, come la testata: l'azione forte è della casa */
.btn-primary {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}
.btn-primary:hover:not(:disabled) { background: #2b2820; border-color: #2b2820; }

.btn-ok { color: #fff; background: var(--ok); border-color: var(--ok); }
.btn-ok:hover:not(:disabled) { background: #265a42; border-color: #265a42; }

.btn-danger { color: #fff; background: var(--err); border-color: var(--err); }
.btn-danger:hover:not(:disabled) { background: #822424; border-color: #822424; }

.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(23, 21, 17, 0.05); color: var(--ink); border-color: transparent; transform: none; box-shadow: none; }

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-text:hover { color: var(--ink); }
.btn-text:disabled { opacity: 0.5; cursor: not-allowed; }

input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="datetime-local"], input[type="time"], textarea, select {
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    max-width: 100%;
}
textarea { resize: vertical; }
label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* La barretta degli attrezzi sopra l'area di testo: sta attaccata al campo,
   non ci galleggia sopra, e non ruba spazio verticale al testo. */
.edit-strumenti { display: flex; gap: 12px; align-items: center; margin: 2px 0 4px; }

/* ---------- Layout viste ---------- */

main { padding: 18px; }

.view-title { margin: 0 0 12px; font-family: var(--font-read); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; }

.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(23, 21, 17, 0.04);
}
.panel h2, .panel h3 {
    margin: 0 0 10px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
}

/* Intestazione pannello con numero di passo (Lancio v3) */
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -14px -14px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
}
.panel-head .step {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    flex: none;
}

.error-box {
    padding: 10px 12px;
    border: 1px solid var(--err);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--err);
    margin-bottom: 12px;
}

.inline-alert {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--err);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: #fdf6f6;
    color: var(--err);
    font-size: var(--fs-sm);
    margin: 10px auto 0;
    max-width: 46rem;
}
.inline-alert .btn-text { color: var(--err); margin-left: auto; flex: none; }

/* ---------- Login (l'ingresso in redazione) ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ink);
    position: relative;
}
.login-wrap::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--spettro);
}
.login-card {
    width: 100%;
    max-width: 350px;
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 26px 24px;
}
.login-card h1 {
    margin: 0 0 2px;
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.login-card .login-sub {
    margin: 0 0 18px;
    color: var(--ink-2);
    font-family: var(--font-read);
    font-style: italic;
    font-size: 1.25rem;
}

/* ---------- Oggi ---------- */

.oggi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}
.oggi-grid .panel-wide { grid-column: 1 / -1; }

/* OGGI v2 — home azionabile (Opus su skin v3; rifinitura estetica a Fable poi) */
.oggi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.oggi-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.oggi-sub strong { color: var(--ink); font-weight: 700; }
.oggi-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pulse-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.pulse-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--st, var(--line-strong)); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; min-width: 0; transition: box-shadow 0.12s, transform 0.12s; }
.pulse-cell:hover { box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.pulse-n { font-family: var(--font-read); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--st, var(--ink)); }
.pulse-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.link-more { font-size: 0.8rem; color: var(--accent); white-space: nowrap; text-decoration: none; }
.link-more:hover { text-decoration: underline; }
.q-row { display: block; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.q-row:first-of-type { border-top: 0; padding-top: 4px; }
.q-row:hover { text-decoration: none; }
.q-row:hover .item-title { color: var(--accent); }
.q-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.q-cat { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-foot { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.chip-aisha { border-color: #c7bfe0; color: var(--s-darevisionare); background: #f2eef9; font-weight: 700; }
.giro-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.95rem; }
.giro-focus { font-family: var(--font-read); }
@media (max-width: 760px) { .pulse-strip { grid-template-columns: repeat(3, 1fr); } }

.item-list { display: flex; flex-direction: column; }
.item-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 4px;
    border-top: 1px solid var(--line);
    width: 100%;
    text-align: left;
    background: none;
    border-left: 0; border-right: 0; border-bottom: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.item-row:first-child { border-top: 0; }
.item-row:hover { background: var(--surface-2); text-decoration: none; }
a.item-row { text-decoration: none; }
.item-main { flex: 1; min-width: 0; }
.item-title {
    font-family: var(--font-read);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-meta { color: var(--ink-2); font-size: var(--fs-xs); margin-top: 1px; }

.ev-row { border-left: 3px solid var(--line-strong); padding-left: 8px; margin: 6px 0; }
.ev-row.ev-blocked { border-left-color: var(--err); }
.ev-row.ev-blocked .ev-kind { color: var(--err); }
.ev-row.ev-ok { border-left-color: var(--ok); }
.ev-kind { font-weight: 700; font-size: var(--fs-sm); }

/* ---------- Badge, chip, pill, avatar ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}
.badge-state { color: #fff; background: var(--st, var(--ink-3)); }
.badge-grade { color: #fff; }
.badge-grade.g-A { background: var(--ok); }
.badge-grade.g-B { background: var(--warn); }
.badge-grade.g-C { background: var(--err); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: var(--st, var(--ink-3));
}
.pill.g-A { background: var(--ok); }
.pill.g-B { background: var(--warn); }
.pill.g-C { background: var(--err); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6875rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
}
.chip-date { border-color: var(--line-strong); }
.chip-plan { border-color: var(--ok); color: var(--ok); background: #f2f7f4; font-weight: 700; }

.chip-lang { font-weight: 800; }
.chip-lang.on { color: var(--ok); border-color: #c6dccf; background: #f2f7f4; }
.chip-lang.off { color: var(--ink-3); }

.rev-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.rev-chip.ok { color: var(--ok); background: #ecf3ef; border: 1px solid #c6dccf; }
.rev-chip.warn { color: #8a6419; background: #f9f3e5; border: 1px solid #e5d3ab; }
.rev-chip.none { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }

.chip-ready { font-weight: 700; }
.chip-ready.ok { color: var(--ok); border-color: var(--ok); background: #f2f7f4; }
.chip-ready.warn { color: #8a6419; border-color: #e5d3ab; background: #f9f3e5; }

.sig {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sig::before { content: "▪ "; }
.sig.sev-block { color: var(--err); }
.sig.sev-warn { color: var(--warn); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 800;
    color: #fff;
    flex: none;
    letter-spacing: 0.02em;
}
.avatar-empty { background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line-strong); }

.presence { position: relative; display: inline-flex; flex: none; }
.presence .presence-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ok);
    border: 2px solid var(--surface);
    animation: presence-pulse 1.8s ease-in-out infinite;
}
@keyframes presence-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.presence-note { color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }

/* ---------- Bacheca v3: la rassegna della rivista ---------- */

.board-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.board-search { flex: 0 1 220px; min-width: 140px; }

.board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 8px;
}

.board-col {
    flex: 0 0 292px;
    width: 292px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 120px);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.board-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 11px 8px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 3px solid var(--st, var(--line-strong));
}
.board-col-head .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--st, var(--ink-3));
    flex: none;
}
.board-col-head .count {
    margin-left: auto;
    color: var(--ink-2);
    font-weight: 700;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 0 7px;
    font-size: 0.6875rem;
}

.board-col-body {
    overflow-y: auto;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 46px;
}

/* Drop target del drag&drop: la colonna "si accende" */
.board-col.drop-over {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.board-col.drop-over .board-col-head { border-bottom-color: var(--accent); }

.card {
    position: relative;
    display: block;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.13s, box-shadow 0.13s, transform 0.13s;
    width: 100%;
    /* flex-shrink:0 = la card NON si schiaccia. Senza, in una colonna con molte
       card (es. Da revisionare 36, Pubblicati 99) il flex-column le comprimeva a
       strisce sottili invece di far scrollare la colonna: era il vero motivo
       delle "barrette vuote / immagini piccolissime senza titolo". */
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(23, 21, 17, 0.05);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.card.dragging { opacity: 0.45; transform: rotate(1deg) scale(0.98); }

/* v3.1 — card TITOLO-FIRST: il titolo è l'eroe, la cover è una miniatura
   laterale. Così la colonna "Da revisionare" si LEGGE a colpo d'occhio e non
   serve aprire ogni pezzo per capire cos'è. Più densità = più pezzi visibili. */
.card-inner { padding: 10px 11px; }
.card-head { display: flex; gap: 10px; align-items: flex-start; }
.card-thumb {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
/* min-width:0 -> il testo accanto alla miniatura può andare a capo/ellissi
   invece di forzare l'allargamento della card. */
.card-headtext { flex: 1; min-width: 0; }

.card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.card-cat {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-3);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-title {
    font-family: var(--font-read);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.28;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.card-langs { display: flex; gap: 6px; margin-bottom: 7px; }
.card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.card-foot .spacer { flex: 1; }

/* Menu azioni rapide (⋯) sulla card: sposta di stato / assegna senza aprire */
.card-qa {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 800;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
    box-shadow: 0 1px 4px rgba(23, 21, 17, 0.15);
}
.card:hover .card-qa, .card:focus-within .card-qa, .card-qa[aria-expanded="true"] { opacity: 1; }
.qa-menu {
    position: absolute;
    top: 34px;
    right: 6px;
    z-index: 35;
    width: 216px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 4px;
}
.qa-menu .qa-title {
    padding: 6px 9px 3px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}
.qa-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    cursor: pointer;
}
.qa-menu button:hover:not(:disabled) { background: var(--surface-2); }
.qa-menu button:disabled { color: var(--ink-3); cursor: not-allowed; }
.qa-menu .qa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--ink-3)); flex: none; }
.qa-menu .on { font-weight: 800; }
.qa-sep { border-top: 1px solid var(--line); margin: 4px 0; }

/* ---------- Vista articolo ---------- */

.artbar {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 18px;
    margin: -18px -18px 0;
    background: color-mix(in srgb, var(--bg) 82%, white);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.artbar .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-2);
}
.artbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.artbar .presence-group { display: inline-flex; align-items: center; gap: 6px; }

.menu-wrap { position: relative; }
.menu-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 45;
    padding: 6px;
}
.menu-pop .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.menu-pop .menu-item:hover:not(:disabled) { background: var(--surface-2); }
.menu-pop .menu-item:disabled { color: var(--ink-3); cursor: not-allowed; }
.menu-pop .menu-item.danger { color: var(--err); }
.menu-form { padding: 8px 10px; border-top: 1px solid var(--line); margin-top: 6px; }

.langbar {
    display: flex;
    gap: 2px;
    max-width: calc(46rem + 320px + 2rem);
    margin: 14px auto 0;
    border-bottom: 1px solid var(--line);
}
.langtab {
    padding: 8px 15px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-3);
    background: none;
    border: 0;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
}
.langtab:hover { color: var(--ink); }
.langtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.art-layout {
    display: grid;
    grid-template-columns: minmax(0, 46rem) 320px;
    gap: 2rem;
    justify-content: center;
    align-items: start;
    padding: 20px 0 60px;
}
.art-main { min-width: 0; }
.art-side {
    position: sticky;
    top: calc(var(--header-h) + 58px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - var(--header-h) - 70px);
    overflow-y: auto;
    padding-bottom: 8px;
}
.side-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(23, 21, 17, 0.04);
}
.side-card h3 {
    margin: 0 0 10px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
}

.rev-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.rev-grade.g-A { background: var(--ok); }
.rev-grade.g-B { background: var(--warn); }
.rev-grade.g-C { background: var(--err); }

/* Il PERCHÉ del grado: la spiegazione parla prima dei singoli segnali */
.grade-expl {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.rev-signal {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}
.rev-signal:first-of-type { border-top: 0; }
.rev-signal .sev { flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.rev-signal.sev-warn .sev { color: var(--warn); }
.rev-signal.sev-block .sev { color: var(--err); }
.rev-note {
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    font-style: italic;
}

/* Fonti dell'articolo: chi lo sostiene */
.fonte {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
}
.fonte:first-of-type { border-top: 0; }
.fonte a, .fonte .fonte-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.fonte .fonte-meta {
    font-size: 0.65rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fonte-empty { font-size: var(--fs-sm); color: var(--ink-3); font-style: italic; }

.cover-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-2);
}
.cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    background: var(--surface-2);
}
.cover-credit { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 4px; }

.act-row {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    align-items: baseline;
}
.act-row:first-of-type { border-top: 0; }
.act-row .who { color: var(--ink); font-weight: 700; }
.act-row time { margin-left: auto; flex: none; color: var(--ink-3); font-size: var(--fs-xs); }
.act-detail { color: var(--ink-3); font-size: var(--fs-xs); }

.kv { display: flex; gap: 8px; font-size: var(--fs-sm); padding: 3px 0; align-items: baseline; }
.kv dt { color: var(--ink-3); flex: 0 0 84px; margin: 0; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl { margin: 0; }
.kv-list { display: flex; flex-direction: column; }

/* --- La colonna di lettura: qui l'app diventa rivista --- */

.lettura-head { margin-bottom: 6px; }
.lettura-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lettura-h1 {
    font-family: var(--font-read);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4px;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.lettura-lead {
    font-family: var(--font-read);
    font-size: 1.1875rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 14px 0 0;
}
.lettura-cover { margin: 20px 0 0; }
.lettura-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.lettura {
    font-family: var(--font-read);
    font-size: 1.125rem;
    line-height: 1.78;
    margin-top: 24px;
    overflow-wrap: break-word;
    color: #211e18;
}
.lettura p { margin: 0; }
.lettura p + p { margin-top: 1.1em; }
.lettura h2 {
    font-family: var(--font-read);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.6em 0 0.6em;
}
.lettura h3 {
    font-family: var(--font-read);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.4em 0 0.5em;
}
.lettura blockquote {
    margin: 1.2em 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--accent);
    color: var(--ink-2);
    font-style: italic;
}
.lettura ul, .lettura ol { margin: 1em 0; padding-left: 1.6em; }
.lettura li { margin: 0.35em 0; }
.lettura img { max-width: 100%; height: auto; border-radius: var(--radius); }
.lettura a { text-decoration: underline; text-underline-offset: 3px; }
.lettura code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0 4px;
}
.lettura ::selection { background: color-mix(in srgb, var(--accent) 20%, white); }

.locale-missing {
    padding: 40px 16px;
    text-align: center;
    color: var(--ink-2);
    font-size: var(--fs);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.affianca {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
}
.affianca-col { min-width: 0; }
.affianca-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    font-size: var(--fs-sm);
    font-weight: 700;
}
.affianca .lettura-h1 { font-size: 1.3rem; }
.affianca .lettura-lead { font-size: 1rem; }
.affianca .lettura { font-size: 1rem; line-height: 1.7; margin-top: 16px; }

.retitle-panel, .rewrite-panel {
    margin: 14px 0 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
}
.retitle-panel h4, .rewrite-panel h4 {
    margin: 0 0 8px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
}
.retitle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.retitle-item:first-of-type { border-top: 0; }
.retitle-item .t { flex: 1; min-width: 0; font-family: var(--font-read); font-size: 1rem; line-height: 1.4; }
.retitle-reason { color: var(--ink-2); font-style: italic; margin: 0 0 6px; }
.panel-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

.art-body-wrap { position: relative; }
.rw-float {
    position: absolute;
    z-index: 20;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 800;
    color: #fff;
    background: var(--ink);
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
}
.rewrite-result {
    font-family: var(--font-read);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 8px;
    white-space: pre-wrap;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { border-top-color: var(--line-strong); } }

.skel { border-radius: var(--radius-sm); background: var(--line); animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.skel-bar { height: 36px; margin: 0 0 16px; }
.skel-title { height: 2.2rem; width: 85%; margin-bottom: 12px; }
.skel-lead { height: 1.2rem; width: 65%; margin-bottom: 26px; }
.skel-line { height: 0.95rem; margin-bottom: 12px; }
.skel-card { height: 120px; border-radius: var(--radius-lg); margin-bottom: 12px; }

/* ---------- Note & richiami (sidebar articolo) ---------- */

.note {
    border-top: 1px solid var(--line);
    padding: 8px 0;
    font-size: var(--fs-sm);
}
.note:first-child { border-top: 0; }
.note-head { display: flex; gap: 8px; color: var(--ink-3); margin-bottom: 2px; align-items: baseline; }
.note-head .who { color: var(--ink-2); font-weight: 700; }
.mention { color: var(--accent); font-weight: 700; }

.mention-box { position: relative; }
.mention-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 5;
    max-height: 140px;
    overflow-y: auto;
}
.mention-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    font: inherit;
    font-size: var(--fs-sm);
    background: none;
    border: 0;
    cursor: pointer;
}
.mention-item:hover { background: var(--surface-2); }

/* ---------- Nuovo articolo (modale a 3 vie) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(23, 21, 17, 0.55);
    display: grid;
    place-items: center;
    padding: 16px;
}
.modal {
    width: min(40rem, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 8px;
}
.modal-head h2 { font-family: var(--font-read); font-weight: 600; font-size: 1.3rem; margin: 0; }
.modal-close {
    background: none; border: 0; cursor: pointer;
    font-size: 1.15rem; color: var(--ink-3); padding: 4px 8px; border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--ink); background: var(--surface-2); }
.modal-tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.modal-tabs button {
    background: none; border: 0; border-bottom: 2.5px solid transparent; cursor: pointer;
    font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); padding: 8px 12px;
}
.modal-tabs button:hover { color: var(--ink); }
.modal-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.modal-body { padding: 14px 18px 4px; }
.modal-body .hint { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 12px; }
.modal-body .field input, .modal-body .field textarea, .modal-body .field select { width: 100%; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 18px 16px; }
.modal-busy { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); padding: 4px 0; }

/* ---------- Lancio v3: brief → ordine → regia ---------- */

.lancio-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 74rem;
    margin: 0 auto;
}

.lancio-intro {
    max-width: 74rem;
    margin: 0 auto 14px;
}
.lancio-intro .kicker {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
}
.lancio-intro h1 { font-family: var(--font-read); font-weight: 600; font-size: 1.55rem; margin: 2px 0 4px; }
.lancio-intro p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; max-width: 56rem; }

.chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 240px;
    max-height: calc(100vh - var(--header-h) - 300px);
    overflow-y: auto;
    padding: 4px 0;
}
.msg {
    max-width: 85%;
    padding: 8px 11px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}
.msg-user { align-self: flex-end; background: var(--ink); color: #f2efe9; border-bottom-right-radius: 4px; }
.msg-assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; }

/* Suggerimenti pronti: il modo più veloce per capire cosa si può chiedere */
.chat-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chat-suggest button {
    font: inherit; font-size: var(--fs-xs); color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
    padding: 4px 10px; cursor: pointer;
}
.chat-suggest button:hover { border-color: var(--ink-3); color: var(--ink); }

/* Ordine di servizio: leggibile come un modulo di redazione, non un form */
.order-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.order-cats label {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm);
    border: 1px solid var(--line-strong); border-radius: 99px; padding: 4px 12px;
    cursor: pointer; background: var(--surface);
}
.order-cats label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.order-cats input { position: absolute; opacity: 0; pointer-events: none; }

.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--ink); }
.range-row .val {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1rem;
    min-width: 1.6rem; text-align: center;
}

.avoid-list { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.avoid-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fdf3f2; border: 1px solid #eac9c5; color: var(--err);
    font-size: var(--fs-xs); font-weight: 600; border-radius: 99px; padding: 3px 9px;
}
.avoid-tag button { background: none; border: 0; color: inherit; cursor: pointer; font-weight: 800; padding: 0 1px; font-size: 0.8rem; line-height: 1; }

.lancio-cta { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lancio-cta .btn { font-size: var(--fs); padding: 9px 18px; }
.lancio-hint { font-size: var(--fs-xs); color: var(--ink-3); }

/* Regia */
.regia-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: 12px;
}
.regia-banner.done-ok { border-color: var(--ok); background: #f4f9f6; }
.regia-banner.done-fail { border-color: var(--err); background: #fdf6f6; }
.pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--err);
    flex: none;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.stage-group { margin-bottom: 12px; }
.stage-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
    margin-bottom: 4px;
}
.story-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
}
.story-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-read); }
.pbar {
    flex: 0 0 90px;
    height: 5px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.pbar > span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.pbar.done > span { background: var(--ok); }
.pbar.quarantined > span { background: var(--err); }
.pbar.failed > span { background: var(--err); }

.log-tail {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    background: var(--ink);
    color: #cfc8ba;
    border-radius: var(--radius-sm);
    padding: 10px;
    overflow-x: auto;
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 6px 0 0;
}
details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }

.orders-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.orders-table th, .orders-table td {
    text-align: left;
    padding: 6px 8px;
    border-top: 1px solid var(--line);
    white-space: nowrap;
}
.orders-table th { color: var(--ink-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; border-top: 0; }
.orders-table td.focus-cell { white-space: normal; }
.table-scroll { overflow-x: auto; }

.esito-ok { color: var(--ok); font-weight: 700; }
.esito-fail { color: var(--err); font-weight: 700; }

/* ---------- Piano ---------- */

.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-toolbar h2 { margin: 0; font-family: var(--font-read); font-weight: 600; font-size: 1.15rem; min-width: 170px; text-align: center; }

.piano-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 12px;
    align-items: start;
}

.cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cal-head {
    background: var(--surface-2);
    padding: 6px 8px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-align: right;
}
.cal-cell {
    background: var(--surface);
    min-width: 0; /* item di griglia: senza questo un titolo lungo forza la colonna e rompe il calendario */
    min-height: 92px;
    padding: 4px 6px;
    font: inherit;
    color: inherit;
    text-align: left;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
    transition: background 0.12s;
}
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.empty { background: var(--surface-2); cursor: default; }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day-n { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); align-self: flex-end; }
.cal-cell.today .cal-day-n {
    color: #fff;
    background: var(--accent);
    border-radius: 3px;
    padding: 0 4px;
}

.cal-ev {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 1px 5px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-ev.ev-draft { border: 1px dashed var(--s-dacorreggere); color: var(--s-dacorreggere); background: var(--surface); }
.cal-ev.ev-ready { background: var(--s-pronto); color: #fff; }
.cal-ev.ev-published { background: var(--s-pubblicati); color: #fff; }
.cal-more { font-size: 0.625rem; color: var(--ink-3); }

.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.cal-legend .cal-ev { display: inline-block; }

.day-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}
.day-item:first-child { border-top: 0; }
.day-item .item-main { flex: 1 1 140px; min-width: 0; }
.day-item .cal-ev { display: inline-block; flex: none; }

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

#toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
}
.toast {
    background: var(--ink);
    color: #f2efe9;
    padding: 10px 13px;
    border-radius: var(--radius);
    border-left: 3px solid var(--ink-3);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.18s ease-out;
    word-break: break-word;
}
.toast-ok { border-left-color: var(--s-pronto); }
.toast-err { border-left-color: #e06a60; }
.toast-info { border-left-color: #7d97c4; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */

[hidden] { display: none !important; }

.btn-block { width: 100%; }

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

.loading { color: var(--ink-2); text-align: center; padding: 32px 8px; }

.empty {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    padding: 6px 2px;
    margin: 0;
}
.board-col-body .empty {
    text-align: center;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 4px;
}

.note-head .who, .item-meta .who { color: var(--ink-2); font-weight: 700; }

/* ---------- Schermi stretti ---------- */

@media (max-width: 1000px) {
    .art-layout { grid-template-columns: minmax(0, 1fr); padding: 16px 0 40px; }
    .art-side { position: static; max-height: none; overflow: visible; }
    .affianca { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .lancio-grid, .piano-grid { grid-template-columns: 1fr; }
    .cal-cell { min-height: 64px; }
    .topbar { gap: 8px; padding: 0 10px; }
    .topbar-right .editor-name { display: none; }
    .brand .brand-sub { display: none; }
    main { padding: 10px; }
    .artbar { margin: -10px -10px 0; padding: 8px 10px; }
}

/* =====================================================================
   v3.2 — PASSATA ESTETICA (Fable): OGGI + CALENDARIO EDITORIALE
   Blocco da APPENDERE in fondo a public/style.css: sono override coerenti
   col sistema v3 (stessi token, stessi selettori, nessun nome-classe
   nuovo richiesto). Le uniche classi nuove (.oggi-kicker, .is-zero,
   .cal-we) sono OPZIONALI: senza markup restano inerti.
   ===================================================================== */

/* ---------- A. Testata di pagina: apertura serif + doppio filetto ----------
   Il segno comune delle "pagine": titolo serif grande e la doppia riga
   thick-thin dei quotidiani sotto la testata di vista. Il ::after è un
   flex item a larghezza piena: robusto, niente position né magic number. */

.oggi-head { margin-bottom: 18px; align-items: flex-end; row-gap: 10px; }
.cal-toolbar { flex-wrap: wrap; margin-bottom: 18px; row-gap: 10px; }

.oggi-head::after,
.cal-toolbar::after {
    content: "";
    flex-basis: 100%;
    height: 7px; /* 3 (thick) + 3 (aria) + 1 (thin), border-box */
    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    margin-top: 2px;
}

.oggi-head .view-title,
.cal-toolbar .view-title {
    font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* Il sommario sotto il titolo è una "deck line" da prima pagina: serif corsivo */
.oggi-sub {
    font-family: var(--font-read);
    font-style: italic;
    font-size: 1.06rem;
    color: var(--ink-2);
    margin: 6px 0 0;
}
.oggi-sub strong { color: var(--ink); font-weight: 700; }

/* Azioni di testata a pillola, come il "+ Nuovo articolo" della topbar */
.oggi-actions .btn { border-radius: 99px; padding: 8px 16px; font-size: var(--fs); }

/* (Opzionale: data del giorno sopra il titolo, se il markup la aggiunge) */
.oggi-kicker {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
}

/* ---------- B. Il polso: da 6 riquadri a UNA manchette ----------
   Un solo strumento: barra unica su carta bianca, celle divise da
   hairline, linguetta di stato cucita al bordo superiore (si allunga
   al passaggio), numero serif grande nel colore di stato. */

.pulse-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(23, 21, 17, 0.04);
}
.pulse-cell {
    position: relative;
    gap: 4px;
    padding: 17px 16px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    transition: background 0.15s ease;
}
.pulse-cell + .pulse-cell { border-left: 1px solid var(--line); }
/* il focus ring resta dentro la manchette (overflow: hidden) */
.pulse-cell:focus-visible { outline-offset: -3px; }
.pulse-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    width: 28px;
    height: 3px;
    background: var(--st, var(--line-strong));
    border-radius: 0 0 3px 3px;
    transition: width 0.18s ease;
}
.pulse-cell:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--st, var(--ink)) 5%, var(--surface));
}
.pulse-cell:hover::before { width: 46px; }
.pulse-n {
    font-size: 2.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.pulse-l { font-size: 0.64rem; letter-spacing: 0.11em; }

/* (Opzionale: cella a zero smorzata, se il markup aggiunge .is-zero) */
.pulse-cell.is-zero::before { opacity: 0.35; }
.pulse-cell.is-zero .pulse-n { color: var(--line-strong); }

/* ---------- C. I pannelli di Oggi: rubriche, non card admin ----------
   Ogni pannello apre con la thick rule d'inchiostro sopra (da rivista) e
   un titolo di rubrica col filetto che corre fino al margine. Le liste
   sono full-bleed: le hairline attraversano tutto il pannello. */

.oggi-grid { gap: 14px; }
.oggi-grid .panel {
    border-top: 2.5px solid var(--ink);
    border-radius: var(--radius);
    padding: 15px 18px 13px;
}
.oggi-grid .panel h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--ink);
}
.oggi-grid .panel h2::after {
    content: "";
    flex: 1 0 12px;
    height: 1px;
    background: var(--line-strong);
}
.oggi-grid .panel-head-row { margin: 0 0 10px; align-items: center; }
.oggi-grid .panel-head-row h2 { flex: 1; margin: 0; }
.link-more {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Card-lista: titolo eroe, hover a tutta campata (da indice di rivista) */
.oggi-grid .q-row {
    margin: 0 -18px;
    padding: 11px 18px;
    transition: background 0.12s;
}
.oggi-grid .q-row:first-of-type { border-top: 0; padding-top: 4px; }
.oggi-grid .q-row:hover { background: var(--surface-2); }
.oggi-grid .q-row .item-title {
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: -0.008em;
}
.oggi-grid .q-cat { font-size: 0.6rem; letter-spacing: 0.12em; }
.oggi-grid .q-foot { margin-top: 7px; }

/* Richiami: stessa campata piena delle q-row */
.oggi-grid .item-row { margin: 0 -18px; padding: 10px 18px; }

/* Gli stati vuoti hanno una voce: parlano in corsivo serif */
.oggi-grid .empty,
#day-panel .empty {
    font-family: var(--font-read);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--ink-3);
    padding: 6px 2px 4px;
}

/* Il giro di Aisha: l'unica rubrica firmata col filo-spettro (è la
   macchina di PRISMA che scrive). Esito come timbro, focus tra caporali. */
.oggi-grid .oggi-giro {
    border-top: 0;
    position: relative;
    overflow: hidden;
    padding-top: 17px;
}
.oggi-grid .oggi-giro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--spettro);
}
.oggi-giro .giro-line { font-size: 1rem; gap: 10px; }
.oggi-giro .esito-ok,
.oggi-giro .esito-fail {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 1px 7px;
}
.giro-focus { font-style: italic; font-size: 1.08rem; }
.giro-focus::before { content: "\00AB\00A0"; color: var(--ink-3); }
.giro-focus::after { content: "\00A0\00BB"; color: var(--ink-3); }
.giro-line time { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ---------- D. Calendario: oggetto editoriale, non foglio Excel ----------
   Testata dei giorni d'inchiostro col filo-spettro cucito sotto (replica
   in miniatura della testata dell'app), numeri del giorno in serif,
   giorni fuori mese tratteggiati come carta tecnica, "oggi" cerchiato
   a penna. Gli eventi sono righe tipografiche, non pillole da CRM:
   bozza = corsivo con tacca tratteggiata; pronta = tonda con tacca
   verde; uscita = inchiostrata (fondo pieno indaco). */

.cal-toolbar h2 { font-size: 1.3rem; min-width: 150px; }
.cal-toolbar h2 .num { color: var(--ink-3); font-weight: 500; }
.cal-toolbar > .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}
#cal-prev { margin-left: auto; }

.piano-grid { gap: 16px; }

.cal {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(23, 21, 17, 0.04);
    position: relative;
}
/* Il filo-spettro corre sotto la banda dei giorni (alta 32px fissi) */
.cal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 32px;
    height: 2.5px;
    background: var(--spettro);
    pointer-events: none;
    z-index: 2;
}
.cal-head {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--ink);
    color: #cbc3b2;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-align: center;
    /* copre l'hairline del gap tra le celle della banda */
    box-shadow: -1px 0 0 var(--ink);
}

.cal-cell { min-height: 100px; padding: 6px 7px; transition: background 0.12s; }
.cal-cell:hover { background: var(--surface); }
.cal-cell[data-day]:hover { background: var(--surface-2); }
.cal-cell.empty {
    background-color: var(--surface-2);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 5px,
        rgba(23, 21, 17, 0.03) 5px 6px
    );
}
.cal-cell.today { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.cal-cell.selected {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Numero del giorno in serif (cifre elzeviriane con Georgia/Palatino) */
.cal-day-n {
    font-family: var(--font-read);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-2);
    padding: 2px 1px;
}
/* "Oggi" è cerchiato a penna, non evidenziato da software */
.cal-cell.today .cal-day-n {
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: transparent;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
}

/* (Opzionale: weekend su carta, se il markup aggiunge .cal-we) */
.cal-cell.cal-we:not(.empty):not(.selected) { background: var(--surface-2); }

/* Eventi: grammatica tipografica dei tre stati */
.cal-ev {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.45;
    padding: 1px 5px 1px 6px;
    border-radius: 2px;
    border-left: 2.5px solid transparent;
}
.cal-ev.ev-draft {
    border: 0;
    border-left: 2.5px dashed var(--s-dacorreggere);
    background: color-mix(in srgb, var(--s-dacorreggere) 5%, var(--surface));
    color: var(--s-dacorreggere);
    font-style: italic;
}
.cal-ev.ev-ready {
    border-left-color: var(--s-pronto);
    background: color-mix(in srgb, var(--s-pronto) 7%, var(--surface));
    color: var(--s-pronto);
    font-weight: 700;
}
.cal-ev.ev-published {
    border-left-color: var(--s-pubblicati);
    background: var(--s-pubblicati);
    color: #fff;
    font-weight: 700;
}
.cal-more {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--ink-3);
    padding-left: 8px;
}

.cal-legend {
    margin-top: 10px;
    gap: 14px;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

/* ---------- E. Pannello del giorno: la scrivania di pianificazione ----------
   Rubrica anch'esso (thick rule), sticky accanto al calendario, data in
   serif come un titolo, azioni compatte allineate a destra. */

#day-panel {
    border-top: 2.5px solid var(--ink);
    border-radius: var(--radius);
    padding: 15px 18px 13px;
    position: sticky;
    top: calc(var(--header-h) + 14px);
    max-height: calc(100vh - var(--header-h) - 28px);
    overflow-y: auto;
}
#day-panel h2 {
    font-family: var(--font-read);
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 2px;
}
#day-panel h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--ink);
}
#day-panel h3::after {
    content: "";
    flex: 1 0 12px;
    height: 1px;
    background: var(--line-strong);
}

#day-panel .day-item {
    padding: 10px 0;
    gap: 6px 8px;
    /* le azioni, quando vanno a capo, si appoggiano a destra;
       la riga del titolo non ne risente (item-main assorbe con flex:1) */
    justify-content: flex-end;
}
#day-panel .day-item .item-title {
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
}
#day-panel .day-item .item-title:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#day-panel .day-item .btn { padding: 4px 10px; font-size: var(--fs-xs); }
#day-panel .day-item input[type="time"] {
    padding: 3px 6px;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}
#day-panel .chip-ready { border-radius: 99px; padding: 2px 10px; }

/* ---------- F. Schermi stretti ---------- */

@media (max-width: 860px) {
    .pulse-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pulse-cell { padding: 13px 12px 10px; }
    .pulse-cell::before { left: 12px; }
    .pulse-cell:nth-child(3n + 1) { border-left: 0; }
    .pulse-cell:nth-child(n + 4) { border-top: 1px solid var(--line); }
    .pulse-n { font-size: 1.65rem; }
    .cal-cell { min-height: 72px; padding: 4px 5px; }
    .cal-ev { font-size: 0.62rem; }
    #day-panel { position: static; max-height: none; overflow: visible; }
    .oggi-grid .q-row, .oggi-grid .item-row { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
    .oggi-grid .panel, #day-panel { padding-left: 14px; padding-right: 14px; }
}

/* Modifica manuale del testo (edit-mode nella scheda articolo) */
.edit-badge { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 2px 8px; }
.art-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.edit-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-3); margin-top: 10px; }
.edit-title { font-family: var(--font-read); font-size: 1.3rem; font-weight: 600; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.edit-body { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.6; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); resize: vertical; min-height: 340px; }
.edit-title:focus, .edit-body:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.edit-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.photo-upload-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }

/* ============================================================================
   RADAR — le notizie dal mondo (candidate non scritte da vagliare)
   Riusa i token di :root e i bottoni .btn/.btn-ok/.btn-ghost già definiti.
   ========================================================================== */
.radar { max-width: 1120px; margin: 0 auto; }
.radar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.radar-head::after { content: ""; flex-basis: 100%; height: 7px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); margin-top: 6px; }
.radar-kicker { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px; }
.radar-title { font-family: var(--font-read); font-size: 2rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.radar-sub { font-family: var(--font-read); font-style: italic; color: var(--ink-2); font-size: 1.02rem; margin: 5px 0 0; max-width: 68ch; }
.radar-sub b { font-style: normal; font-weight: 700; color: var(--ink); }

.radar-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 4px; }
.chip-f { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 99px; padding: 5px 11px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.chip-f:hover { border-color: var(--ink-3); color: var(--ink); }
.chip-f.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.radar-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 16px; }
.radar-feed .empty { grid-column: 1 / -1; }

.rd-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--tc, var(--line-strong)); border-radius: var(--radius-lg); padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(23, 21, 17, 0.04); }
.rd-card.rd-busy { opacity: 0.6; pointer-events: none; }
.rd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-theme { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc); }
.rd-ever { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 99px; padding: 1px 6px; }
.rd-src { font-size: 0.72rem; color: var(--ink-3); }
.rd-score { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.rd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.rd-title { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.28; font-weight: 600; letter-spacing: -0.006em; margin: 0; text-wrap: balance; }
.rd-sum { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.rd-sum b { color: var(--ink-3); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rd-note { font-size: 0.86rem; color: var(--ink); background: var(--surface-2); border-left: 3px solid var(--tc); border-radius: 0 6px 6px 0; padding: 7px 10px; margin: 0; }
.rd-note b { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tc); display: block; margin-bottom: 1px; }
.rd-actions { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.rd-actions .btn { border-radius: 7px; padding: 6px 12px; font-size: 0.82rem; }
.rd-spacer { flex: 1; }
.rd-fonte { font-size: 0.76rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.rd-fonte:hover { text-decoration: underline; }
@media (max-width: 560px) { .radar-feed { grid-template-columns: 1fr; } }
.rd-trad { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid #c9d4e6; background: var(--accent-soft); border-radius: 99px; padding: 1px 6px; }

/* Pin: notizie fissate in cima */
.rd-pin { font: inherit; font-size: 0.8rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.rd-pin:hover { border-color: var(--ink-3); color: var(--ink); }
.rd-pin.on { background: var(--accent-soft); border-color: #c9d4e6; color: var(--accent); font-weight: 700; }
.rd-card.pinned { background: linear-gradient(180deg, var(--accent-soft), var(--surface) 90px); border-color: #c9d4e6; }

/* Selezione multipla + cancellazione (bacheca) */
.board.select-mode .card { cursor: pointer; }
.card-check { display: none; }
.board.select-mode .card-check { display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 5px; background: var(--surface); font-size: 0.7rem; font-weight: 700; color: #fff; z-index: 3; }
.card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.selected .card-check { background: var(--accent); border-color: var(--accent); }
#board-select.on { background: var(--accent-soft); color: var(--accent); border-color: #c9d4e6; font-weight: 700; }
.col-clear { margin-left: auto; font: inherit; font-size: 0.7rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--err); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.col-clear:hover { background: var(--err); color: #fff; border-color: var(--err); }
.qa-danger { color: var(--err) !important; }
.bulk-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 99px; padding: 8px 10px 8px 18px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); z-index: 50; }
.bulk-n { font-size: 0.85rem; font-weight: 600; }
.rd-gen { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--s-darevisionare); border-radius: 99px; padding: 1px 7px; }

/* ============================================================================
   RESKIN v4 — shell a sidebar (comp "La Redazione di PRISMA", Claude Design)
   Sidebar scura (chrome) + area principale su paper. Le viste restano dentro
   #view; verranno reskinnate una alla volta. Niente logo (richiesta direttore).
   ========================================================================== */
:root {
    --chrome: oklch(0.243 0.017 62);
    --chrome-2: oklch(0.305 0.018 62);
    --chrome-line: oklch(0.37 0.017 62);
    --chrome-ink: oklch(0.925 0.010 82);
    --chrome-ink-2: oklch(0.70 0.014 74);
    --chrome-ink-3: oklch(0.56 0.015 70);
    --paper: oklch(0.977 0.012 88);
    --lapis: #3450b4;
    --gradeA: oklch(0.53 0.10 150);
    --gradeB: oklch(0.635 0.115 74);
    --gradeC: oklch(0.535 0.185 27);
    --header-h: 0px;               /* la topbar non esiste più: azzera gli offset sticky */
}
html, body, #app { height: 100%; }
.app-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; background: var(--bg); }

.rail { width: 250px; flex: none; background: var(--chrome); color: var(--chrome-ink); display: flex; flex-direction: column; }
.rail-brand { padding: 22px 22px 16px; }
.rail-title { font-family: var(--font-read); font-size: 22px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
.rail-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--chrome-ink-2); margin-top: 4px; }
.rail-spectrum { height: 2.5px; border-radius: 2px; margin-top: 14px; background: var(--spettro); }
.rail-nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 6px; color: var(--chrome-ink-2); font-size: 14px; text-decoration: none; transition: background 0.12s, color 0.12s; }
.rail-link:hover { background: rgba(255,255,255,0.05); color: var(--chrome-ink); text-decoration: none; }
.rail-link.active { background: var(--chrome-2); color: #fff; font-weight: 600; }
.rail-link svg { flex: none; }
.rail-hr { margin: 14px 22px; height: 1px; background: var(--chrome-line); }
.rail-scroll { padding: 0 22px; flex: 1; min-height: 0; overflow: auto; }
.rail-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--chrome-ink-3); margin-bottom: 12px; }
.rail-people { display: flex; flex-direction: column; gap: 11px; }
.rail-person { display: flex; align-items: center; gap: 10px; }
.rail-av { flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--chrome-2); color: var(--chrome-ink); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.rail-pname { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-muted { color: var(--chrome-ink-3); font-weight: 400; }
.rail-aisha { margin-top: 20px; padding: 12px 13px; border: 1px solid var(--chrome-line); border-radius: 6px; background: var(--chrome-2); }
.rail-aisha-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.rail-aisha-on { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gradeA); display: flex; align-items: center; gap: 5px; }
.rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gradeA); animation: pz 2.4s ease-in-out infinite; }
@keyframes pz { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.82); } }
.rail-aisha-note { font-size: 11px; line-height: 1.45; color: var(--chrome-ink-2); margin-top: 6px; }
.rail-me { padding: 14px 18px; border-top: 1px solid var(--chrome-line); display: flex; align-items: center; gap: 10px; }
.rail-me-txt { flex: 1; min-width: 0; }
.rail-logout { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chrome-ink-3); border: 1px solid var(--chrome-line); border-radius: 5px; padding: 4px 8px; background: transparent; cursor: pointer; }
.rail-logout:hover { color: #fff; border-color: var(--chrome-ink-2); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.main-top { display: flex; justify-content: flex-end; padding: 14px 26px 0; flex: none; }
.main-top-actions { display: flex; align-items: center; gap: 12px; }
main#view { flex: 1; min-height: 0; overflow: auto; padding: 20px 28px 40px; }

/* ===== RESKIN v4 — Oggi "Buongiorno" (masthead + stat card serif) ===== */
:root { --gradeC-soft: oklch(0.945 0.04 27); --gradeA-soft: oklch(0.945 0.035 150); }
.oggi { max-width: 1180px; margin: 0 auto; }
.oggi-masthead { border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
.oggi-dateline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.oggi-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.oggi-edition { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.oggi-greet { font-family: var(--font-read); font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; font-weight: 600; margin: 0; color: var(--ink); }
.oggi-lead { font-family: var(--font-read); font-style: italic; font-size: 19px; color: var(--ink-2); margin: 12px 0 0; }
.oggi-spectrum { height: 3px; border-radius: 2px; margin-top: 2px; background: var(--spettro); }
.oggi-alert { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 16px 18px; border: 1px solid color-mix(in oklch, var(--gradeC) 45%, transparent); background: var(--gradeC-soft); border-radius: 11px; }
.oggi-alert-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--gradeC); color: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.oggi-alert-tx { flex: 1; min-width: 0; }
.oggi-alert-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gradeC); font-weight: 700; }
.oggi-alert-tx p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.oggi-alert-btn { flex: none; align-self: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--gradeC); border-radius: 6px; padding: 9px 14px; text-decoration: none; white-space: nowrap; }
.oggi-alert-btn:hover { text-decoration: none; opacity: 0.92; }
.oggi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.stat-card { border: 1px solid var(--line); background: var(--surface); border-radius: 11px; padding: 18px 20px; }
.stat-row { display: flex; align-items: baseline; gap: 10px; }
.stat-n { font-family: var(--font-read); font-size: 46px; font-weight: 600; line-height: 0.9; color: var(--ink); }
.stat-n.stat-c { color: var(--gradeC); }
.stat-lab { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.stat-sub { margin-top: 14px; font-size: 11.5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stat-g { font-weight: 600; }
.stat-g.ga { color: var(--gradeA); } .stat-g.gb { color: var(--gradeB); } .stat-g.gc { color: var(--gradeC); }
.stat-muted { color: var(--ink-3); }
.oggi-lower { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; margin-top: 32px; align-items: start; }
.oggi-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.oggi-sec-head h2 { font-family: var(--font-read); font-size: 21px; font-weight: 600; margin: 0; color: var(--ink); }
.oggi-sec-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.link-more { margin-left: auto; font-size: 12px; color: var(--lapis); font-weight: 600; text-decoration: none; }
.oggi-deliv { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); }
.oggi-deliv .q-row { border-bottom: 1px solid var(--line); border-radius: 0; }
.oggi-deliv .q-row:last-child { border-bottom: none; }
.oggi-richiami .item-row { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; }
@media (max-width: 900px) { .oggi-stats { grid-template-columns: 1fr; } .oggi-lower { grid-template-columns: 1fr; } }

/* ===== RESKIN v4 — card Bacheca cover-forward (.cardv2) ===== */
.cardv2 { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(23,21,17,0.03); flex-shrink: 0; transition: box-shadow 0.14s, border-color 0.14s, transform 0.14s; }
.cardv2:hover { border-color: var(--line-strong); box-shadow: 0 12px 28px -16px rgba(23,21,17,0.4); text-decoration: none; }
.cardv2.selected { outline: 2px solid var(--lapis); outline-offset: -2px; }
.cardv2.dragging { opacity: 0.5; }
.card-cover { position: relative; height: 116px; background-size: cover; background-position: center; background-color: var(--paper-2); }
.card-cover-none { background: linear-gradient(140deg, var(--cardg1, oklch(0.55 0.02 250)), var(--cardg2, oklch(0.38 0.02 255))); }
.cat-dispatch { --cardg1: oklch(0.55 0.11 245); --cardg2: oklch(0.37 0.10 250); }
.cat-inheritance { --cardg1: oklch(0.52 0.11 322); --cardg2: oklch(0.35 0.10 325); }
.cat-witness { --cardg1: oklch(0.53 0.09 195); --cardg2: oklch(0.36 0.08 200); }
.cat-brief { --cardg1: oklch(0.53 0.08 108); --cardg2: oklch(0.37 0.07 110); }
.card-cover-veil { position: absolute; inset: 0; background: oklch(0.30 0.10 27 / 0.5); }
.card-online { position: absolute; right: 8px; top: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.7); padding: 3px 7px; border-radius: 3px; }
.cardv2 .card-body { padding: 12px 13px; }
.card-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cardv2 .card-cat { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardv2 .card-cat.cat-dispatch { color: var(--cat-dispatch); }
.cardv2 .card-cat.cat-inheritance { color: var(--cat-inheritance); }
.cardv2 .card-cat.cat-witness { color: var(--cat-witness); }
.cardv2 .card-cat.cat-brief { color: var(--cat-brief); }
.cardgrade { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.cardgrade.g-A { background: var(--gradeA); } .cardgrade.g-B { background: var(--gradeB); } .cardgrade.g-C { background: var(--gradeC); }
.card-h { font-family: var(--font-read); font-size: 17px; line-height: 1.16; letter-spacing: -0.008em; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.card-sub { font-family: var(--font-read); font-style: italic; font-size: 12px; line-height: 1.3; color: var(--ink-3); margin: 0 0 11px; }
.card-langs { display: flex; gap: 6px; margin-bottom: 11px; }
.lchip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); }
.lchip.on { color: var(--gradeA); border-color: color-mix(in oklch, var(--gradeA) 35%, var(--line)); background: var(--gradeA-soft); }
.lchip.off { color: var(--ink-3); }
.cardv2 .card-foot { display: flex; align-items: center; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); }
.card-notes { color: var(--ink-3); font-size: 11.5px; }
.card-date { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cardv2 .card-qa { position: static; margin-left: auto; width: 24px; height: 24px; border-radius: 5px; color: var(--ink-3); background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cardv2 .card-qa:hover { background: var(--paper-2); color: var(--ink); }
.board.select-mode .cardv2 .card-check { top: 8px; left: 8px; z-index: 4; }

/* ===== RESKIN v4 — card consegne Oggi (.dv-row) + token categoria ===== */
:root { --cat-dispatch: oklch(0.47 0.10 245); --cat-inheritance: oklch(0.44 0.10 322); --cat-witness: oklch(0.45 0.085 195); --cat-brief: oklch(0.47 0.07 108); }
.oggi-deliv .dv-row { display: flex; gap: 13px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.oggi-deliv .dv-row:last-child { border-bottom: none; }
.oggi-deliv .dv-row:hover { background: var(--paper-2); text-decoration: none; }
.dv-cover { flex: none; width: 54px; height: 54px; border-radius: 7px; background-size: cover; background-position: center; background-color: var(--paper-2); }
.dv-body { flex: 1; min-width: 0; }
.dv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.dv-cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dv-cat.cat-dispatch { color: var(--cat-dispatch); } .dv-cat.cat-inheritance { color: var(--cat-inheritance); } .dv-cat.cat-witness { color: var(--cat-witness); } .dv-cat.cat-brief { color: var(--cat-brief); }
.dv-top .cardgrade { width: 19px; height: 19px; font-size: 10px; margin-left: auto; }
.dv-title { font-family: var(--font-read); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-foot { display: flex; align-items: center; gap: 6px; }
.dv-date { font-size: 10.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }

/* ===== RESKIN v4 — board Bacheca (colonne comp + Fuori dalla redazione) ===== */
.board { height: 100%; align-items: stretch; padding: 16px 4px 18px; gap: 0; }
.board-col { flex: 0 0 292px; width: 292px; background: none; border: none; border-radius: 0; max-height: none; height: 100%; margin-right: 14px; padding: 0; display: flex; flex-direction: column; box-shadow: none; }
.board-col.drop-over { background: none; box-shadow: none; }
.board-col.drop-over .board-col-body { outline: 2px dashed var(--lapis); outline-offset: 2px; border-radius: 10px; }
.board-col-head { display: flex; align-items: center; gap: 9px; padding: 0 6px 12px; background: none; border: none; position: static; height: auto; }
.board-col-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--ink-3)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--st, var(--ink-3)) 20%, transparent); flex: none; }
.board-col-name { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-col-head .count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; min-width: 22px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.board-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 5px 20px; gap: 14px; }
.board-divider { flex: none; display: flex; align-items: center; padding: 0 16px 0 10px; align-self: stretch; margin: 6px 0; border-left: 1px solid var(--line-strong); }
.board-divider span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.board-out { flex: none; display: flex; align-items: stretch; background: linear-gradient(180deg, var(--surface-2), var(--paper-2)); border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; padding: 12px 4px 0 16px; margin-right: 8px; }
.card-viewer { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 5px; background: oklch(0.20 0.02 60 / 0.55); backdrop-filter: blur(3px); padding: 3px 8px 3px 6px; border-radius: 20px; font-size: 9.5px; color: #fff; font-weight: 600; letter-spacing: 0.04em; }
.card-viewer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gradeA); box-shadow: 0 0 0 2px oklch(0.98 0 0 / 0.5); }

/* ===== RESKIN v4 — dettaglio articolo: rail di revisione come pannello continuo (comp) ===== */
.art-layout { grid-template-columns: minmax(0, 44rem) 360px; }
.art-main { border-right: 1px solid var(--line); padding-right: 2rem; }
.art-side { position: sticky; top: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; gap: 0; padding: 0; overflow: hidden; overflow-y: auto; }
.side-card { background: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 22px; margin: 0; box-shadow: none; }
.side-card:last-child { border-bottom: none; }
.side-card h3 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin: 0 0 14px; }
.rev-grade { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-read); font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.rev-grade.g-A { background: var(--gradeA); } .rev-grade.g-B { background: var(--gradeB); } .rev-grade.g-C { background: var(--gradeC); }
.grade-expl { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.rev-signal { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.42; color: var(--ink-2); margin-bottom: 9px; }
.rev-signal .sev { flex: none; line-height: 1.3; }
.rev-signal.sev-block .sev { color: var(--gradeC); } .rev-signal.sev-warn .sev { color: var(--gradeB); }
.rev-note { margin-top: 12px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .art-layout { grid-template-columns: minmax(0, 1fr); } .art-main { border-right: none; padding-right: 0; } .art-side { position: static; } }

/* --------------------------------------------------------------------------
   I QUATTRO CRITERI DEL VOTO (ago 2026)

   Il voto era una lettera muta: dava A solo con zero rilievi, e in produzione
   gli A erano zero su 147 bozze. Adesso misura la qualita' editoriale su
   quattro criteri, e questi tre punti per criterio sono cio' che rende il voto
   leggibile in un'occhiata: non «B», ma «B perche' la presa e' 2 su 3».

   Il criterio piu' basso e' l'unico marcato. Marcare tutto equivale a non
   marcare niente, ed era esattamente il difetto della scheda vecchia, che
   elencava otto rilievi senza dire quale contasse.
   -------------------------------------------------------------------------- */
.rev-qualita {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.rev-crit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-3);
}
.rev-crit-n { letter-spacing: 0.02em; }
.rev-crit-p { display: inline-flex; gap: 3px; flex: none; }
.rev-crit-p i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
    display: block;
}
.rev-crit-p i.on { background: var(--ink-3); }
/* Il criterio su cui il pezzo e' sceso: e' l'unica cosa su cui si puo' decidere
   di intervenire, quindi e' l'unica che alza la voce. */
.rev-crit.piu-basso { color: var(--ink); font-weight: 600; }
.rev-crit.piu-basso .rev-crit-p i.on { background: var(--warn); }

/* Il lavoro gia' fatto, detto piano: non e' una cosa da fare, e non deve
   competere con le cose da fare. */
.rev-fatto {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   LA SEZIONE SI CAMBIA DALLA BARRA (ago 2026)

   Prima era un'etichetta muta: la sezione si sceglieva alla nascita e un pezzo
   nella scrivania sbagliata ci restava. Deve continuare a LEGGERSI come
   un'etichetta — e' un'informazione, non un modulo da compilare — e rivelarsi
   comando solo quando ci passi sopra. Le stesse misure di `.artbar .eyebrow`,
   piu' la freccia.
   -------------------------------------------------------------------------- */
.eyebrow-select {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 22px 3px 6px;
    margin-left: -6px;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: right 10px center, right 6px center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.eyebrow-select:hover:not(:disabled) { border-color: var(--line); background-color: var(--surface); }
.eyebrow-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eyebrow-select:disabled { cursor: default; opacity: 0.6; }

/* --------------------------------------------------------------------------
   FONTI MODIFICABILI E CREDITI IMMAGINE (ago 2026)

   Entrambi esistevano nel CMS e non avevano NESSUNA strada dall'interfaccia:
   le fonti le scriveva solo il fact-check di Aisha, i crediti nessuno. Chi
   caricava una foto non poteva attribuirla.

   Chiusi restano una riga: nella maggior parte dei casi il dato e' gia' giusto
   e non va toccato. Il comando di modifica e' un collegamento, non un pulsante:
   non deve competere con Pubblica.
   -------------------------------------------------------------------------- */
.link-btn {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 8px;
    font: inherit;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent-ink, var(--accent)); }

.fonte-edit { padding: 10px 0; border-top: 1px solid var(--line); }
.fonte-edit:first-of-type { border-top: 0; }
.fonte-edit input,
.fonte-edit select {
    width: 100%;
    font: inherit;
    font-size: var(--fs-sm);
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    margin-bottom: 6px;
}
.fonte-edit-row { display: flex; gap: 6px; align-items: center; }
.fonte-edit-row select { flex: 1; margin-bottom: 0; }
.fonte-edit-row .f-del { flex: none; }
.fonte-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.crediti-riga {
    margin: 8px 0 0;
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-2);
    line-height: 1.5;
}
.crediti-vuoti { color: var(--ink-3); font-style: italic; }
.crediti-form { margin-top: 10px; }
.crediti-form .field { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   SELEZIONE A TRASCINAMENTO (ago 2026)

   La modalita' selezione esisteva ma si spuntava una scheda per volta, che su
   venti pezzi e' lo stesso lavoro di prima. Il rettangolo nasce solo dallo
   spazio vuoto, cosi' non litiga col trascinamento delle schede fra colonne.

   `pointer-events:none` e' obbligatorio: senza, il rettangolo si mette fra il
   mouse e le schede e l'evento di rilascio non arriva mai dove serve.
   -------------------------------------------------------------------------- */
.banda-selezione {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 3px;
}
/* Mentre si traccia, il testo non deve selezionarsi: il gesto e' uno solo e
   trascinarsi dietro mezza pagina evidenziata lo fa sembrare rotto. */
body.banda-attiva { user-select: none; -webkit-user-select: none; cursor: crosshair; }

/* Dove si vede: sotto ogni scelta, in piccolo, DOVE finisce il pezzo. Il nome
   del campo non aiuta nessuno; il posto in pagina si'. */
.pos-dove { margin: 4px 0 0; font-size: var(--fs-xs, 11.5px); color: var(--ink-3); line-height: 1.4; }
.pos-nota {
    margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
    font-size: var(--fs-xs, 11.5px); color: var(--ink-3); line-height: 1.45;
}
.side-card select { width: 100%; font: inherit; font-size: var(--fs-sm); padding: 6px 8px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* --------------------------------------------------------------------------
   REDAZIONE — le persone (ago 2026)

   Prima non esisteva: gli editor stavano in una variabile d'ambiente con le
   password in chiaro, e aggiungerne uno richiedeva di modificare un file sul
   server e riavviare il servizio.

   Un editore disattivato resta VISIBILE, spento: il suo nome compare ancora
   sulle note e sulle assegnazioni gia' fatte, e nasconderlo dall'elenco
   renderebbe quei riferimenti orfani e incomprensibili.
   -------------------------------------------------------------------------- */
.ed-card { margin-bottom: 18px; }
.ed-tab { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ed-tab th {
    text-align: left; font-size: var(--fs-xs, 11.5px); font-weight: 600;
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0 8px 6px 0; border-bottom: 1px solid var(--line);
}
.ed-tab td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ed-tab input[type="text"], .ed-tab select {
    font: inherit; font-size: var(--fs-sm); padding: 5px 7px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); color: var(--ink); width: 100%;
}
.ed-id { font-family: var(--font-mono); font-size: var(--fs-xs, 11.5px); color: var(--ink-3); white-space: nowrap; }
.ed-tu { color: var(--accent); font-weight: 700; }
.ed-azioni { white-space: nowrap; text-align: right; }
.ed-azioni .btn { margin-left: 6px; }
/* Spento, non nascosto. */
.ed-spento td { opacity: 0.5; }
.ed-nuovo { display: grid; gap: 10px; margin-top: 10px; max-width: 460px; }

/* Il pulsante «Approva» quando il cancello ci manda: due lampeggi e basta.
   Serve a farlo trovare, non a metterlo fretta. */
.gate-vai { margin-left: 10px; }
@keyframes lampeggia-bordo {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok, var(--accent)) 45%, transparent); }
}
.lampeggia { animation: lampeggia-bordo 0.7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .lampeggia { animation: none; outline: 3px solid var(--accent); } }

/* ===================================================================
   LA FILA DELLE SCRITTURE — la finestrella in basso a destra
   ===================================================================
   Sta ANCORATA alla finestra, non a una schermata: si lancia un pezzo dal
   Radar e lo si guarda mentre si lavora in bacheca. Larghezza contenuta e
   altezza a tetto: la fila puo' essere lunga, il riquadro no — deve informare,
   non occupare la pagina. Su schermo stretto si allarga fino ai bordi, perche'
   li' 340px fissi sarebbero fuori dallo schermo.                            */

.coda {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;                     /* sopra le colonne, sotto i toast */
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(23, 21, 17, 0.18);
    overflow: hidden;
    font-size: 0.8125rem;
}

.coda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
}

.coda-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
}

.coda-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}
.coda-riga:last-child { border-bottom: 0; }

.coda-testo { min-width: 0; flex: 1; }

/* Il titolo su una riga sola con i puntini: una fila che va a capo tre volte
   per pezzo diventa alta quanto la pagina e smette di essere un riquadro.   */
.coda-titolo {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
}

.coda-stato {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* Lo STATO si legge dal colore del bordo sinistro, non da un pallino: e' il
   segno piu' economico che si possa dare a una riga stretta, e non ruba spazio
   al titolo, che e' l'unica cosa che serve davvero riconoscere.             */
.coda-riga.coda-in_attesa { border-left: 3px solid var(--line-strong); }
.coda-riga.coda-in_corso  { border-left: 3px solid var(--s-inrevisione); }
.coda-riga.coda-fatto     { border-left: 3px solid var(--s-pronto); }
.coda-riga.coda-fallito   { border-left: 3px solid var(--s-quarantena); }
.coda-riga.coda-annullato { border-left: 3px solid var(--line); }

.coda-riga.coda-in_corso .coda-stato { color: var(--s-inrevisione); font-weight: 600; }
.coda-riga.coda-fallito  .coda-stato { color: var(--s-quarantena); }

.coda-apri {
    flex: none;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid var(--accent-soft);
    border-radius: 6px;
}
.coda-apri:hover { background: var(--accent-soft); }

.coda-x {
    flex: none;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-3);
    font-size: 1.05rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
}
.coda-x:hover { color: var(--ink); background: var(--paper-2); }
.coda-x:disabled { opacity: 0.5; cursor: default; }

/* «In lavorazione» deve VEDERSI che è in movimento: una riga ferma che dice di
   star lavorando è indistinguibile da una piantata, ed è proprio il dubbio che
   questo riquadro esiste per togliere. Chi ha chiesto meno movimento lo tiene
   fermo — l'informazione resta nel testo e nel colore, non solo nel moto.   */
.coda-riga.coda-in_corso .coda-testo::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--line) 0%, var(--s-inrevisione) 50%, var(--line) 100%);
    background-size: 200% 100%;
    animation: coda-scorre 1.6s linear infinite;
}
@keyframes coda-scorre {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .coda-riga.coda-in_corso .coda-testo::after { animation: none; background-position: 50% 0; }
}

/* L'OCCHIELLO modificabile: il rigo in corsivo sotto il titolo. */
.lettura-lead-vuoto { color: var(--ink-3); font-style: normal; }
.lettura-lead .link-btn,
.lettura-lead-vuoto .link-btn { margin-left: 10px; font-style: normal; }

.occhiello-form { margin: 12px 0 18px; }
.occhiello-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}
.occhiello-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

/* Una candidata IN LAVORAZIONE resta nell'elenco invece di sparire al click:
   spariva prima di sapere se la scrittura sarebbe riuscita, e su un fallimento
   l'editor la perdeva di vista. Smorzata ma leggibile — è ancora una notizia
   che si può leggere, solo non se ne può decidere altro adesso.              */
.rd-card.rd-inlav { opacity: 0.72; }
.rd-lav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--s-inrevisione);
}
.rd-lav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s-inrevisione);
    animation: rd-pulsa 1.4s ease-in-out infinite;
}
@keyframes rd-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rd-lav::before { animation: none; } }

/* I ripieghi di una riga fallita: riaprire la fonte, o rilanciare. Senza questi
   «non è andata» era un vicolo cieco.                                        */
.coda-ripieghi { display: flex; gap: 12px; margin-top: 6px; }
.coda-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.coda-link:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

/* L'AVVISO SULLA COPERTINA. Non è un errore — è una decisione che il CMS chiede
   a una persona — quindi ha il colore dell'attenzione, non quello del guasto.
   Accettato resta a vista con la firma: sapere che qualcuno ha deciso, e poter
   cambiare idea, vale più di una casella pulita.                             */
.cover-avviso {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--s-inrevisione);
    border-left-width: 3px;
    border-radius: 7px;
    background: color-mix(in oklab, var(--s-inrevisione) 8%, var(--surface));
}
.cover-avviso.accettato {
    border-color: var(--s-pronto);
    background: color-mix(in oklab, var(--s-pronto) 8%, var(--surface));
}
.cover-avviso-txt {
    margin: 0 0 9px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-2);
}
.cover-avviso-ok {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--s-pronto);
}
.cover-avviso-ok .link-btn { margin-left: 8px; font-weight: 400; }

/* Il testo alternativo della copertina, sotto la miniatura. */
.cover-alt-riga {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ink-2);
}
.cover-alt-txt { font-style: italic; }
.cover-alt-riga .link-btn { margin-left: 8px; font-style: normal; }
.occhiello-form .hint { margin: 6px 0 0; font-size: 0.6875rem; color: var(--ink-3); }

/* L'interruttore «Lungo respiro», dentro «Dove si vede». Non è una posizione,
   quindi non è una tendina: è una spunta, e sotto c'è scritto cosa succede
   davvero ad accenderla. Un interruttore che non dice il suo effetto è la
   stessa casella-che-non-muove-un-pixel di sempre.                          */
.lr-campo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lr-riga { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; color: var(--ink); }
.lr-riga input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.lr-esito {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--s-pronto);
}
/* Acceso ma senza niente da mostrare: la fascia non comparirà, e va detto col
   colore dell'attenzione — non è un guasto, è una cosa che manca.           */
.lr-esito-vuoto { color: var(--s-inrevisione); }

/* La citazione in vetrina, nella lettura dell'articolo. */
.lettura-citazione {
    margin: 16px 0 20px;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--accent);
    font-size: 1.0625rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ink-2);
}
.lettura-citazione .link-btn { margin-left: 10px; font-style: normal; font-size: 0.75rem; }

/* IL MENU ⋯ DELLA BACHECA non può essere più alto della finestra senza dare
   accesso a ciò che sborda: cresce con la redazione (sei colonne, tutti gli
   editori, quattro sezioni) e con `overflow: hidden` la parte fuori non era né
   visibile né raggiungibile. Un tetto, e dentro si scorre.                   */
.qa-menu {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Le due azioni sul titolo: correggere a mano, o chiedere ad Aisha. La prima
   viene per prima, ed è voluto — la penna è di chi scrive.                   */
.lettura-azioni { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 4px; }

/* Il modulo di correzione a mano: titolo e testo per intero. Il corpo è alto
   davvero, perché ci si riscrive dentro un articolo, non una riga.           */
.lettura-head .field { margin-bottom: 16px; }
.lettura-head .field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}
.lettura-head #edit-title {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.375rem;
    line-height: 1.3;
}
.lettura-head #edit-body {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
    min-height: 320px;
}
.lettura-head .hint { margin: 6px 0 0; font-size: 0.6875rem; color: var(--ink-3); }

/* «Dove si vede» adesso mostra le DUE edizioni: sono due giornali, e chi decide
   dove va un pezzo vuole vederle entrambe invece di ricordarsi quale sta
   guardando. Un filetto le separa; il titolino dice quale.                   */
.pos-edizione + .pos-edizione { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pos-ed-tit {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
    margin-bottom: 8px;
}

/* I testi alternativi: quello della fonte (uno, sul file) e i due per edizione.
   L'etichetta a sinistra dice quale, perché tre righe di corsivo senza nome
   sarebbero indistinguibili.                                                 */
.cover-alt { margin: 8px 0 0; }
.cover-alt .cover-alt-riga { display: flex; gap: 8px; align-items: baseline; margin: 5px 0; }
.cover-alt-et {
    flex: none;
    min-width: 72px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}
.cover-alt .cover-alt-txt { flex: 1; }

/* «Stesse posizioni nelle due edizioni»: sta SOPRA le due tendine perché è la
   scelta che le governa, e chi legge dall'alto la incontra prima di scegliere. */
.pos-gemelle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}
.pos-gemelle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* Il secondo bottone della selezione: stessa forma del primo, tinta diversa
   perche' fa una cosa diversa (collega, non riscrive). */
.rw-float-link { background: var(--ok, #17603a); }