/* ============================================================
   CODE PAD

   Two concerns live here:
   1. The editor shell (toolbar, gutter, the stacked textarea/<pre>).
   2. Our own syntax palette, mapped onto Prism's token classes.

   Prism's stylesheets are deliberately NOT shipped. They assume a white
   page, so on Ember/Dark several tokens (comments, punctuation) collapse
   to near-invisible. Every colour below is defined per theme instead, and
   each was checked against its own surface rather than against white.
============================================================ */

:root {
  --code-bg:          #fdfbf7;
  --code-text:        #261611;
  --code-gutter:      #b9a695;
  --code-gutter-bg:   #f6efe6;
  --code-line:        #eadfce;

  --code-comment:     #93796a;
  --code-keyword:     #9b1c31;
  --code-string:      #2f6f4f;
  --code-number:      #9a5b12;
  --code-function:    #1d4ed8;
  --code-class:       #7c3aed;
  --code-operator:    #5c473d;
  --code-punctuation: #7d6558;
  --code-tag:         #9b1c31;
  --code-attr:        #9a5b12;
  --code-deleted:     #b91c1c;
  --code-inserted:    #15803d;
}

/* Ember and Dark share one palette: both are dark surfaces, and a single
   well-tested set beats two half-tested ones. Lightened well past the
   light-theme values so nothing sinks into the background. */
body.theme-ember,
body.theme-dark {
  --code-bg:          #17130f;
  --code-text:        #ede8e2;
  --code-gutter:      #6b6058;
  --code-gutter-bg:   #1d1815;
  --code-line:        #2e2721;

  --code-comment:     #8d8076;
  --code-keyword:     #f4868d;
  --code-string:      #8fd0a3;
  --code-number:      #e8bd72;
  --code-function:    #8ab6f9;
  --code-class:       #cfa9f7;
  --code-operator:    #b9ada3;
  --code-punctuation: #9b9089;
  --code-tag:         #f4868d;
  --code-attr:        #e8bd72;
  --code-deleted:     #f19b9b;
  --code-inserted:    #8fd0a3;
}

body.theme-dark {
  --code-bg:        #0e0e0d;
  --code-gutter-bg: #141413;
  --code-line:      #272724;
}

/* ---------- Toolbar ---------- */
.cp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 12px;
}
.cp-file { display: flex; flex-direction: column; gap: 5px; }
.cp-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.cp-filename {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.86rem;
  padding: 8px 12px;
  min-width: 200px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.cp-filename--warn { border-color: var(--status-failed); }
.cp-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cp-hint { font-size: 0.78rem; color: var(--text3); }
.cp-hint--warn { color: var(--status-failed); }

/* ---------- Editor shell ---------- */
.cp-split { display: flex; gap: 12px; align-items: stretch; }
.cp-split > .cp-editor { flex: 1 1 100%; min-width: 0; }
.cp-split.is-split > .cp-editor { flex: 1 1 55%; }

.cp-editor {
  display: flex;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: min(60vh, 560px);
}

/* ---------- Sandboxed preview ---------- */
.cp-preview {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: min(60vh, 560px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.cp-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cp-preview-note {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text3);
  margin-right: auto;
}
/* Always white: this frame shows the user's own page, which should look
   the way it will everywhere else, not the way our theme happens to be. */
.cp-frame { flex: 1; width: 100%; border: 0; background: #fff; }

@media (max-width: 900px) {
  .cp-split { flex-direction: column; }
  .cp-split.is-split > .cp-editor,
  .cp-preview { flex: 1 1 auto; }
  .cp-preview { height: min(40vh, 320px); }
}

/* THE ALIGNMENT CONTRACT — the gutter, the <pre> and the <textarea> must
   agree on every one of these or the caret stops landing on its own text.
   Change one, change all three. */
.cp-gutter,
.cp-highlight,
.cp-input {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  tab-size: 2;
  -moz-tab-size: 2;
  padding: 14px 0;
  margin: 0;
  border: 0;
}

.cp-gutter {
  flex: 0 0 auto;
  padding-left: 14px;
  padding-right: 12px;
  text-align: right;
  color: var(--code-gutter);
  background: var(--code-gutter-bg);
  border-right: 1px solid var(--code-line);
  white-space: pre;
  overflow: hidden;
  user-select: none;
}

.cp-surface { position: relative; flex: 1 1 auto; overflow: hidden; }

.cp-highlight,
.cp-input {
  position: absolute;
  inset: 0;
  padding-left: 14px;
  padding-right: 14px;
  white-space: pre;
  overflow: auto;
  word-wrap: normal;
}
.cp-highlight {
  pointer-events: none;
  color: var(--code-text);
  background: transparent;
}
.cp-highlight code { font: inherit; background: none; padding: 0; }

/* The real text is here but invisible; what you read is the <pre> beneath.
   Only the caret and the selection show through. */
.cp-input {
  color: transparent;
  background: transparent;
  caret-color: var(--accent);
  resize: none;
  outline: none;
}
.cp-input::selection { background: rgba(155, 28, 49, 0.22); }
body.theme-ember .cp-input::selection,
body.theme-dark .cp-input::selection { background: rgba(255, 255, 255, 0.20); }

/* ---------- Prism token → our palette ---------- */
.cp-highlight .token.comment,
.cp-highlight .token.prolog,
.cp-highlight .token.doctype,
.cp-highlight .token.cdata { color: var(--code-comment); font-style: italic; }

.cp-highlight .token.punctuation { color: var(--code-punctuation); }

.cp-highlight .token.property,
.cp-highlight .token.symbol,
.cp-highlight .token.constant,
.cp-highlight .token.deleted { color: var(--code-deleted); }

.cp-highlight .token.boolean,
.cp-highlight .token.number { color: var(--code-number); }

.cp-highlight .token.selector,
.cp-highlight .token.attr-value,
.cp-highlight .token.string,
.cp-highlight .token.char,
.cp-highlight .token.builtin,
.cp-highlight .token.inserted { color: var(--code-string); }

.cp-highlight .token.operator,
.cp-highlight .token.entity,
.cp-highlight .token.url,
.cp-highlight .token.variable { color: var(--code-operator); }

.cp-highlight .token.atrule,
.cp-highlight .token.keyword { color: var(--code-keyword); font-weight: 600; }

.cp-highlight .token.function,
.cp-highlight .token.class-name { color: var(--code-function); }

.cp-highlight .token.tag { color: var(--code-tag); }
.cp-highlight .token.attr-name { color: var(--code-attr); }
.cp-highlight .token.regex,
.cp-highlight .token.important { color: var(--code-class); }

.cp-highlight .token.important,
.cp-highlight .token.bold { font-weight: 700; }
.cp-highlight .token.italic { font-style: italic; }

/* Markdown headings/links shouldn't lose their shape in plain colour. */
.cp-highlight .token.title { color: var(--code-keyword); font-weight: 700; }
.cp-highlight .token.list { color: var(--code-number); }
.cp-highlight .token.code-snippet { color: var(--code-string); }

@media (max-width: 720px) {
  .cp-editor { height: min(52vh, 420px); }
  .cp-toolbar-actions { margin-left: 0; width: 100%; }
  .cp-filename { min-width: 0; width: 100%; }
  .cp-file { flex: 1 1 140px; }
}