/* Kiiloopy / Liftoscript editor page */

.liftoscript-editing-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  font-size: 0.9rem;
  color: var(--text);
}

.liftoscript-editing-banner.hidden {
  display: none;
}

.liftoscript-editing-banner strong {
  font-weight: 600;
}

.liftoscript-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: start;
}

@media (max-width: 960px) {
  .liftoscript-layout {
    grid-template-columns: 1fr;
  }
}

.liftoscript-meta {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .liftoscript-meta {
    grid-template-columns: 1fr;
  }
}

.liftoscript-unit-field {
  min-width: 88px;
}

.liftoscript-public {
  margin: 0;
  padding-bottom: 8px;
}

.liftoscript-help {
  margin-top: 14px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.liftoscript-help summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.liftoscript-help-body {
  margin: 8px 0 0;
  padding: 14px 16px 16px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
  max-height: min(70vh, 560px);
  overflow: auto;
}

.liftoscript-help-body h4 {
  margin: 1.1em 0 0.4em;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.liftoscript-help-body h4:first-of-type {
  margin-top: 0.6em;
}

.liftoscript-help-body > p:first-child {
  margin-top: 0;
}

.liftoscript-help-body p {
  margin: 0 0 0.65em;
}

.liftoscript-help-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.liftoscript-help-list {
  margin: 0 0 0.75em;
  padding-left: 1.2em;
}

.liftoscript-help-list li {
  margin: 0.25em 0;
}

.liftoscript-help-list li + li {
  margin-top: 0.35em;
}

.liftoscript-help-sample {
  margin: 0.35em 0 0.9em;
  padding: 10px 12px;
  background: var(--kpy-bg, var(--surface-2, var(--surface)));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--kpy-fg, var(--text));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}

.liftoscript-errors {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #e57373;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.45;
}

.liftoscript-errors.hidden {
  display: none;
}

.liftoscript-errors a,
.liftoscript-errors button.liftoscript-error-action {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.liftoscript-error-line + .liftoscript-error-line {
  margin-top: 6px;
}

/* ─── Kiiloopy syntax colorscheme ─────────────────────────────────────── */

.kiiloopy-editor {
  --kpy-bg: #f6f4f1;
  --kpy-gutter-bg: #ebe7e1;
  --kpy-fg: #1c1917;
  --kpy-muted: #78716c;
  --kpy-caret: #1c1917;
  --kpy-selection: rgba(194, 65, 12, 0.18);
  --kpy-header: #0f766e;
  --kpy-comment: #6b7280;
  --kpy-label: #7c3aed;
  --kpy-exercise: #c2410c;
  --kpy-equipment: #a16207;
  --kpy-separator: #a8a29e;
  --kpy-number: #0369a1;
  --kpy-unit: #0e7490;
  --kpy-rpe: #db2777;
  --kpy-keyword: #4f46e5;
  --kpy-fn: #15803d;
  --kpy-set-label: #57534e;
  --kpy-error-bg: rgba(220, 38, 38, 0.12);
  --kpy-error-underline: #dc2626;
}

[data-theme="dark"] .kiiloopy-editor {
  --kpy-bg: #14161c;
  --kpy-gutter-bg: #0f1116;
  --kpy-fg: #e7e5e4;
  --kpy-muted: #78716c;
  --kpy-caret: #fafaf9;
  --kpy-selection: rgba(251, 146, 60, 0.22);
  --kpy-header: #2dd4bf;
  --kpy-comment: #6b7280;
  --kpy-label: #c4b5fd;
  --kpy-exercise: #fb923c;
  --kpy-equipment: #fbbf24;
  --kpy-separator: #57534e;
  --kpy-number: #38bdf8;
  --kpy-unit: #22d3ee;
  --kpy-rpe: #f472b6;
  --kpy-keyword: #a5b4fc;
  --kpy-fn: #4ade80;
  --kpy-set-label: #a8a29e;
  --kpy-error-bg: rgba(248, 113, 113, 0.14);
  --kpy-error-underline: #f87171;
}

.liftoscript-editor-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--kpy-bg, var(--surface));
  overflow: hidden;
  min-height: 960px;
}

[data-theme="dark"] .liftoscript-editor-wrap {
  border-color: #3a2a28;
}

.liftoscript-gutter {
  padding: 12px 8px 12px 12px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kpy-muted, var(--muted));
  user-select: none;
  background: var(--kpy-gutter-bg, var(--surface-2, var(--bg)));
  border-right: 1px solid var(--border);
  white-space: pre;
  overflow: hidden;
}

.liftoscript-code {
  position: relative;
  min-width: 0;
  min-height: 960px;
}

.liftoscript-highlight,
.liftoscript-editor {
  margin: 0;
  padding: 12px;
  border: none;
  min-height: 960px;
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.liftoscript-highlight {
  position: absolute;
  inset: 0;
  overflow: auto;
  pointer-events: none;
  color: var(--kpy-fg);
  background: transparent;
  z-index: 0;
}

.liftoscript-editor {
  position: relative;
  z-index: 1;
  resize: vertical;
  color: transparent;
  caret-color: var(--kpy-caret, var(--text));
  background: transparent;
  outline: none;
  overflow: auto;
}

.liftoscript-editor::placeholder {
  color: var(--kpy-muted, var(--muted));
}

.liftoscript-editor::selection {
  background: var(--kpy-selection);
  color: transparent;
}

.liftoscript-editor::-moz-selection {
  background: var(--kpy-selection);
  color: transparent;
}

/* Token classes */
.kpy-header {
  color: var(--kpy-header);
  font-weight: 700;
}
.kpy-comment {
  color: var(--kpy-comment);
  font-style: italic;
}
.kpy-label {
  color: var(--kpy-label);
}
.kpy-exercise {
  color: var(--kpy-exercise);
}
.kpy-equipment {
  color: var(--kpy-equipment);
}
.kpy-separator {
  color: var(--kpy-separator);
}
.kpy-number {
  color: var(--kpy-number);
}
.kpy-unit {
  color: var(--kpy-unit);
}
.kpy-rpe {
  color: var(--kpy-rpe);
}
.kpy-keyword {
  color: var(--kpy-keyword);
  font-weight: 600;
}
.kpy-fn {
  color: var(--kpy-fn);
}
.kpy-set-label {
  color: var(--kpy-set-label);
  font-style: italic;
}
.kpy-plain {
  color: var(--kpy-fg);
}
.kpy-error {
  background: var(--kpy-error-bg);
  text-decoration: underline wavy var(--kpy-error-underline);
  text-underline-offset: 2px;
}

.liftoscript-ac {
  position: absolute;
  z-index: 20;
  left: 48px;
  right: 12px;
  max-height: min(420px, 55vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.25));
}

.liftoscript-ac.hidden {
  display: none;
}

.liftoscript-ac-item {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.liftoscript-ac-item:last-child {
  border-bottom: none;
}

.liftoscript-ac-item.active,
.liftoscript-ac-item:hover {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
}

.liftoscript-ac-thumb {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg);
  flex-shrink: 0;
}

.liftoscript-ac-thumb-empty {
  width: 88px;
  height: 88px;
  border-radius: 6px;
  background: var(--surface-2, var(--bg));
  flex-shrink: 0;
}

.liftoscript-ac-body {
  min-width: 0;
}

.liftoscript-ac-body strong {
  display: block;
  margin-bottom: 4px;
}

.liftoscript-ac-meta {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.liftoscript-ac-meta span {
  color: var(--text);
}

.liftoscript-preview {
  padding: 14px 16px;
  position: sticky;
  top: 12px;
}

.liftoscript-preview-body {
  margin-top: 8px;
  font-size: 0.9rem;
}

.liftoscript-preview .muscle-map-card {
  margin: 10px 0 12px;
}

.liftoscript-preview .muscle-map-view {
  height: 200px;
}

.liftoscript-preview-body ul {
  margin: 6px 0 12px;
  padding-left: 1.1rem;
}

.liftoscript-preview-body li {
  margin-bottom: 4px;
}