/* werk-app.css — gedeelde opmaak van de Werk-pagina (P1) en de workshop-omgeving; bron: ~/scripts/werk/shared/ (deploy.sh) */
  .wk{max-width:760px;margin:0 auto;width:100%;box-sizing:border-box;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
  .wk-h{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#7fd0f5;font-weight:700;margin:18px 2px 8px;
    text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.5);display:flex;justify-content:space-between;align-items:center}
  .wk-aircos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
  .wk-card{padding:14px;border-radius:16px;background:rgba(12,18,26,.32);border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wk-card.aan{border-color:rgba(127,208,245,.65)}
  .wk-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .wk-nm{font-weight:600;font-size:18px}
  .wk-chip{font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,16,24,.5)}
  .wk-chip.aan{border-color:#7fd0f5;color:#d6f0ff}
.wk-chip.uit{color:rgba(255,255,255,.85)}
.wk-chip.fout{border-color:#ff6b6b;color:#ffb4b4}
  .wk-temp{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px}
  .wk-temp b{font-size:28px;font-weight:600;line-height:1}
  .wk-temp span{font-size:14px;color:rgba(255,255,255,.82)}
  .wk-set{display:flex;align-items:center;gap:10px;margin:8px 0}
  .wk-set .v{font-size:20px;font-weight:600;min-width:74px;text-align:center}
  .wk-knop{all:unset;cursor:pointer;box-sizing:border-box;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.35);
    background:rgba(10,16,24,.5);display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1}
  .wk-knop:active{background:rgba(40,100,140,.6)}
  .wk-knop:disabled{opacity:.4;cursor:default}
  .wk-modi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
  .wk-modi button{all:unset;cursor:pointer;box-sizing:border-box;text-align:center;padding:11px 4px;border-radius:12px;font-size:14px;
    border:1px solid rgba(255,255,255,.3);background:rgba(10,16,24,.5)}
  .wk-modi button[aria-pressed="true"]{background:rgba(18,48,66,.75);border-color:#7fd0f5;box-shadow:inset 0 0 0 1px #7fd0f5}
  .wk-sinds{font-size:13px;color:rgba(255,255,255,.82);margin-top:8px}
  .wk-let{margin-top:8px;padding:9px 11px;border-radius:12px;background:rgba(255,183,77,.18);border:1px solid rgba(255,183,77,.6);font-size:14px}
  .wk-lampen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .wk-lamp{padding:11px;border-radius:14px;background:rgba(12,18,26,.32);border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wk-lamp.aan{border-color:rgba(255,224,130,.85);background:rgba(60,48,12,.35)}
  .wk-lamp.weg{opacity:.55}
  .wk-lamp .t{all:unset;cursor:pointer;display:block;width:100%}
  .wk-lamp .n{font-weight:600;font-size:16px}
  .wk-lamp .s{font-size:13px;color:rgba(255,255,255,.82);margin-top:2px}
  .wk-lamp input[type=range]{width:100%;margin-top:8px;accent-color:#ffd54f}
  .wk-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .wk-i{padding:11px;border-radius:14px;background:rgba(12,18,26,.32);border:1px solid rgba(255,255,255,.2)}
  .wk-i small{display:block;font-size:12px;color:rgba(255,255,255,.82)}
  .wk-i b{font-size:20px}
  .wk-wacht{font-size:12px;color:#ffd9a0;margin-left:6px}
  .wk-lamp.kleur{grid-column:span 2}
  .wk-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;border:1px solid rgba(255,255,255,.7);vertical-align:-1px}
  .wk-kl{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
  .wk-sw{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.6);cursor:pointer}
  .wk-sw.act{border-color:#fff;box-shadow:0 0 0 3px #7fd0f5}
  .wk-kies{position:relative;overflow:hidden;background:conic-gradient(#f33,#fd3,#3d5,#3dd,#35f,#d3d,#f33)}
  .wk-kies input{position:absolute;inset:-8px;width:60px;height:60px;opacity:0;cursor:pointer}
  .wk-msg{min-height:20px;font-size:15px;margin:6px 2px;color:#b9f0a0}
.wk-msg.fout{color:#ff9b9b}
  .wk-taal{display:flex;gap:6px}
  .wk-taal[hidden]{display:none}
  .wk-taal button{all:unset;cursor:pointer;box-sizing:border-box;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(10,16,24,.5);font-size:14px;font-weight:600}
  .wk-taal button[aria-pressed="true"]{background:rgba(18,48,66,.75);border-color:#7fd0f5}

  /* ---- Werk-pagina, ontwerp 10-11-2026 (interface-design + dashboard-design): één vraag "is het werk dicht?" in drie seconden.
     Rustig tot er iets mis is: wit/grijs als alles in orde is; oranje en rood alleen op wat aandacht vraagt. Signatuur: de slotring. */
  .wk{--wk-glas:rgba(12,18,26,.32);--wk-glas2:rgba(12,18,26,.46);--wk-rand:rgba(255,255,255,.2);--wk-ring:rgba(255,255,255,.85);--wk-gloed:rgba(255,255,255,.12)}
  .wk-slot{position:relative;display:flex;align-items:center;gap:22px;padding:26px 22px;border-radius:26px;margin:2px 0 14px;background:var(--wk-glas2);
    border:1px solid var(--wk-rand);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:border-color .25s,background-color .25s}
  .wk-lock{position:relative;flex:none;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:rgba(10,16,24,.5);border:2px solid var(--wk-ring);
    box-shadow:0 0 0 8px rgba(255,255,255,.04),0 0 36px var(--wk-gloed);transition:border-color .25s,box-shadow .25s}
  .wk-lock svg{width:54px;height:54px;fill:var(--wk-ring);transition:fill .25s}
  .wk-slot-t{min-width:0}
  .wk-slot-t b{display:block;font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
  .wk-slot-t small{display:block;font-size:15px;line-height:1.4;color:rgba(255,255,255,.86);margin-top:7px}
  .wk-slot-t small span{display:block}
  .wk-slot[data-s=dicht]{--wk-gloed:rgba(105,219,124,.26)}
  .wk-slot[data-s=dicht] .wk-lock::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#69db7c;border:3px solid rgba(14,22,32,.9)}
  .wk-slot[data-s=gebruik]{--wk-ring:#7fd0f5;--wk-gloed:rgba(127,208,245,.3)}
  .wk-slot[data-s=nog],.wk-slot[data-s=open],.wk-slot[data-s=let]{--wk-ring:#ffb74d;--wk-gloed:rgba(255,183,77,.42);border-color:rgba(255,183,77,.55)}
  .wk-slot[data-s=af]{--wk-ring:#ff6b6b;--wk-gloed:rgba(255,107,107,.6);border-color:rgba(255,107,107,.7)}
  .wk-slot[data-s=af] .wk-lock{animation:wkSlotPuls 1.3s ease-in-out infinite}
  .wk-slot[data-s=onb],.wk-slot[data-s=laden]{--wk-ring:rgba(255,255,255,.6);--wk-gloed:rgba(255,255,255,.08)}
  @keyframes wkSlotPuls{50%{box-shadow:0 0 0 8px rgba(255,107,107,.35),0 0 44px rgba(255,107,107,.7)}}
  /* wat er nog aan staat: alleen zichtbaar als er iets aan staat; de actie staat naast het ding zelf */
  .wk-nog{margin:0 0 12px}
  .wk-nog[hidden]{display:none}
  .wk-nog .wk-h{margin-top:4px}
  .wk-nog-l{display:grid;gap:8px}
  .wk-rij{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--wk-glas);border:1px solid var(--wk-rand);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wk-rij .n{font-weight:600;font-size:16px}
  .wk-rij .m{font-size:13px;color:rgba(255,255,255,.82);margin-top:1px}
  .wk-rij button{all:unset;cursor:pointer;box-sizing:border-box;margin-left:auto;min-height:44px;min-width:78px;padding:0 16px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:600;border:1px solid rgba(255,255,255,.35);background:rgba(10,16,24,.5);transition:transform .12s cubic-bezier(.23,1,.32,1),background-color .15s}
  .wk-rij button:active{transform:scale(.97);background:rgba(40,100,140,.6)}
  /* acties: werkwoorden. Eén hoofdactie (alleen als er iets aan staat), de rest rustig */
  .wk-acties{display:grid;gap:10px;margin:0 0 6px}
  .wk-prim{all:unset;cursor:pointer;box-sizing:border-box;min-height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:20px;font-weight:600;
    background:rgba(24,86,128,.74);border:1px solid #7fd0f5;color:#fff;transition:transform .12s cubic-bezier(.23,1,.32,1),background-color .15s;-webkit-tap-highlight-color:transparent}
  .wk-prim[hidden]{display:none}
  .wk-prim svg{width:26px;height:26px;fill:currentColor;flex:none}
  .wk-prim:active{transform:scale(.98)}
  .wk-prim.zeker{background:#a83232;border-color:#ff8a8a}
  .wk-sec{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
  .wk-sec button{all:unset;cursor:pointer;box-sizing:border-box;min-height:48px;padding:0 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
    font-size:15px;font-weight:500;border:1px solid var(--wk-rand);background:var(--wk-glas);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    transition:transform .12s cubic-bezier(.23,1,.32,1),background-color .15s;-webkit-tap-highlight-color:transparent}
  .wk-sec button:active{transform:scale(.97);background:rgba(40,100,140,.55)}
  .wk-sec .mic svg{width:22px;height:22px;fill:currentColor;flex:none}
  .wk-sec .mic.luister{border-color:#ff6b6b;background:rgba(110,24,24,.6);animation:wkMicPuls 1.2s ease-in-out infinite}
  @keyframes wkMicPuls{50%{opacity:.6}}
  .wk button:focus-visible,.wk .wk-lamp .t:focus-visible{outline:2px solid #7fd0f5;outline-offset:2px}
  @media (max-width:430px){.wk-slot{gap:16px;padding:22px 16px}.wk-lock{width:84px;height:84px}.wk-lock svg{width:44px;height:44px}.wk-slot-t b{font-size:28px}.wk-sec .mic span{display:none}.wk-sec{grid-template-columns:1fr 1fr 52px}}
  @media (prefers-reduced-motion:reduce){.wk-slot[data-s=af] .wk-lock,.wk-sec .mic.luister{animation:none}.wk-slot,.wk-lock,.wk-lock svg,.wk-prim,.wk-sec button,.wk-rij button{transition:none}}
  .wk-sec button:hover,.wk-rij button:hover{background:rgba(12,18,26,.55)}
  .wk-sec button:disabled,.wk-prim:disabled{opacity:.45;cursor:default;pointer-events:none}
/* app.css — workshop.adewilt.nl: achtergrond en kop; de blokken zelf staan in werk-app.css (gedeeld met P1). */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b1424;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(120% 60% at 0% 0%,rgba(59,130,246,.22),transparent 60%),radial-gradient(90% 50% at 100% 100%,rgba(255,170,60,.12),transparent 60%),linear-gradient(180deg,#0e1a2e,#0a111d);min-height:100vh}
.ws-wrap{max-width:760px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px 28px}
.ws-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 2px 12px}
.ws-kop h1{font-size:26px;margin:0;font-weight:600}
.ws-acc{display:flex;align-items:center;gap:14px}
.ws-acc a{color:rgba(255,255,255,.8);font-size:14px;text-decoration:none;padding:8px 4px}
.ws-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.ws-login h1{margin:0;font-size:30px}.ws-login p{margin:0;color:rgba(255,255,255,.8)}
.ws-err{color:#ff9b9b!important}