/* core.css -- the tokens and the shell of the browser client.
 *
 * THE TOKENS ARE THE STUDIO'S OWN (src/ui/tokens.wz dark and light, src/ui/lexcol.wz),
 * as CSS variables; a module uses var(--surface), never a hex of its own. WHERE THE
 * TOKENS AND VS CODE DIFFER, VS CODE WINS (localfiles/webclient/BRIEFING.md) -- the
 * metrics below (35px title bar, 48px activity bar, 22px status bar, 35px tabs) are
 * VS Code's, and a deliberate deviation from a token is noted where it is made.
 *
 * THEMES: dark is the default; light follows the OS (prefers-color-scheme) unless
 * <html data-theme="dark"|"light"> forces one (e5b). Everything is a variable, so a
 * theme is one block.
 *
 * LAYOUT: one CSS grid for the app, one for the body. The sidebar collapses with
 * body.nosidebar, the bottom panel opens with body.panelopen; widths are variables so a
 * splitter (e5b) sets them without touching this file.
 */

:root {
  color-scheme: dark;       /* native controls (select, scrollbars, checkboxes) follow the theme */
  /* ---- dark theme, src/ui/tokens.wz ---- */
  --bg:          #1e1e1e;   /* UI_BG */
  --surface:     #252926;   /* UI_SURFACE */
  --surface2:    #303030;   /* UI_SURFACE2 */
  --rule:        #424242;   /* UI_RULE */
  --text-strong: #f0f0f0;   /* UI_TEXTSTRONG */
  --text:        #c8d0d4;   /* UI_TEXT */
  --text-dim:    #858585;   /* UI_TEXTDIM */
  --text-muted:  #666666;   /* UI_TEXTMUTED */
  --accent:      #0e5f9c;   /* UI_ACCENT */
  --accent-hi:   #127cbd;   /* UI_ACCENTHI */
  --accent-tx:   #ffffff;   /* UI_ACCENTTX */
  --danger:      #d43333;   /* UI_DANGER */
  /* ERROR TEXT is not --danger: dark red on a dark background was hard to read (Floris,
     24-09-2026: "fel-geel misschien handiger"). Red stays for areas, dots and borders. */
  --danger-tx:   #ffd84a;
  --ok:          #3a9d43;   /* UI_OK */
  --attn:        #d9a441;   /* UI_ATTN */
  --chrome:      #333333;   /* UI_CHROME */
  --statusbg:    #007ecc;   /* UI_STATUSBG */
  --curline:     #242c28;   /* UI_CURLINE */
  --indent:      #404040;   /* UI_INDENT */
  --selection:   #264f78;   /* VS Code editor.selectionBackground; no token for it yet */
  --hover:       #2a2d2e;   /* VS Code list.hoverBackground */
  --focus:       #007fd4;   /* VS Code focusBorder */

  /* ---- syntax, src/ui/tokens.wz dark ---- */
  --syn-keyword: #c58ac0;
  --syn-type:    #56a0d6;
  --syn-ident:   #dcdcaa;
  --syn-const:   #4ec7b0;
  --syn-comment: #6a9955;   /* VS Code Dark+ (officieel); tokens.wz droeg #559955, BESLUITEN-FASE-B.md 23-09-2026: VS Code wint */
  --syn-string:  #ce9178;
  --syn-number:  #b5cea8;

  /* ---- metrics: VS Code's ---- */
  /* DE HOOGTES GROEIEN MEE MET --ui-fs (DEC-0000-0142): VS Code's 35/22 bij 13 px tekst, hier
     bij 17 px -> 46/29. e5b.js zet ze opnieuw als editor.panelsize verandert (round(35 * v / 13),
     round(22 * v / 13)); e3a.js en e8c.js lezen --row-h als getal, dus ze blijven px. */
  --title-h:    46px;
  --status-h:   29px;
  --tab-h:      46px;
  --row-h:      29px;
  /* 19 PX CODE, 17 PX PANELEN (Floris 28-09-2026, DEC-0000-0142: bewust groter dan VS Code's
     14/13). De regelhoogte volgt VS Code's eigen verhouding (19 bij 14 px) -> 26 px. Dezelfde
     getallen staan als standaard van editor.fontsize/editor.panelsize in cfgmodel.wz, en
     e5b.js past een instelling toe met die verhouding -- houd de drie gelijk. */
  --line-h:     26px;
  --code-fs:    19px;
  --ui-fs:      17px;
  --side-w:     260px;
  --panel-h:    220px;

  --font-ui:   "Segoe UI", system-ui, -apple-system, "DejaVu Sans", sans-serif;
  --font-code: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;

  /* ---- shape and elevation: dark keeps the sharp, bordered VS Code look (2-4px, no
     shadow) as its default; the light theme below redefines all three to the calmer,
     rounded, shadow-based look of S-0000-0360. A component asking for "a dialog's
     radius" writes --radius-lg, not a literal number, so light and dark can each answer
     it differently without every component's own CSS changing. ---- */
  --radius-sm:   3px;   /* a button, an input, a small chip -- current VS Code-ish value */
  --radius-md:   4px;   /* a dropdown, a menu, a small card */
  --radius-lg:   6px;   /* a dialog, a big panel */
  --shadow-card: 0 2px 8px rgba(0,0,0,.36);  /* the current flat drop-shadow */
  --surface-card: var(--surface);            /* a floating card (menu, dialog, palette) */
}

/* LIGHT THEME, from the same tokens.wz light block, restyled in the calm style of
 * Claude's light mode (S-0000-0360): a warm off-white app background, white surfaces
 * with soft shadows instead of hard borders, generous radius, near-black text with a
 * muted warm-grey secondary. THE ACCENT IS THE WANTZEL HOUSE COLOUR (--accent:#8a4218,
 * see .claude/skills/wantzel-design), not Anthropic's blue -- the screenshots' style is
 * the reference, not their brand. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf9f5; --surface: #ffffff; --surface2: #f0eee7; --rule: #e8e6e0;
    --text-strong: #1f1e1d; --text: #3d3b36; --text-dim: #73726c; --text-muted: #a19e94;
    --accent: #8a4218; --accent-hi: #a8531f; --chrome: #faf9f5; --curline: #f3f1ea;
    --indent: #ddd9cf; --selection: #f0e0d3; --hover: #f0eee7; --focus: #8a4218;
    --syn-keyword: #ad3da4; --syn-type: #267f99; --syn-ident: #7a5c1e;
    --syn-const: #0e7490; --syn-comment: #6b7a4f; --syn-string: #a31515;
    --syn-number: #0f7a5c; --danger-tx: #a61b1b;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --shadow-card: 0 4px 16px rgba(31,30,29,.10), 0 1px 3px rgba(31,30,29,.08);
    --surface-card: #ffffff;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #faf9f5; --surface: #ffffff; --surface2: #f0eee7; --rule: #e8e6e0;
  --text-strong: #1f1e1d; --text: #3d3b36; --text-dim: #73726c; --text-muted: #a19e94;
  --accent: #8a4218; --accent-hi: #a8531f; --chrome: #faf9f5; --curline: #f3f1ea;
  --indent: #ddd9cf; --selection: #f0e0d3; --hover: #f0eee7; --focus: #8a4218;
  --syn-keyword: #ad3da4; --syn-type: #267f99; --syn-ident: #7a5c1e;
  --syn-const: #0e7490; --syn-comment: #6b7a4f; --syn-string: #a31515;
  --syn-number: #0f7a5c; --danger-tx: #a61b1b;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --shadow-card: 0 4px 16px rgba(31,30,29,.10), 0 1px 3px rgba(31,30,29,.08);
  --surface-card: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* hidden wint ALTIJD. De kern verbergt zijbalkviews en panelen met het hidden-attribuut;
   een module die zijn view display: flex geeft (e8a deed dat) overschreef dat, en dan
   stond die lege view permanent open en duwde elk ander paneel uit beeld. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  /* clip, niet alleen hidden: hidden verbiedt de gebruiker het scrollen, maar
     scrollIntoView scrolde body toch 13px mee zodra iets absoluut geplaatsts eronder
     uitstak -- de menubalk viel dan half van het scherm. clip verbiedt het ook in code. */
  overflow: hidden;
  overflow: clip;
  background: var(--chrome);
  color: var(--text);
  font: var(--ui-fs)/1.4 var(--font-ui);
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }

/* ---- APP GRID ------------------------------------------------------------------ */
#app {
  height: 100%;
  display: grid;
  grid-template-rows: var(--title-h) 1fr var(--status-h);
  /* NEVER WIDER THAN THE WINDOW. Without this the single column grows with the widest
     unbreakable content -- a long status message pushed the whole page past the right edge. */
  grid-template-columns: minmax(0, 1fr);
}

/* ---- TITLE / MENU BAR ----------------------------------------------------------- */
#titlebar {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  color: var(--text-strong);
  font-size: calc(var(--ui-fs) * 12 / 13);
}
#titlebar .logo { color: var(--accent-hi); display: flex; margin-right: 6px; }
#titlebar .title { font-weight: 400; color: var(--text-dim); }
.spacer { flex: 1; }
.badge {
  font-size: calc(var(--ui-fs) * 11 / 13); padding: 2px 8px; border-radius: 10px;
  background: var(--surface2); color: var(--text-dim);
}
.badge[data-state="ok"]   { background: #14351c; color: var(--ok); }
.badge[data-state="gone"] { background: #3a1a1a; color: var(--danger-tx); }

#menubar { display: flex; align-items: stretch; height: 100%; }
#menubar .menu {
  position: relative;
  padding: 0 8px; border-radius: 4px; height: 22px; align-self: center;
  color: var(--text);
}
#menubar .menu:hover, #menubar .menu.open { background: var(--surface2); color: var(--text-strong); }
#menubar .dropdown {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 220px; padding: 4px 0; margin-top: 2px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  text-align: left; cursor: default;
}
#menubar .dropdown .item {
  display: flex; align-items: center; gap: 24px;
  padding: 0 10px 0 26px; height: 26px; margin: 0 4px; border-radius: 4px;
  color: var(--text); white-space: nowrap;
}
#menubar .dropdown .item .label { flex: 1; }
#menubar .dropdown .item .key { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
#menubar .dropdown .item:hover:not(.disabled) { background: var(--accent); color: var(--accent-tx); }
#menubar .dropdown .item:hover:not(.disabled) .key { color: var(--accent-tx); }
#menubar .dropdown .item.disabled { color: var(--text-muted); }
#menubar .dropdown .sep { height: 1px; margin: 4px 10px; background: var(--rule); }
/* light theme only (S-0000-0360): the floating menu becomes a soft card, using the new
 * shape/elevation tokens -- dark is untouched, it never matches either selector below
 * (same guard as the token blocks above: system light with no override, or an explicit
 * data-theme="light"). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #menubar .dropdown {
    background: var(--surface-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] #menubar .dropdown {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ---- BODY GRID ------------------------------------------------------------------ */
#body {
  display: grid;
  grid-template-columns: var(--side-w) 1px 1fr;
  min-height: 0;
}
body.nosidebar #body { grid-template-columns: 0 0 1fr; }
body.nosidebar #sidebar, body.nosidebar #sidesplit { display: none; }

/* ---- SIDE BAR: the Explorer only (S-0000-0326) ----------------------------------- */
#sidebar {
  background: var(--surface);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.panelhead {
  height: var(--tab-h); padding: 0 20px;
  display: flex; align-items: center;
  font-size: calc(var(--ui-fs) * 11 / 13); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim);
}
#sideviews { flex: 1; min-height: 0; overflow: auto; }
.sideview { height: 100%; }

.split { background: var(--rule); position: relative; }
.split[aria-orientation="vertical"] { cursor: col-resize; }
.split[aria-orientation="horizontal"] { cursor: row-resize; height: 1px; }
.split::after { content: ""; position: absolute; inset: 0 -3px; }
.split[aria-orientation="horizontal"]::after { inset: -3px 0; }
.split:hover, .split.drag { background: var(--focus); }

/* ---- EDITOR GROUP ----------------------------------------------------------------- */
#main {
  background: var(--bg);
  display: grid;
  grid-template-rows: var(--tab-h) 1fr 0 0;
  min-width: 0; min-height: 0;
}
body.panelopen #main { grid-template-rows: var(--tab-h) 1fr 1px var(--panel-h); }
#panelsplit, #panel { display: none; }
body.panelopen #panelsplit { display: block; }
/* #panel is een grid (35px kop + 1fr inhoud, zie verderop); "display: block" hier zou die
 * grid overschrijven, #panelviews groeit dan ongeclipt met zijn inhoud mee en een lange
 * inhoud (S-0000-0280: het nieuw-profiel-formulier) zakt uit het paneel EN de viewport. */
body.panelopen #panel { display: grid; }
/* MAXIMIZE PANEL SIZE (S-0000-0326): the panel takes the whole editor-group row, like VS
 * Code's chevron-in-the-corner. #tabs/#editor/#panelsplit are hidden rather than sized to
 * 0 -- an editor at 0 height still has to lay out its gutter and viewport, and giving it
 * nothing to measure is simpler than trusting it degrades gracefully at zero. */
body.panelopen.panelmax #main { grid-template-rows: 0 0 0 1fr; }
body.panelopen.panelmax #tabs, body.panelopen.panelmax #editor, body.panelopen.panelmax #panelsplit { display: none; }
/* THE PANEL KEEPS ROW 4 WHEN THE OTHERS ARE GONE: an element with display:none takes no grid
 * cell, so without this #panel was auto-placed into row 1 -- the 0 px one -- and every
 * maximized panel showed nothing (measured: #panel 1179x0). */
body.panelopen.panelmax #panel { grid-row: 4; }

#tabs {
  display: flex; align-items: stretch;
  background: var(--surface);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
#editor { position: relative; min-height: 0; overflow: hidden; }

/* ---- BOTTOM PANEL ------------------------------------------------------------------ */
/* NO display HERE: body.panelopen #panel sets grid, and a closed panel is display:none (above).
 * This rule used to say display:grid too, and being later it won -- a closed panel kept its
 * tab row, drawn over the status bar (seen once simple mode started with the panel closed). */
#panel { background: var(--bg); grid-template-rows: 35px 1fr; min-height: 0; }
#paneltabs {
  display: flex; align-items: center; gap: 16px; padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--rule);
  /* MANY TABS NOW (every former sidebar feature lives here): scroll the strip rather
   * than shrink it and lose readability, same choice as #tabs above it. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.ptab {
  font-size: calc(var(--ui-fs) * 11 / 13); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); height: var(--tab-h); border-bottom: 1px solid transparent;
  white-space: nowrap; flex: 0 0 auto;
}
/* S-0000-0368: hover gebruikte --text-strong, exact dezelfde kleur als .ptab.on -- een
 * cursor die toevallig boven een NIET-actieve tab bleef staan (bv. net na een klik
 * ernaast) maakte die tab even zo wit als de echt actieve, en op een schermafbeelding
 * lijken dat dan TWEE actieve tabs. Hover krijgt nu een tussenkleur (--text, dimmer dan
 * --text-strong) en geen onderstreep, zodat alleen .on ooit de volle --text-strong +
 * lijn combinatie draagt -- dezelfde scheiding als VS Code's inactive-tab-hover
 * tegenover zijn active-tab-foreground. */
.ptab:hover { color: var(--text); }
.ptab.on { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.ptab.on:hover { color: var(--text-strong); }
#panelviews { min-height: 0; overflow: auto; }
.panelview { height: 100%; }

/* the maximize/restore chevron: pinned to the right of the tab strip, like VS Code's */
#panelmaxbtn {
  /* order: the button is the strip's FIRST child (index.html) and the tabs are appended after
   * it; without order it pushed every tab to the right -- invisible while eleven tabs filled
   * the strip, obvious with the four of simple mode (S-0000-0563) */
  order: 99; margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); border-radius: 4px;
}
#panelmaxbtn:hover { color: var(--text-strong); background: var(--hover); }

/* ---- STATUS BAR -------------------------------------------------------------------- */
#status {
  display: flex; align-items: center;
  background: var(--statusbg); color: #ffffff;
  font-size: calc(var(--ui-fs) * 12 / 13); padding: 0 10px 0 0;
}
#status { min-width: 0; overflow: hidden; }
#status-left, #status-right { display: flex; align-items: center; height: 100%; }
/* a long message on the left is clipped; the right side (cursor, language) always stays whole */
#status-left { min-width: 0; overflow: hidden; flex: 0 1 auto; }
#status-right { flex: 0 0 auto; }
.stitem { display: flex; align-items: center; height: 100%; padding: 0 5px; white-space: nowrap; min-width: 0; overflow: hidden; }
.stitem:hover { background: rgba(255,255,255,.12); }
#status-left .stitem:first-child { padding-left: 10px; }

/* ---- CONNECTION LOST ------------------------------------------------------------- */
#gone {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
}
#gone[hidden] { display: none; }
#gone svg { width: 64px; height: 64px; }
#gone h1 { font-size: calc(var(--ui-fs) * 20 / 13); font-weight: 600; margin: 16px 0 6px; color: var(--text-strong); }
#gone p { margin: 0; color: var(--text-dim); }

/* ---- scrollbars, VS Code-like ------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); }
::-webkit-scrollbar-thumb:hover { background: rgba(100,100,100,.7); }
::-webkit-scrollbar-track { background: transparent; }