/* Cloto Personal — App custom CSS (additive to Tailwind CDN) */

/* ── Theme palettes (rgb 3-tuple syntax for Tailwind <alpha-value>) ── */
:root {
    /* Dark (default) — matches the original Cloto Personal palette */
    --cloto-bg:     10 10 10;
    --cloto-panel:  26 26 26;
    --cloto-card:   31 31 31;
    --cloto-line:   42 42 42;
    --cloto-text:   229 229 229;
    --cloto-muted:  136 136 136;
    --cloto-accent: 201 168 76;
    --cloto-ok:     34 197 94;
    --cloto-warn:   234 179 8;
    --cloto-bad:    239 68 68;
}

body.cloto-light {
    /* Light — derived from cloto.ai light theme (warm cream + ochre) */
    --cloto-bg:     240 236 229;   /* #f0ece5 — cream */
    --cloto-panel:  248 246 242;   /* #f8f6f2 — paper */
    --cloto-card:   240 237 232;   /* #f0ede8 — surface-alt */
    --cloto-line:   216 211 200;   /* #d8d3c8 — warm border */
    --cloto-text:   26 28 36;      /* #1a1c24 — near-black */
    --cloto-muted:  122 126 136;   /* #7a7e88 — medium gray */
    --cloto-accent: 154 126 48;    /* #9a7e30 — ochre/gold */
    --cloto-ok:     22 163 74;     /* #16a34a */
    --cloto-warn:   180 83 9;      /* #b45309 */
    --cloto-bad:    220 38 38;     /* #dc2626 */
}

[x-cloak] { display: none !important; }

/* Chip "tessuta": viola con contrasto adeguato in entrambi i temi. Usato negli header
   dei blocchi scena nel tab Testo (le card del kanban ora usano i pallini cloto-dot). */
.cloto-woven-chip {
    background: rgb(168 85 247 / 0.18);
    color: rgb(216 180 254);
    border: 1px solid rgb(168 85 247 / 0.4);
}
body.cloto-light .cloto-woven-chip {
    background: rgb(168 85 247 / 0.14);
    color: rgb(88 28 135);
    border-color: rgb(126 34 206 / 0.4);
}

/* Pallini di stato (kanban card + leggenda): cerchietto 9px con halo subtle. */
.cloto-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.3);
    flex: none;
}
.cloto-dot-woven { background: rgb(168 85 247); }
/* Bollino "ingredienti pronti": conic gradient con i 7 colori dei campi-scena
   (POV → ENTRA → VUOLE → CONFLITTO → SHIFT → ESCE → SENSORIALE) — visivamente
   suggerisce "mix di ingredienti pronti per la tessitura". Un soft radial al
   centro ammorbidisce le giunzioni tra colori a questa dimensione (9px). */
.cloto-dot-ingredients {
    background:
        radial-gradient(circle, rgb(255 255 255 / 0.35) 0%, transparent 45%),
        conic-gradient(from 0deg,
            #3b82f6 0%, #14b8a6 14.3%, #f59e0b 28.6%, #ef4444 42.9%,
            #8b5cf6 57.2%, #f97316 71.5%, #ec4899 85.8%, #3b82f6 100%);
}
body.cloto-light .cloto-dot {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6), 0 1px 2px rgb(0 0 0 / 0.15);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Card on current navigation path — distinct background tint that stacks with
   dirty-state border colours so path visibility is preserved on dirty/woven cards. */
.bg-card-on-path {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 14%, rgb(var(--cloto-card)));
}
body.cloto-light .bg-card-on-path {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 16%, rgb(var(--cloto-card)));
}

/* Currently focused card (the one whose detail panel is open) — stronger tint
   plus a soft outer accent glow so it pops out of the path "lineage". */
.bg-card-focused {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 26%, rgb(var(--cloto-card)));
}
body.cloto-light .bg-card-focused {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 28%, rgb(var(--cloto-card)));
}
.card-focused-ring {
    box-shadow: 0 0 0 2px rgb(var(--cloto-accent) / 0.7),
                0 0 34px rgb(var(--cloto-accent) / 0.38);
}


/* Sortable.js dragging */
.sortable-ghost { opacity: 0.3 !important; }
.sortable-chosen { box-shadow: 0 0 0 2px rgb(var(--cloto-accent)) !important; }

/* Scrollbar — adapts to theme */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--cloto-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--cloto-line)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--cloto-muted) / 0.5); }

/* ═══════════════════════════════════════════════════════════════
   iPad adattamento (touch device, solo landscape)
   ═══════════════════════════════════════════════════════════════ */

/* Drawer ridotti su iPad per lasciare più spazio al kanban (eccetto fullscreen) */
@media (pointer: coarse) {
    .detail-drawer-touch:not(.fullscreen),
    .chat-drawer-touch:not(.fullscreen) {
        width: 480px !important;
    }
}

/* Portrait gate — blocca l'UI quando il viewport è troppo stretto per il kanban
   (basato su LARGHEZZA, non orientation: Safari iOS riporta male `orientation`
   in alcuni edge case, mentre la width è sempre affidabile). */
.portrait-block { display: none; }
@media (max-width: 1000px) {
    .portrait-block {
        position: fixed; inset: 0; z-index: 9999;
        background: rgb(var(--cloto-bg));
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 1rem; text-align: center; padding: 2rem;
        color: rgb(var(--cloto-text));
        font-size: 1rem;
    }
    .portrait-block-icon {
        font-size: 4rem;
        animation: rotate-hint 2.4s ease-in-out infinite;
        color: rgb(var(--cloto-accent));
    }
    .portrait-block-msg { max-width: 320px; line-height: 1.5; }
    .portrait-block-sub { color: rgb(var(--cloto-muted)); font-size: 0.875rem; }
}
@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(90deg); }
}

/* Touch device universal rules */
@media (pointer: coarse) {
    /* Touch targets ≥ 44×44 (Apple HIG) — promuove tutti i bottoni piccoli */
    button.text-xs,
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    select {
        min-height: 44px;
        padding-right: 1.5rem;
    }
    /* Eccezione: il radio player minimal (36px) deve restare compatto anche su touch. */
    .cloto-radio button.text-xs,
    .cloto-radio .cr-btn,
    .cloto-radio .touch-target { min-height: 26px; min-width: 26px; }
    .cloto-radio select.cr-genre { min-height: 28px; padding-right: 16px; }

    /* Cards: niente cursor grab (DnD disabilitato su touch) */
    .cloto-card { cursor: pointer; }

    /* Feedback :active al posto di hover */
    button:active,
    .cloto-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }

}

/* Safe-area inset per home indicator iPad (linea bianca in basso) */
@supports (padding: max(0px)) {
    .chat-composer,
    .ingredients-composer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOOK LIMINALE — sfondo nebulose (brand) + glass chrome + card glass
   ═══════════════════════════════════════════════════════════════ */

/* ── Sfondo nebulose: Dark "Il Sogno di Cloto" / Light "Le Rovine Dorate" ──
   Layer fissi dietro a tutto il contenuto (z-index:-1), sopra il bg del body. */
body::before, body::after {
    content: '';
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform, opacity;
}
body::before {
    background: radial-gradient(ellipse at 30% 50%,
        rgba(94,198,198,0.22) 0%, rgba(42,107,107,0.11) 40%, transparent 70%);
    animation: cloto-nebula 65s ease-in-out infinite;
}
body::after {
    background: radial-gradient(ellipse at 70% 60%,
        rgba(201,168,76,0.16) 0%, rgba(167,139,250,0.10) 35%, transparent 70%);
    animation: cloto-nebula-deep 65s ease-in-out infinite;
}
body.cloto-light::before {
    background: radial-gradient(ellipse at 30% 50%,
        rgba(201,168,76,0.26) 0%, rgba(180,140,70,0.14) 40%, transparent 70%);
}
body.cloto-light::after {
    background: radial-gradient(ellipse at 70% 60%,
        rgba(214,178,120,0.20) 0%, rgba(200,150,90,0.12) 35%, transparent 70%);
}
@keyframes cloto-nebula {
    0%   { transform: translate(0,0) scale(1);        opacity: .85; }
    20%  { transform: translate(50px,-35px) scale(1.06); opacity: 1; }
    40%  { transform: translate(-25px,20px) scale(.97);  opacity: .8; }
    60%  { transform: translate(35px,10px) scale(1.04);  opacity: .95; }
    80%  { transform: translate(-15px,-25px) scale(.99); opacity: .88; }
    100% { transform: translate(20px,-10px) scale(1.02); opacity: .92; }
}
@keyframes cloto-nebula-deep {
    0%   { transform: translate(0,0) scale(1);         opacity: .75; }
    25%  { transform: translate(-55px,40px) scale(1.05); opacity: .9; }
    50%  { transform: translate(40px,-35px) scale(.95);  opacity: .7; }
    75%  { transform: translate(-30px,20px) scale(1.03); opacity: .85; }
    100% { transform: translate(25px,-15px) scale(.98);  opacity: .78; }
}

/* ── Glass chrome: header + drawer translucidi con blur ── */
header.bg-cloto-panel {
    background: rgb(var(--cloto-panel) / 0.6) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* Drawer = mega-card FLAT (rev 2026-06-12). Niente tilt 3D: è la superficie di
   lavoro (lettura prosa, edit, chat) e ogni distorsione costa leggibilità.
   La profondità rispetto al kanban è data da ombre ricche, non da geometria.
   Posizione e dimensione arrivano da drawerStyle() inline. */
/* Drawer pinned RIGHT full-height (rev 2026-06-16): niente più floating window.
   Border solo a sinistra (dove c'è il resize handle); border-radius zero perché
   tocca i bordi superiore/destro/inferiore dello schermo. Ombra a sinistra per
   profondità visiva rispetto al kanban. */
.detail-drawer-touch {
    border-radius: 0;
    border: none;
    border-left: 1px solid rgb(var(--cloto-accent) / 0.28);
    overflow: hidden;
    box-shadow: -16px 0 40px rgb(0 0 0 / 0.50),
                -4px 0 12px rgb(0 0 0 / 0.30),
                inset 1px 0 0 rgb(var(--cloto-accent) / 0.06);
}
.detail-drawer-touch.fullscreen {
    border: none;
    box-shadow: none;
}
body.cloto-light .detail-drawer-touch {
    box-shadow: -16px 0 36px rgb(0 0 0 / 0.16),
                -4px 0 10px rgb(0 0 0 / 0.08),
                inset 1px 0 0 rgb(var(--cloto-accent) / 0.1);
}
.detail-drawer-touch.bg-cloto-panel {
    background: rgb(var(--cloto-panel) / 0.75) !important;
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    border-color: rgb(var(--cloto-accent) / 0.28) !important;
}

/* ── Card glass + glow ──
   Base translucida per le card; gli stati on-path/focused (bg-card-*) mantengono
   la tinta oro con specificità maggiore (.cloto-card.bg-*). */
.cloto-card {
    border-radius: 10px;
    background: rgb(var(--cloto-card) / 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3);
    transition: border-color .35s, box-shadow .35s, transform .35s;
}
body.cloto-light .cloto-card {
    background: rgb(var(--cloto-card) / 0.9);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.1), 0 2px 6px rgb(0 0 0 / 0.06);
}
.cloto-card.bg-card-on-path {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 16%, rgb(var(--cloto-card) / 0.92));
}
.cloto-card.bg-card-focused {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 28%, rgb(var(--cloto-card) / 0.94));
}

/* Light mode: il gold a bassa percentuale si fonde col background crema.
   Tieni il background MOLTO leggero (preserva leggibilità del testo) e separa
   le card on-path con un sottile ring gold + ombra colorata. È il bordo, non
   il riempimento, a dare percezione di lignaggio. */
body.cloto-light .cloto-card.bg-card-on-path {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 10%, rgb(var(--cloto-card) / 0.95));
    box-shadow: 0 0 0 1px rgb(var(--cloto-accent) / 0.45),
                0 4px 14px rgb(var(--cloto-accent) / 0.12),
                0 2px 6px rgb(0 0 0 / 0.06);
}
body.cloto-light .cloto-card.bg-card-focused {
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 18%, rgb(var(--cloto-card) / 0.97));
    box-shadow: 0 0 0 1.5px rgb(var(--cloto-accent) / 0.7),
                0 8px 22px rgb(var(--cloto-accent) / 0.20),
                0 2px 8px rgb(0 0 0 / 0.10);
}
.cloto-card:hover {
    box-shadow: 0 0 0 1px rgb(var(--cloto-accent) / 0.5),
                0 0 24px rgb(var(--cloto-accent) / 0.28),
                0 12px 44px rgb(0 0 0 / 0.5);
}

/* ── Path "presence" via scale: niente translateZ (combatteva col tilt globale
   del kanban). La focused scala 1.10 con glow forte e ombra grossa per "venire
   avanti" in modo universale (funziona identico in dark/light, senza 3D quirks). */
.cloto-card.is-focused {
    transform: scale(1.07);
    /* scale() non altera il layout box → senza margine la card sporge addosso
       alle sorelle. Il margin verticale crea spazio fisico extra per il "respiro". */
    margin: 6px 0;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.55),
                0 0 0 1.5px rgb(var(--cloto-accent) / 0.6),
                0 0 50px rgb(var(--cloto-accent) / 0.28);
    z-index: 20;
    transform-origin: center center;
}
body.cloto-light .cloto-card.is-focused {
    box-shadow: 0 22px 50px rgb(0 0 0 / 0.18),
                0 0 0 1.5px rgb(var(--cloto-accent) / 0.6),
                0 0 35px rgb(var(--cloto-accent) / 0.22);
}

/* Reduced motion: niente transizioni, gli stati finali restano. */
@media (prefers-reduced-motion: reduce) {
    .cloto-card,
    .cloto-card.is-focused {
        transition: none !important;
    }
}
body.cloto-light .cloto-card:hover {
    box-shadow: 0 0 0 1px rgb(var(--cloto-accent) / 0.5),
                0 0 22px rgb(var(--cloto-accent) / 0.22),
                0 12px 36px rgb(0 0 0 / 0.14);
}

/* ── Drawer resize handle WEST: pillola accent al CENTRO del bordo, come un grip.
   Hit-area full-height per facilità di afferrare; visivo concentrato al centro. ── */
.drawer-resize-handle {
    /* La hit-area resta full-height e più larga del visivo per facilitare il grab. */
    width: 14px !important;
    left: -7px !important;
}
.drawer-resize-handle::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 72px;
    border-radius: 6px;
    background: rgb(var(--cloto-accent));
    opacity: 0.75;
    box-shadow: 0 2px 10px rgb(var(--cloto-accent) / 0.35);
    transition: opacity .15s, height .15s, width .15s, box-shadow .15s;
}
.drawer-resize-handle:hover::before,
body.resizing-drawer .drawer-resize-handle::before {
    opacity: 1;
    width: 10px;
    height: 84px;
    box-shadow: 0 3px 14px rgb(var(--cloto-accent) / 0.55);
}
body.resizing-drawer { cursor: ew-resize !important; user-select: none; }
body.resizing-drawer .detail-drawer-touch { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════
   KANBAN 3D — scene / camera / board / colonne in prospettiva
   ═══════════════════════════════════════════════════════════════ */

/* Header sopra il canvas dei fili (z1) e sopra la board */
header.bg-cloto-panel { position: relative; z-index: 50; }   /* sopra il drawer (z-30) e sopra il drawer in modalità float/fullscreen — così il menu impostazioni e l'eventuale toggle restano cliccabili */

/* Canvas dei fili: fisso, dietro le card ma sopra le nebulose */
#kanban-threads {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
}

/* La scene (ex <main>): contesto prospettiva, sopra i fili */
.kanban-scene {
    position: relative; z-index: 2;
    perspective: 4500px; perspective-origin: 50% 46%;  /* effetto Z appena accennato */
    overflow: hidden;
    cursor: grab;
    user-select: none; -webkit-user-select: none; -moz-user-select: none;
    -webkit-touch-callout: none;
    /* iOS: blocchiamo le gesture native (pan/pinch del browser) per pilotare camera nostra. */
    touch-action: none;
}
/* Le colonne mantengono lo scroll verticale interno via touch. */
.kanban-scene .kanban-column-3d { touch-action: pan-y; }
.kanban-scene.is-panning { cursor: grabbing; }

.kanban-camera {
    position: absolute; left: 50%; top: 50%;
    transform-origin: 0 0; will-change: transform;
    /* preserve-3d è CRITICO: senza, il transform (translate+scale) di questo elemento
       appiattisce il 3D dei figli (colonne) prima del rendering → translateZ delle
       colonne risulta invisibile. Con preserve-3d, il contesto 3D si propaga e la
       perspective di .kanban-scene può fare il suo lavoro. */
    transform-style: preserve-3d;
}
.kanban-board {
    position: relative; transform-style: preserve-3d;
    /* Transform applicato via JS (applyKanban3D), persistito in preferences. Default: rotateX(7deg) rotateY(-22deg). */
    transform: rotateX(7deg) rotateY(-22deg);
    will-change: transform;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
}

/* ═══ Scene profile-card — pannello STATICO accanto alla colonna scena ═══
   Vive come sibling assoluto della .col3d-body dentro la .kanban-column-3d di tipo
   scena. Posizione: left:100% (subito a destra della colonna), top:0 (parte dalla
   testa colonna), height:100% (segue tutta l'altezza). Il contenuto cambia in base
   a selectedPath.scena — non è legata alla singola card. Quando nessuna scena è
   selezionata, x-show la nasconde. */
.scene-profile-card {
    position: absolute;
    left: 100%;
    top: 0;  /* override dinamico inline da x-effect: top = card focused offset */
    /* Stessa scale(1.07) della .cloto-card.is-focused: senza questo la profile-card,
       pur ereditando lo stesso translateZ della colonna, appare visivamente "indietro"
       rispetto alla card scena cliccata (che è scalata 1.07). Con scale uguale i due
       elementi vivono sullo stesso piano percepito. transform-origin: left center così
       la card cresce verso destra (la colonna è alla sua sinistra) e resta verticalmente
       allineata col centro della card focused (anch'essa scalata da center-center). */
    transform: translateX(20px) scale(1.07);
    transform-origin: left center;
    width: 256px;
    transition: top 0.35s cubic-bezier(.22,.61,.36,1);  /* segue fluida la card */
    background: rgb(var(--cloto-panel));
    border: 1px solid rgb(var(--cloto-line) / 0.6);
    border-left: 3px solid rgb(var(--cloto-accent));
    border-radius: 10px;
    padding: 14px 14px 16px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
    /* Z-index più alto di .cloto-card.is-focused (20): senza questo, il box-shadow
       della card focused (blur 60px + glow 50px) si estende verso destra e finisce
       SOPRA la profile-card, rompendo la percezione che vivano sullo stesso piano.
       isolation: isolate crea un nuovo stacking context così niente da fuori la sovrasta. */
    z-index: 21;
    isolation: isolate;
    pointer-events: auto;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgb(var(--cloto-line) / 0.5);
}
.profile-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--cloto-text));
}
.profile-state {
    font-size: 10px;
    color: rgb(var(--cloto-muted));
    font-style: italic;
}
.profile-saturation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 0 10px;
    transition: color 0.4s ease;
}
.profile-saturation-value {
    font-family: 'Cardo', Georgia, serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: rgb(var(--cloto-text));
    letter-spacing: -0.02em;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}
.profile-saturation-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--cloto-muted));
    transition: color 0.4s ease;
}
/* Soglia di saturazione raggiunta: verde + leggero glow + label esplicita */
.profile-saturation.is-ready .profile-saturation-value {
    color: rgb(var(--cloto-ok));
    text-shadow: 0 0 18px rgb(var(--cloto-ok) / 0.35);
}
.profile-saturation.is-ready .profile-saturation-label {
    color: rgb(var(--cloto-ok));
    font-weight: 600;
}
.profile-priority {
    padding: 8px 10px 8px 12px;
    background: rgb(var(--cloto-card) / 0.5);
    border: 1px solid rgb(var(--cloto-line) / 0.4);
    border-left: 3px solid rgb(var(--cloto-muted));
    border-radius: 6px;
    font-size: 11px;
    color: rgb(var(--cloto-fg));
}
.profile-priority.is-done {
    border-left-color: rgb(var(--cloto-ok));
    color: rgb(var(--cloto-ok));
}
/* Stato CTA: tutti i campi ≥ soglia + saturation globale raggiunta. Banner
   pieno-colore con bottone "Prossima scena" o "Sintetizza e tessi". Più
   marcato del semplice .is-done per spingere l'azione successiva senza
   forzarla (l'autore può comunque continuare a esplorare). */
.profile-priority.is-ready-next {
    border-left: 3px solid rgb(var(--cloto-accent));
    background: color-mix(in srgb, rgb(var(--cloto-accent)) 14%, rgb(var(--cloto-card) / 0.6));
    color: rgb(var(--cloto-text));
}
.profile-priority-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-priority-cta-text {
    font-size: 11px;
    font-weight: 600;
    color: rgb(var(--cloto-ok));
}
.profile-priority-cta-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: rgb(var(--cloto-accent));
    color: rgb(var(--cloto-bg));
    border: 1px solid rgb(var(--cloto-accent));
    border-radius: 5px;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}
.profile-priority-cta-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}
.profile-priority-cta-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Variante "cancel" del CTA: meno chiamativa del primary, è una uscita di sicurezza
   dal countdown auto-advance ("aspetta, voglio continuare a esplorare questa scena"). */
.profile-priority-cta-btn.is-cancel {
    background: rgb(var(--cloto-card) / 0.7);
    color: rgb(var(--cloto-muted));
    border: 1px solid rgb(var(--cloto-line));
}
.profile-priority-cta-btn.is-cancel:hover {
    color: rgb(var(--cloto-text));
    border-color: rgb(var(--cloto-muted));
}
.profile-priority-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-priority-head {
    font-size: 11px;
}
.profile-priority-live {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.8;
    cursor: help;
}
.profile-priority-hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.profile-priority-hints li {
    position: relative;
    padding-left: 12px;
    font-size: 10.5px;
    line-height: 1.35;
    color: rgb(var(--cloto-fg));
    opacity: 0.85;
}
.profile-priority-hints li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hint-color, rgb(var(--cloto-muted)));
    opacity: 0.7;
}
.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.profile-field-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-field-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.profile-field-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.profile-field-score {
    font-family: 'Cardo', Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--cloto-fg));
    margin-left: auto;
}
.profile-field-bar {
    height: 3px;
    background: rgb(var(--cloto-line) / 0.4);
    border-radius: 2px;
    overflow: hidden;
}
.profile-field-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(.22,.61,.36,1);
}
.profile-field-snap {
    font-size: 10.5px;
    line-height: 1.3;
    color: rgb(var(--cloto-fg));
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.profile-field-desc {
    font-style: italic;
    color: rgb(var(--cloto-muted));
    opacity: 0.6;
}
.profile-field-btn {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
}
.profile-field-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgb(255 255 255 / 0.04);
}
.profile-field-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
/* Bottone "prenotato": colore pieno del campo, stato attivo evidente */
.profile-field-btn.is-queued {
    opacity: 1;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.08);
}
/* Pillola persistente "prenotato": evidente anche senza guardare lo schermo continuamente */
.profile-queued-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--qf-color, rgb(var(--cloto-accent))) 18%, transparent);
    border: 1px solid var(--qf-color, rgb(var(--cloto-accent)));
    border-radius: 6px;
    font-size: 11px;
    color: rgb(var(--cloto-text));
}
.profile-queued-label strong {
    margin-left: 4px;
    color: var(--qf-color, rgb(var(--cloto-accent)));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.profile-queued-cancel {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgb(var(--cloto-muted));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.profile-queued-cancel:hover {
    color: rgb(var(--cloto-bad));
}

/* Colonna 3D: posizionata via inline transform (columnTransform) — calcolato in
   modo DINAMICO in base alla "distanza dal livello focused" (= la colonna
   successiva alla più profonda selezionata). Più scendi nello scavo, più i livelli
   antenati scivolano indietro su Z, perdono opacity e si sfocano leggermente. */
.kanban-column-3d {
    position: absolute; top: 0; width: 256px;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

/* HIT-TEST: solo card e bottoni ricevono i puntatori. I box trasparenti delle colonne
   (in prospettiva saga sta DAVANTI a volume e lo coprirebbe) NON devono rubare hover/click.
   closest('.kanban-column-3d') e :hover continuano a funzionare risalendo dalla card. */
.kanban-column-3d, .col3d-body { pointer-events: none; }
.cloto-card, .col3d-head button { pointer-events: auto; cursor: pointer; }
.card-reorder { pointer-events: none; }
.cloto-card:hover .card-reorder { pointer-events: auto; }
.col3d-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 10px; margin-bottom: 14px;
    border-bottom: 1px solid rgb(var(--cloto-line) / 0.6);
    font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 600;
    color: rgb(var(--cloto-muted));
}
.col3d-body {
    display: flex; flex-direction: column; gap: 12px;
    overflow: visible;
    padding: 2px;
}

/* Float lieve sfasato delle card (solo nel 3D, congelato su hover colonna) */
.kanban-column-3d .cloto-card {
    animation: cloto-card-float 7s ease-in-out infinite;
}
.kanban-column-3d .cloto-card:nth-child(2n) { animation-duration: 8.4s; animation-delay: -1.5s; }
.kanban-column-3d .cloto-card:nth-child(3n) { animation-duration: 7.6s; animation-delay: -3s; }
.kanban-column-3d .cloto-card:nth-child(4n) { animation-duration: 9s;   animation-delay: -2.2s; }
.kanban-column-3d:hover .cloto-card { animation-play-state: paused; }
/* Card focused: niente float — il suo transform scale(1.10) verrebbe sovrascritto
   dall'animation keyframe (translateY) ogni frame. Le on-path ri-fluttuano. */
.kanban-column-3d .cloto-card.is-focused {
    animation: none;
}
@keyframes cloto-card-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
@media (pointer: coarse) {
    .kanban-column-3d .cloto-card { animation: none; }  /* niente float su touch */
}

/* Micro-bottoni reorder ↑/↓ su hover card */
.card-reorder {
    position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; transition: opacity .15s;
}
.cloto-card:hover .card-reorder { opacity: 1; }
.card-reorder button {
    width: 18px; height: 16px; line-height: 1; font-size: 11px;
    background: rgb(var(--cloto-panel) / 0.9); border: 1px solid rgb(var(--cloto-line));
    color: rgb(var(--cloto-muted)); border-radius: 4px; cursor: pointer;
}
.card-reorder button:hover { color: rgb(var(--cloto-accent)); border-color: rgb(var(--cloto-accent)); }

/* ── Cloto Radio · minimal player (fixed bottom-left, single row) ── */
.cloto-radio {
    position: fixed; left: 18px; bottom: 16px; z-index: 32;
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 8px 0 6px;
    border-radius: 18px;
    background: rgb(var(--cloto-panel) / 0.85);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgb(var(--cloto-line));
    color: rgb(var(--cloto-text));
    transition: border-color .2s;
}
.cloto-radio.playing { border-color: rgb(var(--cloto-accent) / 0.5); }
.cr-btn {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 0; color: rgb(var(--cloto-muted));
    transition: color .15s, background .15s;
}
.cr-btn:hover { color: rgb(var(--cloto-text)); background: rgb(var(--cloto-card) / 0.7); }
.cr-btn:disabled { opacity: .35; cursor: not-allowed; }
.cloto-radio.playing .cr-play { color: rgb(var(--cloto-accent)); }
.cr-now {
    font-size: 11.5px; color: rgb(var(--cloto-muted));
    max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 4px;
}
.cr-vol {
    -webkit-appearance: none; appearance: none;
    width: 72px; height: 3px; border-radius: 2px; cursor: pointer; outline: none;
    background: linear-gradient(to right, rgb(var(--cloto-accent)) var(--p, 55%), rgb(var(--cloto-line)) var(--p, 55%));
}
.cr-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--cloto-accent)); cursor: pointer; }
.cr-vol::-moz-range-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: rgb(var(--cloto-accent)); cursor: pointer; }
.cr-genre {
    appearance: none; cursor: pointer; font-size: 11px;
    background: transparent; color: rgb(var(--cloto-muted));
    border: 0; padding: 4px 16px 4px 6px; max-width: 110px;
    background-image: linear-gradient(45deg, transparent 50%, rgb(var(--cloto-muted)) 50%), linear-gradient(135deg, rgb(var(--cloto-muted)) 50%, transparent 50%);
    background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.cr-genre:hover { color: rgb(var(--cloto-text)); }
.cr-genre:focus { outline: none; color: rgb(var(--cloto-text)); }
.cr-genre option { background: rgb(var(--cloto-panel)); color: rgb(var(--cloto-text)); }
@media (max-width: 760px) {
    .cloto-radio { width: calc(100vw - 36px); max-width: 380px; }
}

/* ── Leggenda pallini stati nodi — chip collassabile (sopra il player musicale) ── */
.cloto-legend {
    position: fixed; left: 18px; bottom: 62px; z-index: 32;
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
    user-select: none;
}
.cloto-legend-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    border-radius: 14px;
    background: rgb(var(--cloto-panel) / 0.85);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgb(var(--cloto-line));
    font-size: 10.5px; color: rgb(var(--cloto-muted));
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cloto-legend-toggle:hover {
    color: rgb(var(--cloto-text));
    border-color: rgb(var(--cloto-accent) / 0.4);
}
.cloto-legend-toggle.is-open {
    color: rgb(var(--cloto-text));
    border-color: rgb(var(--cloto-accent) / 0.5);
}
.cloto-legend-icon {
    font-size: 12px;
    line-height: 1;
    opacity: 0.8;
}
.cloto-legend-items {
    display: inline-flex; align-items: center; gap: 12px;
    height: 28px; padding: 0 14px;
    border-radius: 14px;
    background: rgb(var(--cloto-panel) / 0.85);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgb(var(--cloto-line));
    font-size: 10.5px; color: rgb(var(--cloto-muted));
    pointer-events: none;          /* la lista in sé è informativa */
}
.cloto-legend-item { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 760px) {
    .cloto-legend { display: none; }   /* su mobile lo spazio è prezioso, le tooltip dei pallini bastano */
}

/* ── Editor del Testo (tab Testo): textarea contigue, font Cardo, flusso unico ── */
.cloto-prose-block-wrap {
    position: relative;
}
.cloto-prose-block {
    display: block;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    padding: 0;
    margin: 0;
    font-family: 'Cardo', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgb(var(--cloto-text));
    white-space: pre-wrap;
    overflow: hidden;     /* + JS autosize a scrollHeight */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-indent: 1.5em;   /* paragrafo classico stile libro */
    caret-color: rgb(var(--cloto-accent));
}
/* Niente ring di focus: i blocchi devono apparire come un unico flusso. */
.cloto-prose-block:focus { outline: none; box-shadow: none; }
/* Variante legacy (Vol 1-4 importati, non tessuti): testo visibile ma non editabile. */
.cloto-prose-legacy {
    cursor: text;
    user-select: text;
    border-left: 2px solid rgb(var(--cloto-accent) / 0.25);
    padding-left: 14px;
    margin-left: -16px;
    color: rgb(var(--cloto-text) / 0.92);
}
/* Stato errore: sottile barra rossa a sinistra del blocco. */
.cloto-prose-block-wrap.has-error::before {
    content: ''; position: absolute; left: -10px; top: 4px; bottom: 4px;
    width: 2px; background: rgb(var(--cloto-bad));
    border-radius: 2px;
}
/* Divisore di capitolo (atto/volume/saga): titolo centrato in Cardo. */
.cloto-prose-chapter-divider {
    text-align: center;
    font-family: 'Cardo', Georgia, serif;
    font-size: 1rem;
    color: rgb(var(--cloto-muted));
    margin: 3.5rem 0 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(var(--cloto-line) / 0.6);
    letter-spacing: 0.04em;
}
/* Placeholder per scene non tessute. */
.cloto-prose-placeholder {
    text-align: center;
    color: rgb(var(--cloto-muted));
    font-size: 0.85rem;
    padding: 1.25rem 0;
    margin: 0.5rem 0;
    border-top: 1px dashed rgb(var(--cloto-line) / 0.5);
    border-bottom: 1px dashed rgb(var(--cloto-line) / 0.5);
}
/* Chip sticky di status autosave (top-right del tab Testo). */
.cloto-prose-status {
    position: absolute; top: 8px; right: 14px; z-index: 5;
    font-size: 11px; font-family: ui-sans-serif, system-ui, sans-serif;
    padding: 4px 10px; border-radius: 999px;
    background: rgb(var(--cloto-card) / 0.78);
    border: 1px solid rgb(var(--cloto-line) / 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}
.cloto-prose-spinner {
    display: inline-block;
    animation: cloto-spin 1.1s linear infinite;
    margin-right: 4px;
}
@keyframes cloto-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }