/* Create (drafting studio) — Figma page 2:604 "02 · Create".
   Desktop ≥1440: chapters | editor | AI assistant. 1024–1439 laptop and the tablet rail layout: the chapter list
   collapses to a drawer (#chapters, CSS :target). <768: editor and AI assistant stack, the assistant becomes a sheet. */

.cr-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.cr-stepper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cr-studio { display: flex; align-items: flex-start; gap: 16px; }

/* Chapters card */
.cr-chapters {
  flex: none; width: 232px; display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.cr-link { padding: 0; border: 0; background: none; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--rust-ink); }
.cr-close { display: none; }
.cr-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cr-ch, .cr-bible-link { display: flex; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.cr-ch { gap: 8px; }
.cr-ch:hover, .cr-bible-link:hover { background: var(--surface-raised); }
.cr-ch .name { white-space: pre; }
.cr-ch .count { color: var(--faint); white-space: nowrap; }
.cr-ch.todo .name { color: var(--faint); }
.cr-ch[aria-current] { background: var(--rust-wash); }
.cr-ch[aria-current] .name { color: var(--rust-ink); font-weight: 600; }
.cr-caps { padding: 12px 0 0 10px; color: var(--faint); }

/* Editor */
.cr-editor {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.cr-toolbar { display: flex; align-items: center; gap: 14px; }
.cr-tools { display: flex; gap: 0; }
.cr-tools button { padding: 0 5px; border: 0; background: none; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.cr-tools button:first-child { padding-left: 0; }
.cr-tools button:hover { color: var(--ink); }
.cr-title { margin: 0; font: 600 28px/36px Literata, Georgia, serif; letter-spacing: -0.14px; color: var(--ink); }
.cr-prose { font: 400 18px/30px Literata, Georgia, serif; color: var(--ink-soft); }
.cr-selected { padding: 4px 8px; border-radius: 6px; background: var(--rust-wash); }
.cr-selected mark { background: none; color: var(--ink); }
.cr-suggestion { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--rust); }
.cr-sugg-head { display: flex; align-items: center; gap: 8px; }
.cr-sugg-actions { display: flex; align-items: center; gap: 8px; }
.cr-btn-text { background: transparent; color: var(--rust-ink); }
.cr-btn-text:hover { background: var(--rust-wash); }
.cr-count { display: flex; align-items: center; gap: 10px; }

/* AI assistant */
.cr-assistant {
  flex: none; width: 300px; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--line);
}
.cr-assistant .card-header .link { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--rust-ink); }
.cr-handle { justify-content: center; }
.cr-handle span { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.cr-switcher { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-high); }
.cr-switcher button { flex: 1 1 0; min-width: 0; padding: 6px 12px; border: 0; border-radius: 8px; background: none; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-soft); }
.cr-switcher button[aria-pressed="true"] { background: var(--rust-bright); color: var(--on-accent); }
.cr-voice { display: flex; align-items: center; gap: 8px; }
.cr-voice > div:first-child { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.cr-toggle { width: 36px; height: 20px; padding: 0; border-radius: 10px; }
.cr-toggle img { display: block; position: absolute; inset: -1px; }
.cr-toggle[aria-checked="true"]::after { display: none; }
.cr-toggle[aria-checked="false"] img { display: none; }
.cr-toggle[aria-checked="false"]::after { top: 1px; left: 1px; }
.cr-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-high); }
.cr-ask .textarea { display: block; min-height: 0; padding: 11px 12px; resize: none; field-sizing: content; line-height: 22px; }
.cr-ask .textarea::placeholder { color: var(--muted); }
.cr-ai-actions { display: flex; flex-direction: column; gap: 8px; }

/* Laptop / Chromebook and tablet: chapter list becomes a drawer */
@media (max-width: 1439px) {
  .cr-chapters { display: none; }
  .cr-chapters:target {
    display: flex; position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: 280px; max-width: 85vw;
    overflow-y: auto; border-radius: 0 14px 14px 0; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .55);
  }
  .cr-chapters:target .cr-close { display: inline; margin-left: 12px; }
}
@media (max-width: 1199px) {
  .cr-assistant { width: 260px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .cr-header { flex-wrap: nowrap; align-items: center; }
}
@media (max-width: 767px) {
  .cr-header .h1 { font: 700 20px/28px Manrope, system-ui, sans-serif; letter-spacing: -0.1px; }
  .cr-header .titles p { font-size: 13px; line-height: 18px; }
  .cr-header.page-header { gap: 20px; }
  .cr-actions { gap: 8px; }
  .cr-studio { flex-direction: column; align-items: stretch; }
  .cr-editor { padding: 18px; }
  .cr-assistant { width: auto; }
  .cr-handle { display: flex; }
  .cr-ai-actions { flex-direction: row; }
  .cr-ai-actions .btn { flex: 1 1 0; min-width: 0; }
}