/* ================================================================
   WORD SEARCH — STORY
   Layout + visual language aligned with SENTENCE WS
   (shared theme tokens, centered wrap, pill tabs, panels)
===================================================================*/

/* ---------------------------------------------------------------
   1) DESIGN TOKENS (DARK base; LIGHT via [data-theme="light"])
---------------------------------------------------------------- */
:root{
  /* Story-specific token (used by JS for hidden sentence) */
  --hidden-sentence-color: #7aa2ff;

  /* Base palette (Dark) – copied from Sentence WS */
  --bg:        #0f1220;
  --ink:       #e7ecff;
  --ink-dim:   #aab2d8;
  --line:      #262a45;
  --lineTopbar:#dcdcdc;
  --divider:   color-mix(in srgb, var(--line), white 65%);

  --card:      #374151;
  --panel-bg:  var(--card);
  --tabs-strip: rgba(255,255,255,0.04);

  --accent:    #7aa2ff;
  --accent-2:  #42d392;

  --radius:    14px;
  --pad:       14px;
  --gap:       16px;
  --wrap-max:  1000px;

  --ui:   system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tabs/chips (Dark) */
  --tab-bg:        #0b0e1b;
  --tab-ink:       var(--ink-dim);
  --tab-border:    #222645;
  --tab-active-bg: #1d2344;

  /* Status / preview boxes */
  --status-bg:   #0b0e1b;
  --status-line: #2b2f54;
  --preview-line:#222645;

  /* Busy overlay (not used yet but kept for future parity) */
  --veil:    rgba(0,0,0,0.6);
  --busy-bg: #0b0f19;

  /* Tabs padding in headers */
  --tabs-pad-bottom: 10px;
}

:root[data-theme="light"]{
  --hidden-sentence-color: #3e3e3e;

  --bg:        #ffffff;
  --ink:       #0f172a;
  --ink-dim:   #64748b;
  --line:      #e2e8f0;
  --lineTopbar:#a8a8a8;
  --divider:   #cbd5e1;

  --card:      #ffffff;
  --panel-bg:  #f8fafc;
  --tabs-strip:#eef2f7;

  --tab-bg:        #f3f4f6;
  --tab-ink:       #334155;
  --tab-border:    var(--line);
  --tab-active-bg: #ffffff;

  --status-bg:   #ffffff;
  --status-line: #d1d5db;
  --preview-line:#d1d5db;

  --veil:    rgba(0,0,0,0.25);
  --busy-bg: #ffffff;
}

/* ---------------------------------------------------------------
   2) RESET + BASE
---------------------------------------------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.35 var(--ui);
}

/* Small helpers */
.small{ font-size:12px; opacity:0.85; }
.sublabel{ font-size:12px; opacity:0.8; }

/* ---------------------------------------------------------------
   3) TOPBAR (same feel as Sentence WS)
---------------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--lineTopbar);
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 88%, transparent)
  );
  backdrop-filter:blur(6px);
  max-width:min(92vw, var(--wrap-max));
  margin-inline:auto;
  padding-inline:24px;
}
.topbar h1{
  margin:0;
  font:600 18px/1 var(--ui);
  letter-spacing:.2px;
}
.spacer{ flex:1; }

/* ---------------------------------------------------------------
   4) MAIN LAYOUT — centered wrap, 2 columns
---------------------------------------------------------------- */
.wrap{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:var(--gap);
  padding:24px;
  max-width:var(--wrap-max);
  margin:0 auto 24px auto;
}
.controls,
.stage{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* Responsive stacking */
@media (max-width: 980px){
  .wrap{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------
   5) PANELS, GROUPS, GRID
---------------------------------------------------------------- */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.panel h3{
  margin:0 0 8px;
  font:600 14px/1 var(--ui);
}
.panel h4{
  margin:6px 0 8px;
  font:600 12px/1 var(--ui);
  color:var(--ink);
  opacity:.85;
}

.group{ margin:10px 0; }
.row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.grid{
  display:grid;
  gap:10px;
}
.grid.two{ grid-template-columns:1fr 1fr; }
.grid.four{ grid-template-columns:repeat(4,1fr); }

/* ---------------------------------------------------------------
   6) INPUTS
---------------------------------------------------------------- */
label{
  display:block;
  color:var(--ink-dim);
  margin-bottom:6px;
}
input[type="text"],
input[type="number"],
input[type="file"],
textarea,
select{
  width:100%;
  background:#0b0e1b;
  color:var(--ink);
  border:1px solid var(--tab-border);
  border-radius:10px;
  padding:8px 10px;
  font:13px/1.2 var(--ui);
}
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="file"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  background:#ffffff;
  color:var(--ink);
  border:1px solid var(--status-line);
}
textarea{ resize:vertical; }

/* ---------------------------------------------------------------
   7) BUTTONS + CHIPS
---------------------------------------------------------------- */
.btn{
  background:#212644;
  border:1px solid #2e3563;
  color:var(--ink);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font:13px/1 var(--ui);
}
.btn:hover{ border-color:#3b4582; }
.btn.primary{
  background:linear-gradient(180deg,#2e5bff,#2547c9);
  border-color:#2547c9;
  color:#fff;
}
:root[data-theme="light"] .btn{
  background:#ffffff;
  border:1px solid #cfd8ea;
  color:var(--ink);
}

/* Chip-style toggles */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--tab-bg);
  color:var(--ink);
  border:1px solid var(--tab-border);
  font:12px/1 var(--ui);
  white-space:nowrap;
}
.chip.small{ padding:4px 8px; }
.chip input{ accent-color:var(--accent); }

/* Toolbar for formats etc. */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.toolbar.nowrap-chips{ flex-wrap:wrap; }

/* ---------------------------------------------------------------
   8) TABS (generic, shared)
---------------------------------------------------------------- */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}
.tabs.small{ gap:8px; }

.tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--tab-ink);
  text-decoration:none;
  font:500 13px/1.2 var(--ui);
  cursor:pointer;
  user-select:none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.tab:hover{
  background:color-mix(in srgb, var(--tab-active-bg) 35%, transparent);
}
.tab.active{
  background:var(--tab-active-bg);
  color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 70%, var(--tab-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 1px 2px rgba(15,23,42,0.12);
  font-weight:600;
}

/* LEFT tabs header – mimic Sentence WS .panel-tabs */
.panel.panel-tabs{
  padding:8px 12px var(--tabs-pad-bottom);
  margin-bottom:0;
  background:var(--tabs-strip);
  border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
}
.panel.panel-tabs .tabs{
  margin:0;
  padding:0;
}

/* Make our #sidebarTabs act as header; panels attach flush */
#sidebarPanels .panel{
  margin-top:0;
}
#sidebarTabs + #sidebarPanels .panel{
  border-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}

/* RIGHT preview tabs */
#previewTabs{
  padding:8px 12px var(--tabs-pad-bottom);
  margin-bottom:0;
  background:var(--tabs-strip);
  border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
}
#previewTabs .tab{ padding:6px 12px; }

/* ---------------------------------------------------------------
   9) TAB PANES SHOW/HIDE
---------------------------------------------------------------- */
#sidebarPanels .panel{ display:none; }
#sidebarPanels .panel.active{ display:block; }

#previewPanels .prevPanel{ display:none; }
#previewPanels .prevPanel.active{ display:block; }

/* ---------------------------------------------------------------
   10) STATUS + PREVIEW BOXES
---------------------------------------------------------------- */
.status{
  padding:8px 10px;
  border-radius:10px;
  background:var(--status-bg);
  color:var(--ink);
  border:1px dashed var(--status-line);
  font:12px/1.3 var(--mono);
  white-space:pre-wrap;
}
.status.small{
  font-size:11px;
}

.svgBox{
  background:var(--card);
  border:1px dashed var(--preview-line);
  border-radius:10px;
  min-height:420px;
  padding:12px;
  overflow:auto;
}
.svgBox svg{
  display:block;
  max-width:100%;
  height:auto;
}

/* ---------------------------------------------------------------
   11) CSV DROP ZONE
---------------------------------------------------------------- */
#dropCsv{
  display:block;
  padding:10px;
  border:1px dashed var(--status-line);
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  background:var(--status-bg);
}
#dropCsv.dragover{
  outline:2px dashed var(--accent);
  background-color:rgba(37,99,235,0.04);
}
#fileCsv{ display:none; }

/* ---------------------------------------------------------------
   12) FOOTER + NOTES
---------------------------------------------------------------- */
#appFooter{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:8px 24px 16px 24px;
  font-size:12px;
  color:var(--ink-dim);
  border-top:1px solid var(--line);
  background:var(--tabs-strip);
  display:flex;
  justify-content:space-between;
}
#notes{
  max-width:var(--wrap-max);
  margin:8px auto 16px auto;
  padding:0 24px;
  font-size:12px;
  color:var(--ink-dim);
}

/* ---------------------------------------------------------------
   13) STORY-SPECIFIC BITS
---------------------------------------------------------------- */

/* Story block (if you show the full story above grid later) */
.story-block{
  font-size:15px;
  line-height:1.45;
  margin-bottom:24px;
  color:var(--ink);
}

/* Ensure previewArea doesn't force horizontal scroll */
#previewArea{ min-width:0; }

/* Keep sidebar tab labels on one line where possible */
#sidebarTabs .tabBtn{ white-space:nowrap; }

/* Bubble controls visibility */
#bubbleControls{ display:none; }
#bubbleControls.active{ display:block; }