/* ============================================================================
   Mia OS · Strak — os-iconen-kleur.css (04-10)
   Daan: "te klein, te veel en dezelfde kleur, ik vind niks". Daarom:
   • elke app een eigen gekleurde tegel met een witte tekening (kleur = vinden, vorm = bevestigen)
   • 13 rustige, donkere tinten (wit erop haalt contrast ≥ 4.5:1), buren verschillen (os-iconen.js)
   • grotere tegel én grotere tekening in elke dichtheid; eigen geüploade afbeeldingen blijven ongemoeid
   Laadt NA os-strak.css en os-start.css; wint via html[data-thema] + data-strak-kleur.
   ========================================================================== */
:root {
  --ik-teal: #0F766E; --ik-groen: #2E7D4F; --ik-olijf: #5F6F1E; --ik-oker: #A86A12; --ik-oranje: #C2551F;
  --ik-rood: #C23B33; --ik-roze: #B83A72; --ik-paars: #7445B8; --ik-blauw: #2563C9; --ik-petrol: #1D5C78;
  --ik-indigo: #4349A8; --ik-grafiet: #475461; --ik-bruin: #8A5A3B;
}
[data-strak-kleur="teal"] { --ik: var(--ik-teal); } [data-strak-kleur="groen"] { --ik: var(--ik-groen); }
[data-strak-kleur="olijf"] { --ik: var(--ik-olijf); } [data-strak-kleur="oker"] { --ik: var(--ik-oker); }
[data-strak-kleur="oranje"] { --ik: var(--ik-oranje); } [data-strak-kleur="rood"] { --ik: var(--ik-rood); }
[data-strak-kleur="roze"] { --ik: var(--ik-roze); } [data-strak-kleur="paars"] { --ik: var(--ik-paars); }
[data-strak-kleur="blauw"] { --ik: var(--ik-blauw); } [data-strak-kleur="petrol"] { --ik: var(--ik-petrol); }
[data-strak-kleur="indigo"] { --ik: var(--ik-indigo); } [data-strak-kleur="inkt"], [data-strak-kleur="grafiet"] { --ik: var(--ik-grafiet); }
[data-strak-kleur="bruin"] { --ik: var(--ik-bruin); }

/* de tegel zelf: gevuld vlak, witte tekening, zachte eigen schaduw */
html[data-thema] .app-tile .app-icon[data-strak-kleur],
html[data-thema] .ms-start .app-tile .app-icon[data-strak-kleur],
html[data-thema] .ms-laag .app-tile .app-icon[data-strak-kleur],
html[data-thema] .qm-blob[data-strak-kleur] {
  background: var(--ik, var(--ik-teal)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px rgba(16,24,28,.14), 0 6px 14px -8px var(--ik, var(--ik-teal)) !important;
}
html[data-thema] .app-tile:hover .app-icon[data-strak-kleur] {
  background: var(--ik, var(--ik-teal)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 4px rgba(16,24,28,.16), 0 10px 20px -10px var(--ik, var(--ik-teal)) !important;
}
html[data-thema] .app-tile:focus-visible .app-icon[data-strak-kleur] { box-shadow: 0 0 0 2px var(--grond, #fff), 0 0 0 4px var(--ik, var(--ik-teal)) !important; }
/* tekening: groter en iets steviger zodat hij op kleur goed leest */
html[data-thema] .app-icon[data-strak-kleur] svg,
html[data-thema] .ms-start .app-icon[data-strak-kleur] svg,
html[data-thema] .ms-laag .app-icon[data-strak-kleur] svg { width: 56% !important; height: 56% !important; stroke-width: 1.75; }
.app-icon[data-strak-kleur] .avl, .qm-blob[data-strak-kleur] .avl { fill: #fff; fill-opacity: .3; stroke: #fff; }
.app-icon[data-strak-kleur] .adt, .qm-blob[data-strak-kleur] .adt { fill: #fff; }
/* mappen: de mini-icoontjes krijgen ook hun kleur */
html[data-thema] .ms-mini[data-strak-kleur] { background: var(--ik, var(--ik-teal)) !important; color: #fff !important; }

/* Avond: zelfde tinten, iets lichter zodat ze niet wegzakken in de donkere grond */
html[data-thema="avond"] .app-icon[data-strak-kleur], html[data-thema="avond"] .ms-mini[data-strak-kleur] {
  background: color-mix(in srgb, var(--ik, var(--ik-teal)) 88%, #fff) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.4) !important;
}

/* groter in elke dichtheid (cel groeit mee, zodat de naam eronder past) */
:root { --ms-ikoon: 64px; --ms-cel: 104px; }
html[data-ms-dicht="ruim"] { --ms-ikoon: 76px; --ms-cel: 124px; }
html[data-ms-dicht="compact"] { --ms-ikoon: 56px; --ms-cel: 92px; --ms-gap: 10px; }
@media (max-width: 759px) {
  :root { --ms-ikoon: 60px; --ms-cel: 98px; }
  html[data-ms-dicht="ruim"] { --ms-ikoon: 66px; --ms-cel: 106px; }
  html[data-ms-dicht="compact"] { --ms-ikoon: 54px; --ms-cel: 90px; }
}
html[data-thema] .ms-start .app-tile .app-icon, html[data-thema] .ms-laag .app-tile .app-icon { border-radius: calc(var(--ms-ikoon) * .27); }
html[data-thema] .ms-start .app-tile-name, html[data-thema] .ms-laag .app-tile-name { font-size: 13px; font-weight: 500; }
:root { --ms-cel: 112px; } html[data-ms-dicht="ruim"] { --ms-cel: 132px; } html[data-ms-dicht="compact"] { --ms-cel: 100px; }
/* namen: liever twee regels dan "Deceptic…" — vinden gaat op naam én kleur */
html[data-thema] .ms-start .app-tile-name, html[data-thema] .ms-laag .app-tile-name {
  white-space: normal !important; overflow: hidden; text-overflow: clip; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.18; text-align: center; overflow-wrap: anywhere; hyphens: auto;
}
@media (max-width: 759px) {
  html[data-thema] .ms-start .app-tile-name, html[data-thema] .ms-laag .app-tile-name { font-size: 11.5px; }
  :root { --ms-cel: 108px; } html[data-ms-dicht="compact"] { --ms-cel: 100px; } html[data-ms-dicht="ruim"] { --ms-cel: 114px; }
}
/* telefoon: nooit midden in een woord afbreken ("Bestan-den"); alleen op spaties. Compact = 4 kolommen, zodat lange namen passen. */
@media (max-width: 759px) {
  html[data-thema] .ms-start .app-tile-name, html[data-thema] .ms-laag .app-tile-name { hyphens: manual; overflow-wrap: normal; word-break: normal; letter-spacing: -.01em; }
  html[data-ms-dicht="compact"] { --ms-kol: 4; }
}