@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Londrina+Solid:wght@100;300;400;900&display=swap');

/*
 * planning.css
 * Styles for planning.html — Story Circle planning tool.
 * Kept separate from custom.css (main site) so this tool stays self-contained.
 */

/* ===================================================================
   Reset & base
   =================================================================== */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0D0B0A;
  color: #F0E8D8;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* ===================================================================
   Header
   =================================================================== */
.sc-header {
  border-bottom: 1px solid #2a2520;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sc-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: #D4A853;
  flex-shrink: 0;
}
.sc-nav-sep {
  flex: 1;
}

/* Minimal header nav */
.sc-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}
.sc-nav-back {
  font-size: 0.68rem;
  color: #4a4038;
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .12s;
  white-space: nowrap;
}
.sc-nav-back:hover { color: #8a8078; }
.sc-nav-divider {
  color: #2a2520;
  font-size: 0.65rem;
  user-select: none;
  margin: 0 .1rem;
}
.sc-nav-link {
  font-size: 0.68rem;
  color: #4a4038;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .12s;
  white-space: nowrap;
}
.sc-nav-link:hover { color: #D4A853; }
.sc-btn {
  padding: 0.3em 0.85em;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.sc-btn-gold {
  background: #221a08;
  color: #D4A853;
  border-color: #3a2e10;
}
.sc-btn-gold:hover { background: #2e2210; border-color: #5a4818; }

/* ===================================================================
   Main layout
   =================================================================== */
#planning-layout {
  display: flex;
  min-height: calc(100vh - 47px);
}
#circle-col {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  overflow: hidden;
}

/* Panel resize handle */
#panel-resize-handle {
  flex-shrink: 0;
  width: 5px;
  background: #1a1614;
  cursor: col-resize;
  transition: background .15s;
  position: relative;
}
#panel-resize-handle:hover,
#panel-resize-handle.is-dragging {
  background: #3a3028;
}

/* ===================================================================
   SVG circle
   =================================================================== */
#circle-wrap { max-width: 640px; margin: 0 auto; }
#story-svg   { width: 100%; height: auto; display: block; cursor: default; }

.ch-node        { cursor: pointer; outline: none; }
.ch-node rect   { transition: filter .12s, stroke .12s; }
.ch-node:hover rect,
.ch-node:focus rect { filter: brightness(1.45) saturate(1.2); }
.ch-node.is-active rect {
  filter: brightness(1.5) saturate(1.3);
  stroke: #F0E8D8; stroke-width: 2;
}
.ch-label   { font-size: 8.5px; font-weight: 700; fill: rgba(0,0,0,.75); pointer-events: none; font-family: system-ui, sans-serif; }
.spread-handle { cursor: grab; }
.spread-handle:active { cursor: grabbing; }
.spread-handle .sh-bg   { opacity: 0; transition: opacity 0.15s; }
.spread-handle .sh-text { opacity: 0; transition: opacity 0.15s; }
.spread-handle:hover .sh-bg,
.spread-handle:hover .sh-text,
.spread-handle.is-active .sh-bg,
.spread-handle.is-active .sh-text { opacity: 1; }
.beat-node  { cursor: pointer; }
.beat-label { font-size: 7.5px; font-weight: 700; fill: #F0E8D8; pointer-events: none; font-family: system-ui, sans-serif; }
.hub-title  { font-size: 17px; font-weight: 800; fill: #D4A853; letter-spacing: .12em; font-family: system-ui, sans-serif; }
.hub-sub    { font-size: 9px; fill: #B8AFA3; letter-spacing: .05em; font-family: system-ui, sans-serif; }

/* ===================================================================
   Framework overlay toggles
   =================================================================== */
#fw-bar {
  max-width: 640px;
  margin: 0.6rem auto 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.fw-bar-label { font-size: 0.68rem; color: #3a3028; flex-shrink: 0; }
.fw-btn {
  background: #140f0c;
  border: 1px solid #2a2520;
  border-radius: 20px;
  color: #4a4038;
  font-size: 0.68rem;
  padding: 0.18em 0.65em;
  cursor: pointer;
  transition: all 0.15s;
}
.fw-btn:hover { border-color: #4a4038; color: #8a8078; }

/* ===================================================================
   Framework tooltip
   =================================================================== */
#fw-tooltip {
  position: fixed;
  z-index: 300;
  background: #1a1614;
  border: 1px solid #3a3028;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  max-width: 230px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}

/* Pile mode: ghost cards behind, click the pins to advance */
#fw-tooltip.is-pile { cursor: default; }

#fw-tooltip.is-pile::before,
#fw-tooltip.is-pile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1a1614;
  border: 1px solid #3a3028;
  border-radius: 6px;
  z-index: -1;
}
#fw-tooltip.is-pile::before { transform: translate(3px, 4px) rotate(1deg); }
#fw-tooltip.is-pile::after  { transform: translate(6px, 8px) rotate(2.2deg); }

/* Card face animation */
.tt-card-face { transition: opacity 0.13s ease, transform 0.13s ease; }
.tt-card-face.tt-exit  { opacity: 0; transform: translateY(-5px); }
.tt-card-face.tt-enter { opacity: 0; transform: translateY(6px); }

/* Counter badge */
.tt-counter {
  font-size: 0.58rem;
  color: #5a5048;
  text-align: right;
  margin-top: 0.35rem;
  letter-spacing: .04em;
  user-select: none;
}

.fw-tt-framework { font-size: 0.62rem; color: #5a5048; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
.fw-tt-beat      { font-size: 0.88rem; color: #D4A853; font-weight: 600; margin-bottom: .25rem; }
.fw-tt-desc      { font-size: 0.76rem; color: #B8AFA3; line-height: 1.5; }

/* ===================================================================
   Detail panel (right column)
   =================================================================== */
#detail-panel {
  flex-shrink: 0;
  width: 360px;
  min-width: 200px;
  max-width: 700px;
  background: #100e0c;
  border-left: 1px solid #2a2520;
  padding: 1.25rem 1.5rem;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: 100vh;
}
#detail-panel.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }

.panel-close {
  background: none; border: none; color: #4a4038;
  font-size: 1.3rem; cursor: pointer; float: right;
  line-height: 1; padding: 0; margin-top: -2px;
  transition: color .1s;
}
.panel-close:hover { color: #F0E8D8; }

/* Panel zone row: badge + scootch buttons */
.panel-zone-row {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap; margin-bottom: 0.85rem; clear: both;
}
.panel-zone-badge {
  display: inline-block; padding: .17em .55em; border-radius: 3px;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,.85); flex-shrink: 0;
}
.panel-scootch-btn {
  background: none; border: 1px solid #2a2520; border-radius: 3px;
  color: #5a5048; font-size: .68rem; padding: .15em .6em;
  cursor: pointer; white-space: nowrap;
  transition: color .1s, border-color .1s;
}
.panel-scootch-btn:hover { color: #D4A853; border-color: #4a4038; }
.panel-scootch-hint { font-size: .64rem; color: #3a3028; width: 100%; margin-top: -.2rem; }

/* Seamless chapter editing — fields look like formatted display text */
.panel-edit-label {
  display: block;
  background: transparent; border: none; outline: none;
  color: #5a5048; font-size: .75rem; font-variant-numeric: tabular-nums;
  width: 100%; padding: 0; font-family: inherit;
  border-bottom: 1px dotted transparent;
  transition: border-color .15s;
  margin-bottom: .18rem;
}
.panel-edit-label:focus { border-bottom-color: rgba(90,80,72,.4); }
.panel-edit-label::placeholder { color: #2a2520; }

.pan-chapter-num {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5a5048;
  margin-bottom: .12rem;
}

.panel-edit-title {
  display: block;
  background: transparent; border: none; outline: none;
  color: #D4A853; font-size: 1.05rem; font-weight: 600;
  line-height: 1.3; width: 100%; padding: 0;
  font-family: inherit; margin-bottom: .7rem;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.panel-edit-title:focus { border-bottom-color: rgba(212,168,83,.2); }
.panel-edit-title::placeholder { color: rgba(212,168,83,.25); }

.panel-edit-summary {
  display: block;
  background: transparent; border: none; outline: none;
  color: #D0C8BC; font-size: .93rem; line-height: 1.8;
  width: 100%; padding: 0;
  font-family: 'EB Garamond', Georgia, serif;
  resize: none; overflow: hidden; min-height: 3em;
}
.panel-edit-summary::placeholder { color: #2a2520; }

.panel-divider { border: none; border-top: 1px solid #1e1c18; margin: 1rem 0 .8rem; }

/* Editor note callout */
.panel-editor-note {
  margin: .85rem 0 .85rem;
  padding: .65rem .85rem;
  background: #0f0d0a;
  border-left: 2px solid #3a2e10;
  border-radius: 0 4px 4px 0;
  font-size: .78rem;
  line-height: 1.65;
  color: #8a8078;
}
.panel-editor-note-label {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #D4A853;
  margin-right: .55rem;
  vertical-align: .06em;
}

.panel-arc-label {
  font-size: .72rem; color: #5a5048; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .35rem;
}
.panel-arc-hint {
  font-size: .68rem; color: #3a3028; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

.panel-refresh-btn {
  margin-top: .9rem;
  background: none; border: 1px solid #2a2520;
  border-radius: 4px; color: #5a5048;
  font-size: .72rem; padding: .25em .75em;
  cursor: pointer; transition: color .1s, border-color .1s;
}
.panel-refresh-btn:hover { color: #D4A853; border-color: #4a4038; }

/* ===================================================================
   Proximity arc — nearby framework beats mini-visualization
   =================================================================== */
.prox-arc-wrap {
  margin-top: 1.1rem;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}
.prox-arc-wrap:hover { opacity: 1; }

.prox-arc-title {
  font-size: .6rem;
  color: #4a4038;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.prox-arc-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.prox-dot {
  cursor: pointer;
  transition: r 0.15s;
}
.prox-arc-tip {
  margin-top: .3rem;
  padding: .5rem .7rem;
  background: #0f0d0a;
  border: 1px solid #2a2520;
  border-radius: 4px;
  font-size: .72rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.prox-tip-fw   { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.prox-tip-name { color: #D4A853; font-size: .8rem; font-weight: 600; }
.prox-tip-desc { color: #8a8078; }
.prox-tip-sep  { border-top: 1px solid #2a2520; margin: .4rem 0; }

/* ===================================================================
   Below-circle layout
   =================================================================== */
#below-circle {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  border-top: 1px solid #161412;
  background: #0b0908;
}
.sc-section-title {
  color: #D4A853; font-size: 1rem; font-weight: 600;
  margin: 2.2rem 0 0.8rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #1e1c18;
}
.sc-section-title .sc-hint { font-size: .75rem; color: #4a4038; font-weight: 400; }

/* ===================================================================
   Story metadata — card treatment as visual break
   =================================================================== */
#meta-section {
  margin-top: 1rem;
  margin-bottom: 2.2rem;
  padding: 1.5rem 1.8rem 1.75rem;
  background: #110e0b;
  border: 1px solid #1e1c18;
  border-radius: 6px;
  position: relative;
}
#meta-section::after {
  content: '';
  display: block;
  position: absolute;
  left: 10%; right: 10%; bottom: -1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2a2520 30%, #2a2520 70%, transparent);
}
.meta-title-input {
  display: block; background: transparent; border: none; outline: none;
  color: #D4A853; font-size: 1.3rem; font-weight: 700;
  width: 100%; padding: 0; font-family: inherit;
  border-bottom: 1px solid transparent; transition: border-color .15s;
  margin-bottom: .3rem;
}
.meta-title-input:focus { border-bottom-color: rgba(212,168,83,.25); }
.meta-title-input::placeholder { color: rgba(212,168,83,.3); }

.meta-author-input, .meta-logline-input {
  display: block; background: transparent; border: none; outline: none;
  width: 100%; padding: 0; font-family: inherit;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.meta-author-input {
  color: #8a8078; font-size: .85rem; margin-bottom: .5rem;
}
.meta-author-input:focus  { border-bottom-color: rgba(138,128,120,.25); }
.meta-author-input::placeholder { color: #2a2520; }
.meta-logline-input {
  color: #6a6058; font-size: .8rem; line-height: 1.65;
  resize: none; overflow: hidden; min-height: 2em;
}
.meta-logline-input:focus { border-bottom-color: rgba(106,96,88,.25); }
.meta-logline-input::placeholder { color: #2a2520; }

/* ===================================================================
   Character section — compact cards + side panel
   =================================================================== */
#character-editor { margin-top: .25rem; }

/* Flex layout: card column | resize handle | detail panel */
/* align-items: stretch so the resize handle fills the row height */
.char-layout { display: flex; align-items: stretch; }
.char-col    { flex: 1; min-width: 0; padding-right: 1rem; }

/* Resize handle — identical behaviour to #panel-resize-handle */
#char-panel-resize-handle {
  flex-shrink: 0;
  width: 5px;
  background: #1a1614;
  cursor: col-resize;
  transition: background .15s;
}
#char-panel-resize-handle:hover,
#char-panel-resize-handle.is-dragging { background: #3a3028; }

/* Character panel — overflow: visible so Quill bubble tooltip is never clipped */
#character-panel {
  flex-shrink: 0;
  width: 340px; min-width: 200px; max-width: 600px;
  background: #100e0c;
  border-left: 1px solid #2a2520;
  padding: 1.25rem 1.5rem;
  opacity: 0; transform: translateX(14px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  overflow: visible;
  position: sticky; top: 0; align-self: flex-start;
}
#character-panel.is-open {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}

/* Quill bubble tooltip — above everything */
.ql-bubble .ql-tooltip { z-index: 9999; }

/* Responsive grid of compact character cards */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .6rem;
}

.char-card {
  background: #1A1410;
  border: 1px solid #2a2520;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
  padding: .7rem .9rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  /* drag affordance cursor on the card edge */
  user-select: none;
}
.char-card:hover    { border-color: #3a3028; background: #1e1814; }
.char-card.is-active { border-color: #D4A853; background: #1e1a10; }

/* Drag-and-drop states */
.char-card.dragging  { opacity: .35; border-style: dashed; }
.char-card.drag-over {
  border-color: #D4A853;
  background: #1a1608;
  box-shadow: inset 0 0 0 1px #3a2e10;
}

.char-row-name  {
  color: #F0E8D8; font-size: .88rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-row-alias {
  color: #6a6058; font-size: .72rem; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.char-row-role  {
  color: #C4411C; font-size: .62rem; margin-top: .12rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Panel fields (name/alias/role inputs inside #character-panel) */
.char-panel-fields { margin: .75rem 0 .85rem; }

.char-field-name {
  display: block; width: 100%;
  background: transparent; border: none; outline: none;
  font-family: inherit; padding: 0; margin-bottom: .2rem;
  color: #F0E8D8; font-size: 1rem; font-weight: 700; line-height: 1.2;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.char-field-name:focus { border-bottom-color: rgba(240,232,216,.12); }
.char-field-name::placeholder { color: #2a2520; }

.char-field-alias {
  display: block; width: 100%;
  background: transparent; border: none; outline: none;
  font-family: inherit; padding: 0; margin-bottom: .15rem;
  color: #6a6058; font-size: .78rem; font-style: italic;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.char-field-alias:focus { border-bottom-color: rgba(106,96,88,.2); }
.char-field-alias::placeholder { color: #2a2520; }

.char-field-role {
  display: block; width: 100%;
  background: transparent; border: none; outline: none;
  font-family: inherit; padding: 0;
  color: #C4411C; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.char-field-role:focus { border-bottom-color: rgba(196,65,28,.2); }
.char-field-role::placeholder { color: #3a2018; }

/* Quill editor surface inside character panel */
#char-quill-editor {
  background: transparent;
  border-bottom: 1px solid #2a2520;
  min-height: 6em;
  font-size: .93rem;
  line-height: 1.75;
  color: #C0B8B0;
}
#char-quill-editor .ql-editor {
  padding: .4rem 0;
  color: #C0B8B0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: .93rem;
  line-height: 1.75;
}
#char-quill-editor .ql-editor.ql-blank::before {
  color: #2a2520; font-style: italic; left: 0;
}
/* Quill editor for chapter summaries (in #detail-panel).
   Quill adds .ql-container directly to the target element, so #pan-summary-quill
   IS the .ql-container. Rules targeting "#pan-summary-quill .ql-container" never
   match. Override height and border here on the element itself. */
#pan-summary-quill {
  background: transparent;
  border-bottom: 1px solid #2a2520;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: .9rem;
  height: auto !important;
}
#pan-summary-quill .ql-editor {
  height: auto !important;
  overflow-y: visible !important;
  padding: .4rem 0;
  min-height: 4em;
  color: #C0B8B0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: .93rem;
  line-height: 1.8;
}
#pan-summary-quill .ql-editor.ql-blank::before {
  color: #2a2520; font-style: italic; left: 0;
}
/* h2/h3 headings inside chapter summaries */
#pan-summary-quill .ql-editor h2 {
  color: #D4A853; font-size: .88rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 1em 0 .3em; font-family: system-ui, sans-serif;
}
#pan-summary-quill .ql-editor h3 {
  color: #8a8078; font-size: .82rem; font-weight: 600;
  margin: .8em 0 .25em; font-family: system-ui, sans-serif;
}

/* Bubble toolbar — dark theme */
.ql-bubble .ql-toolbar        { background: #1e1c18; border-radius: 6px; }
.ql-bubble .ql-stroke          { stroke: #B8AFA3; }
.ql-bubble .ql-fill            { fill:   #B8AFA3; }
.ql-bubble .ql-picker-label    { color: #B8AFA3; }

/* Panel actions row */
.char-panel-actions {
  margin-top: 1rem;
  display: flex; justify-content: flex-end;
}

.char-remove-btn {
  background: none; border: 1px solid #2a1818; border-radius: 3px;
  color: #5a3030; font-size: .7rem; padding: .18em .6em; cursor: pointer;
  transition: color .1s, border-color .1s;
}
.char-remove-btn:hover { color: #d46060; border-color: #5a3030; }

.sc-add-btn {
  margin-top: .7rem; background: #140f0c;
  border: 1px dashed #2a2520; border-radius: 6px;
  color: #4a4038; font-size: .8rem; padding: .45em 1.1em;
  cursor: pointer; transition: color .1s, border-color .1s; width: 100%;
}
.sc-add-btn:hover { color: #D4A853; border-color: #4a4038; }

/* ===================================================================
   JSON editor
   =================================================================== */
.json-editor-wrap { margin-top: 2.2rem; }
.json-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .55rem; flex-wrap: wrap;
}
.json-status { font-size: .76rem; padding: .18em .55em; border-radius: 3px; }
.json-status:empty { display: none; }
.json-status--valid   { background: #0d2a1a; color: #5db87a; border: 1px solid #1e4a2e; }
.json-status--error   { background: #2a0d0d; color: #d46060; border: 1px solid #4a1e1e; }
.json-status--success { background: #1a1f0d; color: #a8c45a; border: 1px solid #3a4a1e; }
.json-buttons { display: flex; gap: .45rem; }
.json-btn {
  padding: .35em .9em; border-radius: 4px; font-size: .8rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: background .12s; white-space: nowrap;
}
.json-btn-secondary { background: #1A1410; color: #B8AFA3; border-color: #2a2520; }
.json-btn-secondary:hover { background: #221a10; color: #F0E8D8; }
.json-btn-primary { background: #8B2E15; color: #F0E8D8; border-color: #8B2E15; }
.json-btn-primary:hover { background: #a33519; }
.json-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.json-textarea {
  display: block; width: 100%; min-height: 400px; max-height: 65vh;
  padding: .85rem 1rem; background: #0d0b0a;
  border: 1px solid #2a2520; border-radius: 6px; color: #C0B8B0;
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-size: .76rem; line-height: 1.6; resize: vertical; outline: none;
  tab-size: 2; white-space: pre; overflow: auto; transition: border-color .15s;
}
.json-textarea:focus      { border-color: #3a3028; }
.json-textarea.is-invalid { border-color: #4a1e1e; }
.json-textarea.is-valid   { border-color: #1e4a2e; }
.json-schema-hint { margin-top: .5rem; font-size: .69rem; color: #3a3028; line-height: 1.7; }
.json-schema-hint code { color: #5a4838; font-family: monospace; }

/* ===================================================================
   Add Chapter modal
   =================================================================== */
#modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .18s;
}
#modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
#add-chapter-modal {
  background: #1A1410; border: 1px solid #3a3028; border-radius: 8px;
  padding: 1.4rem; width: min(400px, calc(100vw - 3rem));
  display: flex; flex-direction: column; gap: .9rem;
}
.modal-title  { font-size: .95rem; font-weight: 600; color: #D4A853; }
.modal-field  { display: flex; flex-direction: column; gap: .2rem; }
.modal-label  { font-size: .72rem; color: #6a6058; }
.modal-input, .modal-select {
  background: #0d0b0a; border: 1px solid #2a2520; border-radius: 4px;
  color: #F0E8D8; font-family: inherit; font-size: .88rem;
  padding: .32em .5em; outline: none; transition: border-color .1s;
}
.modal-input:focus, .modal-select:focus { border-color: #4a4038; }
.modal-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.modal-cancel  {
  background: none; border: 1px solid #2a2520; border-radius: 4px;
  color: #5a5048; font-size: .8rem; padding: .3em .85em; cursor: pointer;
}
.modal-cancel:hover { color: #B8AFA3; }
.modal-confirm {
  background: #8B2E15; border: 1px solid #8B2E15; border-radius: 4px;
  color: #F0E8D8; font-size: .8rem; font-weight: 600; padding: .3em .85em; cursor: pointer;
}
.modal-confirm:hover { background: #a33519; }

/* ===================================================================
   Loading / error states
   =================================================================== */
.sc-loading    { padding: 3rem; text-align: center; color: #3a3028; font-size: .9rem; }
.sc-load-error { padding: 2rem; color: #d46060; font-size: .88rem; line-height: 1.8; }

/* ===================================================================
   SVG drag cursors
   =================================================================== */
#story-svg .ch-node { cursor: grab; }
#story-svg .ch-node:active { cursor: grabbing; }

/* ===================================================================
   Tooltip stacking divider
   =================================================================== */
.fw-tt-divider {
  border-top: 1px solid #2a2520;
  margin: .55rem 0 .45rem;
}

/* ===================================================================
   Save/download button
   =================================================================== */
/* Matches .json-btn height/padding so it sits flush in the button row */
.json-save-btn {
  padding: .35em .9em;
  background: #1a1614;
  border: 1px solid #2a2520;
  border-radius: 4px;
  color: #6a6058;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.json-save-btn:hover { color: #D4A853; border-color: #4a4038; }

/* ===================================================================
   Section panel — analysis + craft quotes (rendered in #detail-panel)
   =================================================================== */

.panel-section-analysis {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: .96rem;
  line-height: 1.8;
  color: #C0B8B0;
  margin-bottom: .5rem;
}

.sq-quote {
  border-left: 2px solid #2a2520;
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}
.sq-quote:last-child { margin-bottom: 0; }

.sq-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: .96rem; line-height: 1.75;
  color: #C0B8B0;
  margin-bottom: .3rem;
}

.sq-attribution { font-size: .7rem; color: #5a5048; }
.sq-author { font-style: normal; color: #8a8078; font-weight: 600; }
.sq-work   { color: #4a4038; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 820px) {
  #planning-layout {
    flex-direction: column;
  }
  #panel-resize-handle { display: none; }
  #detail-panel {
    width: 100% !important;
    max-width: 100%;
    position: static;
    border-left: none;
    border-top: 1px solid #2a2520;
    max-height: none;
    transform: translateY(10px);
  }
  #detail-panel.is-open { transform: translateY(0); }
  .char-layout { flex-direction: column; }
  #char-panel-resize-handle { display: none; }
  #character-panel {
    width: 100% !important; max-width: 100%;
    position: static; border-left: none; border-top: 1px solid #2a2520;
    max-height: none; transform: translateY(10px);
  }
  #character-panel.is-open { transform: translateY(0); }
  .json-toolbar { flex-direction: column; align-items: flex-start; }
}