/* ==========================================================================
   Presentations page
   Loaded after style.css, which supplies the palette and the base card/field
   look shared with the other tools. Everything here is scoped to this page.
   ========================================================================== */

.pres-page {
  --pres-glow: rgba(79, 140, 255, .16);
  --ok: #2ea043;
  --warn: #d29922;
  --pres-radius: 12px;
}

/* A single soft light source behind the page so the cards read as raised
   surfaces rather than flat rectangles on flat background. */
.pres-page::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 320px at 18% -8%, var(--pres-glow), transparent 70%),
    radial-gradient(560px 280px at 92% 4%, rgba(46, 160, 67, .07), transparent 70%);
  z-index: 0;
}
.pres-page > * { position: relative; z-index: 1; }

/* ---------- page header ---------- */
.pres-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 22px 24px 0;
  max-width: 1440px; margin: 0 auto;
}
.pres-head h1 {
  margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em;
}
.pres-head .sub { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.pres-head-actions { display: flex; align-items: center; gap: 8px; }

/* Live connection indicator for Presenton. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.pill[data-state="ok"] { color: var(--text); border-color: rgba(46, 160, 67, .4); }
.pill[data-state="ok"] .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 160, 67, .18); }
.pill[data-state="down"] { color: var(--text); border-color: rgba(248, 81, 73, .45); }
.pill[data-state="down"] .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(248, 81, 73, .18); }
.pill[data-state="checking"] .dot { animation: pres-pulse 1.1s ease-in-out infinite; }
@keyframes pres-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ghost-btn:hover { border-color: var(--primary); color: var(--primary); }
.ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.ghost-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- layout ---------- */
.pres-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 24px 40px;
  max-width: 1440px; margin: 0 auto;
  align-items: start;
}
@media (max-width: 1000px) { .pres-layout { grid-template-columns: 1fr; } }

.pres-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--pres-radius);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -22px rgba(0, 0, 0, .9);
}
.pres-card + .pres-card { margin-top: 16px; }
.pres-card > h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}

/* Presenton-unreachable banner: the one condition that makes the whole form
   pointless, so it is stated once at the top instead of per-control. */
.pres-banner {
  display: none; align-items: flex-start; gap: 10px;
  margin: 0 24px 4px; padding: 12px 14px;
  max-width: 1440px;
  border-radius: var(--pres-radius);
  border: 1px solid rgba(248, 81, 73, .4);
  background: rgba(248, 81, 73, .08);
  font-size: 12.5px; line-height: 1.55;
}
.pres-banner.show { display: flex; }
.pres-banner .why { color: var(--muted); }

/* ---------- form controls ---------- */
.pres-field { margin-bottom: 15px; }
.pres-field:last-child { margin-bottom: 0; }
.pres-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; font-size: 12.5px; font-weight: 600;
}
.pres-label .hint { font-weight: 400; font-size: 11px; color: var(--muted); }
.pres-field textarea,
.pres-field input[type="text"],
.pres-field select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px;
  padding: 10px 11px;
  transition: border-color .15s, box-shadow .15s;
}
.pres-field textarea { resize: vertical; min-height: 66px; line-height: 1.55; }
.pres-field textarea:focus,
.pres-field input[type="text"]:focus,
.pres-field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .16);
}
.pres-field[data-invalid="true"] textarea,
.pres-field[data-invalid="true"] input[type="text"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(248, 81, 73, .14);
}
.field-error {
  display: none; margin-top: 5px; font-size: 11.5px; color: var(--danger);
}
.pres-field[data-invalid="true"] .field-error { display: block; }

.pres-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Segmented control — used for the export format. */
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.seg button {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); }
.seg button:not([aria-pressed="true"]):hover { color: var(--text); }

/* Number stepper for the slide count. */
.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden;
}
.stepper button {
  width: 34px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.stepper button:hover { color: var(--primary); background: rgba(79, 140, 255, .08); }
.stepper input {
  width: 56px; text-align: center;
  border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 9px 0;
}
.stepper input:focus { outline: none; }

/* Toggle switches for the boolean generation options. */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
}
.switch-row + .switch-row { border-top: 1px solid var(--border); }
.switch-row .txt { font-size: 12.5px; }
.switch-row .txt small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.switch {
  position: relative; flex: none;
  width: 38px; height: 21px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  cursor: pointer; transition: background .18s, border-color .18s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--muted); transition: transform .18s, background .18s;
}
.switch[aria-checked="true"] { background: rgba(79, 140, 255, .25); border-color: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(17px); background: var(--primary); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- template picker ---------- */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tpl {
  position: relative; padding: 0; font: inherit; color: inherit; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--panel-2); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tpl:hover { border-color: var(--primary); transform: translateY(-1px); }
.tpl[aria-pressed="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .22);
}
.tpl[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 7px; right: 7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); color: var(--primary-text);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tpl-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.tpl-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tpl-meta { padding: 7px 9px; }
.tpl-name { font-size: 12px; font-weight: 600; text-transform: capitalize; }

/* Covers Presenton hasn't rendered yet are produced on demand, so every card
   shows a shimmering placeholder until its own image actually paints — never a
   blank tile or a broken-image icon. */
.tpl-skel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(100deg, var(--panel-2) 30%, var(--border) 50%, var(--panel-2) 70%);
  background-size: 220% 100%;
  animation: tpl-shimmer 1.4s linear infinite;
}
.tpl-skel-label { font-size: 10.5px; color: var(--muted); }
@keyframes tpl-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

.tpl-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: var(--panel-2);
}
.tpl-fallback-initial { font-size: 24px; font-weight: 700; color: var(--muted); line-height: 1; }
.tpl-fallback-retry { font-size: 10.5px; color: var(--primary); cursor: pointer; }
.tpl-fallback-retry:hover { text-decoration: underline; }

.tpl-placeholder { cursor: default; }
.tpl-placeholder:hover { border-color: var(--border); transform: none; }
.tpl-name-skel {
  height: 9px; width: 60%; border-radius: 3px; background: var(--border);
  animation: tpl-fade 1.4s ease-in-out infinite;
}
@keyframes tpl-fade { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

.tpl-retry-box {
  grid-column: 1 / -1;
  padding: 14px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--panel-2); font-size: 12.5px;
}
.tpl-retry-box .hint { color: var(--muted); font-size: 11.5px; margin: 4px 0 10px; }

/* ---------- submit ---------- */
.pres-submit {
  width: 100%; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border: 0; border-radius: 10px;
  background: var(--primary); color: var(--primary-text);
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.pres-submit:hover:not(:disabled) { background: var(--primary-hover); }
.pres-submit:disabled { opacity: .5; cursor: not-allowed; }
.pres-submit .mini-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(10, 14, 20, .35); border-top-color: var(--primary-text);
  animation: spin .7s linear infinite;
}

/* ---------- result panel ---------- */
/* The form column is much taller than the result column, so the result panel
   follows the scroll instead of drifting off the top while the user works
   through the template picker. */
.result-card {
  min-height: 560px; display: flex; flex-direction: column;
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
}
@media (max-width: 1000px) { .result-card { position: static; max-height: none; } }
.result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.result-head h2 { margin: 0; font-size: 13.5px; font-weight: 650; }
.result-head .meta { display: flex; align-items: center; gap: 8px; }
.chip {
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.result-body { flex: 1; display: flex; flex-direction: column; }

.state-idle {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: var(--muted); gap: 6px; padding: 30px 20px;
}
.state-idle .big { font-size: 40px; line-height: 1; opacity: .35; }
.state-idle p { margin: 0; font-size: 13px; }
.state-idle .hint { font-size: 11.5px; }

/* ---------- progress stepper ---------- */
.run-wrap { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.run-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.run-title { font-size: 14px; font-weight: 600; }
.run-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.progress-track {
  height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #7fb2ff);
  transition: width .5s ease;
}
/* Presenton reports phases, not percentages, so between phases the bar shows
   motion instead of a fake number creeping forward. */
.progress-fill.indeterminate {
  background-image: linear-gradient(90deg, var(--primary), #7fb2ff, var(--primary));
  background-size: 200% 100%;
  animation: pres-slide 1.6s linear infinite;
}
@keyframes pres-slide { from { background-position: 200% 0; } to { background-position: 0 0; } }

.steps { display: flex; flex-direction: column; gap: 2px; }
.step {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted);
  transition: background .2s, color .2s;
}
.step .ico {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.step[data-state="active"] { background: rgba(79, 140, 255, .09); color: var(--text); }
.step[data-state="active"] .ico {
  border-color: var(--primary); border-top-color: transparent;
  animation: spin .8s linear infinite;
}
.step[data-state="done"] { color: var(--text); }
.step[data-state="done"] .ico {
  border-color: var(--ok); background: var(--ok); color: #08130a;
}
.step[data-state="done"] .ico::before { content: '✓'; }
.step .step-time { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.step .step-time.running { color: var(--primary); }

.run-note {
  padding: 10px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); line-height: 1.55;
}
.run-actions { display: flex; gap: 8px; margin-top: auto; }

/* ---------- result / error ---------- */
.result-preview {
  flex: 1; min-height: 380px;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--panel-2);
}
.result-preview object,
.result-preview iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.preview-fallback {
  height: 100%; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); text-align: center; padding: 24px;
}
.preview-fallback .big { font-size: 34px; opacity: .4; }
/* Per-phase timings for a finished run — where the minutes actually went. */
.phase-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.phase-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 11px; color: var(--muted);
}
.phase-chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.result-actions .primary-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 8px; border: 0;
  background: var(--primary); color: var(--primary-text);
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; text-decoration: none;
}
.result-actions .primary-link:hover { background: var(--primary-hover); text-decoration: none; }

.state-error {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; justify-content: center; padding: 24px;
}
.state-error .head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.state-error .head .mark {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(248, 81, 73, .15); color: var(--danger);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.state-error .detail {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto;
}

/* ---------- activity log ---------- */
.run-log {
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px;
}
.run-log summary {
  cursor: pointer; font-size: 11.5px; color: var(--muted); list-style: none;
}
.run-log summary::-webkit-details-marker { display: none; }
.run-log summary::before { content: '▸ '; }
.run-log[open] summary::before { content: '▾ '; }
.run-log pre {
  margin: 10px 0 0; padding: 10px;
  background: var(--panel-2); border-radius: 8px;
  font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); max-height: 170px; overflow: auto; white-space: pre-wrap;
}

/* ---------- endpoints drawer ---------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(4, 7, 12, .62);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 40;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--panel); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22, .8, .3, 1);
  z-index: 41; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.drawer-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.drawer-head p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.drawer-close {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
  flex: none;
}
.drawer-close:hover { color: var(--text); border-color: var(--primary); }
.drawer-body { flex: 1; overflow: auto; padding: 16px 20px 28px; }
.drawer-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; margin: 18px 0 9px;
}
.drawer-section-title:first-child { margin-top: 0; }

.ep {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); padding: 12px 13px; margin-bottom: 9px;
}
.ep-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verb {
  font: 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  padding: 4px 6px; border-radius: 5px; letter-spacing: .04em;
  background: rgba(79, 140, 255, .16); color: #8ab4ff;
}
.verb[data-m="POST"] { background: rgba(46, 160, 67, .16); color: #6ede8a; }
.verb[data-m="DELETE"] { background: rgba(248, 81, 73, .15); color: #ff8a80; }
.ep-path {
  font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); word-break: break-all;
}
.ep-title { font-size: 12.5px; font-weight: 600; margin-top: 7px; }
.ep-purpose { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 3px; }
.ep-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted);
}
.ep-foot .via { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stat { display: inline-flex; align-items: center; gap: 5px; }
.stat b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.stat[data-ok="true"] .dot { background: var(--ok); }
.stat[data-ok="false"] .dot { background: var(--danger); }

.drawer-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }

/* Parameter reference inside an endpoint card. */
.ep-details { margin-top: 10px; }
.ep-details summary {
  cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 600; color: var(--primary);
}
.ep-details summary::-webkit-details-marker { display: none; }
.ep-details summary::before { content: '▸ '; }
.ep-details[open] summary::before { content: '▾ '; }
.ep-params { margin-top: 8px; border-top: 1px dashed var(--border); }
.ep-param { padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ep-param:last-child { border-bottom: 0; }
.ep-param-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pname {
  font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); font-weight: 700;
}
.ptag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  background: rgba(139, 148, 158, .18); color: var(--muted);
}
.ptag[data-in="body"] { background: rgba(46, 160, 67, .16); color: #6ede8a; }
.ptag[data-in="path"] { background: rgba(210, 153, 34, .18); color: #e3b341; }
.ptag[data-in="query"] { background: rgba(79, 140, 255, .16); color: #8ab4ff; }
.ptype {
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);
}
.preq { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--danger); }
.pdef {
  margin-left: auto; font-size: 10.5px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ep-param-desc { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 4px; }

.ep-returns {
  margin-top: 10px; padding: 9px 10px; border-radius: 8px;
  background: rgba(79, 140, 255, .07); border: 1px solid rgba(79, 140, 255, .2);
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
}
.ep-returns-label {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--primary); margin-bottom: 3px;
}

.ep-curl { position: relative; margin-top: 10px; }
.ep-curl pre {
  margin: 0; padding: 10px 66px 10px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font: 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); white-space: pre-wrap; word-break: break-all;
  max-height: 190px; overflow: auto;
}
.ep-copy {
  border: 1px solid var(--border); background: var(--panel);
  color: var(--muted); font: inherit; font-size: 10.5px;
  padding: 4px 9px; border-radius: 6px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ep-copy:hover { color: var(--primary); border-color: var(--primary); }
.ep-copy.copied { color: var(--ok); border-color: rgba(46, 160, 67, .5); }
.ep-copy.danger:hover { color: var(--danger); border-color: var(--danger); }
a.ep-copy { text-decoration: none; display: inline-flex; align-items: center; }
a.ep-copy:hover { text-decoration: none; }
.ep-curl .ep-copy { position: absolute; top: 7px; right: 7px; }
.ep-foot .ep-copy { margin-left: auto; }

.ep-log {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.ep-log-row {
  display: grid; grid-template-columns: 62px 52px 1fr auto;
  gap: 9px; align-items: center;
  padding: 8px 11px; font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}
.ep-log-row + .ep-log-row { border-top: 1px solid var(--border); }
.ep-log-row .code { font-weight: 700; }
.ep-log-row[data-ok="true"] .code { color: var(--ok); }
.ep-log-row[data-ok="false"] .code { color: var(--danger); }
.ep-log-row .what { color: var(--text); word-break: break-all; }
.ep-log-empty { padding: 16px; text-align: center; font-size: 11.5px; color: var(--muted); }

/* ---------- history ---------- */
.count-badge {
  min-width: 17px; padding: 1px 5px; border-radius: 999px;
  background: var(--primary); color: var(--primary-text);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}

.run-entry {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); padding: 12px 13px; margin-bottom: 9px;
}
.run-entry-top { display: flex; align-items: flex-start; gap: 9px; }
.run-status {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.run-status[data-s="completed"] { background: var(--ok); color: #08130a; }
.run-status[data-s="error"] { background: rgba(248, 81, 73, .2); color: var(--danger); }
.run-status[data-s="pending"] {
  border: 1.5px solid var(--primary); border-top-color: transparent;
  animation: spin .8s linear infinite;
}
.run-topic {
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.run-facts {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
}
.run-fact {
  padding: 3px 7px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted);
}
.run-fact.cap { text-transform: capitalize; }
.run-error {
  margin-top: 8px; padding: 8px 9px; border-radius: 7px;
  background: rgba(248, 81, 73, .08); border: 1px solid rgba(248, 81, 73, .28);
  font-size: 11px; color: var(--muted); line-height: 1.55;
  word-break: break-word;
}
.run-entry-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
}
.history-empty {
  padding: 28px 16px; text-align: center; color: var(--muted); font-size: 12.5px;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--panel-2);
}

/* ---------- modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(4, 7, 12, .68);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 50;
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(460px, 100%);
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  transform: translateY(8px) scale(.985); transition: transform .18s;
}
.modal-scrim.open .modal { transform: none; }
.modal h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.modal p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.modal-choice {
  width: 100%; text-align: left; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
  padding: 12px 13px; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .15s, background .15s;
}
.modal-choice:hover { border-color: var(--primary); }
.modal-choice.danger:hover { border-color: var(--danger); }
.modal-choice b { display: block; font-size: 12.5px; font-weight: 650; }
.modal-choice small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 250px; max-width: 380px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
  font-size: 12.5px; line-height: 1.5;
  animation: toast-in .22s cubic-bezier(.22, .8, .3, 1);
}
.toast[data-kind="error"] { border-color: rgba(248, 81, 73, .45); }
.toast[data-kind="success"] { border-color: rgba(46, 160, 67, .45); }
.toast .mark { flex: none; font-size: 13px; line-height: 1.35; }
.toast[data-kind="error"] .mark { color: var(--danger); }
.toast[data-kind="success"] .mark { color: var(--ok); }
.toast[data-kind="info"] .mark { color: var(--primary); }
.toast .body b { display: block; font-weight: 600; }
.toast .body span { color: var(--muted); font-size: 11.5px; }
.toast.leaving { animation: toast-out .2s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .pres-page *, .pres-page *::before, .pres-page *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Section headings inside the template grid. They span every column so the
   cards below them stay on the same tracks as the group above. */
.tpl-section-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.tpl-section-head:not(:first-child) {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.tpl-section-count {
  padding: 1px 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 10px; letter-spacing: 0;
}