/* Journeys — styles
 *
 * Restraint. Notebook-like, not dashboard. Quiet typography.
 */

:root {
  --bg: #f7f5ef;
  --bg-sidebar: #f1eee6;
  --fg: #2a2a2a;
  --muted: #8a8a8a;
  --border: #e0dcd1;
  --accent: #5a5048;
  --accent-hover: #6a5e54;
  --icon: #a89e8a;
  --active-bg: rgba(0, 0, 0, 0.05);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --error: #8a3a3a;
  --close-hover: #b94a44;
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-bg-hover: rgba(255, 255, 255, 0.85);
  --input-bg: #fdfcf8;
  --accent-text: #fff;
  --details-bg: rgba(0, 0, 0, 0.018);
  --titlebar-height: 36px;
  /* Comfortable reading width for prose. The main pane itself fills the
   * window; only flowed text caps at this width for readability. Lists,
   * accordions, chat views, etc. fill the pane. */
  --reading-width: 840px;
}

/* Dark theme — warm, low-contrast, matched to the notebook feel.
 * Background is a deep warm brown (think old leather / candlelit study),
 * foreground a warm cream, accent a soft amber-tan. Same serif typography.
 */
:root[data-theme="dark"] {
  --bg: #1f1a16;
  --bg-sidebar: #261f1a;
  --fg: #e8dfd0;
  --muted: #8a7f70;
  --border: #3a322b;
  --accent: #d4c5ae;
  --accent-hover: #e6d7c0;
  --icon: #a89980;
  --active-bg: rgba(255, 255, 255, 0.05);
  --hover-bg: rgba(255, 255, 255, 0.03);
  --error: #c97a72;
  --close-hover: #a64338;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-bg-hover: rgba(255, 255, 255, 0.07);
  --input-bg: #2a221c;
  --accent-text: #1f1a16;
  --details-bg: rgba(255, 255, 255, 0.03);
}

* { box-sizing: border-box; }

/* Scrollbars — themed via CSS vars so they switch with light/dark.
 * Webkit selectors are what the Tauri WebView uses; firefox fallback via
 * scrollbar-color for completeness. Thin, quiet, matching the notebook feel.
 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-sidebar);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--bg-sidebar);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}
::-webkit-scrollbar-corner {
  background: var(--bg-sidebar);
}
* {
  scrollbar-color: var(--border) var(--bg-sidebar);
  scrollbar-width: thin;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

body {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Titlebar */
#titlebar {
  height: var(--titlebar-height);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex: 1;
}

.titlebar-icon {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 19px;
  line-height: 1;
  color: var(--icon);
  padding-bottom: 2px;
  pointer-events: none;
}

.titlebar-controls {
  display: flex;
  height: 100%;
}

.titlebar-controls button {
  width: 46px;
  height: 100%;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 80ms ease, color 80ms ease;
}

.titlebar-controls button:hover {
  background: var(--hover-bg);
  color: var(--accent);
}

#win-close:hover {
  background: var(--close-hover);
  color: #fff;
}

#theme-toggle {
  font-size: 15px;
  color: var(--icon);
}
#theme-toggle:hover {
  color: var(--accent);
}

/* App body */
#app {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  overflow: hidden;
}

/* Sidebar */
#sidebar {
  padding: 28px 20px 20px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#brand h1 {
  margin: 0 0 28px;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--accent);
  text-transform: uppercase;
}

.sidebar-brand {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.sidebar-brand:hover h1 {
  color: var(--accent-hover);
}
.sidebar-brand.active h1 {
  color: var(--accent-hover);
  font-weight: bold;
}

/* Orientation front page */
.orientation-page {
  max-width: 720px;
}
.orientation-header {
  margin-bottom: 28px;
}
.orientation-body {
  margin-bottom: 48px;
}
.orientation-here {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.orientation-here h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.orientation-here-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.orientation-here-card {
  font-family: inherit;
  font-size: 15px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.orientation-here-card:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}

.sidebar-section {
  margin-bottom: 22px;
}

/* Sidebar footer (Workshop link + last-import indicator) */
.sidebar-footer {
  margin-top: auto;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
}
.sidebar-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 10px 14px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  transition: color 80ms ease;
}
.sidebar-link:hover { color: var(--accent); }
.sidebar-link.active { color: var(--accent); font-weight: bold; }
.sidebar-footer .status-label {
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin: 0 10px 4px;
}
.sidebar-footer .status-value {
  font-size: 12px;
  color: var(--fg);
  margin: 0 10px;
}

.sidebar-heading {
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin: 0 0 6px 10px;
}

#instances,
#letters-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#instances button,
#letters-nav button,
#shared-nav button {
  background: none;
  border: none;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  border-radius: 3px;
  transition: background 80ms ease;
}

#instances button:hover,
#letters-nav button:hover,
#shared-nav button:hover { background: var(--hover-bg); }
#instances button.active,
#letters-nav button.active,
#shared-nav button.active { background: var(--active-bg); }

#shared-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#shared-nav .status,
#shared-nav .error {
  padding: 7px 10px;
  font-size: 13px;
}
#shared-nav .status { color: var(--muted); font-style: italic; }
#shared-nav .error  { color: var(--error); }

.shared-path {
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  color: var(--muted);
  margin: -4px 0 18px;
}

#instances .status,
#instances .error {
  padding: 7px 10px;
  font-size: 14px;
}
#instances .status { color: var(--muted); font-style: italic; }
#instances .error  { color: var(--error); }

/* Sidebar add-buttons (+ New letter, + New instance) */
.sidebar-add {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 10px;
  margin-top: 4px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  transition: color 80ms ease, background 80ms ease;
}
.sidebar-add:hover { color: var(--accent); background: var(--hover-bg); }

/* Main pane — fills available width. Inner content (prose, editors)
 * caps itself at `--reading-width` for readability. Lists and chat views
 * expand to use the room a wider window gives them. */
#main {
  padding: 48px 64px 80px;
  overflow-y: auto;
  min-width: 0;  /* lets the grid track shrink past its content's intrinsic size */
}

/* Cap prose at a reading-friendly width. Lists / accordion items / chat
 * views deliberately don't get this cap so they breathe on wide windows. */
.doc-body,
.orientation-body,
.doc-editor,
.distill-box,
#welcome {
  max-width: var(--reading-width);
}

/* The instance header (sticky bar) should stretch the full pane width so
 * the tab strip and "Continue chat" button reach the right edge — but the
 * tabs row keeps its own visual rhythm via gap + flex. */
.instance-header {
  width: 100%;
}

#welcome {
  color: var(--muted);
  font-style: italic;
}

h2.instance-name,
h2.view-name {
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: normal;
  color: var(--accent);
  letter-spacing: 0.3px;
}


h2.view-name { margin-bottom: 28px; }

/* Sticky instance header (name + tabs) — stays frozen when scrolling content.
 * The title stays put at its natural position (48px below the titlebar);
 * a pseudo-element fills the 48px above the header with the same bg so
 * scrolling content can't bleed through. */
.instance-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  padding-bottom: 24px;
}
.instance-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  height: 48px;
  background: var(--bg);
}
.instance-header .doc-tabs { margin-bottom: 0; }

/* Instance header — name + last-refreshed line on the left, action stack
 * (Export, Continue chat) absolutely positioned in the top-right corner. */
.instance-header { position: relative; }
.instance-last-refreshed {
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 18px;
  font-style: italic;
}
.instance-header-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 6px;
}
.instance-action {
  background: none;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease;
}
.instance-action:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}

/* Document tabs (with edit button pushed right) */
.doc-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--border);
}

.doc-tabs button {
  background: none;
  border: none;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 80ms ease, border-color 80ms ease;
}

.doc-tabs button:hover { color: var(--fg); }
.doc-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Page actions — distinct from tabs, right-aligned row beneath them.
 * Quieter visual weight than tabs (smaller, no underline), spaced so the
 * actions read as "things you can do with this page" rather than navigation. */
.doc-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 8px 0 0;
}
.page-action {
  background: none;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.page-action:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}
.page-action.distill-action { font-style: italic; }

/* Distillation inline panel */
.distill-section-label {
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin: 0 0 14px;
}
.distill-section-draft { color: var(--accent); }
.distill-divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 32px 0;
}
.distill-box {
  background: rgba(196, 155, 60, 0.04);
  border-left: 2px solid rgba(196, 155, 60, 0.4);
  padding: 14px 18px;
  border-radius: 0 4px 4px 0;
}
.distill-meta {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
}

/* Letter / chat top bar (back + edit) */
.letter-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.letter-topbar .back-button { margin-bottom: 0; }
.edit-button.standalone {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background 80ms ease;
}
.edit-button.standalone:hover {
  background: var(--hover-bg);
}

/* Editor */
.doc-editor {
  width: 100%;
  min-height: 60vh;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg);
  resize: vertical;
  outline: none;
  transition: border-color 80ms ease;
}
.doc-editor:focus {
  border-color: var(--accent);
}

.doc-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.doc-actions button {
  padding: 8px 22px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.doc-actions button:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}
.doc-actions button.save {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.doc-actions button.save:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.doc-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Rendered document body */
.doc-body h1,
.doc-body h2,
.doc-body h3,
.doc-body h4 {
  font-weight: normal;
  color: var(--accent);
  letter-spacing: 0.2px;
  margin: 32px 0 12px;
}
.doc-body h1 { font-size: 22px; margin-top: 0; }
.doc-body h2 { font-size: 18px; }
.doc-body h3 { font-size: 16px; }
.doc-body h4 { font-size: 15px; font-style: italic; }

.doc-body p { margin: 0 0 18px; }
.doc-body em { font-style: italic; }
.doc-body strong { font-weight: bold; }

.doc-body blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--border);
  color: var(--fg);
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.doc-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.doc-body ul li { margin: 4px 0; }

.doc-body .not-yet { color: var(--muted); font-style: italic; }
.doc-body .error   { color: var(--error); }

/* Thinking / details blocks — quiet when collapsed, gentle when open */
.doc-body details {
  margin: 0 0 18px;
  padding: 6px 14px;
  background: var(--details-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.doc-body details > summary {
  cursor: pointer;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3px;
  outline: none;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.doc-body details > summary::-webkit-details-marker { display: none; }
.doc-body details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  font-style: normal;
  color: var(--muted);
  transition: transform 120ms ease;
}
.doc-body details[open] > summary::before { transform: rotate(90deg); }
.doc-body details > summary:hover { color: var(--accent); }
.doc-body details > summary:hover::before { color: var(--accent); }

.doc-body details[open] > summary {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.doc-body details > *:not(summary) {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
}
.doc-body details > p:last-child { margin-bottom: 0; }

/* Tool-use marker — single-line italic note */
.doc-body p.tool-marker {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* Bookmarks — list above the chat */
details.bookmark-list {
  margin: 0 0 28px;
  padding: 10px 14px 12px;
  background: rgba(196, 155, 60, 0.05);
  border: 1px solid rgba(196, 155, 60, 0.25);
  border-radius: 4px;
}
details.bookmark-list > summary.bookmark-list-heading {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  padding: 2px 0 6px;
  font-style: normal;
  border-bottom: none;
}
details.bookmark-list > summary.bookmark-list-heading::-webkit-details-marker { display: none; }
details.bookmark-list > summary.bookmark-list-heading::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 120ms ease;
}
details.bookmark-list[open] > summary.bookmark-list-heading::before { transform: rotate(90deg); }
details.bookmark-list[open] > summary.bookmark-list-heading {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(196, 155, 60, 0.25);
}

button.bookmark-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  color: var(--fg);
  transition: background 80ms ease;
}
button.bookmark-item:hover {
  background: rgba(196, 155, 60, 0.08);
}
.bookmark-turn {
  flex: 0 0 auto;
  width: 70px;
  color: var(--muted);
  font-size: 12px;
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
}
.bookmark-text {
  color: var(--accent);
}

/* Turn-heading interactions */
.doc-body h2.turn-heading {
  position: relative;
  padding-left: 36px;
  scroll-margin-top: 24px;
  transition: background-color 600ms ease;
}
.doc-body h2.turn-heading.flash {
  background-color: rgba(196, 155, 60, 0.18);
  transition: background-color 200ms ease;
}
button.turn-bookmark-add {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  padding: 4px 8px;
  transition: opacity 120ms ease;
  line-height: 1;
}
.doc-body h2.turn-heading:hover button.turn-bookmark-add { opacity: 0.4; }
.doc-body h2.turn-heading:hover button.turn-bookmark-add:hover { opacity: 1; }
.doc-body h2.turn-heading.bookmarked button.turn-bookmark-add { opacity: 0.85; }

p.bookmark-marker {
  margin: -4px 0 16px;
  padding: 6px 12px;
  background: rgba(196, 155, 60, 0.06);
  border-left: 2px solid rgba(196, 155, 60, 0.55);
  color: var(--accent);
  font-size: 13px;
  font-style: italic;
}
.bookmark-icon { margin-right: 6px; font-style: normal; }

/* Scroll-position bookmark indicator — a vertical strip with dots */
.scroll-indicator-overlay {
  position: fixed;
  right: 14px;
  top: calc(var(--titlebar-height) + 4px);
  bottom: 4px;
  width: 14px;
  pointer-events: none;
  z-index: 50;
}
button.scroll-indicator-dot {
  position: absolute;
  right: 3px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: none;
  border-radius: 50%;
  background: var(--icon);
  opacity: 0.55;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  transition: opacity 100ms ease, transform 100ms ease, background 100ms ease;
}
button.scroll-indicator-dot:hover {
  opacity: 1;
  transform: scale(1.4);
  background: var(--accent);
}

/* Workshop area */
.workshop-body {
  /* sits below the sticky workshop header in #main */
}

.workshop-intro {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.drop-zone {
  border: 1.5px dashed var(--border);
  border-radius: 4px;
  background: var(--card-bg);
  padding: 32px 24px;
  text-align: center;
  transition: background 80ms ease, border-color 80ms ease;
  margin-bottom: 16px;
}
.drop-zone[data-state="ready"] {
  border-style: solid;
  border-color: var(--accent);
}
.drop-zone-over {
  background: var(--card-bg-hover);
  border-color: var(--accent);
  border-style: solid;
}
.drop-zone-prompt {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 6px;
}
.drop-zone-hint {
  font-size: 13px;
  color: var(--muted);
}
.drop-zone-pick {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.drop-zone-pick:hover { color: var(--accent-hover); }
.drop-zone-filename {
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: var(--fg);
  word-break: break-all;
  margin-bottom: 6px;
}

.refresh-result {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.refresh-result.error-block {
  border-color: var(--error);
  color: var(--error);
  white-space: pre-wrap;
  font-size: 13px;
}
.refresh-section { margin-bottom: 14px; }
.refresh-section:last-child { margin-bottom: 0; }
.refresh-section h3 {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin: 0 0 6px;
}
.refresh-section ul {
  margin: 0;
  padding-left: 18px;
}
.refresh-section li {
  font-size: 14px;
  margin: 3px 0;
}

.workshop-placeholder {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.workshop-row {
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.workshop-row-name {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 4px;
}
.workshop-row-status {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 8px;
}
.workshop-row-body {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.55;
}

/* Themed modal dialogs (alert / confirm / prompt) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 38, 32, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  -webkit-user-select: none;
  user-select: none;
}

/* When the split chat is open, the right portion of the window is covered
 * by a Tauri child webview (claude.ai) that sits on top of our HTML. A
 * full-viewport modal overlay would put the dialog under the chat. Constrain
 * the overlay to the Journeys side so modals center in the visible space. */
body.split-chat-on .modal-overlay {
  right: calc(100vw * var(--split-chat-width-ratio, 0.45));
}

.modal-dialog {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 26px 20px;
  min-width: 360px;
  max-width: 600px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  -webkit-user-select: text;
  user-select: text;
}

.modal-message {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: 18px;
  white-space: pre-line;
}

.modal-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--input-bg);
  color: var(--fg);
  outline: none;
  margin-bottom: 20px;
  transition: border-color 80ms ease;
}
.modal-input:focus { border-color: var(--accent); }

.modal-input-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

/* Multi-field form modal */
.modal-form {
  min-width: 480px;
}
.modal-title {
  font-size: 17px;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: normal;
  letter-spacing: 0.3px;
}
.modal-field {
  margin-bottom: 16px;
}
.modal-field-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-bottom: 6px;
}
.modal-field .modal-input {
  margin-bottom: 0;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions button {
  padding: 8px 22px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.modal-actions button:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}
.modal-actions button.save {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.modal-actions button.save:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.modal-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Starter pack — inline preview inside the Workshop tab */
.starter-pack-warn {
  font-size: 13px;
  color: var(--error);
  font-style: italic;
  margin-bottom: 12px;
}
.starter-pack-preview-inline {
  width: 100%;
  min-height: 360px;
  max-height: 60vh;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--input-bg);
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  resize: vertical;
  outline: none;
  margin-bottom: 18px;
}

/* Instance picker (used in Starter pack tab) */
.instance-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.instance-picker-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 3px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.instance-picker-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}
.instance-picker-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Combined option — italic + leading divider hint so it reads as separate
 * from the per-instance buttons. It's the rare ceremonial choice. */
.combined-picker-btn {
  font-style: italic;
  margin-left: 6px;
  border-style: dashed;
}

/* New instance form — Workshop tab */
.form-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: -8px 0 10px;
}
.lineage-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 2px;
}
.lineage-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.lineage-check input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.creation-preview {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.creation-tree {
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--card-bg);
  padding: 12px 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  white-space: pre;
  overflow-x: auto;
  margin: 6px 0 0;
}
.creation-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0;
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
}
.creation-success {
  border-left: 2px solid var(--accent);
  padding: 4px 16px;
  background: var(--card-bg);
  border-radius: 0 3px 3px 0;
  margin-top: 12px;
}

/* Split-chat mode — when the embedded Claude chat is open on the right,
 * shrink the main grid track so archive content doesn't render behind it.
 * The Tauri child webview is positioned absolute on top of the right
 * slice; this CSS just keeps our HTML out of that area.
 *
 * Layout math:
 *   sidebar = 240px (fixed)
 *   chat    = 100vw * ratio (default 0.45)
 *   main    = remaining
 */
body.split-chat-on #app {
  grid-template-columns: 240px calc(100vw - 240px - (100vw * var(--split-chat-width-ratio, 0.45)));
}
/* A subtle vertical divider hint at the seam, since the right border of the
 * main pane is now visible against the chat. */
body.split-chat-on #main {
  border-right: 1px solid var(--border);
}

/* Belongings — accordion list of per-item records */
.belongings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.belonging-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: border-color 80ms ease;
}
.belonging-item[open] {
  border-color: var(--accent);
  background: var(--card-bg-hover);
}
.belonging-summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  list-style: none;
  user-select: none;
}
.belonging-summary::-webkit-details-marker { display: none; }
.belonging-summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 11px;
  transition: transform 120ms ease;
  flex: 0 0 auto;
}
.belonging-item[open] > .belonging-summary::before {
  transform: rotate(90deg);
}
.belonging-name {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 14px;
}
.belonging-acquired {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.belonging-preview {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.belonging-summary:hover .belonging-preview {
  color: var(--fg);
}
.belonging-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--border);
}
.belonging-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 10px;
  margin-bottom: 4px;
}

/* Lock — placeholder shown when a gated surface is locked */
.lock-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.lock-placeholder-icon {
  font-size: 36px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.lock-placeholder-title {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 8px;
}
.lock-placeholder-body {
  font-size: 13px;
  color: var(--muted);
}

/* Sidebar Lock button — visually distinct from other footer links when in
 * the locked state to draw attention. */
.sidebar-lock.locked {
  color: var(--error);
}
.sidebar-lock.locked::before {
  content: '🔒 ';
}

/* Self-documents sub-tabs — same shape as the main doc-tabs but a touch
 * smaller and quieter to read as "nested navigation" rather than a peer
 * to the main strip. */
.doc-subtabs {
  margin: 8px 0 28px;
}
.doc-subtabs button {
  font-size: 12.5px;
  padding: 6px 12px;
  letter-spacing: 0.2px;
}
.doc-subtabs button.active {
  /* Slightly thinner underline on sub-tabs so the visual hierarchy stays
   * clear vs the main tab strip's accent underline. */
  border-bottom-width: 1px;
}

/* Tasks tab — top bar with Reload button */
.tasks-top-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.tasks-top-row .workshop-intro { flex: 1; }
.tasks-reload {
  background: none;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  transition: color 80ms ease, border-color 80ms ease;
}
.tasks-reload:hover { color: var(--accent); border-color: var(--accent); }
.tasks-body { padding-bottom: 40px; }

/* Radio row for form options */
.radio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radio-label {
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
}
.radio-label input { cursor: pointer; }

/* Smoke-test response display */
.workshop-smoke-response {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.workshop-smoke-response .status-label { margin-bottom: 8px; }
.workshop-smoke-response-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
}

/* Letters list */
.letters-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.letter-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: left;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}
.letter-row:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}

.letter-date  { grid-column: 1; grid-row: 1; font-size: 13px; color: var(--muted); }
.letter-title { grid-column: 2; grid-row: 1; font-size: 16px; color: var(--accent); }
.letter-meta  { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--muted); font-style: italic; }
.letter-note  {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
  margin-top: 4px;
}

/* Back button */
.back-button {
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  margin: 0 0 24px;
}
.back-button:hover { color: var(--accent); }

/* Raw chats */
.raw-import-button {
  background: var(--card-bg);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 18px;
  transition: background 80ms ease, border-color 80ms ease;
}
.raw-import-button:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}

.raw-chats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.raw-chat-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  font: inherit;
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 3px;
  text-align: left;
  transition: background 80ms ease, border-color 80ms ease;
}
.raw-chat-row:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}

.raw-chat-filename {
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Journal — accordion list */
.journal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.journal-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: border-color 80ms ease;
}
.journal-item[open] {
  border-color: var(--accent);
  background: var(--card-bg-hover);
}
.journal-summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  list-style: none;
  user-select: none;
}
.journal-summary::-webkit-details-marker { display: none; }
.journal-summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 11px;
  transition: transform 120ms ease;
  flex: 0 0 auto;
}
.journal-item[open] > .journal-summary::before {
  transform: rotate(90deg);
}
.journal-date {
  flex: 0 0 auto;
  font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: var(--accent);
}
.journal-preview {
  flex: 1 1 auto;
  color: var(--muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.journal-summary:hover .journal-preview {
  color: var(--fg);
}
.journal-item-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--border);
}
.journal-item-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  margin-bottom: 6px;
}

.raw-import-form .form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.form-input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--input-bg);
  color: var(--fg);
  outline: none;
  transition: border-color 80ms ease;
}
.form-input:focus { border-color: var(--accent); }

.form-input-date {
  width: 180px;
}

/* Date picker indicator is a native SVG icon — invert it in dark mode so
 * the calendar glyph stays visible on the dark input background. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}