/* ═══════════════════════════════════════════════════════════════════════════
 *  The template editor's own styles — and ONLY its own.
 *
 *  AI NOTES
 *  ────────
 *  LOADED LAST, after assets/chrome.css and assets/base.css. The palette, the
 *  page column, cards, buttons, inputs, notes and pills all come from base.css
 *  and are shared with every tool; what is left here is the two-pane editor,
 *  which no other tool has.
 *
 *  EDIT base.css IF YOU WANT TO CHANGE A SHARED THING — there is a page in
 *  this very tool for doing it.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* The editor is wider than a reading column — it is two panes side by side. */
body[data-page="edit"] main.wrap,
body[data-page="preview"] main.wrap,
body[data-page="styles"] main.wrap  { max-width: 92rem; }

.ed { display: grid; grid-template-columns: 19rem 1fr; gap: 1rem; align-items: start; }

.ed-files {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .7rem; position: sticky; top: 4.6rem;
}
.ed-hd { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
         color: var(--ink-faint); padding: .2rem .35rem .5rem; }
.ed-files ul { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.ed-file {
  display: flex; width: 100%; gap: .5rem; align-items: baseline;
  padding: .32rem .4rem; border: 0; background: none; border-radius: var(--r);
  color: var(--ink-dim); font-family: var(--mono); font-size: .74rem;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.ed-file:hover { background: rgba(255, 255, 255, .05); color: var(--ink-bright); }
.ed-file.on { background: var(--go-soft); color: var(--go-ink); }
.ed-file .p { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ed-file .s { color: var(--ink-faint); font-size: .66rem; }
.ed-hint { margin: .7rem .35rem 0; font-size: .7rem; color: var(--ink-faint); line-height: 1.5; }

.ed-pane {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .7rem; min-width: 0;
}
.ed-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.ed-path { font-size: .74rem; color: var(--ink-bright); overflow: hidden; text-overflow: ellipsis; }
.ed-sp { flex: 1; }

#edText {
  width: 100%; height: 60vh; min-height: 24rem; resize: vertical;
  font-family: var(--mono); font-size: .76rem; line-height: 1.6;
  tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

/* ------------------------------------------------------------------ preview */

.pv-bar { display: flex; gap: .5rem; align-items: center; margin: 0 0 .9rem; flex-wrap: wrap; }
.pv-w.on { border-color: var(--go-line); background: var(--go-soft); color: var(--go-ink); }

/* THE STAGE CENTRES THE FRAME when it is narrowed, so a phone-width preview
   sits in the middle of the page rather than clinging to the left edge. */
.pv-stage {
  display: flex; justify-content: center;
  background: var(--bg-sunk); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .7rem; overflow: hidden;
}
/* STYLED BY WHERE IT IS, NOT BY ITS id. This was #pvFrame, which meant the
   Styles page's frame — a different id in the same kind of stage — inherited
   none of it and fell back to the iframe default of 300px wide, while the
   button above it said Full. Two pages wanting the same frame is one rule. */
.pv-stage iframe {
  width: 100%; height: 36rem; border: 0; border-radius: var(--r);
  background: var(--bg); transition: width .18s ease;
}

@media (max-width: 60rem) {
  .ed { grid-template-columns: 1fr; }
  .ed-files { position: static; }
  .ed-files ul { max-height: 14rem; }
}

/* ------------------------------------------------- the central style editor */

/* TWO PANES, THE CODE AND THE CONSEQUENCE. A stylesheet you cannot see the
   effect of is a stylesheet you edit by reloading another tab. */
.st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }

.st-edit #stText { height: 62vh; min-height: 26rem; }
.st-edit select { width: auto; max-width: 18rem; font-size: .78rem; }

.st-view { position: sticky; top: 4.6rem; }
.st-view .pv-stage { padding: .5rem; }
.st-view .pv-stage iframe { height: 58vh; min-height: 24rem; }
.st-w.on { border-color: var(--go-line); background: var(--go-soft); color: var(--go-ink); }

@media (max-width: 70rem) {
  .st { grid-template-columns: 1fr; }
  .st-view { position: static; }
}