/* 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.6rem;
    align-content: start;
    /* generous, BALANCED vertical breathing room: the cards need clear space below them (the
       page edge sits right under the bar) to match the airy frosted space above. */
    padding: 0.9rem 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);
}
/* In GRID mode the chrome is separated by FROST, not hard borders (like the sidebar/aux, which
   have no dividers). A full-width 1px rule here cuts straight across the infinite desk — drop it;
   the frosted top zone's edge does the separating. (Flat mode keeps the border — no frost there.) */
body.edet[data-edet-desk="grid"] .dr-corkboard { border-bottom: none !important; }

/* Scene open + GRID desk: the scene bar is an ABSOLUTE OVERLAY floating over the (fixed) canvas,
   pinned just under the toolbar. It does NOT sit in flow, so it can't push the page/grid down —
   the canvas stays screen-fixed with ZERO JS measurement (replaces the fragile --dr-cork-h
   compensation that desynced in real browsers).

   It's a FIXED single-row strip (one row of cards, scrolls horizontally if there are many) — a
   navigation rail, NOT the space-filling board (that's the no-scene-open "chapter" view). A fixed
   height means the page below it can be pushed down by a matching CONSTANT (edet-tiptap.css) so the
   page ALWAYS clears the strip — no more first-line-hidden-behind-the-bar — and, because that
   offset never changes when the strip collapses, toggling collapse never moves the page.
   (Flat desk keeps the bar in flow — see the rule above.) */
.edet-app[data-desk="grid"][data-view-mode="scenes"][data-doc-kind="scene"] .dr-corkboard {
    position: absolute;
    top: var(--dr-chrome-h, 48px);
    left: 0;
    right: 0;
    z-index: 8;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0.6rem;
    height: var(--dr-scenebar-open-h);
    max-height: var(--dr-scenebar-open-h);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 1rem;
}
/* cards in the single-row strip are content-width, not grid cells */
.edet-app[data-desk="grid"][data-view-mode="scenes"][data-doc-kind="scene"] .dr-scene-card {
    flex: 0 0 auto;
    width: 11rem;
}
/* Collapsed in scene-open grid: the strip shrinks to a chip row. The page stays pinned (its
   canvas offset is the EXPANDED constant, unchanged here) — collapsing just frees desk above it.
   Needs the extra attrs to out-specify the fixed-height rule above. */
.edet-app.scenebar-collapsed[data-desk="grid"][data-view-mode="scenes"][data-doc-kind="scene"] .dr-corkboard {
    height: auto;
    max-height: none;
    align-items: center;
    padding: 0.4rem 1rem;
}
.edet-app.scenebar-collapsed[data-desk="grid"][data-view-mode="scenes"][data-doc-kind="scene"] .dr-scene-card {
    width: auto;
    max-width: 14rem;
}

/* ---- card ---- */
.dr-scene-card {
    display: flex;
    flex-direction: column;
    /* compact: content-height cards so the expanded scene bar is a SLIM row (was a 120px-tall
       band that overlaid a big chunk of the page). Title + 1-line synopsis + meta ≈ ~64px. */
    min-height: 0;
    padding: 0.4rem 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--card-accent, var(--rule));
    border-radius: var(--radius-lg);
    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: 0 1 auto;
    margin: 0.2rem 0;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--fg-dim);
    overflow: hidden;
    /* one line in the slim card (full text still on the card hover/open) */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.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: var(--radius-pill);
    border: 1px solid var(--rule);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.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; }
/* Focus mode hides the scene bar entirely, so its collapse chevron is meaningless there —
   hide it too (it was stranded next to "Exit focus", toggling a hidden bar). */
.edet-app[data-focus="on"] .dr-scenebar-collapse { display: none !important; }
.dr-scenebar-collapse svg { width: 16px; height: 16px; }   /* match the chrome icons, not the default 30px */
.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); }