/* ============================================================================
 * Story So Far — Campaign Timeline (deploy143 redesign)
 * Scoped under .st-app. Three-column builder: filters | timeline | edit panel.
 * ==========================================================================*/
.st-app{
  --st-gold:var(--cx-accent); --st-gold-soft:var(--cx-accent-deep); --st-ink:var(--cx-bg);
  --st-line:color-mix(in srgb,var(--cx-accent) 22%,transparent); --st-line-2:color-mix(in srgb,var(--cx-accent) 14%,transparent);
  --st-text:var(--cx-text); --st-dim:var(--cx-text-dim); --st-faint:var(--cx-accent-dim);
  --st-panel:color-mix(in srgb,var(--cx-field) 55%,transparent); --st-panel-2:color-mix(in srgb,var(--cx-surface) 60%,transparent);
  --st-red:var(--cx-danger); --st-green:var(--cx-success); --st-purple:#a86cc8; --st-blue:#5b93c8; --st-teal:#4fae9b;
  display:grid; grid-template-columns:262px minmax(0,1fr) 0; gap:22px;
  align-items:start; color:var(--st-text); font-family:'EB Garamond',Georgia,serif;
}
.st-app.st-editing{ grid-template-columns:262px minmax(0,1fr) 352px; }
.st-app *{ box-sizing:border-box; }

/* ---- shared bits -------------------------------------------------------- */
.st-app .st-eyebrow{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--st-gold-soft); }
.st-app .st-btn{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; cursor:pointer;
  color:var(--st-text); background:color-mix(in srgb,var(--cx-accent) 6%,transparent); border:1px solid var(--st-line); transition:background .15s,border-color .15s,color .15s; }
.st-app .st-btn:hover{ background:color-mix(in srgb,var(--cx-accent) 13%,transparent); border-color:var(--st-gold-soft); }
.st-app .st-btn.st-primary{ color:var(--st-ink); background:linear-gradient(180deg,var(--cx-accent),var(--cx-accent-deep));
  border-color:var(--cx-accent); font-weight:600; box-shadow:0 2px 10px color-mix(in srgb,var(--cx-accent-deep) 25%,transparent); }
.st-app .st-btn.st-primary:hover{ filter:brightness(1.06); }
.st-app .st-btn.st-danger{ color:var(--cx-danger); border-color:color-mix(in srgb,var(--cx-danger) 45%,transparent); background:color-mix(in srgb,var(--cx-danger) 8%,transparent); }
.st-app .st-btn.st-danger:hover{ background:color-mix(in srgb,var(--cx-danger) 16%,transparent); border-color:var(--st-red); }
.st-app .st-btn-ghost{ border:0; background:none; color:var(--st-dim); padding:6px 8px; cursor:pointer; font-size:15px; border-radius:6px; }
.st-app .st-btn-ghost:hover{ color:var(--st-text); background:color-mix(in srgb,var(--cx-text-strong) 5%,transparent); }
.st-app .st-input,.st-app .st-select,.st-app .st-textarea{
  width:100%; font-family:'EB Garamond',serif; font-size:14px; color:var(--st-text);
  background:rgba(0,0,0,.28); border:1px solid var(--st-line); border-radius:8px; padding:9px 11px; }
.st-app .st-input:focus,.st-app .st-select:focus,.st-app .st-textarea:focus{ outline:none; border-color:var(--st-gold-soft); }
.st-app .st-select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--st-dim) 50%),linear-gradient(135deg,var(--st-dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
.st-app .st-label{ display:block; font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--st-dim); margin:0 0 6px; }

/* ---- left sidebar ------------------------------------------------------- */
.st-side{ position:sticky; top:8px; display:flex; flex-direction:column; gap:20px;
  border:1px solid var(--st-line); border-radius:14px; background:var(--st-panel); padding:20px 18px; }
.st-side-title{ font-family:'Cinzel',serif; font-size:19px; letter-spacing:.03em; color:var(--st-gold); line-height:1.15; }
.st-side-sub{ font-size:13.5px; color:var(--st-dim); margin-top:5px; line-height:1.4; }
.st-side .st-add{ width:100%; justify-content:center; padding:11px; }
.st-side-group{ display:flex; flex-direction:column; gap:9px; }
.st-side-group + .st-side-group{ padding-top:18px; border-top:1px solid var(--st-line-2); }
.st-group-label{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--st-gold-soft); margin-bottom:2px; }
.st-view-btn{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-family:'EB Garamond',serif; font-size:14px;
  color:var(--st-text); background:none; border:1px solid transparent; border-radius:9px; padding:9px 11px; cursor:pointer; transition:background .15s,border-color .15s; }
.st-view-btn:hover{ background:color-mix(in srgb,var(--cx-text-strong) 4%,transparent); }
.st-view-btn.active{ background:color-mix(in srgb,var(--cx-accent) 12%,transparent); border-color:var(--st-line); color:var(--st-gold); }
.st-view-btn svg{ width:16px; height:16px; flex:0 0 auto; opacity:.85; }
.st-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--st-text); cursor:pointer; padding:2px 0; }
.st-check input{ width:15px; height:15px; accent-color:var(--st-gold); }
.st-quick{ display:flex; flex-wrap:wrap; gap:7px; }
.st-quick-tag{ font-family:'EB Garamond',serif; font-size:12.5px; color:var(--st-text); background:rgba(0,0,0,.25);
  border:1px solid var(--st-line); border-radius:7px; padding:4px 11px; cursor:pointer; transition:all .15s; }
.st-quick-tag:hover{ border-color:var(--st-gold-soft); }
.st-quick-tag.on{ color:var(--st-ink); font-weight:600; }
.st-export{ width:100%; justify-content:center; margin-top:2px; }

/* ---- center: toolbar + timeline ---------------------------------------- */
.st-center{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.st-viewbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.st-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--st-line); border-radius:12px; background:var(--st-panel); padding:12px 16px; }
.st-tb-title{ font-family:'Cinzel',serif; font-size:17px; color:var(--st-text); margin-right:auto; }
.st-range{ display:inline-flex; align-items:center; gap:8px; }
.st-range .st-eyebrow{ letter-spacing:.1em; }
.st-range select{ width:auto; min-width:96px; padding:7px 30px 7px 11px; font-size:13px; }
.st-tb-actions{ display:flex; gap:8px; }
.st-tb-actions .st-btn{ padding:7px 12px; }

/* ---- timeline view ------------------------------------------------------ */
.st-list{ position:relative; padding:4px 0 4px 0; }
.st-spine{ position:absolute; left:31px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,transparent,var(--st-line) 6%,var(--st-line) 94%,transparent); }
.st-event{ position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:start; margin-bottom:14px; }
.st-node{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:center; padding-top:18px; }
.st-node-ring{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--st-ink); border:2px solid var(--nodec,var(--st-gold-soft)); box-shadow:0 0 0 4px color-mix(in srgb,var(--cx-field) 90%,transparent),0 0 14px -2px var(--nodec,transparent); }
.st-node-ring svg{ width:21px; height:21px; color:var(--nodec,var(--st-gold)); }
.st-card{ border:1px solid var(--st-line); border-radius:12px; background:var(--st-panel-2);
  padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; transition:border-color .15s,box-shadow .15s; cursor:pointer; }
.st-card:hover{ border-color:color-mix(in srgb,var(--cx-accent) 40%,transparent); }
.st-event.sel .st-card{ border-color:var(--st-gold); box-shadow:0 0 0 1px var(--st-gold),0 8px 24px rgba(0,0,0,.4); }
.st-card-session{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--st-gold-soft); }
.st-card-title{ font-family:'Cinzel',serif; font-size:20px; color:var(--st-text); line-height:1.2; margin:3px 0 8px; }
.st-card-desc{ font-size:14.5px; color:var(--cx-accent-bright); line-height:1.55; max-width:60ch; }
.st-card-meta{ grid-column:2; grid-row:1/3; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:118px; }
.st-card-date{ font-family:'Cinzel',serif; font-size:13px; color:var(--st-text); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.st-card-loc{ font-size:13.5px; color:var(--st-dim); font-style:italic; }
.st-secret-eye{ opacity:.6; }
.st-card-tags{ grid-column:1; display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.st-tag{ font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.04em; padding:3px 10px; border-radius:6px; text-transform:none; border:1px solid transparent; }
.st-card-dots{ grid-column:2; grid-row:1/3; }
.st-menu-btn{ position:absolute; top:12px; right:12px; }
.st-card-wrap{ position:relative; }
.st-collapsed .st-card-desc,.st-collapsed .st-card-tags{ display:none; }
.st-secret-badge{ display:inline-flex; align-items:center; gap:5px; font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#c98fbf; margin-top:4px; }

/* list view */
.st-app.view-list .st-spine,.st-app.view-list .st-node{ display:none; }
.st-app.view-list .st-event{ grid-template-columns:1fr; margin-bottom:9px; }
.st-app.view-list .st-card{ padding:12px 16px; }
.st-app.view-list .st-card-title{ font-size:16px; margin:2px 0 4px; }
.st-app.view-list .st-collapsed .st-card-desc{ display:block; -webkit-line-clamp:1; }

/* calendar view */
.st-cal-group{ margin-bottom:20px; }
.st-cal-head{ font-family:'Cinzel',serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--st-gold-soft);
  padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--st-line); }

.st-add-here{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:6px;
  border:1px dashed var(--st-line); border-radius:12px; background:none; color:var(--st-dim);
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:15px; cursor:pointer; transition:all .15s; }
.st-add-here:hover{ border-color:var(--st-gold-soft); color:var(--st-gold); background:color-mix(in srgb,var(--cx-accent) 4%,transparent); }
.st-empty{ text-align:center; color:var(--st-dim); font-style:italic; padding:50px 20px; }

/* ---- right: edit panel -------------------------------------------------- */
.st-edit{ position:sticky; top:8px; border:1px solid var(--st-line); border-radius:14px; background:var(--st-panel);
  padding:18px; display:none; flex-direction:column; gap:15px; max-height:calc(100vh - 24px); overflow:auto; }
.st-app.st-editing .st-edit{ display:flex; }
.st-edit-head{ display:flex; align-items:center; justify-content:space-between; }
.st-edit-head h3{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--st-gold); margin:0; }
.st-field{ display:flex; flex-direction:column; }
.st-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.st-loc-row{ display:flex; gap:7px; }
.st-loc-row .st-select{ flex:1; }
.st-icon-add{ flex:0 0 auto; width:38px; padding:0; justify-content:center; }
.st-rt-toolbar{ display:flex; gap:2px; border:1px solid var(--st-line); border-bottom:0; border-radius:8px 8px 0 0; padding:5px 6px; background:rgba(0,0,0,.2); }
.st-rt-toolbar button{ width:28px; height:26px; border:0; background:none; color:var(--st-dim); border-radius:5px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }
.st-rt-toolbar button:hover{ background:color-mix(in srgb,var(--cx-text-strong) 7%,transparent); color:var(--st-text); }
.st-rt{ min-height:104px; border-radius:0 0 8px 8px; font-family:'EB Garamond',serif; font-size:14px; line-height:1.5; }
.st-rt:focus{ border-color:var(--st-gold-soft); }
.st-taglist{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.st-tag-chip{ display:inline-flex; align-items:center; gap:6px; font-family:'Cinzel',serif; font-size:10.5px; padding:4px 8px 4px 10px; border-radius:6px; border:1px solid transparent; }
.st-tag-chip button{ border:0; background:none; color:inherit; cursor:pointer; opacity:.7; font-size:12px; line-height:1; padding:0; }
.st-tag-chip button:hover{ opacity:1; }
.st-tag-add{ font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.03em; color:var(--st-dim); border:1px dashed var(--st-line); background:none; border-radius:6px; padding:4px 10px; cursor:pointer; }
.st-tag-add:hover{ color:var(--st-gold); border-color:var(--st-gold-soft); }
.st-img-row{ display:flex; align-items:center; gap:10px; }
.st-img-thumb{ width:56px; height:42px; border-radius:6px; object-fit:cover; border:1px solid var(--st-line); background:rgba(0,0,0,.3); }
.st-img-thumb.empty{ display:flex; align-items:center; justify-content:center; color:var(--st-faint); font-size:16px; }
.st-notes{ background:color-mix(in srgb,var(--cx-danger) 5%,transparent); border-color:color-mix(in srgb,var(--cx-danger) 28%,transparent); }
.st-edit-actions{ display:flex; gap:10px; padding-top:6px; border-top:1px solid var(--st-line-2); margin-top:2px; }
.st-edit-actions .st-btn{ flex:1; justify-content:center; }
.st-edit-note{ font-size:12.5px; color:var(--st-dim); font-style:italic; }
.st-status{ font-size:12px; color:var(--st-dim); min-height:14px; }
.st-status.err{ color:var(--st-red); }

/* dropdown menu */
.st-popmenu{ position:absolute; z-index:40; min-width:158px; background:var(--cx-surface); border:1px solid var(--st-line);
  border-radius:9px; box-shadow:0 12px 30px rgba(0,0,0,.55); padding:5px; }
.st-popmenu button{ display:block; width:100%; text-align:left; font-family:'EB Garamond',serif; font-size:13.5px; color:var(--st-text);
  background:none; border:0; border-radius:6px; padding:8px 11px; cursor:pointer; }
.st-popmenu button:hover{ background:color-mix(in srgb,var(--cx-accent) 10%,transparent); }
.st-popmenu button.danger{ color:var(--cx-danger); }

@media(max-width:1180px){
  .st-app,.st-app.st-editing{ grid-template-columns:1fr; }
  .st-side{ position:static; }
  .st-edit{ position:static; max-height:none; }
}

/* deploy145 (#3): linked-session badge on timeline cards */
.st-sess-link{color:var(--st-gold-soft);text-decoration:none;border-bottom:1px dotted var(--st-gold-soft);cursor:pointer}
.st-sess-link:hover{color:var(--st-gold);border-bottom-color:var(--st-gold)}