/* Cara baseline: app-local UI tokens + component styles (SkillEditor, fields,
   buttons). The DESIGN-SYSTEM tokens (--cara-surface / --cara-ink / --cara-btn /
   --field-border / --field-focus-ring, colours, accents) are owned by the inline
   design system in views/layout.inertia.erb — the single source of truth. Only
   Cara-app-local tokens live here so they can't drift from that source. */
:root {
  --ui-element-height: 36px;
  --ui-element-height-lg: 40px;
  --ui-element-radius: 10px;
  --ui-focus-ring: 0 0 0 2px #374151;
  --ui-input-border: #e5e7eb;
  --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-ui); }

body {
  margin: 0;
  min-width: 320px;
  color: #0f172a;
  /* Warm off-white app surface (design-system token). Set here too so the page
     ground is correct even before the layered Tailwind utility resolves. */
  background: var(--cara-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cara-surface { background: var(--cara-surface); }
.cara-ink { color: var(--cara-ink); }
.ui-field,
.cara-field {
  width: 100%; height: var(--ui-element-height-lg); border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-element-radius); padding: 0 10px; background: #fff; font-size: 14px;
  line-height: 1.15; transition: outline-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ui-field:focus, .cara-field:focus { outline: none; border-color: #9ca3af; box-shadow: var(--ui-focus-ring); }
textarea.ui-field, textarea.cara-field { height: auto; min-height: 96px; padding-top: 8px; padding-bottom: 8px; }
.ui-button,
.cara-button {
  position: relative; display: inline-flex; min-height: var(--ui-element-height); align-items: center;
  justify-content: center; border: 1px solid #e5e7eb; border-radius: var(--ui-element-radius);
  padding: 0 12px; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ui-button:hover { background: #f3f4f6; }
.ui-button.--lg { min-height: var(--ui-element-height-lg); padding: 0 16px; font-size: 16px; }
.ui-button.--sm { min-height: 24px; padding: 0 8px; font-size: 12px; }
.ui-button.--minimal { border-color: transparent; box-shadow: none; }
.ui-button.--solid { background: var(--cara-btn); border-color: var(--cara-btn); color: #fff; box-shadow: none; }
.ui-button.--solid:hover { background: var(--cara-btn-hover); border-color: var(--cara-btn-hover); }
.cara-button { min-height: var(--ui-element-height-lg); border-color: var(--cara-btn); background: var(--cara-btn); color: #fff; }
.cara-button:hover { background: var(--cara-btn-hover); box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .22); transform: translateY(-1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #374151; outline-offset: 2px; }

button, input, textarea, select { font: inherit; }

.skill-page { min-height: 100vh; background: #faf9f7; padding: 34px 34px 80px; color: #26221e; }
.skill-wrap { max-width: 1180px; margin: 0 auto; }
.skill-breadcrumb { display:flex; align-items:center; gap:9px; color:#918a82; font-size:13px; margin-bottom:28px; }
.skill-breadcrumb a { color:#5b554e; text-decoration:none; font-weight:600; }.skill-icon { display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
.skill-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:16px 24px; margin-bottom:28px; }.skill-header > div:first-child { min-width:0; flex:1 1 auto; }.skill-kicker { margin:0 0 7px; color:#9b938a; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.skill-header h1 { margin:0; font-size:29px; letter-spacing:-.03em; font-weight:650; }.skill-subtitle { margin:8px 0 0; color:#817970; font-size:14px; }.skill-actions { display:flex; gap:8px; flex-wrap:wrap; }.skill-btn { min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:0 13px; border:1px solid #ded8d0; border-radius:8px; background:#fff; color:#4c4640; font-size:13px; font-weight:600; cursor:pointer; }.skill-btn:hover { background:#f5f3f0; }.skill-btn-primary { border-color:#147D5C; background:#147D5C; color:#fff; }.skill-btn-primary:hover { background:#124035; }
.skill-tabs { display:flex; gap:24px; border-bottom:1px solid #e5e0da; }.skill-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:0 2px 13px; color:#958d84; font-size:13px; font-weight:600; cursor:pointer; }.skill-tabs button.active { color:#2d2823; border-color:#2d2823; }.tab-count { margin-left:6px; padding:2px 6px; border-radius:10px; background:#eeeae5; color:#7e766d; font-size:10px; }
.file-workspace { display:grid; grid-template-columns:230px minmax(0,1fr) 260px; height:660px; margin-top:24px; overflow:hidden; border:1px solid #e5e0da; border-radius:12px; background:#fff; box-shadow:0 8px 28px rgba(45,35,25,.04); }.file-rail { display:flex; flex-direction:column; border-right:1px solid #e5e0da; background:#fbfaf8; }.file-rail-head { display:flex; justify-content:space-between; padding:20px 18px 14px; }.file-rail-head strong { font-size:13px; }.icon-btn { border:0; background:transparent; color:#81786f; font-size:20px; cursor:pointer; }.file-search { display:flex; align-items:center; gap:8px; margin:0 14px 14px; padding:0 10px; height:34px; border:1px solid #e7e2dc; border-radius:7px; background:#fff; color:#aaa19a; }.file-search input { width:100%; border:0; outline:0; background:transparent; font-size:12px; }.file-list { flex:1; padding:0 8px; }.file-row { display:flex; align-items:center; gap:9px; width:100%; padding:10px; border:0; border-radius:7px; background:transparent; color:#6e665e; text-align:left; font-size:13px; cursor:pointer; }.file-row:hover { background:#f1eee9; }.file-row.selected { background:#ebe7e1; color:#28231e; font-weight:650; }.file-type { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#e5e0d9; color:#81776e; font-size:10px; font-weight:700; }.file-no-results { padding:12px; color:#aaa19a; font-size:12px; }.add-file { margin:12px; padding:10px; border:1px dashed #d8d0c7; border-radius:7px; background:transparent; color:#80776e; text-align:left; font-size:12px; cursor:pointer; }.editor-pane { min-width:0; min-height:0; display:flex; flex-direction:column; }.editor-head { display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:0 24px; border-bottom:1px solid #eeeae5; }.editor-head strong { display:block; font-size:14px; }.editor-head span:not(.editing-pill) { display:block; margin-top:3px; color:#aaa19a; font-size:11px; }.editing-pill { padding:4px 8px; border-radius:12px; background:#f3eee8; color:#8a6a4d; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.editor-body { flex:1; min-height:0; overflow-y:auto; padding:18px 24px 24px; }.markdown-editor { min-height:530px; border:0; background:#fff; }.markdown-editor-content { min-height:520px; outline:0; padding:12px 4px; color:#37312b; font-size:15px; line-height:1.7; }.markdown-editor-content h1,.markdown-editor-content h2,.markdown-editor-content h3 { color:#28231e; line-height:1.25; }.markdown-editor-content p.is-editor-empty:first-child:before { color:#b5ada4; }.skill-info { margin-top:24px; }.skill-card { max-width:none; padding:24px; border:1px solid #e5e0da; border-radius:12px; background:#fff; }.skill-card label { display:block; margin-bottom:20px; color:#645c54; font-size:13px; font-weight:650; }.skill-card .ui-field { margin-top:8px; }.skill-empty { margin-top:24px; padding:90px 20px; border:1px solid #e5e0da; border-radius:12px; background:#fff; text-align:center; }.empty-mark { color:#c5bdb4; font-size:28px; }.skill-empty h2 { margin:12px 0 5px; font-size:16px; }.skill-empty p { margin:0; color:#968d84; font-size:13px; }.save-bar { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:16px; color:#968d84; font-size:12px; }
.editor-head-name { min-width:0; }
.rename-box { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rename-confirm { color:#3f7a52; margin-left:12px; }
.skill-active-pill { min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:0 13px; border-radius:8px; background:#e8f3ec; color:#2f6340; font-size:13px; font-weight:650; }
/* Action buttons on the skill header, grouped and uniform (36px), separated from
   the Edit/Runs view switcher. */
.skill-action-group { display:inline-flex; align-items:center; gap:8px; margin-left:4px; flex-wrap:wrap; }
.rename-confirm:hover { background:#e8f3ec; color:#2f6340; }
.editor-head-actions { display:flex; align-items:center; gap:6px; }
.rename-input { width:240px; max-width:52vw; padding:6px 9px; border:1px solid #cdc4b8; border-radius:7px; background:#fff; color:#28231e; font-size:14px; font-weight:650; outline:0; }
.rename-input:focus { border-color:#9a7b3d; box-shadow:0 0 0 2px rgba(154,123,61,.15); }
.skill-drawer { width:min(440px,100vw); height:100vh; max-height:100vh; margin:0 0 0 auto; padding:0; border:0; background:#fff; box-shadow:-16px 0 40px rgba(0,0,0,.12); }.skill-drawer::backdrop { background:rgba(20,16,12,.28); }.drawer-head,.drawer-foot { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid #eeeae5; }.drawer-head h2 { margin:0; font-size:19px; }.drawer-content { padding:24px; color:#746b62; font-size:13px; }.run-input { margin-top:18px; min-height:190px; }.drawer-foot { justify-content:flex-end; border-top:1px solid #eeeae5; border-bottom:0; }
@media (max-width:760px) { .skill-page { padding:24px 16px 60px; }.skill-header { flex-direction:column; }.skill-actions { width:100%; }.file-workspace { grid-template-columns:1fr; height:auto; }.file-rail { min-height:260px; border-right:0; border-bottom:1px solid #e5e0da; }.file-list { max-height:145px; overflow:auto; }.editor-body { padding:14px; overflow-y:visible; }.fields-rail { overflow:visible; }.fields-rail-body { overflow-y:visible; } }

/* TipTap/ProseMirror is a contenteditable div, so it needs explicit editor rules. */
.skill-btn { border-color:var(--field-border); transition:box-shadow .15s cubic-bezier(.4,0,.2,1),background-color .15s ease,border-color .15s ease; }
.skill-btn:focus { outline:0; box-shadow:var(--field-focus-ring); }
.skill-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.skill-btn:disabled:hover { background:#147D5C; }
.skill-btn:disabled:not(.skill-btn-primary):hover { background:#fff; }
.skill-btn-primary { border-color:#147D5C; background:#147D5C; }.skill-btn-primary:hover { background:#124035; border-color:#124035; box-shadow:0 10px 20px -6px rgba(0,0,0,.22); }
.skill-tabs { display:inline-flex; align-items:center; gap:2px; padding:2px; border:0; border-radius:8px; background:#f5f5f5; }
.skill-tabs button { display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:6px 12px; border:0; border-radius:6px; color:#737373; font-size:14px; font-weight:500; }
.skill-tabs button:hover { color:#404040; background:transparent; }.skill-tabs button.active { border:0; background:#fff; color:#171717; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.markdown-editor.field-input { width:100%; height:auto; min-height:530px; padding:0; border:1px solid #e5e0da; border-radius:10px; background:#fff; box-shadow:none; }
.markdown-editor-content { min-height:520px; padding:18px 20px; outline:0; color:#37312b; font-size:15px; line-height:1.7; }
.markdown-editor-content h1,.markdown-editor-content h2,.markdown-editor-content h3 { color:#28231e; line-height:1.25; letter-spacing:-.02em; }
.markdown-editor-content h1 { margin:0 0 18px; font-size:25px; }.markdown-editor-content h2 { margin:24px 0 10px; font-size:20px; }.markdown-editor-content h3 { margin:20px 0 8px; font-size:17px; }
/* Segmented view toggle (still used by the workflow editor). */
.skill-mode-tabs { display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:8px; background:#f5f5f5; }.skill-mode-tabs button { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:6px 12px; border:0; border-radius:6px; background:transparent; color:#737373; font-size:14px; font-weight:500; cursor:pointer; }.skill-mode-tabs button.active { background:#fff; color:#171717; box-shadow:0 1px 2px rgba(0,0,0,.08); }
/* One row: the section tabs (uniform width) on the left, the Edit toggle at the
   far end. */
.skill-tabs-row { display:flex; align-items:center; gap:16px; }
.skill-edit-toggle { margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 14px; border:1px solid #ded8d0; border-radius:8px; background:#fff; color:#4c4640; font-size:13px; font-weight:600; cursor:pointer; }
.skill-edit-toggle:hover { background:#f5f3f0; }
.skill-edit-toggle.is-on { border-color:#147D5C; background:#147D5C; color:#fff; }
.skill-edit-toggle.is-on:hover { background:#124035; }

/* Custom fields — a right rail inside the editor workspace (full editor height). */
.fields-rail { min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; padding:16px; border-left:1px solid #e5e0da; background:#fbfaf8; overflow:hidden; }
.fields-rail-head { display:inline-flex; align-items:center; gap:8px; color:#7a5f2c; }
.fields-rail-head strong { font-size:14px; color:#2d2823; }
.fields-rail-hint { margin:0; font-size:12px; color:#8b837a; line-height:1.5; }
.fields-rail-hint code { background:#f3eee6; padding:1px 5px; border-radius:4px; font-size:11px; }
.fields-rail-add { display:flex; flex-direction:column; gap:8px; }
.fields-rail-add .ui-field { width:100%; }
.fields-rail-add .skill-btn { justify-content:center; }
.fields-rail-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
.fields-rail-list { display:flex; flex-wrap:wrap; gap:6px; }
.skill-field-chip { display:inline-flex; align-items:center; padding:4px 10px; border:1px solid #e2dcd3; border-radius:999px; background:#fff; color:#6a5c3e; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; cursor:pointer; }
.skill-field-chip:hover:not(:disabled) { background:#f0e9db; border-color:#d9cdb5; }
.skill-field-chip:disabled { cursor:default; opacity:.7; }
.skill-fields-empty { color:#a99f95; font-size:13px; margin:0; }
.skill-fields-note { color:#a99f95; font-size:12.5px; margin:6px 0 0; }
/* Field-manager: each referenced {{field}} with its editable metadata. */
.fields-defs { display:flex; flex-direction:column; gap:10px; }
.field-def { border:1px solid #ece6dc; border-radius:11px; background:#fcfaf6; padding:9px; }
.field-def-chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.field-def-controls { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.field-def-controls .ui-field { font-size:12.5px; padding:5px 8px; height:auto; min-height:0; }
.field-def-row { display:flex; align-items:center; gap:8px; }
.field-def-row .ui-field { flex:1; }
.field-def-req { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#6b6259; white-space:nowrap; }
.field-def-meta { margin-top:6px; display:flex; flex-direction:column; gap:2px; }
.field-def-type { font-size:11.5px; font-weight:600; color:#8a8177; text-transform:capitalize; }
.field-def-hinttext { font-size:12px; color:#9a9089; }
/* {{custom field}} tokens highlighted inside the markdown editor. */
.md-field-token { background:#f5ead0; color:#8a5a1e; border-radius:4px; padding:0 3px; box-shadow:inset 0 0 0 1px #e6d3a3; font-weight:600; }
/* {{ autocomplete popup. */
.md-ac { position:absolute; z-index:60; display:none; min-width:180px; max-height:220px; overflow:auto; padding:4px; border:1px solid #e2dcd3; border-radius:8px; background:#fff; box-shadow:0 10px 28px -8px rgba(45,35,25,.28); }
.md-ac-item { display:block; width:100%; text-align:left; padding:6px 9px; border:0; border-radius:6px; background:transparent; color:#5b5147; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; cursor:pointer; }
.md-ac-item:hover, .md-ac-item.is-active { background:#f3ead5; color:#8a5a1e; }
/* All header action buttons share the .skill-btn size (36px) for consistency. */
.skill-drawer { position:fixed; inset:0 0 0 auto; width:min(440px,100vw); height:100vh; max-height:100vh; margin:0; }.skill-drawer[open] { display:flex; flex-direction:column; animation:skill-drawer-in .2s ease-out; } @keyframes skill-drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
.markdown-editor-content p { margin:0 0 14px; }.markdown-editor-content ul,.markdown-editor-content ol { margin:0 0 16px; padding-left:24px; }.markdown-editor-content blockquote { margin:16px 0; padding-left:16px; border-left:3px solid #d8d0c7; color:#776e65; }.markdown-editor-content code { padding:2px 5px; border-radius:4px; background:#f3f0ec; font-size:.9em; }.markdown-editor-content pre { overflow:auto; margin:16px 0; padding:14px; border-radius:8px; background:#2e2925; color:#f8f5f1; }.markdown-editor-content a { color:#8a5b35; text-decoration:underline; }.markdown-editor-content hr { margin:22px 0; border:0; border-top:1px solid #e5e0da; }

/* --- Skill editor: UI refinements --- */
/* More visible container shadows across the Info / Files / History tabs. */
.skill-card {
  box-shadow: 0 12px 32px -14px rgba(43, 33, 26, 0.28);
}
.file-workspace {
  box-shadow: 0 12px 32px -14px rgba(43, 33, 26, 0.28);
}
.skill-empty {
  box-shadow: 0 12px 32px -14px rgba(43, 33, 26, 0.22);
}
/* Read (non-editing) state for the markdown editor — a subtle warm tint so it
   reads as "view" vs the white "edit" surface. */
.markdown-editor.markdown-editor--readonly {
  background: #faf8f4;
}
.markdown-editor.markdown-editor--readonly .markdown-editor-content {
  color: #4b443d;
}

/* --- Markdown editor: fixed formatting toolbar --- */
.md-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #eee8df;
  background: #fbfaf8;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.md-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 7px; background: transparent;
  color: #6e665e; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.md-tool:hover { background: #efeae3; color: #2b211a; }
.md-tool.is-active { background: var(--cara-btn); color: #fff; }
.md-tool:disabled { opacity: .4; cursor: not-allowed; }
.md-tool:disabled:hover { background: transparent; color: #6e665e; }
.md-tool-sep { width: 1px; height: 18px; margin: 0 4px; background: #e5e0da; }
/* Toolbar sits above the mounted editor; content keeps its own padding. */
.markdown-editor .markdown-editor-mount { display: block; }
/* Read state: no toolbar, so restore the top radius on the content mount. */
.markdown-editor.markdown-editor--readonly .markdown-editor-content { border-radius: 10px; }

/* Info tab: inline save bar shown only when name/description is dirty. */
.info-save-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee8df;
  color: #968d84; font-size: 12px;
}

/* Run / New Evaluation drawer form */
.run-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.run-field { display: block; margin-bottom: 22px; color: #4c4640; font-size: 13px; font-weight: 650; }
.run-field .ui-field { margin-top: 8px; }
.run-hint { display: block; margin-top: 4px; color: #968d84; font-size: 12px; font-weight: 400; }
.run-file-input {
  margin-top: 10px; width: 100%; font-size: 13px; color: #6e665e; cursor: pointer;
}
.run-file-input::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid #ded8d0; border-radius: 8px;
  background: #fff; color: #4c4640; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease;
}
.run-file-input::file-selector-button:hover { background: #f5f3f0; }

/* Space between drawer footer actions (e.g. Cancel / Go on the run form). */
.drawer-foot { gap: 12px; }

/* Skill editor: give the markdown editor a bounded height with its own
   scrollbar instead of clipping or growing the whole page. Higher specificity than the shared design-system
   .markdown-editor rules (which set overflow:hidden + max-height for the chat
   composer) so it wins regardless of stylesheet load order. Applies in both
   edit and read states. */
.editor-body .markdown-editor { overflow: hidden; height: auto; }
.editor-body .markdown-editor .markdown-editor-content {
  min-height: 420px; max-height: 55vh; overflow-y: auto;
}

/* --- Run (evaluation) show page --- */
.run-wrap { max-width: 820px; }
.run-section { margin-top: 28px; }
.run-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.run-heading { margin: 0 0 12px; font-size: 16px; font-weight: 650; color: #2d2823; }
.run-version-tag { font-size: 12px; color: #8a8179; font-weight: 500; }
.run-box {
  border: 1px solid #e5e0da; border-radius: 12px; background: #fff; padding: 18px 20px;
  box-shadow: 0 10px 30px -18px rgba(43, 33, 26, 0.22);
}
.run-output { min-height: 150px; }
.run-empty { margin: 0; color: #968d84; font-size: 14px; line-height: 1.6; }
.run-file-list { display: flex; flex-direction: column; gap: 8px; }
.run-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eee8df; border-radius: 9px; background: #fbfaf8; }
.run-file-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: #efeae3; color: #6e665e; shrink: 0; }
.run-file-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #37312b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-file-ext { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #81776e; background: #e5e0d9; padding: 2px 7px; border-radius: 5px; }
.run-file-size { font-size: 12px; color: #968d84; }
.run-newoutput { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Back link on the run show page. */
.run-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  color: #5b554e; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: color .12s ease;
}
.run-back:hover { color: #2b211a; }

/* --- Universal file viewer modal --- */
.file-viewer {
  width: min(860px, 92vw); max-width: 92vw; max-height: 85vh;
  padding: 0; border: 0; border-radius: 16px; background: #fff;
  box-shadow: 0 24px 60px -20px rgba(20, 16, 12, 0.45);
  overflow: hidden;
}
.file-viewer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid #eee8df; background: #fbfaf8;
}
.file-viewer-title { font-size: 14px; font-weight: 650; color: #2d2823; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer-actions { display: flex; align-items: center; gap: 10px; shrink: 0; }
.file-viewer-body { max-height: calc(85vh - 58px); overflow: auto; background: #fff; }
.file-viewer-note { padding: 40px 20px; text-align: center; }
.file-viewer-text {
  margin: 0; padding: 20px 22px; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.65; color: #37312b;
}
.file-viewer-md { padding: 22px 24px; }
.file-viewer-frame { width: 100%; height: calc(85vh - 58px); border: 0; display: block; }
.file-viewer-fallback { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; }

/* Sectioned skill preview — each file as a section */
.skill-preview { padding: 6px 22px 20px; }
.skill-preview-file { padding: 16px 0; border-bottom: 1px solid #f0ece6; }
.skill-preview-file:last-of-type { border-bottom: 0; }
.skill-preview-file-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.skill-preview-file-head strong { font-size: 13px; font-weight: 650; color: #2d2823; }

/* Clickable run file rows (open the viewer) */
.run-file-row { width: 100%; text-align: left; cursor: pointer; }
.run-file-row:hover { background: #f3efe9; border-color: #e2dacd; }
.run-file-row:focus-visible { outline: 2px solid #374151; outline-offset: 2px; }

/* --- Run status: show-page indicator + list pills --- */
.run-status { display: flex; align-items: center; gap: 10px; padding: 24px 4px; font-size: 14px; }
.run-status--running { color: #6e665e; }
.run-status--failed { flex-direction: column; align-items: flex-start; gap: 8px; color: #9a3b34; }
.run-error-detail { color: #8a7f77; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.run-spin { animation: run-spin 0.9s linear infinite; color: var(--cara-accent); }
@keyframes run-spin { to { transform: rotate(360deg); } }

.run-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; text-transform: capitalize; }
.run-pill--pending,
.run-pill--running { background: #f3eee6; color: #8a6a4d; }
.run-pill--done { background: var(--cara-accent-soft); color: var(--cara-accent); }
.run-pill--failed { background: #fbeceb; color: #9a3b34; }

/* Run drawer: "grade the notes" checkbox */
.run-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; color: #4c4640; font-size: 13px; font-weight: 500; cursor: pointer; }
.run-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--cara-btn); }

/* Verdict pills in the History (runs) list */
.run-pill.verdict-pass { background: #e7f3ea; color: #2f7d47; }
.run-pill.verdict-fail { background: #fbeceb; color: #b0392f; }

/* New Output copy button */
.run-heading-actions { display: inline-flex; align-items: center; gap: 12px; }
.run-copy-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid #ded8d0; border-radius: 8px; background: #fff; color: #4c4640;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.run-copy-btn:hover { background: #f5f3f0; border-color: #cfc7bd; }

/* ---- Workflow Studio (frontend layer) ---------------------------------- */
.wf-edit { margin-top: 24px; display: flex; flex-direction: column; gap: 26px; }
.wf-edit .skill-card { max-width: none; }
.wf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wf-grid-2 label { margin-bottom: 0; }
.wf-optional { color: #aaa19a; font-weight: 500; }
@media (max-width: 640px) { .wf-grid-2 { grid-template-columns: 1fr; } }

.wf-block { display: flex; flex-direction: column; }
.wf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.wf-h2 { margin: 0; font-size: 15px; font-weight: 700; color: #28231e; }
.wf-sub { margin: 6px 0 14px; font-size: 12.5px; color: #968d84; max-width: 620px; }

.wf-empty { padding: 34px 20px; border: 1px dashed #d8d0c7; border-radius: 12px; background: #fbfaf8; text-align: center; color: #968d84; font-size: 13px; }

.wf-steps { display: flex; flex-direction: column; gap: 14px; }
.wf-step { border: 1px solid #e5e0da; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px -18px rgba(43,33,26,.22); overflow: hidden; }
.wf-step-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f0ece6; }
.wf-grip { color: #c5bdb4; cursor: grab; display: inline-flex; }
.wf-step-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #ece7e0; color: #7c7269; font-size: 12px; font-weight: 700; flex: none; }
.wf-step-title { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 650; color: #28231e; }
.wf-step-title::placeholder { color: #b5ada4; font-weight: 500; }
.wf-step-actions { display: inline-flex; align-items: center; gap: 2px; }
.wf-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #948a80; cursor: pointer; }
.wf-icon-btn:hover { background: #f1eee9; color: #4a433c; }
.wf-icon-btn:disabled { color: #d5cec5; cursor: default; background: transparent; }
.wf-step-body { display: block; width: 100%; min-height: 118px; padding: 14px; border: 0; outline: 0; resize: vertical; background: #fff; color: #37312b; font-size: 13.5px; line-height: 1.65; font-family: inherit; }
.wf-step-body::placeholder { color: #b5ada4; }

.wf-run-steps { display: flex; flex-direction: column; gap: 12px; }
.wf-run-step { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid #e5e0da; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px -18px rgba(43,33,26,.22); }
.wf-run-step-title { flex: 1; font-size: 14px; font-weight: 600; color: #28231e; }
.wf-run-step-status { display: inline-flex; color: #968d84; }
.wf-run-step--done .wf-run-step-status { color: var(--cara-accent); }
.wf-run-step--running .wf-run-step-status { color: var(--cara-accent); }

/* ---- Run loading indicator (animated, in-progress cue) ------------------ */
.run-status--pending { color: #a49a90; }
.run-loading-text { display: inline-block; min-width: 0; animation: run-fade-in .45s ease; }
@keyframes run-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.run-loading-secs { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #f3eee6; color: #9a8f84; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* queued (waiting its turn) — three softly-pulsing dots */
.run-dots { display: inline-flex; gap: 4px; }
.run-dots i { width: 6px; height: 6px; border-radius: 999px; background: #cabfb4; display: inline-block; animation: run-dot 1.2s ease-in-out infinite; }
.run-dots i:nth-child(2) { animation-delay: .2s; }
.run-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes run-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .run-loading-text { animation: none; }
  .run-dots i { animation: none; opacity: .6; }
}

/* ---- Rendered markdown in run output boxes ----------------------------- */
/* Rendered markdown now uses the base-styles `ui-styled-text` class (see giga) —
   no bespoke typography needed. */

/* A wide markdown table (common in grade output) would otherwise push past its
   card and overflow the outer container. Make each table its own horizontal
   scroll region, capped to the available width. */
.ui-styled-text table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }

/* Content container max-width — follows giga's Layout default (1100px), centered.
   Wraps every AppShell page so content stays a readable width on wide screens. */
.app-content { width: 100%; max-width: 1100px; margin-inline: auto; }

/* The global `html { scrollbar-gutter: stable }` reserves a scrollbar strip on
   the right — right for body-scrolling pages (onboarding), but AppShell fills the
   viewport and scrolls INTERNALLY (#app-main), so that strip is just empty space
   that keeps the top banner from reaching the edge. Drop it on AppShell pages. */
html:has(#app-shell) { scrollbar-gutter: auto; }

/* ---- Workflow: skill inputs + run step results ------------------------- */
.wf-skill-add { max-width: 220px; }
.wf-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-skill-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #e2dcd3; border-radius: 999px; background: #fff; padding: 2px 2px 2px 4px; }
.wf-skill-name { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 8px; border-radius: 999px; color: #4c4640; font-size: 13px; font-weight: 600; cursor: pointer; }
.wf-skill-name:hover { color: var(--cara-accent); }
.wf-skill-x { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: #a99f95; cursor: pointer; }
.wf-skill-x:hover { background: #f1eee9; color: #8a3b34; }

/* run step: card with a head row + a result body (overrides the placeholder row) */
.wf-run-step { display: block; padding: 0; }
.wf-run-step-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.wf-run-step-body { padding: 2px 18px 16px 48px; font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
/* Long unbroken tokens (calendar event ids, digests) rendered in markdown/code must wrap, not
   overflow the run panel horizontally. */
.wf-plan-text { overflow-wrap: anywhere; word-break: break-word; }
/* Long unbroken ids in inline code must wrap. The base-styles CDN styles `.ui-styled-text
   code:not(:is(…))` at higher specificity than a plain `.ui-styled-text code`, so force it with
   !important (the CDN rules are non-important) — and everything inside the run panel wraps too. */
.wf-run-step-body, .wf-run-step-body *, .ui-styled-text, .ui-styled-text * { overflow-wrap: anywhere !important; }
.wf-run-step-body code, .ui-styled-text code { white-space: normal !important; word-break: break-all !important; }
/* In TABLES, wrapping a long id makes an ugly multi-line cell — truncate it with an ellipsis
   instead (the full value still appears in the step's prose). Cap ~32 chars; tweak max-width. */
.wf-run-step-body td code, .wf-run-step-body th code, .ui-styled-text td code, .ui-styled-text th code {
  display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap !important; word-break: normal !important; vertical-align: bottom;
}
.wf-run-step-err { color: #9a3b34; white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-run-step--running { border-color: #e6dcae; }
.wf-run-step--failed { border-color: #e8c9c5; }
.wf-run-fail-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #fbeceb; color: #9a3b34; font-weight: 700; font-size: 12px; }

.wf-danger:hover { background: #fbeceb; color: #b0392f; }

/* ---- Workflow: skill inputs inside the card + searchable picker -------- */
.wf-card-divider { height: 1px; background: #eee7dd; margin: 20px 0; }
.wf-skill-field .wf-card-label { display: block; margin: 0; color: #28231e; font-size: 14px; font-weight: 650; }
.wf-card-hint { margin: 4px 0 12px; font-size: 12.5px; color: #968d84; }
.wf-skill-field .wf-skill-chips { margin-bottom: 12px; }
.wf-combo { position: relative; max-width: 440px; }
.wf-combo-list { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid #e5e0da; border-radius: 10px; box-shadow: 0 16px 40px -18px rgba(43,33,26,.35); overflow: hidden; max-height: 260px; overflow-y: auto; }
.wf-combo-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; color: #37312b; font-size: 13.5px; cursor: pointer; }
.wf-combo-item:hover { background: #f5f2ee; }
.wf-combo-empty { padding: 9px 12px; color: #a49a90; font-size: 13px; }

/* Code INSIDE a block must not inherit the light inline-code background (was light text on light bg). */
.markdown-editor-content pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* ---- Workflow run: authored plan (always shown) ------------------------ */
.wf-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-plan-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #e5e0da; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px -18px rgba(43,33,26,.22); }
.wf-plan-item .wf-step-num { margin-top: 1px; flex: none; }
.wf-plan-text strong { display: block; font-size: 14px; color: #28231e; font-weight: 650; }
.wf-plan-text p { margin: 4px 0 0; font-size: 13px; color: #7c736a; line-height: 1.55; }

.wf-working { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px dashed #e0d8cc; border-radius: 12px; background: #fbfaf8; color: #8a8079; font-size: 13.5px; }

/* ---- Tabs (skill configure, integration editor) ------------------------ */
.skill-tab-btn { padding: 9px 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8b837a; font-size: 14px; font-weight: 600; cursor: pointer; }
.skill-tab-btn:hover { color: #4c4640; }
.skill-tab-btn.active { color: #2b211a; border-bottom-color: #2b211a; }
.skill-tab-btn:disabled { color: #cbc4bb; cursor: not-allowed; }

/* Fixed-height, scrollable action-scope list (Holly allowlist / Beth approvals). */
.scope-scroll { max-height: 460px; overflow-y: auto; padding-right: 4px; }

/* ---- Integration logos -------------------------------------------------- */
.int-logo { border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid #eee7dd; padding: 4px; flex-shrink: 0; display: inline-block; }
.int-logo--ph { display: inline-grid; place-items: center; background: #f3efe9; color: #8a8177; font-weight: 700; font-size: 15px; padding: 0; }

/* ---- Sidebar workspace selector ---------------------------------------- */
/* Static (single destination) */
.ws-selector { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid #e7e2dc; border-radius: 9px; background: #faf8f5; }
.ws-selector-name { min-width: 0; font-size: 13px; font-weight: 600; color: #37312b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trigger button (opens the popover menu) */
.ws-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 9px; border: 1px solid #e7e2dc; border-radius: 9px; background: #faf8f5; cursor: pointer; text-align: left; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.ws-trigger:hover { border-color: #d8d0c7; background: #f4f0ea; }
.ws-trigger:focus-visible { outline: 0; box-shadow: var(--field-focus-ring); }
.ws-trigger-icon { color: #6b6259; flex-shrink: 0; }
.ws-trigger-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #37312b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-trigger-chevron { color: #9a9089; flex-shrink: 0; }

/* Popover menu (extends .ui-popover-menu) */
.ws-menu { width: 216px; }
.ws-menu-label { margin: 0; padding: 6px 8px 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a89e93; }
.ws-menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #37312b; text-decoration: none; cursor: pointer; }
.ws-menu-item:hover { background: #f3efe9; }
.ws-menu-item.--active { font-weight: 600; background: #faf6ee; }
.ws-menu-item-icon { color: #9a9089; flex-shrink: 0; }
.ws-menu-item.--active .ws-menu-item-icon { color: var(--cara-accent); }
.ws-menu-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-menu-check { color: var(--cara-accent); flex-shrink: 0; }
.ws-menu-divider { border: 0; border-top: 1px solid #ece5da; margin: 5px 4px; }
 to { opacity:1; transform:translateY(0); } }