/* edet-corkboard.css — the scene board (v2.0). A responsive grid of
   index cards inside .dr-main, shown when data-view-mode="scenes". When no
   scene is open the board fills the editor area; once a scene is open it
   becomes a scrollable strip above the editor split. All tokens from
   site.css :root. */

/* Hidden by default; the corkboard only exists in scenes view. */
.dr-corkboard { display: none; }

.edet-app[data-view-mode="scenes"] .dr-corkboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
    align-content: start;
    padding: 1rem;
    overflow-y: auto;
    background: var(--bg);
    /* the scene strip is navigation chrome — float it ABOVE the free-floating board
       cards (canvas z 2) so it never disappears behind them. */
    position: relative;
    z-index: 8;
}
/* No scene open → board fills the column; the split collapses away. */
.edet-app[data-view-mode="scenes"][data-doc-kind="chapter"] .dr-corkboard { flex: 1 1 auto; min-height: 0; }
.edet-app[data-view-mode="scenes"][data-doc-kind="chapter"] .dr-split { display: none; }
/* A scene is open → board is a strip above the editor split. */
.edet-app[data-view-mode="scenes"][data-doc-kind="scene"] .dr-corkboard {
    flex: 0 0 auto;
    max-height: 42%;
    border-bottom: 1px solid var(--rule);
}

/* ---- card ---- */
.dr-scene-card {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--card-accent, var(--rule));
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    text-align: left;
    color: var(--fg);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-smooth),
                background var(--dur-fast) var(--ease-smooth),
                transform var(--dur-fast) var(--ease-smooth);
}
.dr-scene-card:hover { background: var(--btn-bg-hover); }
.dr-scene-card.active { border-color: var(--accent); border-left-color: var(--accent); }

/* color labels — map data-color to a token-mixed hue stripe */
.dr-scene-card[data-color="red"]    { --card-accent: var(--status-err); }
.dr-scene-card[data-color="amber"]  { --card-accent: var(--status-warn); }
.dr-scene-card[data-color="green"]  { --card-accent: var(--status-ok); }
.dr-scene-card[data-color="blue"]   { --card-accent: var(--accent); }
.dr-scene-card[data-color="purple"] { --card-accent: color-mix(in srgb, var(--accent) 50%, magenta); }

.dr-scene-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.25rem; }
.dr-scene-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
.dr-scene-card-more {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    padding: 0 2px;
}
.dr-scene-card-more:hover { color: var(--fg); }
.dr-scene-card-synopsis {
    flex: 1 1 auto;
    margin: 0.4rem 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--fg-dim);
    overflow: hidden;
}
.dr-scene-card-synopsis-empty { color: var(--fg-deep); font-style: italic; }
.dr-scene-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.dr-scene-card-wc { font-size: var(--text-xs); color: var(--fg-deep); margin-right: auto; }
.dr-scene-status {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dr-scene-status[data-status="draft"] { color: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 40%, var(--rule)); }
.dr-scene-status[data-status="revised"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.dr-scene-status[data-status="final"] { color: var(--status-ok); border-color: color-mix(in srgb, var(--status-ok) 40%, var(--rule)); }

/* "+ New scene" tile */
.dr-scene-add {
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    border-style: dashed;
    border-left-style: dashed;
    border-left-color: var(--rule);
    font-size: var(--text-sm);
}
.dr-scene-add:hover { color: var(--accent); border-color: var(--accent); }

.dr-corkboard-hint {
    grid-column: 1 / -1;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* reorder feedback (horizontal cards) */
.dr-scene-card.reordering { opacity: 0.4; }
.dr-scene-card.reorder-before { box-shadow: inset 2px 0 0 var(--accent); }
.dr-scene-card.reorder-after { box-shadow: inset -2px 0 0 var(--accent); }

/* ---- collapsed scene bar (option B): a thin one-row strip of scene-title chips ----
   Toggled by #dr-scenebar-collapse (chrome). The grid never moves on toggle — the corkboard
   height feeds --dr-cork-h (setTopFrostHeight) and .dr-canvas top compensates (edet-tiptap.css).
   These rules come AFTER the full-card rules above so they win at equal specificity. */
.dr-scenebar-collapse { display: none; }   /* only in scenes view (below) */
.edet-app[data-view-mode="scenes"] .dr-scenebar-collapse { display: inline-flex; }
.edet-app.scenebar-collapsed .dr-scenebar-collapse svg { transform: rotate(180deg); }   /* points down = expand */

.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-corkboard {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.4rem 1rem;
    max-height: none;
    flex: 0 0 auto;          /* a fixed thin strip, not the space-filling grid */
}
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card {
    min-height: 0;
    flex: 0 0 auto;
    max-width: 14rem;
    padding: 0.3rem 0.7rem;
}
/* chips show the title only */
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card-synopsis,
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card-purpose,
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card-foot { display: none; }
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card-head { align-items: center; }
.edet-app.scenebar-collapsed[data-view-mode="scenes"] .dr-scene-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }