/* ============================================================================
   BBYW Design — de schil (fundament, 08-10-2026). Laadt als LAATSTE stylesheet.
   Bron van de waarden: public/mia-design/tokens.css (--md-*, gedeelde bron met BBYW DM,
   /home/mia/mia-design/fundament/code/tokens.css). Regels: mia-design/fundament/REGELS.md.
   Elke var() heeft een terugval, zodat de schil ook zonder tokens.css heel blijft.
   Telefoon (< 760 px, zelfde grens als isMobile() en os.css: 'not all and (max-width: 759px)' = desktop): vensters blijven zoals ze waren (apps zijn daar schermvullend).
   ========================================================================== */

/* ---------- 1. Vensters: lichten linksboven, titel in het midden (kaart 16) ---------- */
/* standaard (ook telefoon): de nieuwe delen zijn onzichtbaar of doen niets met de opmaak */
.win-naam { display: contents; }
.win-ico, .licht-teken { display: none; }
.win-lichten:empty { display: none; }

@media not all and (max-width: 759px) {
  html[data-thema] .window {
    border: 0; border-radius: var(--md-r-venster, 12px);
    box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.16);
  }
  html[data-thema] .window.focused { box-shadow: var(--md-schaduw-l, 0 24px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10)), 0 0 0 .5px rgba(0,0,0,.18); }
  html[data-thema="avond"] .window { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 .5px rgba(255,255,255,.10); }
  html[data-thema="avond"] .window.focused { box-shadow: var(--md-schaduw-l, 0 24px 60px rgba(0,0,0,.55)), 0 0 0 .5px rgba(255,255,255,.14); }
  html[data-thema] .window.maximized { border-radius: 0; }

  /* titelbalk: drie kolommen, zodat de naam precies in het midden staat, wat er links of rechts ook zit */
  html[data-thema] .window-bar {
    display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 14px;
    border-bottom: 0; cursor: default;
    background: #F6F6F8 !important;               /* glas-dik op een wit venster, massief (C4: geen glas op glas) */
  }
  html[data-thema="avond"] .window-bar { background: #2A2A2D !important; }
  html[data-thema] .window-bar > .win-lichten { grid-column: 1; justify-self: start; }
  html[data-thema] .window-bar > .win-naam { grid-column: 2; }
  html[data-thema] .window-bar > .window-btns { grid-column: 3; justify-self: end; }

  .win-naam { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
  .win-naam .window-dot { display: none; }
  .win-ico { display: block; width: 18px; height: 18px; flex: none; }
  .win-ico .dock-ico { border-radius: 5px; box-shadow: none; }
  .win-ico .dock-ico svg { width: 62%; height: 62%; stroke-width: 2; }
  html[data-thema] .window-title {
    flex: 0 1 auto; min-width: 0;
    font-family: var(--md-letter, -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif);
    font-size: 13px; font-weight: 600; letter-spacing: -.006em; text-transform: none;
    color: var(--md-label, #1d1d1f);
  }
  html[data-thema] .window:not(.focused) .window-title { color: var(--md-label-2, rgba(60,60,67,.62)); }
  html[data-thema] .window:not(.focused) .win-ico { opacity: .55; }

  /* de lichten: rood · geel · groen, tekening verschijnt bij aanwijzen */
  .win-lichten { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
  .win-lichten button {
    position: relative; width: 12px; height: 12px; padding: 0; margin: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: default;
    background: #FF5F57; color: #4d0000;
    box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14);
    transition: background-color var(--md-duur-vervaag, 200ms) ease;
  }
  .win-lichten .min { background: #FEBC2E; color: #8a5100; }
  .win-lichten .max { background: #28C840; color: #0a5c0a; }
  .win-lichten button::after { content: ""; position: absolute; inset: -9px -4px; }   /* ruimer raakvlak, zonder overlap */
  .win-lichten button > svg:not(.licht-teken) { display: none; }
  .win-lichten .licht-teken {
    display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round;
    opacity: 0; transition: opacity 100ms ease-out;
  }
  .win-lichten .licht-teken .vol { fill: currentColor; stroke: none; }
  .win-lichten:hover .licht-teken, .win-lichten:focus-within .licht-teken { opacity: 1; }
  .win-lichten button:active { filter: brightness(.82); }
  .win-lichten button:focus-visible { outline: 2px solid var(--md-tint, #00727A); outline-offset: 2px; }
  /* venster niet actief: grijze lichten, kleur terug zodra je ze aanwijst */
  html[data-thema] .window:not(.focused) .win-lichten:not(:hover) button { background: #DCDCE0; }
  html[data-thema="avond"] .window:not(.focused) .win-lichten:not(:hover) button { background: #4A4A4E; box-shadow: none; }

  /* knoppen rechts: iconen zonder kader (kaart 16) */
  html[data-thema] .window-btns { gap: 2px; align-items: center; }
  html[data-thema] .window-btns button {
    width: 30px; height: 28px; border-radius: 7px; border: 0; box-shadow: none; background: transparent;
    color: var(--md-label-2, rgba(60,60,67,.62));
  }
  html[data-thema] .window-btns button:hover { background: var(--md-fill, rgba(120,120,128,.12)); color: var(--md-label, #1d1d1f); }
  html[data-thema] .window-btns svg { width: 15px; height: 15px; }

  /* groot gemaakt: de balk zweeft als glas over de app (kort, alleen bij aanwijzen bovenin) */
  html[data-thema] .window.maximized .window-bar {
    background: var(--md-glas-dik, rgba(246,246,250,.78)) !important;
    -webkit-backdrop-filter: blur(var(--md-blur, 30px)) saturate(var(--md-verzadig, 180%)) !important;
    backdrop-filter: blur(var(--md-blur, 30px)) saturate(var(--md-verzadig, 180%)) !important;
    box-shadow: 0 .5px 0 var(--md-sep, rgba(60,60,67,.14));
  }
  html[data-thema] .window.maximized .window-bar::after { display: none; }
}

@media not all and (max-width: 759px) { @media (prefers-reduced-transparency: reduce) {
  html[data-thema] .window.maximized .window-bar { background: var(--md-vlak, #fff) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
} }
@media not all and (max-width: 759px) { @media (prefers-contrast: more) {
  .win-lichten button { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
  html[data-thema] .window { box-shadow: 0 0 0 1px var(--md-rand, rgba(0,0,0,.55)), var(--md-schaduw-l, 0 24px 60px rgba(0,0,0,.18)); }
} }

/* ---------- 2. Huid van de schil: kleur, letters, glas van de balken ----------
   Alleen de Strak-variabelen omzetten naar de BBYW Design-tokens; de indeling van de schermen blijft (fase 2/3).
   Status- en tekstkleuren (--ok/--warn/--oker) blijven: de Apple-statuskleuren zijn te licht voor tekst (A2 → stippen). */
html[data-thema] {
  --f: var(--md-letter, -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif);
  --font-display: var(--f);
  --bg: var(--md-grond, #f2f2f7);
  --grond: var(--md-grond, #f2f2f7); --grond2: var(--md-grond, #f2f2f7);
  --vlak: var(--md-vlak, #fff); --vlak2: var(--md-vlak-2, #f7f7fa);
  --text: var(--md-label, #1d1d1f); --inkt: var(--md-label, #1d1d1f);
  --text-dim: var(--md-label-2, rgba(60,60,67,.62)); --inkt2: var(--md-label-2, rgba(60,60,67,.62));
  --lijn: var(--md-sep, rgba(60,60,67,.14)); --line: var(--md-sep, rgba(60,60,67,.14)); --line-soft: var(--md-fill-2, rgba(120,120,128,.08));
  --teal: var(--md-tint, #00727A); --accent: var(--md-tint, #00727A);
  --teal2: var(--md-tint-2, #0A8A8F); --accent-bright: var(--md-tint-2, #0A8A8F);
  --teal-z: var(--md-tint-zacht, rgba(0,114,122,.12)); --accent-soft: var(--md-tint-zacht, rgba(0,114,122,.12)); --teal-50: var(--md-tint-zacht, rgba(0,114,122,.12));
  --sh-s: var(--md-schaduw-s, 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04));
  --sh-m: var(--md-schaduw-m, 0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06));
}
html[data-thema="helder"] { --inkt3: rgba(60,60,67,.5); }
html[data-thema="avond"] { --inkt3: rgba(235,235,245,.42); --lijn2: rgba(84,84,88,.65); --glass: var(--md-vlak, #1c1c1e); --glass-strong: var(--md-vlak-2, #2c2c2e); }
html[data-thema] body { letter-spacing: -.003em; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }

/* geen monoletter in gewone schermen (B7): balk, zijbalk, dock en Start tonen getallen in de gewone letter, als tabel */
html[data-thema] .topbar, html[data-thema] .os-rail, html[data-thema] .os-tabbalk, html[data-thema] .dock,
html[data-thema] .home { --m: var(--f); }
html[data-thema] .topbar .mono, html[data-thema] .topbar b.mono { font-family: var(--f); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* glas (C1-C3): de bovenbalk normaal glas, dock en tabbalk dik glas; geen harde rand, wel een lichtrand */
html[data-thema] .topbar, html[data-thema] .dock, html.os-plekken .os-tabbalk {
  border: 0 !important;
  -webkit-backdrop-filter: blur(var(--md-blur, 30px)) saturate(var(--md-verzadig, 180%)) !important;
  backdrop-filter: blur(var(--md-blur, 30px)) saturate(var(--md-verzadig, 180%)) !important;
}
html[data-thema] .topbar { background: var(--md-glas, rgba(255,255,255,.62)) !important; box-shadow: var(--md-lichtrand, inset 0 .5px 0 rgba(255,255,255,.75)), var(--sh-s); }
html[data-thema] .dock { background: var(--md-glas-dik, rgba(246,246,250,.78)) !important; box-shadow: var(--md-lichtrand, inset 0 .5px 0 rgba(255,255,255,.75)), var(--sh-m); }
html[data-thema] .dock {
  -webkit-backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(var(--md-verzadig, 180%)) !important;
  backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(var(--md-verzadig, 180%)) !important;
}
html.os-plekken[data-thema] .os-tabbalk { background: var(--md-glas-dik, rgba(246,246,250,.78)); box-shadow: 0 -.5px 0 var(--md-sep, rgba(60,60,67,.14)); }
@media (prefers-reduced-transparency: reduce) {
  html[data-thema] .topbar, html[data-thema] .dock, html.os-plekken[data-thema] .os-tabbalk {
    background: var(--md-vlak, #fff) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  html[data-thema] .topbar, html[data-thema] .dock { box-shadow: 0 0 0 1px var(--md-rand, rgba(0,0,0,.55)); }
}

/* zijbalk: de actieve plek als tint-vlak, geen schaduw (A1: tint = wat "nu" is) */
@media not all and (max-width: 759px) {
  html.os-plekken .op-k.on { box-shadow: none; background: var(--md-tint-zacht, rgba(0,114,122,.12)); color: var(--md-tint, #00727A); font-weight: 600; }
  html.os-plekken .op-k:hover:not(.on) { background: var(--md-fill-2, rgba(120,120,128,.08)); }
  html.os-plekken .op-scheid { height: .5px; background: var(--md-sep, rgba(60,60,67,.14)); }
}
/* indrukken = meteen terugveren (D1) */
html[data-thema] .dock-item:active, html[data-thema] .topbar button:active { transform: scale(var(--md-druk-schaal, .97)); transition: transform var(--md-duur-druk, 100ms) ease-out; }
/* Start: appnamen op één regel in de Sub-maat (B6 12 px), zoals op een iPhone; past het niet, dan puntjes.
   (De systeemletter is breder dan Switzer: zonder dit brak "Huur een AI-server" af en schoof dat icoon omhoog.) */
html[data-thema] .ms-raster .app-tile .app-tile-name, html[data-thema] .ms-la .app-tile .app-tile-name {
  font-size: 12px; letter-spacing: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}