/* Story Canvas — matches "Four-pane mapped UI_story_canvas..png". */
@import url("./ui.css");

.canvas-shell { margin: 0 auto; max-width: 100rem; padding: 0 1.4rem 1.6rem; }
.canvas-layout { align-items: start; display: grid; gap: 1rem; grid-template-columns: 11.5rem minmax(0, 1fr) 23rem; }
[hidden] { display: none !important; }

/* ---------- left sidebar ---------- */
.canvas-side { align-self: start; display: grid; gap: .8rem; }
.side-block { padding: .8rem .9rem; }
.side-block .panel-title { font-size: .88rem; margin-bottom: .6rem; }
.legend-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.legend-list li { align-items: center; color: var(--muted); display: flex; font-size: .95rem; gap: .55rem; }
.legend-list .lg { border-radius: .12rem; display: inline-block; height: .8rem; width: .8rem; }
.lg.source { background: #2c7a52; }
.lg.scene { background: #3f6db4; }
.lg.asset { background: #2a8a72; }
.lg.choice { background: #caa24d; }
.lg.branch { background: #7a5cc0; }
.view-check { align-items: center; color: var(--muted); display: flex; font-size: .93rem; gap: .5rem; margin-bottom: .5rem; }
.view-check input { accent-color: var(--gold); width: auto; }
.side-note { color: var(--muted-2); font-size: .82rem; font-style: italic; }
.tag-list { display: grid; gap: .4rem; }
.tag-list button { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--muted); cursor: pointer; font: 500 .9rem/1 var(--serif); padding: .5rem .6rem; text-align: left; }
.tag-list button.active { border-color: var(--line); color: var(--gold-bright); }
.book-part-control { color: var(--muted); display: grid; font-size: .86rem; font-variant: small-caps; gap: .3rem; letter-spacing: .08em; margin-top: .6rem; }

/* ---------- board ---------- */
.board { align-self: start; display: grid; gap: .8rem; min-width: 0; }
.board-head { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.board-title { color: var(--gold-bright); font: 600 1.3rem/1.2 var(--display); font-variant: small-caps; letter-spacing: .04em; margin: 0; }
.board-summary { color: var(--muted); font-size: .9rem; max-width: 42rem; }
.board-head-actions { display: flex; gap: .5rem; }
.board-head-actions .btn { text-decoration: none; white-space: nowrap; }

.canvas-toolbar { align-items: center; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: .3rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .6rem; }
.canvas-toolbar .search { align-items: center; display: flex; flex: 0 1 18rem; position: relative; }
.canvas-toolbar .search .search-glyph { color: var(--gold-dim); left: .6rem; position: absolute; z-index: 1; }
.canvas-toolbar .search input { padding-left: 1.9rem; }
.canvas-toolbar .toolbar-spacer { flex: 1; }
.canvas-toolbar .filter-group { display: flex; gap: .35rem; }
.canvas-toolbar .filter-group button { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--muted); cursor: pointer; font: 500 .88rem/1 var(--serif); padding: .5rem .7rem; }
.canvas-toolbar .filter-group button.active { border-color: var(--line-strong); color: var(--gold-bright); }
.zoom-cluster { align-items: center; display: flex; gap: .35rem; }
.zoom-cluster output { color: var(--muted); font-size: .9rem; min-width: 2.8rem; text-align: center; }

.canvas-start { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line-faint); border-radius: .3rem; padding: .8rem 1rem; }
.canvas-start h2 { color: var(--text); font-size: 1.1rem; margin: .2rem 0 .5rem; }
.route-guide { display: flex; flex-wrap: wrap; gap: .5rem; }
.route-guide button { background: #0b1424; border: 1px solid var(--line); border-radius: .2rem; color: var(--text); cursor: pointer; font: 500 .92rem/1.25 var(--serif); padding: .55rem .8rem; text-align: left; }
.route-guide button:hover { border-color: var(--line-strong); color: var(--gold-bright); }

.graph-viewport {
  background:
    radial-gradient(rgba(120, 145, 190, .17) 1px, transparent 1.4px) 0 0 / 24px 24px,
    linear-gradient(180deg, #0c1526, #0a1220);
  border: 1px solid var(--line);
  border-radius: .3rem;
  height: 34rem;
  overflow: auto;
  position: relative;
}
.graph-viewport.scene-flow-viewport { overflow: hidden; }
.graph-viewport.panning { cursor: grabbing; }
.graph { min-height: 100%; min-width: 100%; position: relative; transform-origin: 0 0; }
.board-foot { color: var(--muted-2); font-size: .85rem; font-style: italic; }
.subtle { color: var(--muted-2); font-size: .85rem; }

body.hide-connections .canvas-lines { display: none; }
body.hide-labels .node .node-type, body.hide-labels .node .node-state, body.hide-labels .scene-flow-number { display: none; }
body.hide-counts .scene-flow-meta, body.hide-counts .board-foot { display: none; }

/* connection lines */
.canvas-lines { left: 0; overflow: visible; pointer-events: none; position: absolute; top: 0; }
.canvas-lines path { fill: none; stroke: rgba(140, 165, 210, .5); stroke-dasharray: 4 5; stroke-width: 1.4; }
.canvas-lines path.branch-link { stroke: rgba(163, 134, 220, .6); }
.canvas-lines text { fill: #7d89a6; font: 400 .68rem "EB Garamond", serif; letter-spacing: .05em; text-transform: uppercase; }
.scene-flow-branch-label { fill: #caa24d !important; }

/* ---------- typed node cards (Lines / All cards views) ---------- */
.node {
  background: linear-gradient(180deg, #14203a, #0e1830);
  border: 1px solid #33507e;
  border-radius: .25rem;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: .25rem;
  padding: .5rem .6rem .55rem;
  position: absolute;
  text-align: left;
  touch-action: none;
  width: 13.5rem;
  z-index: 1;
}
.node:hover, .node:focus { filter: brightness(1.15); z-index: 3; }
.node .node-type { align-items: center; color: #9fb3d9; display: flex; font-size: .68rem; font-weight: 700; gap: .4rem; letter-spacing: .16em; text-transform: uppercase; }
.node .node-type::before { border-radius: .1rem; content: ""; display: inline-block; height: .65rem; width: .65rem; }
.node .node-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .95rem; font-weight: 600; line-height: 1.25; overflow: hidden; }
.node .node-state { color: var(--muted-2); font-size: .75rem; font-style: italic; text-transform: capitalize; }
.node.source, .node.character, .node.profile { background: linear-gradient(180deg, #10301f, #0b2418); border-color: #2c7a52; }
.node.source .node-type, .node.character .node-type { color: #9fd8ae; }
.node.source .node-type::before, .node.character .node-type::before { background: #2c7a52; }
.node.asset { background: linear-gradient(180deg, #0f2e28, #0a231f); border-color: #2a8a72; }
.node.asset .node-type { color: #93d9c6; }
.node.asset .node-type::before { background: #2a8a72; }
.node.scene .node-type::before, .node.route .node-type::before, .node.composition .node-type::before { background: #3f6db4; }
.node.moment { background: linear-gradient(180deg, #131c30, #0d1526); border-color: #2b3c5e; }
.node.moment .node-type::before { background: #55719f; }
.node.choice { background: linear-gradient(180deg, #34290f, #241c0a); border-color: #8a6f31; }
.node.choice .node-type { color: #e8cd84; }
.node.choice .node-type::before { background: #caa24d; }
.node.branch, .node.branch-plan { background: linear-gradient(180deg, #241a3c, #1a1230); border-color: #634a9e; }
.node.branch .node-type { color: #c8b4ee; }
.node.branch .node-type::before { background: #7a5cc0; }
.node.approved { box-shadow: 0 0 0 1px #2c7a52; }

/* ---------- story-map scene cards ---------- */
.scene-flow-card {
  background: linear-gradient(180deg, #14203a, #0e1830);
  border: 1px solid #33507e;
  border-radius: .3rem;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: .5rem;
  grid-template-columns: 7.2rem 1fr;
  padding: .55rem;
  position: absolute;
  text-align: left;
  width: 18.75rem;
}
.scene-flow-card:hover { filter: brightness(1.12); }
.scene-flow-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(3, 7, 15, .6); }
.scene-flow-card.alternative { background: linear-gradient(180deg, #241a3c, #1a1230); border-color: #634a9e; }
.scene-thumbnail { align-items: center; aspect-ratio: 7 / 6; background: #0a1120; border: 1px solid rgba(140, 165, 210, .25); border-radius: .2rem; color: var(--muted-2); display: flex; font-size: .78rem; font-style: italic; justify-content: center; overflow: hidden; text-align: center; }
.scene-thumbnail img { height: 100%; object-fit: cover; width: 100%; }
.scene-flow-detail { display: grid; gap: .18rem; min-width: 0; }
.scene-flow-number { color: #9fb3d9; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scene-flow-card.alternative .scene-flow-number { color: #c8b4ee; }
.scene-flow-detail strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .98rem; line-height: 1.2; overflow: hidden; }
.scene-flow-detail small { color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8rem; overflow: hidden; }
.scene-flow-path { color: #e8cd84 !important; font-style: italic; }
.scene-flow-meta { color: var(--muted-2) !important; }

/* ---------- inspector ---------- */
.inspector { align-self: start; display: grid; gap: .7rem; max-height: 46rem; overflow: auto; }
.insp-head { align-items: center; display: flex; justify-content: space-between; }
.insp-head .panel-title { margin: 0; }
.insp-tabs { display: flex; gap: .25rem; }
.insp-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font: 600 .88rem/1 var(--serif); letter-spacing: .08em; padding: .4rem .5rem; text-transform: uppercase; }
.insp-tab.active { border-bottom-color: var(--gold); color: var(--gold-bright); }
.insp-tab:disabled { cursor: default; opacity: .5; }
.inspector.notes-mode > *:not(.insp-head):not(.notes-panel) { display: none; }
.notes-panel { display: grid; gap: .6rem; }
.notes-panel textarea { min-height: 8rem; resize: vertical; }
.notes-panel .np-hint { color: var(--muted-2); font-size: .82rem; font-style: italic; }
.inspector h2 { color: var(--text); font: 600 1.25rem/1.2 var(--serif); margin: 0; }
.inspector > p { color: var(--muted); font-size: .92rem; }
.inspector h3 { color: var(--gold); font-size: .95rem; font-variant: small-caps; letter-spacing: .08em; margin: 0; }
.inspector form { display: grid; gap: .55rem; margin: 0; }
.inspector textarea { min-height: 3.2rem; resize: vertical; }
.inspector form button, .inspector #new-moment { background: transparent; border: 1px solid var(--line); border-radius: .2rem; color: var(--text); cursor: pointer; font: 600 .88rem/1 var(--serif); font-variant: small-caps; letter-spacing: .1em; padding: .55rem .8rem; }
.inspector form button:hover, .inspector #new-moment:hover { border-color: var(--line-strong); color: var(--gold-bright); }
.inspector form button.green, .inspector .btn.green { background: #1f5233; border-color: #35774d; color: #d5eccc; }
.creator-tools, .raw-data { border-top: 1px solid var(--line-faint); display: grid; gap: .6rem; padding-top: .6rem; }
.creator-tools summary, .raw-data summary { color: var(--gold); cursor: pointer; font-size: .95rem; font-variant: small-caps; letter-spacing: .08em; }
.raw-data pre { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: #b6c2da; font-size: .78rem; margin: 0; max-height: 16rem; overflow: auto; padding: .6rem; white-space: pre-wrap; }
.publish-btn { width: 100%; }
.btn.danger, .inspector .danger { border-color: #8a3d3d; color: #e0a4a4; }
.proposal-options { display: grid; gap: .5rem; }
.proposal-options button { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--text); cursor: pointer; font: 400 .88rem/1.3 var(--serif); padding: .5rem .6rem; text-align: left; }
#moment-list { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.moment-row { display: grid; gap: .35rem; grid-template-columns: 1fr auto auto; }
.moment-row button { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--text); cursor: pointer; font: 400 .85rem/1.3 var(--serif); padding: .45rem .55rem; text-align: left; }
.moment-row button:disabled { opacity: .4; }

/* book scene inspector (SceneInspector module) */
.book-selected-scene { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: .25rem; display: grid; gap: .55rem; outline: none; padding: .75rem .8rem; }
.book-selected-scene h3 { color: var(--gold-bright); font-size: 1.05rem; font-variant: small-caps; letter-spacing: .06em; }
.book-selected-scene h4 { color: var(--gold); font-size: .9rem; font-variant: small-caps; letter-spacing: .08em; margin: 0; }
.book-inspector-label { color: var(--muted-2) !important; font-size: .84rem !important; font-style: italic; }
.book-inspector-art { border: 1px solid var(--line); border-radius: .2rem; cursor: pointer; width: 100%; }
.book-inspector-pending { border: 1px dashed var(--line); border-radius: .2rem; color: var(--muted-2) !important; font-size: .85rem !important; font-style: italic; padding: .8rem; text-align: center; }
.book-inspector-meta { color: var(--muted-2) !important; font-size: .8rem !important; }
.book-scene-actions { display: grid; gap: .4rem; }
.book-scene-action { background: #0b1424; border: 1px solid var(--line); border-radius: .2rem; color: var(--text); cursor: pointer; font: 500 .9rem/1.2 var(--serif); padding: .5rem .65rem; text-align: left; }
.book-scene-action:hover { border-color: var(--line-strong); color: var(--gold-bright); }
.book-inspector-lines { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.book-inspector-lines button { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--muted); cursor: pointer; font: 400 .88rem/1.35 var(--serif); padding: .45rem .6rem; text-align: left; width: 100%; }
.book-inspector-lines button:hover { border-color: var(--line); color: var(--text); }
.book-editor-hint { color: var(--muted-2) !important; font-size: .85rem !important; font-style: italic; }
.book-source-preview { background: #0b1424; border-left: 3px solid var(--green-line); color: var(--muted); font-size: .88rem; font-style: italic; margin: 0; padding: .6rem .8rem; }
.book-scene-controls { border-top: 1px solid var(--line-faint); display: grid; gap: .55rem; padding-top: .7rem; }
.book-scene-controls h3 { margin: 0; }
.book-scene-controls p { color: var(--muted-2) !important; font-size: .84rem !important; }
.book-cost-boundary { color: var(--gold-dim) !important; }
.book-action-status { color: var(--gold); font-size: .85rem; font-style: italic; }

@media (max-width: 1200px) { .canvas-layout { grid-template-columns: 1fr; } .inspector { max-height: none; } }