/**
 * admin-editor.css
 * Kajabi-style block editor for lesson authoring.
 */

/* ── Shared: xs button, input, toggle ─────────────── */
.btn--xs {
  padding: calc(var(--space-1)) var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.2;
  border-radius: var(--radius-sm);
}

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
textarea.input { resize: vertical; min-height: 4em; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold, 600);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.field--half { margin-bottom: 0; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
}
.toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
}

/* ── Editor panel shell ────────────────────────────── */
.editor-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.editor-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.editor-dirty {
  font-size: var(--text-xs);
  color: var(--color-danger, #dc2626);
  font-weight: var(--weight-bold, 600);
}

/* ── Course grid (entry) ───────────────────────────── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  color: var(--color-text);
}
.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}
.course-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.course-card__body:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.course-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-sunken, transparent);
}
.course-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold, 700);
}
.course-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.course-card__meta {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.pill--ok {
  background: oklch(85% 0.12 150 / 0.3);
  color: oklch(35% 0.15 150);
}
.pill--muted {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* ── Course detail toolbar ─────────────────────────── */
.editor-course-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ── Lesson list ───────────────────────────────────── */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lesson-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, background 150ms ease;
}
.lesson-row:hover { border-color: var(--color-primary); }
.lesson-row__drag {
  color: var(--color-text-muted);
  cursor: grab;
  user-select: none;
  font-size: var(--text-base);
}
.lesson-row__order {
  min-width: 2em;
  text-align: center;
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.lesson-row__main { min-width: 0; }
.lesson-row__title {
  font-weight: var(--weight-bold, 600);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-row__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.lesson-row__actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: nowrap;
}

/* ── Lesson editor: split layout ───────────────────── */
.lesson-editor { }
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1024px) {
  .editor-grid { grid-template-columns: 1fr; }
}
.editor-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.editor-col--preview {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 8rem);
  overflow: auto;
}

/* ── Mode switch ───────────────────────────────────── */
.editor-mode-switch {
  display: inline-flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* ── Block editor ──────────────────────────────────── */
.block-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.block:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.block__type {
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.block__actions {
  display: flex;
  gap: var(--space-1);
}
.block__body { padding: var(--space-3); }

/* Block-type accent stripes */
.block--heading     { border-left: 3px solid oklch(55% 0.22 265); }
.block--subheading  { border-left: 3px solid oklch(65% 0.18 265); }
.block--paragraph   { border-left: 3px solid var(--color-border-strong); }
.block--bulletlist,
.block--numberlist  { border-left: 3px solid oklch(65% 0.18 160); }
.block--callout     { border-left: 3px solid oklch(70% 0.18 60); }
.block--quote       { border-left: 3px solid oklch(60% 0.15 300); }
.block--image,
.block--video       { border-left: 3px solid oklch(65% 0.18 200); }
.block--divider     { border-left: 3px solid var(--color-border); }
.block--html        { border-left: 3px solid oklch(55% 0.15 20); }

/* HTML mode editor */
.html-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.html-editor__ta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.55;
  min-height: 20rem;
}

/* ── Block palette ─────────────────────────────────── */
.block-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}
.block-palette__label {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.block-palette__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: inherit;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.block-palette__btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-1px);
}
.block-palette__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-weight: var(--weight-bold, 700);
  font-size: 0.85em;
}

/* ── Editor actions footer ─────────────────────────── */
.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  position: sticky;
  bottom: 0;
  padding: var(--space-3) 0;
  background: linear-gradient(to top, var(--color-surface) 70%, transparent);
}

/* ── Preview pane ──────────────────────────────────── */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
}
.preview-header__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.preview-frame {
  display: block;
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  min-height: 12rem;
  overflow: auto;
}
.preview-frame:empty::before {
  content: "プレビュー領域（ブロックを追加するとここに表示）";
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Dialog (course create/edit) ───────────────────── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.dialog {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.dialog__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold, 700);
}
.dialog__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}
.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── Drip / prereq field (lesson editor) ── */
.drip-field {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.field__label--small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}
.prereq-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 12rem;
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.prereq-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.prereq-item:hover {
  background: var(--color-surface-sunken);
}
.prereq-item input[type="checkbox"] {
  flex-shrink: 0;
}