/* The script editor, with its live length and timings. */

.editor-bar {
  display: flex; align-items: center; gap: 12px; padding: var(--safe-top) max(18px, var(--safe-right)) 0 max(18px, var(--safe-left));
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.editor-name {
  flex: 1; min-width: 120px; max-width: 520px; padding: 7px 10px; outline: none;
  border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 18px; font-weight: 600;
}
.editor-name:hover { border-color: var(--line); }
.editor-name:focus { border-color: var(--amber); background: var(--panel-2); }
.editor-status { margin-left: auto; font-size: 13px; color: var(--muted); }
.editor-status.dirty { color: var(--amber); }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.editor-main { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 18px 18px; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editor-tools span { margin-right: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#editor-text {
  flex: 1; min-height: 0; resize: none; outline: none; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  font: 17px/1.65 var(--ui);
}
#editor-text:focus { border-color: var(--line-focus); }

.editor-side { overflow-y: auto; padding: 20px 20px 28px; border-left: 1px solid var(--line); background: var(--panel); }
.editor-side h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.editor-total { font-size: 46px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.editor-summary { margin: 6px 0 18px; font-size: 13.5px; color: var(--muted); }

.card { margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.card-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.card-label b { color: var(--text); }

.target { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.target .nowrap { display: inline-flex; align-items: center; gap: 8px; }
.target .field { width: 70px; padding: 6px 8px; text-align: center; }
.target-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.target-result b { color: var(--text); }

.editor-side .timings-head { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.timings { list-style: none; margin: 0; padding: 0; }
.timings li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.timings li:first-child { border-top: 0; }
.timings .time { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.timings .pause span:last-child { color: var(--muted); font-style: italic; }
.timings .end span { color: var(--muted); }

.hint { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1000px) {
  .editor { grid-template-columns: minmax(0, 1fr) 290px; }
  .editor-side { padding: 16px 16px 24px; }
}
/* ---------- narrow screens: the timings fold below the text ---------- */
@media (max-width: 640px) {
  .editor-bar { gap: 6px; padding-left: max(8px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); }
  .editor-bar .btn:has(.icon) { font-size: 0; gap: 0; padding: 8px 10px; }
  .editor-bar .btn:has(.icon) .icon { width: 20px; height: 20px; }
  .editor-name { min-width: 0; font-size: 16px; padding: 6px 8px; }
  .editor-status { display: none; }
  .editor { display: block; overflow-y: auto; }
  .editor-main { padding: 12px max(12px, var(--safe-right)) 12px max(12px, var(--safe-left)); }
  .editor-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #editor-text { flex: none; min-height: 55vh; font-size: 16px; padding: 14px 16px; }
  .editor-side { border-left: 0; border-top: 1px solid var(--line); padding: 18px max(16px, var(--safe-right)) calc(28px + var(--safe-bottom)) max(16px, var(--safe-left)); }
}