/* e5b.css -- splitters, panelen, thema, over, herverbindscherm.
 * Tokens uit core.css (var(--surface) enz.); geen eigen hex. */

/* ==== Studio.dialog: confirm/prompt als modal, geen window.confirm/prompt =========== */
.dlgscrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
.dlgscrim[hidden] { display: none; }
.dlgcard {
  min-width: 320px; max-width: 480px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  padding: 20px; color: var(--text);
}
.dlgtext { margin: 0 0 14px; line-height: 1.5; white-space: pre-wrap; }
.dlginput {
  width: 100%; box-sizing: border-box; margin-bottom: 14px;
  background: var(--bg); color: var(--text); border: 1px solid var(--rule); border-radius: 3px;
  font: inherit; padding: 6px 8px;
}
.dlginput:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; }
.dlgbtn {
  padding: 6px 14px; border-radius: 3px;
  background: var(--surface2); color: var(--text);
}
.dlgbtn:hover { background: var(--hover); }
.dlgbtn.primary { background: var(--accent); color: var(--accent-tx); }
.dlgbtn.primary:hover { background: var(--accent-hi); }
.dlgbtn.danger { background: var(--danger); color: #ffffff; }
.dlgbtn:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }

/* ==== herverbindscherm: docs/studio-specs.md regel 11 ================================
 * #gone en zijn SVG staan al in index.html (het fundament); core.css zet er alleen een
 * basislayout op. Dit verfijnt de vorm naar de regel: EEN VOLLEDIGE SCRIM (donkerder en
 * transparanter dan de fundament-versie, zodat het venster erdoorheen schemert net als
 * bij de oude canvas-client), een grotere driehoek, en de gedimde pogingregel die e5b.js
 * toevoegt (#gonetry). GEEN toast, geen spinner -- alleen wat de regel noemt. */
#gone {
  background: rgba(30, 30, 30, .94);
  gap: 18px;
}
:root[data-theme="light"] #gone { background: rgba(240, 240, 240, .94); }
#gone svg { width: 96px; height: 96px; }
#gone h1 { font-size: calc(var(--ui-fs) * 24 / 13); }
#gone p { max-width: 34em; line-height: 1.6; text-align: center; }
#gone .dim { color: var(--text-dim); font-size: calc(var(--ui-fs) * 13 / 13); }

/* ==== het Over-scherm ================================================================= */
.aboutbox { padding: 24px; max-width: 640px; }
.aboutbox h1 { font-size: calc(var(--ui-fs) * 20 / 13); margin: 0 0 4px; color: var(--text-strong); }
.aboutbox .dim { color: var(--text-dim); margin: 0 0 18px; }
.aboutkv { display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; margin: 0 0 20px; }
.aboutkv dt { color: var(--text-dim); }
.aboutkv dd { margin: 0; }
.aboutevidence {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  padding: 12px 14px; font: var(--code-fs)/1.6 var(--font-code); color: var(--text);
  white-space: pre-wrap; user-select: text;
}

/* light theme only (S-0000-0382 groep B): het confirm/prompt-dialoogkaartje wordt een
 * zachte kaart, zoals #menubar .dropdown in core.css -- dark is ongewijzigd (zelfde guard:
 * systeemlicht zonder override, of een expliciete data-theme="light"). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dlgcard {
    background: var(--surface-card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .dlgcard {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* About as a small window over the studio (S-0000-0573) */
.about-modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.about-modal .aboutbox { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 20px 24px; min-width: 360px; max-width: min(460px, 100% - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.about-modal .aboutbox h1 { margin-top: 0; }
.about-modal .aboutevidence { display: none; }
.about-modal .aboutbtns { text-align: right; margin-top: 12px; }
.about-modal .aboutclose { background: var(--surface2); color: var(--text-strong); border: 1px solid var(--rule); border-radius: 4px; padding: 5px 14px; cursor: pointer; font: var(--ui-fs) var(--font-ui); }
.about-modal a { color: var(--accent-hi); }