/* Déroulé — thème sombre. */
:root {
    --bg: #111318;
    --panel: #181b22;
    --panel-2: #1e222b;
    --card: #222733;
    --card-hover: #283041;
    --line: #333a4a;
    --text: #ebe7df;
    --muted: #9ba2b0;
    --faint: #6d7486;
    --teal: #5cc8b0;
    --gold: #e7b660;
    --gold-soft: rgba(231, 182, 96, 0.14);
    --violet: #b79ad8;
    --red: #ef7f72;
    --red-soft: rgba(239, 127, 114, 0.14);
    --green: #8fcf8a;
    --card-width: 300px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
/* Un bloc caché le reste, même quand sa règle lui donne un display. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 380px;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
    overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 5px 11px;
    cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--gold); color: #1b1408; border-color: var(--gold); font-weight: 600; }
button.ghost { background: transparent; border-style: dashed; color: var(--muted); }
button.danger { border-color: rgba(239, 127, 114, 0.5); color: var(--red); background: transparent; }
button.link-button { background: none; border: none; padding: 0; color: var(--gold); text-decoration: underline; }
input, textarea, select {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 9px;
    width: 100%;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }

/* --- Colonne de gauche --------------------------------------------------- */
.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    overflow-y: auto;
}
.brand strong { display: block; font-size: 22px; letter-spacing: 0.5px; color: var(--gold); }
.brand small { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 1.5px; }
.side-block { margin-top: 14px; }
.side-block h2 {
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
}
.story-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.story-list button {
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 9px;
}
.story-list button.active { background: var(--panel-2); border-color: var(--gold); color: var(--gold); }
.story-list .empty { color: var(--faint); font-size: 12px; }
/* Une histoire par ligne: la case la montre ou la masque, le nom la rend active. */
.story-row { display: flex; align-items: center; gap: 4px; }
.story-row input[type="checkbox"] { width: auto; margin: 0 2px; padding: 0; accent-color: var(--gold); cursor: pointer; flex: none; }
.story-row button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.story-row .story-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-row.off button { opacity: 0.45; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.count { color: var(--gold); font-weight: 600; }
.hint { color: var(--faint); font-size: 12px; margin: 0 0 6px; }
.tray-list { display: flex; flex-direction: column; gap: 5px; }
.tray-item {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 13px;
    cursor: grab;
    text-align: left;
}
.tray-item.idea { border-left-color: var(--violet); border-style: dashed; border-left-style: solid; }
.tray-item.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { from { box-shadow: 0 0 0 3px var(--violet); } to { box-shadow: none; } }
.side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.side-foot a { color: var(--muted); }
.pill {
    display: inline-block;
    border: 1px solid rgba(92, 200, 176, 0.5);
    color: var(--teal);
    border-radius: 99px;
    padding: 2px 9px;
    font-size: 11px;
}

/* --- Bandeau du haut --------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.jet { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 240px; }
.jet label { color: var(--violet); font-weight: 600; white-space: nowrap; }
.jet input { border-color: rgba(183, 154, 216, 0.45); }
.actions { display: flex; gap: 6px; align-items: center; }
.actions input[type="search"] { width: 150px; }
.status { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); min-width: 170px; }
#save-status.error { color: var(--red); }
.banner {
    padding: 8px 16px;
    background: var(--gold-soft);
    border-bottom: 1px solid rgba(231, 182, 96, 0.35);
    color: var(--gold);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.banner button { padding: 3px 10px; }

/* --- Canevas ------------------------------------------------------------------------ */
/* clip, pas hidden: un cadre hidden défile encore en douce (focus, sélection),
   et le navigateur rattrapait ce décalage en mangeant le glisser de la caméra.
   Glisser le fond ne doit pas non plus sélectionner de texte. */
.viewport {
    position: relative;
    flex: 1;
    overflow: clip;
    user-select: none;
    background-color: var(--bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    cursor: grab;
    touch-action: none;
}
.viewport.panning { cursor: grabbing; }
.viewport.linking { cursor: crosshair; }
.viewport.boxing { cursor: crosshair; }
.marquee { position: absolute; border: 1px dashed var(--gold); background: var(--gold-soft); pointer-events: none; }
.marquee[hidden] { display: none; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; }
.cards { position: absolute; left: 0; top: 0; }

.edge { fill: none; }
.edge.author { stroke: var(--gold); stroke-width: 2.2; }
.edge.author.loop { stroke-dasharray: 2 5; stroke-linecap: round; }
.edge.game { stroke: #6f7891; stroke-width: 1.5; stroke-dasharray: 6 5; }
.edge.selected { stroke: #fff; stroke-width: 3; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge-label { fill: var(--muted); font-size: 11px; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.edge-label.author { fill: var(--gold); }
#arrow-author path { fill: var(--gold); }
#arrow-game path { fill: #6f7891; }
.draft-link { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; pointer-events: none; }

.card {
    position: absolute;
    width: var(--card-width);
    background: var(--card);
    border: 1px solid var(--line);
    /* La couleur de son histoire. */
    border-top: 4px solid var(--story, var(--teal));
    border-radius: 10px;
    padding: 10px 12px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    user-select: none;
}
.card:hover { background: var(--card-hover); }
.card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 8px 24px rgba(0, 0, 0, 0.5); }
.card.dragging { opacity: 0.85; cursor: grabbing; }
.card.dim { opacity: 0.25; }
.card.match { box-shadow: 0 0 0 2px var(--teal), 0 8px 24px rgba(0, 0, 0, 0.5); }
.card.link-target { box-shadow: 0 0 0 2px var(--gold); }
.card.idea { border-style: dashed; border-top: 4px dashed var(--story, var(--violet)); background: #211f2b; }
.card.ghost { border-top-color: var(--red); opacity: 0.8; }
.card.has-issue { border-left-color: rgba(239, 127, 114, 0.7); border-right-color: rgba(239, 127, 114, 0.7); border-bottom-color: rgba(239, 127, 114, 0.7); }
.card-head { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.8px; }
.badges { display: flex; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.badge-issue { color: var(--red); font-weight: 700; }
.card h3 { margin: 4px 0 2px; font-size: 16.5px; line-height: 1.25; color: var(--text); }
.card .meta { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.card .start { margin: 0 0 4px; color: var(--teal); font-size: 12.5px; }
.card ul { list-style: none; margin: 4px 0; padding: 0; font-size: 12.5px; }
.card ul li { margin: 2px 0; padding-left: 14px; position: relative; }
.card .when li::before { content: "si"; position: absolute; left: 0; color: var(--faint); font-size: 10px; top: 2px; }
.card .changes li::before { content: "→"; position: absolute; left: 0; color: var(--teal); }
.card .gains {
    margin: 6px 0 2px;
    padding: 5px 8px;
    background: var(--gold-soft);
    border: 1px solid rgba(231, 182, 96, 0.35);
    border-radius: 7px;
    color: var(--gold);
    font-size: 12.5px;
}
.card .gains div::before { content: "★ "; }
.card blockquote {
    margin: 6px 0;
    padding-left: 9px;
    border-left: 2px solid var(--line);
    color: #d8d2c6;
    font-style: italic;
    font-size: 12.5px;
}
.card .talks { margin-top: 6px; font-size: 12px; color: var(--muted); }
.card .talks div { margin-top: 2px; }
.card .issues { margin-top: 6px; padding: 5px 8px; border-radius: 7px; background: var(--red-soft); color: var(--red); font-size: 12px; }
.card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.chip { font-size: 11.5px; border-radius: 99px; padding: 1px 8px; border: 1px solid var(--line); color: var(--muted); }
.chip.real { border-color: rgba(92, 200, 176, 0.6); color: var(--teal); }
.chip.to_create { border-color: rgba(231, 182, 96, 0.6); color: var(--gold); border-style: dashed; }
.status-pill { font-size: 10.5px; border-radius: 99px; padding: 1px 7px; background: rgba(183, 154, 216, 0.18); color: var(--violet); }
.handle {
    position: absolute;
    right: -13px;
    bottom: -13px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    background: var(--panel-2);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 14px;
    line-height: 1;
    cursor: crosshair;
}

.legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    gap: 14px;
    padding: 6px 10px;
    background: rgba(24, 27, 34, 0.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    color: var(--muted);
}
.swatch { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 6px; }
.swatch.author { border-top: 2px solid var(--gold); }
.swatch.game { border-top: 2px dashed #6f7891; }
.swatch.idea { width: 14px; height: 10px; border: 1px dashed var(--violet); }
.notice {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 70%;
    padding: 8px 14px;
    background: var(--panel-2);
    border: 1px solid var(--gold);
    border-radius: 8px;
    color: var(--text);
    z-index: 5;
}

/* --- Panneau de droite ------------------------------------------------------------ */
.inspector {
    background: var(--panel);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    padding: 16px 18px 40px;
}
.inspector h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.inspector h3 {
    margin: 18px 0 6px;
    font-size: 11px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--muted);
}
.inspector p { margin: 4px 0; }
.inspector ul { margin: 4px 0; padding-left: 18px; }
.inspector li { margin: 3px 0; }
.inspector .kicker { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--teal); }
.inspector .kicker.idea { color: var(--violet); }
.inspector .muted { color: var(--muted); }
.inspector .faint { color: var(--faint); font-size: 12px; }
.inspector .ok { color: var(--green); }
.inspector .bad { color: var(--red); }
.inspector .how p { color: #d9d4ca; }
.inspector blockquote { margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--line); font-style: italic; color: #d8d2c6; }
.inspector .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.inspector label { display: block; margin: 10px 0 3px; color: var(--muted); font-size: 12px; }
.inspector .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.inspector .chip button { background: none; border: none; padding: 0 0 0 4px; color: inherit; }
.inspector .records button { margin: 2px 4px 2px 0; }
.inspector .gains-box { padding: 6px 10px; background: var(--gold-soft); border-radius: 8px; color: var(--gold); }
.inspector .issue-box { padding: 6px 10px; background: var(--red-soft); border-radius: 8px; color: var(--red); margin: 4px 0; }
.inspector .chip.text { border-style: dashed; color: var(--faint); }
.inspector .conditions li { margin: 4px 0; }
.inspector .builder { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.inspector .builder input[type="number"] { width: 90px; }
.inspector .builder button { align-self: flex-start; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0; }
.swatch-pick { width: 24px; height: 24px; border-radius: 50%; padding: 0; border: 2px solid transparent; }
.swatch-pick.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }

@media (max-width: 1100px) {
    body { grid-template-columns: 210px minmax(0, 1fr); }
    .inspector {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(380px, 92vw);
        z-index: 10;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        transform: translateX(100%);
        transition: transform 0.2s;
    }
    body.inspecting .inspector { transform: none; }
}
@media (max-width: 720px) {
    body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .sidebar { max-height: 34vh; border-right: none; border-bottom: 1px solid var(--line); }
    .status { display: none; }
}