.om{--bg:#F5F6F8;--surface:#FFFFFF;--sunken:#EEF0F3;--text:#16191F;--muted:#59626F;--line:#DFE3E8;--accent:#1F4FC4;--accent-ink:#FFFFFF;--need:#A8430A;--need-bg:#FCEDE1;--work:#1F4FC4;--work-bg:#E6EDFC;--done:#17693F;--done-bg:#E1F2E8;--fail:#A92219;--fail-bg:#FBE7E5;--wait:#5C4BA8;--wait-bg:#ECE9F8}
.om.dark{--bg:#0F1217;--surface:#171B22;--sunken:#20252E;--text:#E9ECF1;--muted:#A0AAB8;--line:#2C323D;--accent:#8DB0FF;--accent-ink:#0F1217;--need:#FFB685;--need-bg:#3B2516;--work:#8DB0FF;--work-bg:#1C2A47;--done:#74D8A4;--done-bg:#15301F;--fail:#FF9F97;--fail-bg:#3C1B18;--wait:#BDB2F2;--wait-bg:#28244A}
.om{background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,sans-serif;min-height:100vh}
.om a{color:var(--accent);text-decoration:none}.om a:hover{text-decoration:underline}
.om button{font:inherit;cursor:pointer}
.om .btn{padding:7px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text)}
.om .btn.p{border:0;background:var(--accent);color:var(--accent-ink);font-weight:600}
.om .btn.stop{color:var(--fail);font-weight:600}
.om .btn.sm{padding:4px 9px;font-size:13px}
.om .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.om .muted{color:var(--muted)}.om .s{font-size:13px}.om .xs{font-size:12px}
.om .mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.om .pill{padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap}
.om .need{background:var(--need-bg);color:var(--need)}.om .work{background:var(--work-bg);color:var(--work)}.om .done{background:var(--done-bg);color:var(--done)}.om .fail{background:var(--fail-bg);color:var(--fail)}.om .wait{background:var(--wait-bg);color:var(--wait)}.om .plain{background:var(--sunken);color:var(--muted)}
.om h1{margin:0;font:600 24px/1.25 'Space Grotesk',sans-serif}
.om h2{margin:0 0 8px;font-size:15px;font-weight:600}
.om p{margin:0}
.om label{display:block;font-size:13px;font-weight:600;margin-top:10px}
.om input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.om textarea,.om select{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);font:inherit}
.om .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.om .col{display:flex;flex-direction:column;gap:12px}
.om .grow{flex:1 1 10px}
.om .two{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.om .wide{flex:999 1 460px;min-width:0}
.om .rail{flex:1 1 280px;max-width:360px;display:flex;flex-direction:column;gap:12px}
.om .top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:52px;padding:6px 16px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--line)}
.om .brand{display:flex;align-items:center;gap:7px;font:600 18px 'Space Grotesk',sans-serif;color:var(--text)}
.om .needlink{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;background:var(--need-bg);color:var(--need);font-weight:600}
.om .n{background:var(--need);color:var(--surface);border-radius:10px;padding:0 7px;font-size:12px}
.om .wrap{display:flex;flex-wrap:wrap;align-items:flex-start}
.om .nav{flex:1 1 200px;max-width:220px;padding:12px 8px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px}
.om .mi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--text)}
.om .mi.on{background:var(--sunken);font-weight:600}
.om .mb{margin-left:auto;background:var(--need-bg);color:var(--need);border-radius:10px;padding:0 7px;font-size:12px;font-weight:600}
.om .grp{margin:14px 10px 4px;font-size:12px;font-weight:600;color:var(--muted)}
.om .main{flex:999 1 560px;min-width:0;padding:16px 20px 40px;box-sizing:border-box}
.om .tabs{display:flex;flex-wrap:wrap;gap:2px;margin:14px 0 12px;border-bottom:1px solid var(--line)}
.om .tab{padding:8px 12px;border:0;background:none;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.om .tab.on{color:var(--text);font-weight:600;border-bottom-color:var(--text)}
.om .chip{padding:5px 11px;border-radius:14px;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.om .chip.on{background:var(--text);color:var(--bg)}
.om .tb{display:flex;gap:2px;margin-top:4px;padding:3px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:var(--sunken)}
.om .tb button{padding:2px 8px;border:0;background:none;color:var(--text);font-size:13px}
.om .tb + textarea{margin-top:0;border-radius:0 0 6px 6px}
.om .tr{display:flex;align-items:center;gap:10px;min-width:560px;padding:8px 12px;border-bottom:1px solid var(--line)}
.om .sc{overflow-x:auto}
.om .ban{padding:10px 14px;border-radius:8px}
.om .dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-sizing:border-box}
.om .dot.d{background:var(--done)}.om .dot.a{background:var(--work);outline:2px solid var(--work-bg)}.om .dot.f{background:var(--fail)}.om .dot.h{background:var(--wait)}.om .dot.o{border:1.5px solid var(--muted)}
.om mark{background:var(--need-bg);color:var(--need);padding:0 2px;border-radius:3px}

/* ---- tokens above are docs/releases/v1.5-mockups/omaco.css; `om` and `dark` sit on <html> ---- */
.om{color-scheme:light;--fg:var(--text);--card:var(--surface);--ok:var(--done);--warn:var(--need);--bad:var(--fail)}
.om.dark{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
.om .brand{text-decoration:none}
/* ---- frame ---- */
.om .phone{display:none}
.om .toplive{gap:12px}
.om .iconbtn{display:flex;align-items:center;padding:8px;color:var(--text);border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.om .btn.iconbtn{padding:8px}
.t-dark,.t-light,.t-system{display:none}
[data-theme=dark] .t-dark,[data-theme=light] .t-light,[data-theme=system] .t-system{display:block}
.om summary.btn{display:flex;align-items:center;gap:6px;list-style:none}
.om .switch summary::-webkit-details-marker{display:none}
.om .switch{position:relative}
.om .switchpanel{position:absolute;top:44px;left:0;z-index:20;width:340px;max-width:calc(100vw - 24px);padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.om .brandmark{display:none;align-items:center;gap:4px;font-weight:600}
.om .wheremenu{margin:0}
.om .wherebtn{width:100%;border:0;background:none;text-align:left;font-weight:500}
.om .wherebtn:hover,.om .mi:hover{background:var(--sunken);text-decoration:none}
.om .menuneeds{margin-left:auto;display:inline-flex}
.om .stopban{margin-bottom:12px;background:var(--fail-bg);color:var(--text)}
.om .main{max-width:1200px;overflow-wrap:anywhere}
.om .main table{display:block;overflow-x:auto}
.om .main pre{max-width:100%}
.login{max-width:360px;margin:15vh auto 0;padding:1rem}
/* ---- phone: compact top bar, bottom bar, and the menu behind "Meer" ---- */
@media (max-width:760px){
  .om .desk{display:none}
  .om .phone{display:revert}
  .om svg.phone{display:block}
  .om .brandmark{display:flex}
  .om .top{flex-wrap:nowrap;min-height:56px;padding:0 12px;gap:8px}
  .om .runcount,.om .needlink,.om .sincelink{display:none}
  .om .stopbtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none}
  .om .top .iconbtn{width:44px;height:44px;justify-content:center;border:0;background:none}
  .om .wheretop .btn{min-height:44px;white-space:nowrap}
  .om .switch summary{min-height:44px;border:0;background:none;padding:0 4px}
  .om .wrap{display:block}
  .om .nav{display:none}
  .om.menu-open .nav{display:flex;position:fixed;inset:56px 0 62px 0;z-index:30;max-width:none;overflow-y:auto;background:var(--bg)}
  .om .wheremenu{display:none}
  .om .morelinks{display:block;margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
  .om .main{padding:14px 12px 84px;max-width:100vw}
  .om .tabs-phone{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:62px;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .om .tabs-phone a,.om .tabs-phone button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:500;color:var(--muted);border:0;background:none;min-height:44px}
  .om .tabs-phone .on{color:var(--text);font-weight:600}
  .om .tabicon{position:relative;display:flex}
  .om .tabn{position:absolute;top:-6px;left:10px;min-width:16px;padding:0 4px;border-radius:9px;background:var(--need);color:var(--surface);font-size:11px;font-weight:700;text-align:center}
}
/* ---- pages that their area items have not replaced yet ---- */
.om .main button{padding:7px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);display:inline-block}
.om .main button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
main.login { max-width:360px; margin-top:15vh; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:1.6rem; } h3 { margin:.3rem 0 .6rem; font-size:1.05rem; }
.om main .card { margin:.8rem 0; }
.card header { color:var(--muted); font-size:.85rem; } .card .kind { font-weight:600; color:var(--fg); margin-right:.4rem; }
.kind-question { border-left:4px solid var(--accent); } .kind-acceptance { border-left:4px solid var(--ok); } .kind-rule_proposal { border-left:4px solid var(--warn); }
.status-answered, .status-acked, .status-closed { opacity:.75; }
.crumb { color:var(--muted); font-size:.85rem; margin:.2rem 0; }
dl { display:grid; grid-template-columns:10rem 1fr; gap:.3rem .8rem; margin:.4rem 0; } dt { color:var(--muted); } dd { margin:0; }
@media (max-width:640px) { dl { grid-template-columns:1fr; } dt { margin-top:.4rem; } }
.option { margin:.2rem 0 .5rem; } .option.advised b::after { content:"  ← advies"; color:var(--ok); font-weight:400; }
.pro { color:var(--ok); } .con { color:var(--bad); }
form label { display:block; margin:.35rem 0; } label.radio { display:block; }
input, textarea, select { font:inherit; width:100%; padding:.35rem; border:1px solid var(--line); border-radius:5px; background:var(--bg); color:var(--fg); }
input[type=radio] { width:auto; } form.inline { display:flex; gap:.4rem; margin:.3rem 0; } form.inline select { width:auto; max-width:60%; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; } .actions form { margin:0; }
.s-running { background:var(--work-bg); color:var(--work); } .s-waiting { background:var(--wait-bg); color:var(--wait); } .s-done { background:var(--done-bg); color:var(--done); }
.s-review { background:var(--wait-bg); color:var(--wait); } .s-cancelled { text-decoration:line-through; color:var(--muted); } .s-planned { background:var(--sunken); color:var(--muted); }
.flag { color:var(--surface); background:var(--bad); font-size:.75rem; padding:.05rem .45rem; border-radius:10px; }
.node { margin-left:1rem; } .node > summary { cursor:pointer; padding:.15rem 0; } .type { color:var(--muted); font-size:.85rem; }
.totals { font-size:1.05rem; }
.muted { color:var(--muted); } .warn { color:var(--warn); font-weight:600; } .error { color:var(--bad); } .ok { color:var(--ok); } .hint { color:var(--muted); font-size:.85rem; }
table { border-collapse:collapse; width:100%; font-size:.9rem; } th, td { text-align:left; border-bottom:1px solid var(--line); padding:.3rem .4rem; vertical-align:top; }
main > table { display:block; overflow-x:auto; }
pre { white-space:pre-wrap; word-break:break-word; } pre.brief { background:var(--card); border:1px solid var(--line); padding:.6rem; border-radius:5px; }
.badge { background:var(--bad); color:var(--surface); border-radius:10px; padding:0 .4rem; font-size:.8rem; }
.events li { margin:.15rem 0; } .turn { border-bottom:1px solid var(--line); padding:.4rem 0; } .turn.user pre { color:var(--accent); }
.new-release, .edit-release { margin:.6rem 0; } details > summary.btn { list-style:none; } .edit-release form, .new-release form { max-width:700px; }
details.backlog-group > summary { cursor: pointer; }
details.backlog-group > summary h2 { display: inline; }
.settings { max-width:760px; }
.edit-file textarea, .edit-brief textarea { font-family:ui-monospace,monospace; font-size:.85rem; }